Merge pull request #78 from andymikulski/72-karma

#72: Karma
mozilla · Apr 5, 2018 · 2a863a4 · 2a863a4
2 parents 1999061 + 3d80fda
commit 2a863a4
Show file tree

Hide file tree

Showing 27 changed files with 2,109 additions and 1,081 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -5,9 +5,10 @@
 version: 2
 jobs:
   build:
+
     docker:
       # Based on https://nodejs.org/en/
-      - image: circleci/node:8
+      - image: circleci/node:8-browsers
 
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images
@@ -37,7 +38,7 @@ jobs:
       - run: yarn run lint
 
       # run tests!
-      - run: yarn test
+      - run: yarn run test
 
       # build all the things!
       - run: yarn run build

diff --git a/config-overrides.js b/config-overrides.js
@@ -1,15 +1,15 @@
-const path = require("path");
-const { injectBabelPlugin } = require("react-app-rewired");
-const rewireLess = require("react-app-rewire-less");
+const path = require('path');
+const { injectBabelPlugin } = require('react-app-rewired');
+const rewireLess = require('react-app-rewire-less');
 
 module.exports = function(config, env) {
   config.resolve = {
     ...config.resolve,
     alias: {
       ...config.resolve.alias,
-      console: path.resolve(__dirname, "./src/console/"),
-      normandy: path.resolve(__dirname, "./src/normandy/"),
-    }
+      console: path.resolve(__dirname, './src/console/'),
+      normandy: path.resolve(__dirname, './src/normandy/'),
+    },
   };
 
   // If an --app=something parameter is present when running this script,
@@ -24,8 +24,8 @@ module.exports = function(config, env) {
   config = rewireLess(config, env);
   // Use Ant LESS imports
   config = injectBabelPlugin(
-    ["import", { libraryName: "antd", style: true }],
-    config
+    ['import', { libraryName: 'antd', style: true }],
+    config,
   );
   // Decorator support (Normandy)
   config = injectBabelPlugin('transform-decorators-legacy', config);

diff --git a/karma.conf.js b/karma.conf.js
@@ -0,0 +1,89 @@
+/* eslint-env node */
+/* eslint-disable no-var, func-names, prefer-arrow-callback, prefer-template */
+
+// Karma configuration
+
+
+const WEBPACK_CONFIG_BASE = require('./node_modules/react-scripts/config/webpack.config.dev.js');
+
+const configOverride = require('./config-overrides.js');
+const WEBPACK_CONFIG = configOverride(WEBPACK_CONFIG_BASE);
+
+module.exports = function (config) {
+  var karmaConfig = {
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+    // list of files / patterns to load in the browser
+    files: [
+      'node_modules/babel-polyfill/dist/polyfill.js',
+      'node_modules/jasmine-promises/dist/jasmine-promises.js',
+      'src/**/tests/index.js',
+    ],
+
+    plugins: [
+      'karma-jasmine',
+      'karma-webpack',
+      'karma-spec-reporter',
+      'karma-sourcemap-loader',
+      'karma-firefox-launcher'
+    ],
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+      'src/**/*.js': ['webpack', 'sourcemap'],
+    },
+
+    webpack: Object.assign(WEBPACK_CONFIG, {
+      entry: undefined,
+      devtool: undefined,
+    }),
+
+    webpackMiddleware: {
+      stats: 'errors-only', // Only show errors during webpack builds.
+    },
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['spec'],
+
+    // web server port
+    port: 9876,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // possible values: config.LOG_DISABLE, config.LOG_ERROR, config.LOG_WARN,
+    // config.LOG_INFO, or config.LOG_DEBUG.
+    logLevel: config.LOG_INFO,
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['FirefoxHeadless'],
+    customLaunchers: {
+      FirefoxHeadless: {
+        base: 'Firefox',
+        flags: [ '--headless' ],
+      },
+    },
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: !!process.env.CI ? process.env.CI : true,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity,
+  };
+
+  config.set(karmaConfig);
+};
diff --git a/package.json b/package.json
@@ -32,7 +32,9 @@
     "build": "react-app-rewired build",
     "build-stage": "REACT_APP_SENTRY_PUBLIC_DSN='https://7f037ccfad184848848bd5077d9ecf07@sentry.prod.mozaws.net/362' build",
     "build-prod": "REACT_APP_SENTRY_PUBLIC_DSN='https://4dac38d672e842a88233e9293caf2d09@sentry.prod.mozaws.net/363' build",
-    "test": "react-app-rewired test --env=jsdom",
+    "test": "CI=true yarn run test:jest && yarn run test:karma",
+    "test:jest": "react-app-rewired test --env=jsdom",
+    "test:karma": "BABEL_ENV=development NODE_ENV=development karma start",
     "eject": "react-scripts eject",
     "lint:flow": "flow",
     "lint:less": "stylelint 'src/**/*.less' --config .stylelintrc",
@@ -43,9 +45,22 @@
   "devDependencies": {
     "babel-plugin-import": "^1.6.5",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-polyfill": "^6.26.0",
     "enzyme": "^3.3.0",
+    "faker": "^4.1.0",
     "flow-bin": "^0.66.0",
     "pre-commit": "^1.2.2",
+    "jasmine": "2.99.0",
+    "jasmine-immutable-matchers": "^2.0.1",
+    "jasmine-promises": "^0.4.1",
+    "karma": "^2.0.0",
+    "karma-firefox-launcher": "^1.1.0",
+    "karma-jasmine": "^1.1.1",
+    "karma-junit-reporter": "^1.2.0",
+    "karma-react-jsx-preprocessor": "^0.1.1",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "^0.0.32",
+    "karma-webpack": "^3.0.0",
     "prettier": "^1.11.1",
     "prettier-eslint": "^8.8.1",
     "prettier-eslint-cli": "^4.7.1",

diff --git a/src/normandy/components/data/QuerySessionInfo.js b/src/normandy/components/data/QuerySessionInfo.js
diff --git a/src/normandy/components/extensions/EditExtensionPage.js b/src/normandy/components/extensions/EditExtensionPage.js
@@ -1,6 +1,6 @@
 import { message } from 'antd';
 import autobind from 'autobind-decorator';
-import { Map, is } from 'immutable';
+import { Map } from 'immutable';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
@@ -13,7 +13,6 @@ import ExtensionForm from 'normandy/components/extensions/ExtensionForm';
 import { updateExtension as updateExtensionAction } from 'normandy/state/app/extensions/actions';
 import { getExtension } from 'normandy/state/app/extensions/selectors';
 import { getUrlParamAsInt } from 'normandy/state/router/selectors';
-import { addSessionView as addSessionViewAction } from 'normandy/state/app/session/actions';
 
 @connect(
   (state, props) => {
@@ -26,7 +25,6 @@ import { addSessionView as addSessionViewAction } from 'normandy/state/app/sessi
   },
   {
     updateExtension: updateExtensionAction,
-    addSessionView: addSessionViewAction,
   },
 )
 @autobind
@@ -35,37 +33,8 @@ export default class EditExtensionPage extends React.PureComponent {
     extension: PropTypes.instanceOf(Map).isRequired,
     extensionId: PropTypes.number.isRequired,
     updateExtension: PropTypes.func.isRequired,
-    addSessionView: PropTypes.func.isRequired,
   };
 
-  componentDidMount() {
-    const extensionName = this.props.extension.get('name');
-    if (extensionName) {
-      this.props.addSessionView(
-        'extension',
-        extensionName,
-        this.props.extension.get('identicon_seed'),
-      );
-    }
-  }
-
-  componentWillReceiveProps({ extension }) {
-    const oldExtensions = this.props.extension;
-
-    // New extension means we add a session view.
-    if (
-      !is(oldExtensions, extension) &&
-      oldExtensions.get('name') !== extension.get('name')
-    ) {
-      const extensionName = extension.get('name');
-      this.props.addSessionView(
-        'extension',
-        extensionName,
-        extension.get('identicon_seed'),
-      );
-    }
-  }
-
   onFormSuccess() {
     message.success('Extension updated!');
   }

diff --git a/src/normandy/components/recipes/EditRecipePage.js b/src/normandy/components/recipes/EditRecipePage.js
@@ -1,6 +1,6 @@
 import { message } from 'antd';
 import autobind from 'autobind-decorator';
-import { is, Map } from 'immutable';
+import { Map } from 'immutable';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
@@ -11,8 +11,6 @@ import LoadingOverlay from 'normandy/components/common/LoadingOverlay';
 import RecipeForm from 'normandy/components/recipes/RecipeForm';
 import QueryRecipe from 'normandy/components/data/QueryRecipe';
 
-import { addSessionView } from 'normandy/state/app/session/actions';
-
 import { updateRecipe } from 'normandy/state/app/recipes/actions';
 import { getRecipe } from 'normandy/state/app/recipes/selectors';
 import { getRecipeForRevision } from 'normandy/state/app/revisions/selectors';
@@ -33,14 +31,12 @@ import { getUrlParamAsInt } from 'normandy/state/router/selectors';
     };
   },
   {
-    addSessionView,
     updateRecipe,
   },
 )
 @autobind
 export default class EditRecipePage extends React.PureComponent {
   static propTypes = {
-    addSessionView: PropTypes.func.isRequired,
     updateRecipe: PropTypes.func.isRequired,
     recipeId: PropTypes.number.isRequired,
     recipe: PropTypes.instanceOf(Map),
@@ -50,31 +46,6 @@ export default class EditRecipePage extends React.PureComponent {
     recipe: null,
   };
 
-  componentDidMount() {
-    const recipeName = this.props.recipe.get('name');
-    if (recipeName) {
-      this.props.addSessionView(
-        'recipe',
-        recipeName,
-        this.props.recipe.get('identicon_seed'),
-      );
-    }
-  }
-
-  componentWillReceiveProps({ recipe }) {
-    const oldRecipe = this.props.recipe;
-
-    // New recipe means we add a session view.
-    if (!is(oldRecipe, recipe)) {
-      const recipeName = recipe.get('name');
-      this.props.addSessionView(
-        'recipe',
-        recipeName,
-        recipe.get('identicon_seed'),
-      );
-    }
-  }
-
   onFormSuccess() {
     message.success('Recipe updated!');
   }

diff --git a/src/normandy/components/recipes/RecipeDetails.js b/src/normandy/components/recipes/RecipeDetails.js
@@ -1,47 +1,14 @@
 import { Card, Icon, Tooltip } from 'antd';
-import { is, List, Map } from 'immutable';
+import { List, Map } from 'immutable';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
-import { addSessionView } from 'normandy/state/app/session/actions';
-
-@connect(() => ({}), { addSessionView })
 export default class RecipeDetails extends React.PureComponent {
   static propTypes = {
-    addSessionView: PropTypes.func.isRequired,
     recipe: PropTypes.instanceOf(Map).isRequired,
   };
 
-  componentDidMount() {
-    const recipeName = this.props.recipe.get('name');
-    if (recipeName) {
-      this.props.addSessionView(
-        'recipe',
-        recipeName,
-        this.props.recipe.get('identicon_seed'),
-      );
-    }
-  }
-
-  componentWillReceiveProps({ recipe }) {
-    const oldRecipe = this.props.recipe;
-
-    // New recipe means we add a session view.
-    if (
-      !is(oldRecipe, recipe) &&
-      oldRecipe.get('name') !== recipe.get('name')
-    ) {
-      const recipeName = recipe.get('name');
-      this.props.addSessionView(
-        'recipe',
-        recipeName,
-        recipe.get('identicon_seed'),
-      );
-    }
-  }
-
   render() {
     const { recipe } = this.props;