Merge pull request #121 from InetIntel/116-setup-testing

116: setup testing

Author: salcock

assets/js/Ioda/components/cards/ChartTabCard.test.js

@@ -0,0 +1,17 @@
+import '@testing-library/dom'
+import '@testing-library/jest-dom/extend-expect';
+import React from 'react'
+import { render, act, screen } from '@testing-library/react'
+import ChartTabCard from './ChartTabCard'
+import { HashRouter } from "react-router-dom";
+
+jest.mock('./ChartLegendCard', () => () => <div>ChartLegendCard</div>)
+const ChartTabCardWrapper = () => <HashRouter><ChartTabCard /></HashRouter>
+
+describe('ChartTabChart', () => {
+  it('is fine', async () => {
+   render(<ChartTabCardWrapper />)
+
+    expect(screen.getByText('ChartLegendCard')).toBeInTheDocument()
+  })
+})

babel.config.js

@@ -0,0 +1,17 @@
+module.exports = function (api) {
+  const presets = ["@babel/preset-react", "@babel/preset-env"];
+  const plugins = [
+    "transform-class-properties",
+    "syntax-dynamic-import",
+    "@babel/plugin-proposal-object-rest-spread",
+    "istanbul",
+  ];
+
+  // Cache the Babel configuration based on the environment
+  api.cache.using(() => process.env.NODE_ENV);
+
+  return {
+    presets,
+    plugins,
+  };
+};

jest-puppeteer.config.js

@@ -0,0 +1,10 @@
+// jest-puppeteer.config.cjs
+
+/** @type {import('jest-environment-puppeteer').JestPuppeteerConfig} */
+module.exports = {
+  launch: {
+    headless: "new",
+    product: "chrome",
+  },
+  browserContext: "default",
+};

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  moduleFileExtensions: ["js", "jsx", "json", "node"],
+  preset: "jest-puppeteer",
+  testEnvironment: "jsdom",
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.jsx?$",
+  transform: {
+    "\\.[jt]sx?$": "babel-jest",
+  },
+};
+

karma.conf.js

@@ -29,4 +29,4 @@ module.exports = function (config) {
             type: 'text'
         }
     });
-};
+};

package.json

@@ -2,21 +2,27 @@
     "devDependencies": {
         "@babel/core": "^7.20.7",
         "@babel/eslint-parser": "^7.19.1",
+        "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
         "@babel/preset-react": "^7.18.6",
         "@symfony/webpack-encore": "^0.30.2",
+        "@testing-library/jest-dom": "5.11.6",
+        "@testing-library/react": "12.1.0",
         "autoprefixer": "^9.8.4",
         "babel-cli": "^6.26.0",
         "babel-plugin-istanbul": "^5.0.1",
         "babel-plugin-syntax-dynamic-import": "^6.18.0",
         "babel-plugin-transform-class-properties": "^6.24.1",
-        "babel-plugin-transform-object-rest-spread": "^6.26.0",
         "babel-polyfill": "^6.26.0",
         "babel-preset-env": "^1.7.0",
         "babel-preset-react": "^6.24.1",
         "babel-register": "^6.26.0",
         "chai": "^4.2.0",
         "copy-webpack-plugin": "^4.5.4",
         "es-check": "^6.0.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "jest-image-snapshot": "^6.4.0",
+        "jest-puppeteer": "^10.0.1",
         "karma": "^3.0.0",
         "karma-chai": "^0.1.0",
         "karma-chrome-launcher": "^2.2.0",
@@ -26,6 +32,8 @@
         "node-sass": "^8.0.0",
         "npm-run-all": "^4.1.5",
         "postcss-cli": "^7.1.1",
+        "puppeteer": "19",
+        "puppeteer-core": "19",
         "sass-lint-auto-fix": "^0.21.2",
         "yaml-loader": "^0.6.0"
     },
@@ -42,9 +50,7 @@
         "prefix:sass": "postcss --use autoprefixer -b \"last 10 versions\" assets/css/style.comp.css -o assets/css/style.prefix.css",
         "compress:css": "node-sass assets/css/style.prefix.css assets/css/style.css --output-style compressed",
         "build:css": "npm-run-all compile:sass prefix:sass compress:css",
-        "test": "karma start --browsers FirefoxHeadless",
-        "test:full": "karma start",
-        "test:watch": "karma start --auto-watch --no-single-run --browsers FirefoxHeadless",
+        "test": "jest",
         "lint": "sass-lint -v",
         "test:es-check": "es-check es5 'assets/js/Ioda/*.js'",
         "sitemap": "babel-node assets/js/Ioda/constants/sitemap/Generator.js"

templates/ioda.html.twig

@@ -47,6 +47,7 @@
                 <img width="180" src="/apple-touch-icon.png" alt="IODA logo" />
             </div>
         </div>
+        <script src="{{ asset('build/runtime.js') }}"></script>
         <script>
             const div = document.querySelector('.contentLoading');
             /* documentMode is an IE-only property */

webpack.config.js

@@ -49,6 +49,12 @@ Encore
     // enables React support
     .enableReactPreset()
 
+    /*
+     * Makes webpack consolidate the runtime logic into a single runtime chunk rather
+     * than creating a separate runtime chunk for each entry chunk.
+     */
+    .enableSingleRuntimeChunk()
+
     // enables Sass/SCSS support
     //.enableSassLoader()
 
@@ -58,12 +64,7 @@ Encore
     // uncomment if you're having problems with a jQuery plugin
     //.autoProvidejQuery()
 
-    .configureBabel(function (babelConfig) {
-        babelConfig.plugins.push('transform-class-properties');
-        babelConfig.plugins.push('syntax-dynamic-import');
-        babelConfig.plugins.push('transform-object-rest-spread');
-        babelConfig.plugins.push('istanbul');
-    })
+    .configureBabel()
 ;
 
 let webpackConfig = Encore.getWebpackConfig();