r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Merge branch 'sepans-jest'

Browse source
This commit is contained in:
Cassie Tarakajian 2019-02-20 14:25:14 -05:00
commit 06b33a1d20
10 changed files with 11911 additions and 4316 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc
View file

@ -4,7 +4,7 @@
"env": { "env": {
"browser": true, "browser": true,
"node": true, "node": true,
"mocha": true "jest": true
}, },
"rules": { "rules": {
"linebreak-style": 0, "linebreak-style": 0,

2
.travis.yml
View file

@ -17,7 +17,7 @@ before_install:
install: true install: true
script: script:
- docker-compose exec -T app npm run test --verbose - docker-compose exec -T app npm run test:ci --verbose
before_deploy: before_deploy:
- docker-compose stop - docker-compose stop

1
client/__test__/mocks/fileMock.js Normal file
View file

@ -0,0 +1 @@
module.exports = 'test-file-stub';

1
client/components/Nav.jsx
View file

@ -611,3 +611,4 @@ function mapDispatchToProps(dispatch) {
} }
export default withRouter(connect(() => ({}), mapDispatchToProps)(Nav)); export default withRouter(connect(() => ({}), mapDispatchToProps)(Nav));
export { Nav as NavComponent };

57
client/components/__test__/Nav.test.jsx Normal file
View file

@ -0,0 +1,57 @@
import React from 'react';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';
import { NavComponent } from './../Nav';
describe('Nav', () => {
const props = {
newProject: jest.fn(),
saveProject: jest.fn(),
autosaveProject: jest.fn(),
exportProjectAsZip: jest.fn(),
cloneProject: jest.fn(),
user: {
authenticated: true,
username: 'new-user',
id: 'new-user'
},
project: {
id: 'new-project',
owner: {
id: 'new-user'
}
},
logoutUser: jest.fn(),
newFile: jest.fn(),
newFolder: jest.fn(),
showShareModal: jest.fn(),
showErrorModal: jest.fn(),
unsavedChanges: false,
warnIfUnsavedChanges: jest.fn(),
showKeyboardShortcutModal: jest.fn(),
cmController: {
tidyCode: jest.fn(),
showFind: jest.fn(),
findNext: jest.fn(),
findPrev: jest.fn()
},
startSketch: jest.fn(),
stopSketch: jest.fn(),
setAllAccessibleOutput: jest.fn()
};
const getWrapper = () => shallow(<NavComponent {...props} />);
test('it renders main navigation', () => {
const nav = getWrapper();
expect(nav.exists('.nav')).toEqual(true);
});
it('renders correctly', () => {
const tree = renderer
.create(<NavComponent {...props} />)
.toJSON();
expect(tree).toMatchSnapshot();
});
});

424
client/components/__test__/__snapshots__/Nav.test.jsx.snap Normal file
View file

@ -0,0 +1,424 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Nav renders correctly 1`] = `
<nav
className="nav"
title="main-navigation"
>
<ul
className="nav__items-left"
title="project-menu"
>
<li
className="nav__item-logo"
>
<span
className="isvg loading"
/>
</li>
<li
className="nav__item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
<span
className="nav__item-header"
>
File
</span>
<span
className="isvg loading nav__item-header-triangle"
/>
</button>
<ul
className="nav__dropdown"
>
<button
className="nav__dropdown-heading"
onClick={[Function]}
>
<span>
File
</span>
<span
className="isvg loading"
/>
</button>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
New
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Duplicate
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Share
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Download
</button>
</li>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
>
Open
</a>
</li>
</ul>
</li>
<li
className="nav__item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
<span
className="nav__item-header"
>
Edit
</span>
<span
className="isvg loading nav__item-header-triangle"
/>
</button>
<ul
className="nav__dropdown"
>
<button
className="nav__dropdown-heading"
onClick={[Function]}
>
<span>
Edit
</span>
<span
className="isvg loading"
/>
</button>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Tidy Code
<span
className="nav__keyboard-shortcut"
>
⇧
+Tab
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Find
<span
className="nav__keyboard-shortcut"
>
Ctrl
+F
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Find Next
<span
className="nav__keyboard-shortcut"
>
Ctrl
+G
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Find Previous
<span
className="nav__keyboard-shortcut"
>
⇧
+
Ctrl
+G
</span>
</button>
</li>
</ul>
</li>
<li
className="nav__item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
<span
className="nav__item-header"
>
Sketch
</span>
<span
className="isvg loading nav__item-header-triangle"
/>
</button>
<ul
className="nav__dropdown"
>
<button
className="nav__dropdown-heading"
onClick={[Function]}
>
<span>
Sketch
</span>
<span
className="isvg loading"
/>
</button>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Add File
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Add Folder
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Run
<span
className="nav__keyboard-shortcut"
>
Ctrl
+Enter
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Stop
<span
className="nav__keyboard-shortcut"
>
⇧
+
Ctrl
+Enter
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Start Accessible
<span
className="nav__keyboard-shortcut"
>
⇧
+
Ctrl
+1
</span>
</button>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Stop Accessible
<span
className="nav__keyboard-shortcut"
>
⇧
+
Ctrl
+2
</span>
</button>
</li>
</ul>
</li>
<li
className="nav__item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
<span
className="nav__item-header"
>
Help & Feedback
</span>
<span
className="isvg loading nav__item-header-triangle"
/>
</button>
<ul
className="nav__dropdown"
>
<button
className="nav__dropdown-heading"
onClick={[Function]}
>
<span>
Help & Feedback
</span>
<span
className="isvg loading"
/>
</button>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Keyboard Shortcuts
</button>
</li>
<li
className="nav__dropdown-item"
>
<a
href="https://p5js.org/reference/"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
rel="noopener noreferrer"
target="_blank"
>
Reference
</a>
</li>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
>
About
</a>
</li>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
>
Feedback
</a>
</li>
</ul>
</li>
</ul>
</nav>
`;

7
developer_docs/development.md
View file

@ -5,6 +5,11 @@ A guide for adding code to this project.
## Installation ## Installation
Follow the [installation guide](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/installation.md). Follow the [installation guide](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/installation.md).
## Tests
To run the test suite simply run `npm test` (after installing dependencies with `npm install`)
A sample unit test could be found here: [Nav.test.jsx](../client/components/__test__/Nav.test.jsx).
## Design ## Design
Design proposed and theme changes are present at: [Zeplin](https://scene.zeplin.io/project/55f746c54a02e1e50e0632c3). Design proposed and theme changes are present at: [Zeplin](https://scene.zeplin.io/project/55f746c54a02e1e50e0632c3).
@ -23,3 +28,5 @@ Design proposed and theme changes are present at: [Zeplin](https://scene.zeplin.
- For reference to the JavaScript style guide, see the [Airbnb Style Guide](https://github.com/airbnb/javascript), [React ESLint Plugin](https://github.com/yannickcr/eslint-plugin-react). - For reference to the JavaScript style guide, see the [Airbnb Style Guide](https://github.com/airbnb/javascript), [React ESLint Plugin](https://github.com/yannickcr/eslint-plugin-react).
- The ESLint configuration is based on a few popular React/Redux boilerplates. Open to suggestions on this. If in development, you're getting annoyed with ESLint, you can temporarily remove the `eslint-loader` it from `webpack/config.dev.js` in the JavaScript loader, or disable any line from eslint by commenting at the end of the line `// eslint-disable-line`. - The ESLint configuration is based on a few popular React/Redux boilerplates. Open to suggestions on this. If in development, you're getting annoyed with ESLint, you can temporarily remove the `eslint-loader` it from `webpack/config.dev.js` in the JavaScript loader, or disable any line from eslint by commenting at the end of the line `// eslint-disable-line`.
- [Jest](https://jestjs.io/) for unit tests and snapshot testing along with [Enzyme](https://airbnb.io/enzyme/) for testing React.

4
jest.setup.js Normal file
View file

@ -0,0 +1,4 @@
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

15714
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

15
package.json
View file

@ -12,13 +12,22 @@
"build:client": "cross-env NODE_ENV=production webpack --config webpack/config.prod.js", "build:client": "cross-env NODE_ENV=production webpack --config webpack/config.prod.js",
"build:server": "cross-env NODE_ENV=production webpack --config webpack/config.server.js", "build:server": "cross-env NODE_ENV=production webpack --config webpack/config.server.js",
"build:examples": "cross-env NODE_ENV=production webpack --config webpack/config.examples.js", "build:examples": "cross-env NODE_ENV=production webpack --config webpack/config.examples.js",
"test": "npm run lint", "test": "jest",
"test:ci": "npm run lint",
"fetch-examples": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples.js", "fetch-examples": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples.js",
"fetch-examples-gg": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples-gg.js", "fetch-examples-gg": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples-gg.js",
"fetch-examples:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples.bundle.js", "fetch-examples:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples.bundle.js",
"fetch-examples-gg:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples-gg.bundle.js", "fetch-examples-gg:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples-gg.bundle.js",
"heroku-postbuild": "touch .env; npm run build" "heroku-postbuild": "touch .env; npm run build"
}, },
"jest": {
"setupFiles": [
"<rootDir>/jest.setup.js"
],
"moduleNameMapper": {
"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/client/__test__/mocks/fileMock.js"
}
},
"main": "index.js", "main": "index.js",
"author": "Cassie Tarakajian", "author": "Cassie Tarakajian",
"license": "LGPL-2.1", "license": "LGPL-2.1",
@ -41,6 +50,8 @@
"css-loader": "^0.23.1", "css-loader": "^0.23.1",
"cssnano": "^3.10.0", "cssnano": "^3.10.0",
"eslint": "^4.19.1", "eslint": "^4.19.1",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"eslint-config-airbnb": "^16.1.0", "eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.14.0", "eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2", "eslint-plugin-jsx-a11y": "^6.1.2",
@ -50,6 +61,7 @@
"node-sass": "^4.11.0", "node-sass": "^4.11.0",
"nodemon": "^1.18.9", "nodemon": "^1.18.9",
"postcss-cssnext": "^2.11.0", "postcss-cssnext": "^2.11.0",
"jest": "^23.6.0",
"postcss-focus": "^1.0.0", "postcss-focus": "^1.0.0",
"postcss-loader": "^0.9.1", "postcss-loader": "^0.9.1",
"postcss-reporter": "^1.4.1", "postcss-reporter": "^1.4.1",
@ -57,6 +69,7 @@
"sass-loader": "^6.0.7", "sass-loader": "^6.0.7",
"style-loader": "^0.13.2", "style-loader": "^0.13.2",
"webpack-manifest-plugin": "^2.0.4", "webpack-manifest-plugin": "^2.0.4",
"react-test-renderer": "^16.6.0",
"webpack-node-externals": "^1.7.2" "webpack-node-externals": "^1.7.2"
}, },
"engines": { "engines": {