webui snapshot testing

deps fixes for ui tests

snapshot fixes

.gitignore

@@ -26,7 +26,6 @@ coverage/
 bundle.js
 bundle.js.map
 __tests__
-__snapshots__
 
 # Compiled script
 static/

jest.config.js

@@ -16,6 +16,9 @@ module.exports = {
   'modulePathIgnorePatterns': [
     'global.js'
   ],
+  'testPathIgnorePatterns': [
+    'test/webui/components/__snapshots__/'
+  ],
   'moduleNameMapper': {
     '\\.(scss)$': '<rootDir>/node_modules/identity-obj-proxy',
     'github-markdown-css': '<rootDir>/node_modules/identity-obj-proxy',

package.json

@@ -98,8 +98,6 @@
     "identity-obj-proxy": "^3.0.0",
     "in-publish": "2.0.0",
     "jest": "^21.2.1",
-    "jest-css-modules": "^1.1.0",
-    "jest-serializer-enzyme": "^1.0.0",
     "localstorage-memory": "1.0.2",
     "node-sass": "4.7.2",
     "normalize.css": "7.0.0",

test/webui/components/__snapshots__/header.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Header /> snapshot test shoud match snapshot 1`] = `"<header class=\\"header\\"><div class=\\"headerWrap\\"><a href=\\"/\\"><img src=\\"\\" class=\\"logo\\"></a><figure>npm set registry nullblank<br>npm adduser --registry nullblank</figure><button style=\\"margin-left: auto;\\" class=\\"el-button el-button--danger\\" type=\\"button\\"><span>Login</span></button></div><div><div style=\\"z-index: 1013; display: none;\\" class=\\"el-dialog__wrapper\\"><div style=\\"top: 15%;\\" class=\\"el-dialog el-dialog--tiny\\"><div class=\\"el-dialog__header\\"><span class=\\"el-dialog__title\\">Login</span><button type=\\"button\\" class=\\"el-dialog__headerbtn\\"><i class=\\"el-dialog__close el-icon el-icon-close\\"></i></button></div><div class=\\"el-dialog__body\\"><br><div class=\\"el-input\\"><input type=\\"text\\" name=\\"username\\" placeholder=\\"Username\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div><br><br><div class=\\"el-input\\"><input type=\\"password\\" name=\\"password\\" placeholder=\\"Type your password\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div></div><div class=\\"el-dialog__footer dialog-footer\\"><button class=\\"el-button el-button--default\\" type=\\"button\\"><span>Cancel</span></button><button class=\\"el-button el-button--primary\\" type=\\"button\\"><span>Login</span></button></div></div></div><div class=\\"v-modal\\" style=\\"z-index: 1012; display: none;\\"></div></div></header>"`;

test/webui/components/__snapshots__/help.spec.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Help /> component should set html from props with / base path 1`] = `"<div class=\\"help\\"><li class=\\"noPkg\\"><h1 class=\\"noPkgTitle\\">No Package Published Yet</h1><div><div>To publish your first package just:</div><br/><strong>1. Login</strong><pre id=\\"adduser\\" style=\\"display:block;overflow-x:auto;padding:0.5em;background:#000;color:#f8f8f8\\"><code>npm adduser --registry  http:<span style=\\"color:#aeaeae;font-style:italic\\">//example.com</span></code></pre><strong>2. Publish</strong><pre id=\\"publish\\" style=\\"display:block;overflow-x:auto;padding:0.5em;background:#000;color:#f8f8f8\\"><code>npm publish --registry http:<span style=\\"color:#aeaeae;font-style:italic\\">//example.com</span></code></pre><strong>3. Refresh this page!</strong></div></li></div>"`;
+
+exports[`<Help /> component should set html from props with someOtherPath 1`] = `"<div class=\\"help\\"><li class=\\"noPkg\\"><h1 class=\\"noPkgTitle\\">No Package Published Yet</h1><div><div>To publish your first package just:</div><br/><strong>1. Login</strong><pre id=\\"adduser\\" style=\\"display:block;overflow-x:auto;padding:0.5em;background:#000;color:#f8f8f8\\"><code>npm adduser --registry  http:<span style=\\"color:#aeaeae;font-style:italic\\">//example.com/someOtherPath</span></code></pre><strong>2. Publish</strong><pre id=\\"publish\\" style=\\"display:block;overflow-x:auto;padding:0.5em;background:#000;color:#f8f8f8\\"><code>npm publish --registry http:<span style=\\"color:#aeaeae;font-style:italic\\">//example.com/someOtherPath</span></code></pre><strong>3. Refresh this page!</strong></div></li></div>"`;

test/webui/components/__snapshots__/noitems.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NoItem /> component should set html from props 1`] = `"<div class=\\"noItems\\"><h2>This is a test string</h2></div>"`;

test/webui/components/__snapshots__/notfound.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NotFound /> component should set html from props 1`] = `"<div class=\\"notFound\\"><h1>Error 404 - verdaccio</h1><hr/><p>Oops, The package you are trying to access does not exist.</p></div>"`;

test/webui/components/__snapshots__/package.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Package /> component should load the component 1`] = `"<a class=\\"package\\" href=\\"detail/verdaccio\\"><h1>verdaccio<span class=\\"el-tag el-tag--gray\\">v1.0.0</span></h1><span role=\\"author\\" class=\\"author\\">By: Sam</span><p>Private NPM repository</p></a>"`;

test/webui/components/__snapshots__/packagedetail.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PackageDetail /> component should load the component 1`] = `"<div class=\\"pkgDetail\\"><h1 class=\\"title\\">Verdaccio</h1><hr/><div class=\\"readme\\"><div class=\\"markdown-body\\">Test readme</div></div></div>"`;

test/webui/components/__snapshots__/packagelist.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PackageList /> component should load the component with packages 1`] = `"<div><div class=\\"pkgContainer\\"><h1 class=\\"listTitle\\">Available Packages</h1><li><a class=\\"package\\" href=\\"detail/verdaccio\\"><h1>verdaccio<span class=\\"el-tag el-tag--gray\\">v1.0.0</span></h1><span role=\\"author\\" class=\\"author\\">By: Sam</span><p>Private NPM repository</p></a></li><li><a class=\\"package\\" href=\\"detail/abc\\"><h1>abc<span class=\\"el-tag el-tag--gray\\">v1.0.1</span></h1><span role=\\"author\\" class=\\"author\\">By: Rose</span><p>abc description</p></a></li><li><a class=\\"package\\" href=\\"detail/xyz\\"><h1>xyz<span class=\\"el-tag el-tag--gray\\">v1.1.0</span></h1><span role=\\"author\\" class=\\"author\\">By: Martin</span><p>xyz description</p></a></li></div></div>"`;

test/webui/components/__snapshots__/readme.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Readme /> component should dangerously set html 1`] = `"<div class=\\"markdown-body\\"><h1>This is a test string</h1></div>"`;

test/webui/components/__snapshots__/search.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Search /> component should match the snapshot 1`] = `"<input type=\\"text\\" placeholder=\\"Type to search...\\" class=\\"searchBox\\"/>"`;

test/webui/components/header.spec.js

@@ -2,7 +2,7 @@
  * Header component
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import Header from '../../../src/webui/src/components/Header';
 import { BrowserRouter } from 'react-router-dom';
 import storage from '../../../src/webui/utils/storage';
@@ -103,3 +103,14 @@ describe('<Header /> component shallow', () => {
     });
   });
 });
+
+describe('<Header /> snapshot test', () => {
+  it('shoud match snapshot', () => {
+    const wrapper = mount(
+      <BrowserRouter>
+        <Header />
+      </BrowserRouter>
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

test/webui/components/help.spec.js

@@ -29,6 +29,7 @@ describe('<Help /> component', () => {
         .dive()
         .text()
     ).toEqual('npm adduser --registry  http://example.com');
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it('should set html from props with someOtherPath', () => {
@@ -44,5 +45,6 @@ describe('<Help /> component', () => {
         .dive()
         .text()
     ).toEqual('npm publish --registry http://example.com/someOtherPath');
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });

test/webui/components/noitems.spec.js

@@ -20,5 +20,6 @@ describe('<NoItem /> component', () => {
     };
     const wrapper = shallow(<NoItems {...props} />);
     expect(wrapper.find('h2').text()).toEqual('This is a test string');
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });

test/webui/components/notfound.spec.js

@@ -23,5 +23,6 @@ describe('<NotFound /> component', () => {
     expect(wrapper.find('p').text()).toEqual(
       'Oops, The package you are trying to access does not exist.'
     );
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });

test/webui/components/package.spec.js

@@ -37,5 +37,6 @@ describe('<Package /> component', () => {
         .text()
     ).toEqual('By: Sam');
     expect(wrapper.find('p').text()).toEqual('Private NPM repository');
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });

test/webui/components/packagedetail.spec.js

@@ -28,5 +28,6 @@ describe('<PackageDetail /> component', () => {
         .dive()
         .html()
     ).toEqual('<div class="markdown-body">Test readme</div>');
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });

test/webui/components/packagelist.spec.js

@@ -69,5 +69,7 @@ describe('<PackageList /> component', () => {
     );
     // package count
     expect(wrapper.find('Package')).toHaveLength(3);
+    // match snapshot
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });

test/webui/components/readme.spec.js

@@ -22,5 +22,6 @@ describe('<Readme /> component', () => {
     expect(wrapper.html()).toEqual(
       '<div class="markdown-body"><h1>This is a test string</h1></div>'
     );
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });

test/webui/components/search.spec.js

@@ -5,7 +5,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Search from '../../../src/webui/src/components/Search/index';
-
 console.error = jest.fn();
 
 describe('<Search /> component', () => {
@@ -32,11 +31,16 @@ describe('<Search /> component', () => {
 
   it('should call the handleSearchInput function', () => {
     const props = {
-      handleSearchInput: jest.fn(),
+      handleSearchInput: jest.fn()
-      placeHolder: 'Test placeholder'
     };
     const wrapper = shallow(<Search {...props} />);
     wrapper.find('input').simulate('change');
     expect(props.handleSearchInput).toBeCalled();
   });
+
+  it('should match the snapshot', () => {
+    const props = { handleSearchInput: () => {} };
+    const wrapper = shallow(<Search {...props} />);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
 });