[test] Setup the e2e test suite (from main repo)

.circleci/config.yml

@@ -36,6 +36,14 @@ commands:
       - run:
           name: Install js dependencies
           command: yarn
+  prepare_chrome_headless:
+    steps:
+      - run:
+          name: Install dependencies for Chrome Headless
+          # From https://github.com/GoogleChrome/puppeteer/blob/811415bc8c47f7882375629b57b3fe186ad61ed4/docs/troubleshooting.md#chrome-headless-doesnt-launch
+          command: |
+            sudo apt-get update
+            sudo apt-get install -y --force-yes gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
 
 jobs:
   checkout:
@@ -53,6 +61,21 @@ jobs:
           key: v2-yarn-sha-{{ checksum "yarn.lock" }}
           paths:
             - ~/.cache/yarn/v4
+  test_unit:
+    <<: *defaults
+    steps:
+      - checkout
+      - install_js
+      - run:
+          name: Tests fake browser
+          command: yarn test:coverage
+      - run:
+          name: Check coverage generated
+          command: |
+            if ! [[ -s coverage/lcov.info ]]
+            then
+              exit 1
+            fi
   test_static:
     <<: *defaults
     steps:
@@ -67,11 +90,30 @@ jobs:
       - run:
           name: Lint JSON
           command: yarn jsonlint
+  test_browser:
+    <<: *defaults
+    steps:
+      - checkout
+      - install_js
+      - prepare_chrome_headless
+      - run:
+          name: Tests real browsers
+          command: yarn test:karma
+      - store_artifacts:
+          # hardcoded in karma-webpack
+          path: /tmp/_karma_webpack_
+          destination: artifact-file
 workflows:
   version: 2
   pipeline:
     jobs:
       - checkout
+      - test_unit:
+          requires:
+            - checkout
       - test_static:
           requires:
             - checkout
+      - test_browser:
+          requires:
+            - checkout

.eslintrc.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   root: true, // So parent files don't get applied
   globals: {
@@ -24,8 +26,8 @@ module.exports = {
   plugins: ['react-hooks', '@typescript-eslint'],
   settings: {
     'import/resolver': {
-      node: {
-        extensions: ['.js', '.ts', '.tsx', '.json'],
+      webpack: {
+        config: path.join(__dirname, './webpackBaseConfig.js'),
       },
     },
   },
@@ -88,11 +90,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: [
-        '**/test-utils/**/*.js',
-        // matching the pattern of the test runner
-        '*.test.js',
-      ],
+      files: ['*.test.tsx', '*.test.ts'],
       env: {
         mocha: true,
       },

.gitignore

@@ -6,6 +6,8 @@
 .DS_STORE
 *.log
 /.eslintcache
+/.nyc_output
+/coverage
 dist
 node_modules
 __diff_output__

.mocharc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  recursive: true,
+  reporter: 'dot',
+  require: [require.resolve('./test/utils/setup')],
+};

babel.config.js

@@ -0,0 +1,81 @@
+const path = require('path');
+
+const errorCodesPath = path.resolve(__dirname, './docs/public/static/error-codes.json');
+const missingError = process.env.MUI_EXTRACT_ERROR_CODES === 'true' ? 'write' : 'annotate';
+
+let defaultPresets;
+
+// We release a ES version of Material-UI.
+// It's something that matches the latest official supported features of JavaScript.
+// Nothing more (stage-1, etc), nothing less (require, etc).
+if (process.env.BABEL_ENV === 'es') {
+  defaultPresets = [];
+} else {
+  defaultPresets = [
+    [
+      '@babel/preset-env',
+      {
+        bugfixes: true,
+        modules: ['esm', 'production-umd'].includes(process.env.BABEL_ENV) ? false : 'commonjs',
+      },
+    ],
+  ];
+}
+
+const defaultAlias = {
+  '@material-ui/x-grid': './packages/grid/x-grid/src',
+  '@material-ui/x-grid-modules': './packages/grid/x-grid-modules/src',
+  '@material-ui/x-license': './packages/license/src',
+  '@material-ui/data-grid': './packages/grid/data-grid/src',
+};
+
+module.exports = {
+  presets: defaultPresets.concat(['@babel/preset-react', '@babel/preset-typescript']),
+  plugins: [
+    [
+      'babel-plugin-macros',
+      {
+        muiError: {
+          errorCodesPath,
+          missingError,
+        },
+      },
+    ],
+    'babel-plugin-optimize-clsx',
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
+    // any package needs to declare 7.4.4 as a runtime dependency. default is ^7.0.0
+    ['@babel/plugin-transform-runtime', { version: '^7.4.4' }],
+    // for IE 11 support
+    '@babel/plugin-transform-object-assign',
+  ],
+  ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue.
+  env: {
+    coverage: {
+      plugins: [
+        'babel-plugin-istanbul',
+        [
+          'babel-plugin-module-resolver',
+          {
+            root: ['./'],
+            extensions: ['.js', '.ts', '.tsx'],
+            alias: defaultAlias,
+          },
+        ],
+      ],
+    },
+    test: {
+      sourceMaps: 'both',
+      plugins: [
+        [
+          'babel-plugin-module-resolver',
+          {
+            root: ['./'],
+            extensions: ['.js', '.ts', '.tsx'],
+            alias: defaultAlias,
+          },
+        ],
+      ],
+    },
+  },
+};

package.json

@@ -2,12 +2,15 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "@babel/core": "^7.10.2",
+    "@babel/plugin-transform-object-assign": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.5",
+    "@babel/register": "^7.10.5",
     "@material-ui/core": "^4.9.12",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.54",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^25.1.2",
@@ -17,32 +20,51 @@
     "@types/styled-components": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^3.6.1",
     "@typescript-eslint/parser": "^3.6.1",
+    "babel-plugin-module-resolver": "^4.0.0",
+    "babel-plugin-optimize-clsx": "^2.6.1",
+    "chai": "^4.2.0",
+    "chai-dom": "^1.8.2",
+    "cross-env": "^7.0.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^7.4.0",
     "eslint-config-airbnb-typescript": "^9.0.0",
     "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-webpack": "^0.12.2",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-mocha": "^7.0.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
+    "format-util": "^1.0.5",
     "glob-gitignore": "^1.0.14",
     "jest": "^25.1.0",
     "jest-cli": "^25.1.0",
     "jest-transform-stub": "^2.0.0",
+    "karma": "^5.1.0",
+    "karma-browserstack-launcher": "^1.6.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-mocha": "^2.0.1",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^4.0.2",
     "lerna": "^3.20.2",
+    "mocha": "^8.0.1",
+    "nyc": "^15.1.0",
     "prettier": "^2.0.5",
+    "pretty-format-v24": "npm:pretty-format@24",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "styled-components": "^5.1.0",
+    "sinon": "^9.0.2",
     "stylelint": "^13.3.3",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^25.2.0",
+    "typescript": "^3.9.6",
+    "webpack": "^4.41.0",
     "yarn-deduplicate": "^2.1.1"
   },
   "scripts": {
@@ -54,6 +76,11 @@
     "start": "lerna run start --parallel",
     "prettier": "node ./scripts/prettier.js",
     "test": "lerna run test --parallel",
+    "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha 'packages/**/*.test.tsx' --exclude '**/node_modules/**' && nyc report -r lcovonly",
+    "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha 'packages/**/*.test.tsx' --exclude '**/node_modules/**' && nyc report --reporter=html",
+    "test:karma": "cross-env NODE_ENV=test karma start test/karma.conf.js",
+    "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.tsx' --exclude '**/node_modules/**'",
+    "test:watch": "yarn test:unit --watch",
     "lint": "yarn eslint && yarn jsonlint",
     "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx",
     "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx"

packages/demo-app/package.json

@@ -11,6 +11,7 @@
     "@trendmicro/react-interpolate": "^0.5.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
     "react-router-dom": "^5.1.2",
     "react-select": "^3.1.0",
     "rxjs": "^6.5.5",
@@ -33,7 +34,7 @@
     "source-map-loader": "^0.2.4",
     "style-loader": "^1.1.3",
     "ts-loader": "^7.0.1",
-    "typescript": "^3.8.3",
+    "typescript": "^3.9.6",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0",

packages/grid/data-grid/package.json

@@ -19,8 +19,8 @@
   "devDependencies": {
     "@material-ui/x-grid-modules": "^0.1.64",
     "@rollup/plugin-node-resolve": "^8.0.1",
-    "rollup": "^2.6.1",
     "rollup-plugin-cleaner": "^1.0.0",
+    "rollup": "^2.6.1",
     "rollup-plugin-command": "^1.1.3",
     "rollup-plugin-dts": "^1.4.7",
     "rollup-plugin-sourcemaps": "^0.6.2",

packages/grid/x-grid/rollup.config.js

@@ -1,5 +1,4 @@
 import typescript from 'rollup-plugin-typescript2';
-// eslint-disable-next-line import/no-unresolved
 import { generateReleaseInfo } from '@material-ui/x-license';
 import cleaner from 'rollup-plugin-cleaner';
 import sourceMaps from 'rollup-plugin-sourcemaps';