MERC-6194: Improve test coverage, linting

.eslintignore

@@ -3,3 +3,5 @@
 *.css
 src/server/tsconfig.server.json
 src/cli/tsconfig.cli.json
+src/services/__fixtures__
+*.snap

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     'plugin:import/errors',
     'plugin:import/warnings',
     'plugin:import/typescript',
+    'plugin:react/recommended',
   ],
   parserOptions: {
     project: './tsconfig.json',
@@ -33,6 +34,7 @@ module.exports = {
     "max-len": [1, 120, 4],
     "no-plusplus": "off",
     "global-require": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
   },
   overrides: [
     {

jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
+  roots: ["<rootDir>/src"],
   preset: 'ts-jest',
-  testEnvironment: 'node',
+  testEnvironment: 'jsdom',
   transform: {
     '^.+\\.js$': 'babel-jest',
     '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',

package.json

@@ -18,7 +18,7 @@
     "lint": "eslint \"src/**/*\"",
     "lint-fix": "eslint --fix \"src/**/*\"",
     "test": "jest --coverage || true",
-    "test:updateSnapshot": "jest --updateSnapshot"
+    "test:updateSnapshot": "jest --updateSnapshot --silent"
   },
   "license": "MIT",
   "dependencies": {
@@ -68,6 +68,7 @@
     "@types/uuid": "^3.4.5",
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "@typescript-eslint/parser": "^1.9.0",
+    "axios-mock-adapter": "^1.17.0",
     "babel-eslint": "^10.0.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.0",

src/client/components/App/App.test.tsx

@@ -1,10 +1,18 @@
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import React from 'react';
 
 import { App } from './App';
 
-const app = shallow(<App/>);
 
 it('renders', () => {
-    expect(app).toMatchSnapshot();
+    const app = mount(<App/>);
+    expect(app.getDOMNode()).toMatchSnapshot();
+});
+
+describe('mountWidget', () => {
+    it('correctly mounts a widget', () => {
+        const app = mount(<App/>);
+        (app.instance() as App).mountWidget('<div>blah</div>');
+        expect(app.getDOMNode()).toMatchSnapshot();
+    });
 });

src/client/components/App/App.tsx

@@ -17,7 +17,8 @@ export class App extends Component<{}, {}> {
 
     componentDidMount() {
         this.socket = io(`${host}:${port}`);
-        this.socket.on('connect', () => console.log('Socket connected'));
+
+        this.socket.on('connect', () => console.log('Socket connected')); // eslint-disable-line no-console
         this.socket.on('event', (data: SocketData) => {
             this.mountWidget(data.html);
         });

src/client/components/App/__snapshots__/App.test.tsx.snap

@@ -1,3 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports['renders 1'] = 'ShallowWrapper {}';
+exports['mountWidget correctly mounts a widget 1'] = `
+<div>
+  <div
+    class="styled__StyledFlex-hcvk8l-0 gzvNmR styled__StyledBox-sj5f1m-0 dWCHjG"
+  >
+    <img
+      height="34"
+      src="favicon.ico"
+    />
+
+    <h1
+      class="styled__StyledH1-tqnj75-1 exiPoU"
+    >
+      Widget Builder
+    </h1>
+  </div>
+  <div>
+    <div>
+      blah
+    </div>
+  </div>
+</div>
+`;
+
+exports['renders 1'] = `
+<div>
+  <div
+    class="styled__StyledFlex-hcvk8l-0 gzvNmR styled__StyledBox-sj5f1m-0 dWCHjG"
+  >
+    <img
+      height="34"
+      src="favicon.ico"
+    />
+
+    <h1
+      class="styled__StyledH1-tqnj75-1 exiPoU"
+    >
+      Widget Builder
+    </h1>
+  </div>
+  <div />
+</div>
+`;

src/client/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import App from './components/App/App';
+import { App } from './components/App/App';
 
 ReactDOM.render(
     <App />,

src/client/utils/__snapshots__/widget.test.ts.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createElementFromHTML correctly creates an element 1`] = `
+<div>
+  Hello
+</div>
+`;
+
+exports[`executeWidgetScripts correctly clones a script 1`] = `
+<div>
+
+
+  <script
+    data-test1="hi"
+    id="id1"
+  >
+
+                console.log("first")
+
+  </script>
+
+
+  <script
+    data-test1="hi2"
+    id="id2"
+  >
+
+                console.log("second")
+
+  </script>
+
+
+</div>
+`;

src/client/utils/widget.test.ts

@@ -0,0 +1,25 @@
+import * as widget from './widget';
+
+describe('createElementFromHTML', () => {
+    it('correctly creates an element', () => {
+        const result = widget.createElementFromHTML('<div>Hello</div>');
+        expect(result).toMatchSnapshot();
+    });
+});
+
+describe('executeWidgetScripts', () => {
+    it('correctly clones a script', () => {
+        const widgetElement = document.createElement('div');
+        widgetElement.innerHTML = `
+            <script id="id1" data-test1="hi">
+                console.log("first")
+            </script>
+            <script id="id2" data-test1="hi2">
+                console.log("second")
+            </script>
+        `;
+
+        widget.executeWidgetScripts(widgetElement, document);
+        expect(widgetElement).toMatchSnapshot();
+    });
+});