Adds support for testing .tsx files. Closes #2610 (#2661)

.circleci/config.yml

@@ -202,6 +202,7 @@ jobs:
           key: yarn-packages-v4-{{ checksum "yarn.lock" }}
           paths: [~/.cache/yarn, node_modules]
       - run: yarn test
+      - run: ./node_modules/.bin/codecov -p ..
       - run: yarn build
       - run: yarn lint
 workflows:

ui/.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 .vscode
-junit.xml
+junit.xml
+coverage

ui/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = {};

ui/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: ['@babel/preset-env', '@babel/preset-react'],
+};

ui/jest.config.js

@@ -1,5 +1,17 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
-  reporters: [ "default", "jest-junit" ],
+  reporters: ['default', 'jest-junit'],
+  collectCoverage: true,
+  transformIgnorePatterns: ['node_modules/(?!(argo-ui)/)'],
+  globals: {
+    'ts-jest': {
+      isolatedModules: true,
+    },
+  },
+  moduleNameMapper: {
+    // https://github.com/facebook/jest/issues/3094
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
+    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
+  },
 };

ui/package.json

@@ -28,9 +28,6 @@
     "@types/react-router-dom": "^4.2.3",
     "@types/superagent": "^3.5.7",
     "argo-ui": "https://github.com/argoproj/argo-ui.git",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.3",
-    "babel-preset-env": "^1.6.1",
     "classnames": "^2.2.5",
     "color": "^3.1.0",
     "cookie": "^0.3.1",
@@ -85,11 +82,23 @@
     "@types/react-dom": "16.8.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-react": "^7.7.0",
+    "@babel/preset-typescript": "^7.7.2",
     "@types/jest": "^24.0.13",
+    "@types/react-test-renderer": "^16.8.3",
     "add": "^2.0.6",
-    "jest": "^24.8.0",
+    "babel-jest": "^24.9.0",
+    "babel-preset-env": "^1.7.0",
+    "codecov": "^3.6.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^24.9.0",
+    "jest-transform-css": "^2.0.0",
+    "postcss": "^7.0.21",
     "prettier": "^1.18.2",
-    "ts-jest": "^24.0.2",
+    "react-test-renderer": "16.8.3",
+    "ts-jest": "^24.1.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.0.1",
     "yarn": "^1.16.0"

ui/src/app/applications/components/__snapshots__/utils.test.tsx.snap

@@ -0,0 +1,273 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ComparisonStatusIcon.OutOfSync 1`] = `
+Array [
+  <i
+    className="fa fa-times"
+    style={
+      Object {
+        "color": "#f4c030",
+      }
+    }
+    title="OutOfSync"
+  />,
+  " ",
+]
+`;
+
+exports[`ComparisonStatusIcon.Synced 1`] = `
+Array [
+  <i
+    className="fa fa-check-circle"
+    style={
+      Object {
+        "color": "#18BE94",
+      }
+    }
+    title="Synced"
+  />,
+  " ",
+]
+`;
+
+exports[`ComparisonStatusIcon.Unknown 1`] = `
+Array [
+  <i
+    className="fa fa-circle-notch fa-spin"
+    style={
+      Object {
+        "color": "#CCD6DD",
+      }
+    }
+    title="Unknown"
+  />,
+  " ",
+]
+`;
+
+exports[`HealthStatusIcon.Degraded 1`] = `
+<i
+  className="fa fa-heart-broken"
+  style={
+    Object {
+      "color": "#E96D76",
+    }
+  }
+  title="Degraded"
+/>
+`;
+
+exports[`HealthStatusIcon.Healthy 1`] = `
+<i
+  className="fa fa-heartbeat"
+  style={
+    Object {
+      "color": "#18BE94",
+    }
+  }
+  title="Healthy"
+/>
+`;
+
+exports[`HealthStatusIcon.Missing 1`] = `
+<i
+  className="fa fa-question-circle"
+  style={
+    Object {
+      "color": "#CCD6DD",
+    }
+  }
+  title="Missing"
+/>
+`;
+
+exports[`HealthStatusIcon.Progressing 1`] = `
+<i
+  className="fa fa fa-circle-notch fa-spin"
+  style={
+    Object {
+      "color": "#0DADEA",
+    }
+  }
+  title="Progressing"
+/>
+`;
+
+exports[`HealthStatusIcon.Suspended 1`] = `
+<i
+  className="fa fa-heartbeat"
+  style={
+    Object {
+      "color": "#CCD6DD",
+    }
+  }
+  title="Suspended"
+/>
+`;
+
+exports[`HealthStatusIcon.Unknown 1`] = `
+<i
+  className="fa fa-question-circle"
+  style={
+    Object {
+      "color": "#CCD6DD",
+    }
+  }
+  title="Unknown"
+/>
+`;
+
+exports[`OperationPhaseIcon.Error 1`] = `
+<i
+  className="fa fa-times"
+  style={
+    Object {
+      "color": "#E96D76",
+    }
+  }
+  title="Error"
+/>
+`;
+
+exports[`OperationPhaseIcon.Failed 1`] = `
+<i
+  className="fa fa-times"
+  style={
+    Object {
+      "color": "#E96D76",
+    }
+  }
+  title="Failed"
+/>
+`;
+
+exports[`OperationPhaseIcon.Running 1`] = `
+<i
+  className="fa fa-circle-notch fa-spin"
+  style={
+    Object {
+      "color": "#0DADEA",
+    }
+  }
+  title="Running"
+/>
+`;
+
+exports[`OperationPhaseIcon.Succeeded 1`] = `
+<i
+  className="fa fa-check-circle"
+  style={
+    Object {
+      "color": "#18BE94",
+    }
+  }
+  title="Succeeded"
+/>
+`;
+
+exports[`OperationState.Default 1`] = `
+Array [
+  <i
+    className="fa fa-circle-notch fa-spin"
+    style={
+      Object {
+        "color": "#0DADEA",
+      }
+    }
+  />,
+  " ",
+  "Unknown",
+]
+`;
+
+exports[`OperationState.undefined 1`] = `null`;
+
+exports[`ResourceResultIcon.Hook.Error 1`] = `
+<i
+  className="fa fa-heart-broken"
+  style={
+    Object {
+      "color": "#E96D76",
+    }
+  }
+/>
+`;
+
+exports[`ResourceResultIcon.Hook.Failed 1`] = `
+<i
+  className="fa fa-heart-broken"
+  style={
+    Object {
+      "color": "#E96D76",
+    }
+  }
+/>
+`;
+
+exports[`ResourceResultIcon.Hook.Running 1`] = `
+<i
+  className="fa fa-circle-notch fa-spin"
+  style={
+    Object {
+      "color": "#0DADEA",
+    }
+  }
+  title="Running: my-message;"
+/>
+`;
+
+exports[`ResourceResultIcon.Hook.Succeeded 1`] = `
+<i
+  className="fa fa-heartbeat"
+  style={
+    Object {
+      "color": "#18BE94",
+    }
+  }
+/>
+`;
+
+exports[`ResourceResultIcon.Hook.Terminating 1`] = `
+<i
+  className="fa fa-circle-notch fa-spin"
+  style={
+    Object {
+      "color": "#0DADEA",
+    }
+  }
+/>
+`;
+
+exports[`ResourceResultIcon.Pruned 1`] = `
+<i
+  className="fa fa-heartbeat"
+  style={
+    Object {
+      "color": "#CCD6DD",
+    }
+  }
+/>
+`;
+
+exports[`ResourceResultIcon.SyncFailed 1`] = `
+<i
+  className="fa fa-heart-broken"
+  style={
+    Object {
+      "color": "#E96D76",
+    }
+  }
+/>
+`;
+
+exports[`ResourceResultIcon.Synced 1`] = `
+<i
+  className="fa fa-heartbeat"
+  style={
+    Object {
+      "color": "#18BE94",
+    }
+  }
+  title="Synced: my-message;"
+/>
+`;

ui/src/app/applications/components/utils.test.tsx

@@ -0,0 +1,228 @@
+import * as renderer from 'react-test-renderer';
+import * as React from 'react';
+import {
+    Application,
+    HealthStatus,
+    HealthStatuses,
+    OperationPhases,
+    ResourceResult,
+    ResultCodes,
+    SyncStatuses,
+} from '../../shared/models';
+import {
+    ComparisonStatusIcon,
+    getAppOperationState,
+    getOperationType,
+    HealthStatusIcon,
+    OperationPhaseIcon,
+    OperationState,
+    ResourceResultIcon,
+} from './utils';
+
+const zero = new Date(0).toISOString();
+
+test('getAppOperationState.DeletionTimestamp', () => {
+    const state = getAppOperationState({metadata: {deletionTimestamp: zero}} as Application);
+
+    expect(state).toStrictEqual({phase: OperationPhases.Running, startedAt: zero});
+});
+
+test('getAppOperationState.Operation', () => {
+    const state = getAppOperationState({metadata: {}, operation: {}} as Application);
+
+    expect(state.phase).toBe(OperationPhases.Running);
+    expect(state.startedAt).toBeDefined();
+    expect(state.operation).toStrictEqual({sync: {}});
+});
+
+test('getAppOperationState.Status', () => {
+    const state = getAppOperationState({
+        metadata: {},
+        status: {operationState: {phase: OperationPhases.Error, startedAt: zero}},
+    } as Application);
+
+    expect(state.phase).toBe(OperationPhases.Error);
+});
+
+test('getOperationType.Delete', () => {
+    const state = getOperationType({metadata: {deletionTimestamp: zero.toString()}} as Application);
+
+    expect(state).toBe('Delete');
+});
+
+test('getOperationType.Sync.Operation', () => {
+    const state = getOperationType({metadata: {}, operation: {sync: {}}} as Application);
+
+    expect(state).toBe('Sync');
+});
+
+test('getOperationType.Sync.Status', () => {
+    const state = getOperationType({metadata: {}, status: {operationState: {operation: {sync: {}}}}} as Application);
+
+    expect(state).toBe('Sync');
+});
+
+test('getOperationType.Unknown', () => {
+    const state = getOperationType({metadata: {}, status: {}} as Application);
+
+    expect(state).toBe('Unknown');
+});
+
+test('OperationState.undefined', () => {
+    const tree = renderer.create(<OperationState app={{metadata: {}, status: {}} as Application}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('OperationState.Default', () => {
+    const tree = renderer.create(<OperationState
+        app={{metadata: {}, status: {operationState: {}}} as Application}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('OperationPhaseIcon.Succeeded', () => {
+    const tree = renderer.create(<OperationPhaseIcon
+        app={{metadata: {}, status: {operationState: {phase: OperationPhases.Succeeded}}} as Application}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('OperationPhaseIcon.Error', () => {
+    const tree = renderer.create(<OperationPhaseIcon
+        app={{metadata: {}, status: {operationState: {phase: OperationPhases.Error}}} as Application}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('OperationPhaseIcon.Failed', () => {
+    const tree = renderer.create(<OperationPhaseIcon
+        app={{metadata: {}, status: {operationState: {phase: OperationPhases.Failed}}} as Application}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('OperationPhaseIcon.Running', () => {
+    const tree = renderer.create(<OperationPhaseIcon
+        app={{metadata: {}, status: {operationState: {phase: OperationPhases.Running}}} as Application}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('ComparisonStatusIcon.Synced', () => {
+    const tree = renderer.create(<ComparisonStatusIcon status={SyncStatuses.Synced}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('ComparisonStatusIcon.OutOfSync', () => {
+    const tree = renderer.create(<ComparisonStatusIcon status={SyncStatuses.OutOfSync}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('ComparisonStatusIcon.Unknown', () => {
+    const tree = renderer.create(<ComparisonStatusIcon status={SyncStatuses.Unknown}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('HealthStatusIcon.Unknown', () => {
+    const tree = renderer.create(<HealthStatusIcon
+        state={{status: HealthStatuses.Unknown} as HealthStatus}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+test('HealthStatusIcon.Progressing', () => {
+    const tree = renderer.create(<HealthStatusIcon
+        state={{status: HealthStatuses.Progressing} as HealthStatus}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('HealthStatusIcon.Suspended', () => {
+    const tree = renderer.create(<HealthStatusIcon
+        state={{status: HealthStatuses.Suspended} as HealthStatus}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('HealthStatusIcon.Healthy', () => {
+    const tree = renderer.create(<HealthStatusIcon state={{status: HealthStatuses.Healthy} as HealthStatus}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('HealthStatusIcon.Degraded', () => {
+    const tree = renderer.create(<HealthStatusIcon
+        state={{status: HealthStatuses.Degraded} as HealthStatus}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+test('HealthStatusIcon.Missing', () => {
+    const tree = renderer.create(<HealthStatusIcon
+        state={{status: HealthStatuses.Missing} as HealthStatus}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('ResourceResultIcon.Synced', () => {
+    const tree = renderer.create(<ResourceResultIcon
+        resource={{status: ResultCodes.Synced, message: 'my-message'} as ResourceResult}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('ResourceResultIcon.Pruned', () => {
+    const tree = renderer.create(<ResourceResultIcon
+        resource={{status: ResultCodes.Pruned} as ResourceResult}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('ResourceResultIcon.SyncFailed', () => {
+    const tree = renderer.create(<ResourceResultIcon
+        resource={{status: ResultCodes.SyncFailed} as ResourceResult}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('ResourceResultIcon.Hook.Running', () => {
+    const tree = renderer.create(<ResourceResultIcon
+        resource={{
+            hookType: 'Sync',
+            hookPhase: OperationPhases.Running,
+            message: 'my-message',
+        } as ResourceResult}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('ResourceResultIcon.Hook.Failed', () => {
+    const tree = renderer.create(<ResourceResultIcon
+        resource={{hookType: 'Sync', hookPhase: OperationPhases.Failed} as ResourceResult}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('ResourceResultIcon.Hook.Error', () => {
+    const tree = renderer.create(<ResourceResultIcon
+        resource={{hookType: 'Sync', hookPhase: OperationPhases.Error} as ResourceResult}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('ResourceResultIcon.Hook.Succeeded', () => {
+    const tree = renderer.create(<ResourceResultIcon
+        resource={{hookType: 'Sync', hookPhase: OperationPhases.Succeeded} as ResourceResult}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});
+
+
+test('ResourceResultIcon.Hook.Terminating', () => {
+    const tree = renderer.create(<ResourceResultIcon
+        resource={{hookType: 'Sync', hookPhase: OperationPhases.Terminating} as ResourceResult}/>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+});

ui/src/app/tsconfig.json

@@ -20,6 +20,7 @@
     ],
     "exclude": [
         "node_modules",
-        "./**/*.test.ts"
+        "./**/*.test.ts",
+        "./**/*.test.tsx"
     ]
 }

ui/tsconfig.json

@@ -0,0 +1 @@
+src/app/tsconfig.json