Add jest snapshot testing to Nav.jsx

This commit is contained in:
Sepand Ansari 2018-10-27 20:48:57 -04:00 committed by sepans
parent e1ef323e9b
commit 189cc586c6
3 changed files with 536 additions and 0 deletions

View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';
import Nav from './../Nav'; import Nav from './../Nav';
@ -44,4 +45,11 @@ describe('Nav', () => {
const nav = getWrapper(); const nav = getWrapper();
expect(nav.exists('.nav')).toEqual(true); expect(nav.exists('.nav')).toEqual(true);
}); });
it('renders correctly', () => {
const tree = renderer
.create(<Nav {...props} />)
.toJSON();
expect(tree).toMatchSnapshot();
});
}); });

View file

@ -0,0 +1,527 @@
// 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]}
>
Save
<span
className="nav__keyboard-shortcut"
>
Ctrl
+s
</span>
</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>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
>
Examples
</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]}
>
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>
<ul
className="nav__items-right"
title="user-menu"
>
<li
className="nav__item"
>
<span>
Hello,
new-user
!
</span>
</li>
<span
className="nav__item-spacer"
>
|
</span>
<li
className="nav__item"
>
<button
className="nav__item-header"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
My Account
</button>
<span
className="isvg loading nav__item-header-triangle"
/>
<ul
className="nav__dropdown"
>
<button
className="nav__dropdown-heading"
onClick={[Function]}
>
<span>
My Account
</span>
<span
className="isvg loading"
/>
</button>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
>
My sketches
</a>
</li>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
>
My assets
</a>
</li>
<li
className="nav__dropdown-item"
>
<a
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
style={Object {}}
>
Settings
</a>
</li>
<li
className="nav__dropdown-item"
>
<button
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
>
Log out
</button>
</li>
</ul>
</li>
</ul>
</nav>
`;

View file

@ -68,6 +68,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": {