Merge pull request #86 from andymikulski/72-karma

#72 Part 2: Karma Boogaloo: Jest's Revenge

.eslintrc

@@ -0,0 +1,11 @@
+{
+  "overrides": [{
+    "files": "**/*.test.js",
+    "globals": {
+      "shallow": true,
+      "React": true,
+      "ReactDOM": true,
+      "mount": true
+    }
+  }]
+}

package.json

@@ -32,16 +32,15 @@
     "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": "CI=true yarn run test:jest && yarn run test:karma",
+    "test": "CI=true yarn run test:jest",
     "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",
     "lint:eslint": "eslint -c node_modules/eslint-config-react-app/index.js --max-warnings 0 'src/**/*.js'",
     "lint:eslintfix": "eslint -c node_modules/eslint-config-react-app/index.js --max-warnings 0 --fix 'src/**/*.js'",
-    "lint:prettier-eslint": "prettier-eslint --list-different 'src/**/*.js' | ./lint_problems.sh && yarn run lint:eslint",
-    "lint:prettier-eslintfix": "prettier-eslint --write 'src/**/*.js' && yarn run lint:eslintfix",
+    "lint:prettier-eslint": "prettier-eslint --list-different 'src/**/*.js' | ./lint_problems.sh",
+    "lint:prettier-eslintfix": "prettier-eslint --write 'src/**/*.js'",
     "lint": "yarn run lint:flow && yarn run lint:prettier-eslint && yarn run lint:eslint && yarn run lint:less"
   },
   "devDependencies": {
@@ -51,18 +50,8 @@
     "enzyme": "3.3.0",
     "faker": "4.1.0",
     "flow-bin": "0.69.0",
+    "jest-immutable-matchers": "2.0.1",
     "pre-commit": "1.2.2",
-    "jasmine": "3.1.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",

src/console/App.test.js

@@ -1,36 +1,4 @@
-import React from 'react';
 import App from './App';
-import { shallow } from 'enzyme';
-
-// Mock the localStorage API.
-global.localStorage = (function() {
-  var store = {};
-
-  return {
-    getItem: function(key) {
-      return store[key] || null;
-    },
-    removeItem: function(key) {
-      delete store[key];
-    },
-    setItem: function(key, value) {
-      store[key] = value.toString();
-    },
-    clear: function() {
-      store = {};
-    },
-  };
-})();
-
-const webAuthMock = {
-  authorize: jest.fn(),
-  parseHash: jest.fn(),
-  client: { userInfo: jest.fn() },
-};
-
-global.auth0 = {
-  WebAuth: jest.fn(() => webAuthMock),
-};
 
 describe('delivery-console', () => {
   it('renders without crashing', () => {

src/normandy/App.test.js

@@ -1,19 +1,6 @@
-import React from 'react';
 import App from './App';
-import { shallow } from 'enzyme';
 
 describe('normandy', () => {
-  beforeAll(() => {
-    const fakeStorage = {
-      store: {},
-      getItem: key => fakeStorage.store[key] || null,
-      setItem: (key, value) => (fakeStorage.store[key] = value),
-    };
-    Object.defineProperty(window, 'localStorage', {
-      value: fakeStorage,
-    });
-  });
-
   it('renders without crashing', () => {
     const wrapper = () => shallow(<App />);
     expect(wrapper).not.toThrow();

src/normandy/components/recipes/RecipeDetails.js

@@ -52,7 +52,7 @@ export default class RecipeDetails extends React.PureComponent {
 export class ArgumentsValue extends React.PureComponent {
   static propTypes = {
     name: PropTypes.string,
-    value: PropTypes.any.isRequired,
+    value: PropTypes.any,
   };
 
   static defaultProps = {

src/normandy/tests/components/test_App.js → src/normandy/tests/components/App.test.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { shallow } from 'enzyme';
 
 import App from 'normandy/components/App';
 

src/normandy/tests/components/common/test_BooleanIcon.js → src/normandy/tests/components/common/BooleanIcon.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
 import BooleanIcon from 'normandy/components/common/BooleanIcon';
 
 describe('<BooleanIcon>', () => {

src/normandy/tests/components/common/test_CheckboxMenu.js → src/normandy/tests/components/common/CheckboxMenu.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
 import CheckboxMenu from 'normandy/components/common/CheckboxMenu';
 
 describe('<CheckboxMenu>', () => {

src/normandy/tests/components/common/test_EnrollmentStatus.js → src/normandy/tests/components/common/EnrollmentStatus.test.js

@@ -1,5 +1,3 @@
-import React from 'react';
-import { mount } from 'enzyme';
 import EnrollmentStatus from 'normandy/components/common/EnrollmentStatus';
 import { wrapMockStore } from 'normandy/tests/mockStore';
 

src/normandy/tests/components/common/test_EnvAlert.js → src/normandy/tests/components/common/EnvAlert.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import TestComponent from 'normandy/components/common/EnvAlert';
 
 const { WrappedComponent: EnvAlert } = TestComponent;

src/normandy/tests/components/common/test_LoadingOverlay.js → src/normandy/tests/components/common/LoadingOverlay.test.js

@@ -1,7 +1,4 @@
 import { Spin } from 'antd';
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import LoadingOverlay, {
   SimpleLoadingOverlay,
 } from 'normandy/components/common/LoadingOverlay';

src/normandy/tests/components/common/test_NavigationMenu.js → src/normandy/tests/components/common/NavigationMenu.test.js

@@ -1,7 +1,4 @@
 import { List } from 'immutable';
-import React from 'react';
-import { shallow } from 'enzyme';
-
 import NavigationMenu from 'normandy/components/common/NavigationMenu';
 
 describe('<NavigationMenu>', () => {

src/normandy/tests/components/common/test_ShieldIdenticon.js → src/normandy/tests/components/common/ShieldIdenticon.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
 import ShieldIdenticon from 'normandy/components/common/ShieldIdenticon';
 
 describe('<ShieldIdenticon>', () => {

src/normandy/tests/components/data/test_QueryActions.js → src/normandy/tests/components/data/QueryActions.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import TestComponent from 'normandy/components/data/QueryActions';
 
 const { WrappedComponent: QueryActions } = TestComponent;

src/normandy/tests/components/data/test_QueryExtension.js → src/normandy/tests/components/data/QueryExtension.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import TestComponent from 'normandy/components/data/QueryExtension';
 
 const { WrappedComponent: QueryExtension } = TestComponent;

src/normandy/tests/components/data/test_QueryExtensionListingColumns.js → src/normandy/tests/components/data/QueryExtensionListingColumns.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import TestComponent from 'normandy/components/data/QueryExtensionListingColumns';
 
 const { WrappedComponent: QueryExtensionListingColumns } = TestComponent;

src/normandy/tests/components/data/test_QueryFilteredRecipes.js → src/normandy/tests/components/data/QueryFilteredRecipes.test.js

@@ -1,7 +1,4 @@
 import { Map } from 'immutable';
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import TestComponent from 'normandy/components/data/QueryFilteredRecipes';
 
 const { WrappedComponent: QueryFilteredRecipes } = TestComponent;

src/normandy/tests/components/data/test_QueryMultipleExtensions.js → src/normandy/tests/components/data/QueryMultipleExtensions.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import TestComponent from 'normandy/components/data/QueryMultipleExtensions';
 
 const { WrappedComponent: QueryMultipleExtensions } = TestComponent;

src/normandy/tests/components/data/test_QueryRecipe.js → src/normandy/tests/components/data/QueryRecipe.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import TestComponent from 'normandy/components/data/QueryRecipe';
 
 const { WrappedComponent: QueryRecipe } = TestComponent;

src/normandy/tests/components/data/test_QueryRecipeHistory.js → src/normandy/tests/components/data/QueryRecipeHistory.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import TestComponent from 'normandy/components/data/QueryRecipeHistory';
 
 const { WrappedComponent: QueryRecipeHistory } = TestComponent;

src/normandy/tests/components/data/test_QueryRecipeListingColumns.js → src/normandy/tests/components/data/QueryRecipeListingColumns.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import TestComponent from 'normandy/components/data/QueryRecipeListingColumns';
 
 const { WrappedComponent: QueryRecipeListingColumns } = TestComponent;

src/normandy/tests/components/data/test_QueryRevision.js → src/normandy/tests/components/data/QueryRevision.test.js

@@ -1,14 +1,11 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import TestComponent from 'normandy/components/data/QueryRevision';
 
 const { WrappedComponent: QueryRevision } = TestComponent;
 
 describe('<QueryRevision>', () => {
   const props = {
     fetchRevision: () => {},
-    pk: 1,
+    pk: '1',
   };
 
   it('should work', () => {
@@ -43,16 +40,16 @@ describe('<QueryRevision>', () => {
     );
     expect(callCount).toBe(1);
 
-    wrapper.setProps({ pk: 2 });
+    wrapper.setProps({ pk: '2' });
     expect(callCount).toBe(2);
 
     wrapper.setProps({ irrelevant: true });
     expect(callCount).toBe(2);
 
-    wrapper.setProps({ pk: 2 });
+    wrapper.setProps({ pk: '2' });
     expect(callCount).toBe(2);
 
-    wrapper.setProps({ pk: 3 });
+    wrapper.setProps({ pk: '3' });
     expect(callCount).toBe(3);
   });
 

src/normandy/tests/components/data/test_QueryServiceInfo.js → src/normandy/tests/components/data/QueryServiceInfo.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-
 import TestComponent from 'normandy/components/data/QueryServiceInfo';
 
 const { WrappedComponent: QueryServiceInfo } = TestComponent;

src/normandy/tests/components/extensions/test_CreateExtensionPage.js → src/normandy/tests/components/extensions/CreateExtensionPage.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
 import TestComponent from 'normandy/components/extensions/CreateExtensionPage';
 
 const { WrappedComponent: CreateExtensionPage } = TestComponent;

src/normandy/tests/components/extensions/test_EditExtensionPage.js → src/normandy/tests/components/extensions/EditExtensionPage.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
 import QueryExtension from 'normandy/components/data/QueryExtension';
 import TestComponent from 'normandy/components/extensions/EditExtensionPage';
 

src/normandy/tests/components/extensions/test_ExtensionForm.js → src/normandy/tests/components/extensions/ExtensionForm.test.js

@@ -1,6 +1,3 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
 import TestComponent from 'normandy/components/extensions/ExtensionForm';
 
 const { WrappedComponent: ExtensionForm } = TestComponent;

src/normandy/tests/components/extensions/test_ExtensionListing.js → src/normandy/tests/components/extensions/ExtensionListing.test.js

@@ -1,7 +1,4 @@
 import { List } from 'immutable';
-import React from 'react';
-import { shallow } from 'enzyme';
-
 import TestComponent from 'normandy/components/extensions/ExtensionListing';
 
 const { WrappedComponent: ExtensionListing } = TestComponent;