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

)
jstewart612 · Nov 7, 2019 · 8ac09c9 · 8ac09c9
1 parent cb6d7ea
commit 8ac09c9
Show file tree

Hide file tree

Showing 11 changed files with 2,295 additions and 568 deletions.
diff --git a/.circleci/config.yml b/.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:

diff --git a/ui/.gitignore b/ui/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 dist
 .vscode
-junit.xml
+junit.xml
+coverage
diff --git a/ui/__mocks__/fileMock.js b/ui/__mocks__/fileMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/ui/babel.config.js b/ui/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    presets: ['@babel/preset-env', '@babel/preset-react'],
+};
diff --git a/ui/jest.config.js b/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',
+  },
 };
diff --git a/ui/package.json b/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"

diff --git a/ui/src/app/applications/components/__snapshots__/utils.test.tsx.snap b/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;"
+/>
+`;