Add some tests (#74)

frontend/.travis.yml

@@ -2,6 +2,4 @@ sudo: false
 language: node_js
 node_js:
 - "6"
-script:
-- npm run lint
-- npm run build
+script: npm run test:ci

frontend/jest-setup.js

@@ -0,0 +1,5 @@
+'use strict';
+
+// We have set timezone to make sure tests are correct
+
+process.env.TZ = 'UTC';

frontend/package.json

@@ -28,9 +28,9 @@
     "build:html": "cp public/*.* dist/.",
     "start": "NODE_ENV=development webpack-dev-server --config webpack.config.js --progress --colors",
     "start:heroku": "UNLEASH_API=http://unleash.herokuapp.com npm run start",
-    "lint": "eslint . --ext=js,jsx",
-    "test": "npm run build",
-    "test:ci": "npm run test",
+    "lint": "eslint . --ext js,jsx",
+    "test": "jest",
+    "test:ci": "npm run lint && npm run build && npm run test",
     "prepublish": "npm run build"
   },
   "main": "./index.js",
@@ -69,13 +69,25 @@
     "eslint-config-finn-react": "^1.0.0-alpha.2",
     "eslint-plugin-react": "^6.2.0",
     "extract-text-webpack-plugin": "^1.0.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^19.0.2",
     "node-sass": "~3.12.1",
     "postcss-loader": "^0.13.0",
+    "react-test-renderer": "^15.4.2",
     "redux-devtools": "^3.3.1",
     "sass-loader": "^4.0.2",
     "style-loader": "^0.13.1",
     "toolbox-loader": "0.0.3",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.1"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
+      "\\.(css|scss)$": "identity-obj-proxy"
+    },
+    "setupFiles": [
+      "<rootDir>/jest-setup.js"
+    ]
   }
 }

frontend/src/__mocks__/fileMock.js

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

frontend/src/__mocks__/react-mdl.js

@@ -0,0 +1,20 @@
+module.exports = {
+    Card: 'react-mdl-Card',
+    CardTitle: 'react-mdl-CardTitle',
+    CardText: 'react-mdl-CardText',
+    CardMenu: 'react-mdl-CardMenu',
+    DataTable: 'react-mdl-DataTable',
+    Cell: 'react-mdl-Cell',
+    Grid: 'react-mdl-Grid',
+    Icon: 'react-mdl-Icon',
+    IconButton: 'react-mdl-IconButton',
+    List: 'react-mdl-List',
+    ListItem: 'react-mdl-ListItem',
+    ListItemContent: 'react-mdl-ListItemContent',
+    ProgressBar: 'react-mdl-ProgressBar',
+    Switch: 'react-mdl-Switch',
+    Tab: 'react-mdl-Tab',
+    Tabs: 'react-mdl-Tabs',
+    TableHeader: 'react-mdl-TableHeader',
+    Textfield: 'react-mdl-Textfield',
+};

frontend/src/component/application/__tests__/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "env": {
+        "jest": true
+    }
+}

frontend/src/component/application/__tests__/__snapshots__/application-edit-component-test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly if no application 1`] = `
+<react-mdl-ProgressBar
+  indeterminate={true}
+/>
+`;

frontend/src/component/application/__tests__/application-edit-component-test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import ClientApplications from '../application-edit-component';
+import renderer from 'react-test-renderer';
+
+jest.mock('react-mdl');
+
+test('renders correctly if no application', () => {
+    const tree = renderer.create(
+        <ClientApplications fetchApplication={jest.fn()} />
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});

frontend/src/component/archive/__tests__/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "env": {
+        "jest": true
+    }
+}

frontend/src/component/archive/__tests__/__snapshots__/archive-list-component-test.jsx.snap

@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly with archived toggles 1`] = `
+<react-mdl-Card
+  className="fullwidth"
+  shadow={0}
+>
+  <div
+    className="horisontalScroll"
+  >
+    <react-mdl-DataTable
+      className="fullwidth"
+      rows={
+        Array [
+          Object {
+            "createdAt": "2016-10-25T15:38:28.573Z",
+            "description": "Disables the confirm-functionality from API",
+            "enabled": false,
+            "name": "adin-pay-confirm-disabled",
+            "reviveName": "adin-pay-confirm-disabled",
+            "strategies": Array [
+              Object {
+                "name": "default",
+                "parameters": Object {},
+              },
+            ],
+          },
+          Object {
+            "createdAt": "2016-08-03T12:41:35.631Z",
+            "description": "Enables use of schibsted payment from order-payment-management",
+            "enabled": true,
+            "name": "adin-pay-platform-sch-payment",
+            "reviveName": "adin-pay-platform-sch-payment",
+            "strategies": Array [
+              Object {
+                "name": "default",
+                "parameters": Object {},
+              },
+            ],
+          },
+        ]
+      }
+      style={
+        Object {
+          "border": 0,
+        }
+      }
+    >
+      <react-mdl-TableHeader
+        cellFormatter={[Function]}
+        name="reviveName"
+        style={
+          Object {
+            "width": "25px",
+          }
+        }
+      >
+        Revive
+      </react-mdl-TableHeader>
+      <react-mdl-TableHeader
+        cellFormatter={[Function]}
+        name="enabled"
+        style={
+          Object {
+            "width": "25px",
+          }
+        }
+      >
+        Enabled
+      </react-mdl-TableHeader>
+      <react-mdl-TableHeader
+        name="name"
+      >
+        Toggle name
+      </react-mdl-TableHeader>
+      <react-mdl-TableHeader
+        name="createdAt"
+        numeric={true}
+      >
+        Created
+      </react-mdl-TableHeader>
+    </react-mdl-DataTable>
+  </div>
+</react-mdl-Card>
+`;
+
+exports[`renders correctly with no archived toggles 1`] = `
+<react-mdl-Card
+  className="fullwidth"
+  shadow={0}
+>
+  <div
+    className="emptyState"
+  >
+    <react-mdl-Icon
+      className="mdl-color-text--grey-300"
+      name="archive"
+      style={
+        Object {
+          "fontSize": "56px",
+        }
+      }
+    />
+    <br />
+    No archived feature toggles, go see 
+    <a
+      onClick={[Function]}
+      style={Object {}}
+    >
+      active toggles here
+    </a>
+  </div>
+</react-mdl-Card>
+`;

frontend/src/component/archive/__tests__/archive-list-component-test.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import ArchiveList from '../archive-list-component';
+import renderer from 'react-test-renderer';
+
+jest.mock('react-mdl');
+
+const archive = [
+    {
+        name: 'adin-pay-confirm-disabled',
+        description: 'Disables the confirm-functionality from API',
+        enabled: false,
+        strategies: [{ name: 'default', parameters: {} }],
+        createdAt: '2016-10-25T15:38:28.573Z',
+        reviveName: 'adin-pay-confirm-disabled',
+    }, {
+        name: 'adin-pay-platform-sch-payment',
+        description: 'Enables use of schibsted payment from order-payment-management',
+        enabled: true,
+        strategies: [{ name: 'default', parameters: {} }],
+        createdAt: '2016-08-03T12:41:35.631Z',
+        reviveName: 'adin-pay-platform-sch-payment',
+    },
+];
+
+test('renders correctly with no archived toggles', () => {
+    const tree = renderer.create(
+        <ArchiveList fetchArchive={jest.fn()} archive={[]} />
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('renders correctly with archived toggles', () => {
+    const tree = renderer.create(
+        <ArchiveList fetchArchive={jest.fn()} archive={archive} />
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});

frontend/src/component/client-instance/__tests__/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "env": {
+        "jest": true
+    }
+}

frontend/src/component/client-instance/__tests__/__snapshots__/client-instance-component-test.jsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly with no clientInstances 1`] = `
+<react-mdl-DataTable
+  rows={Array []}
+  selectable={false}
+  style={
+    Object {
+      "width": "100%",
+    }
+  }
+>
+  <react-mdl-TableHeader
+    name="instanceId"
+  >
+    Instance ID
+  </react-mdl-TableHeader>
+  <react-mdl-TableHeader
+    name="appName"
+  >
+    Application name
+  </react-mdl-TableHeader>
+  <react-mdl-TableHeader
+    name="clientIp"
+  >
+    IP
+  </react-mdl-TableHeader>
+  <react-mdl-TableHeader
+    name="createdAt"
+  >
+    Created
+  </react-mdl-TableHeader>
+  <react-mdl-TableHeader
+    name="lastSeen"
+  >
+    Last Seen
+  </react-mdl-TableHeader>
+</react-mdl-DataTable>
+`;

frontend/src/component/client-instance/__tests__/client-instance-component-test.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import ClientStrategies from '../client-instance-component';
+import renderer from 'react-test-renderer';
+
+jest.mock('react-mdl');
+
+test('renders correctly with no clientInstances', () => {
+    const tree = renderer.create(
+        <ClientStrategies fetchClientInstances={jest.fn()} clientInstances={[]} />
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});

frontend/src/component/common/__tests__/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "env": {
+        "jest": true
+    }
+}

frontend/src/component/common/__tests__/util-test.jsx

@@ -0,0 +1,7 @@
+import { formatFullDateTime } from '../util';
+
+test('formats dates correctly', () => {
+    expect(formatFullDateTime(1487861809466)).toEqual('02/23/2017, 2:56:49 PM');
+    expect(formatFullDateTime(1487232809466)).toEqual('02/16/2017, 8:13:29 AM');
+    expect(formatFullDateTime(1477232809466)).toEqual('10/23/2016, 2:26:49 PM');
+});

frontend/src/component/common/index.js

@@ -140,4 +140,4 @@ export function calc (value, total, decimal) {
     });
 
     return (value / total * 100).toFixed(decimal);
-};
+}