Add jest snapshot testing to Nav.jsx
This commit is contained in:
Sepand Ansari
sepans
parent
e1ef323e9b
commit
189cc586c6
|
|
@ -1,6 +1,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
import Nav from './../Nav';
|
||||
|
||||
|
|
@ -44,4 +45,11 @@ describe('Nav', () => {
|
|||
const nav = getWrapper();
|
||||
expect(nav.exists('.nav')).toEqual(true);
|
||||
});
|
||||
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer
|
||||
.create(<Nav {...props} />)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
|
|
@ -68,6 +68,7 @@
|
|||
"sass-loader": "^6.0.7",
|
||||
"style-loader": "^0.13.2",
|
||||
"webpack-manifest-plugin": "^2.0.4",
|
||||
"react-test-renderer": "^16.6.0",
|
||||
"webpack-node-externals": "^1.7.2"
|
||||
},
|
||||
"engines": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue