feat: implement testing framework (strimzi#33)

* feat: implement testing framework

 - Jest/cucumber for TDD and BDD
 - Cypress/cucumber for E2E
 - All in typescript

Closes: strimzi#27

Signed-off-by: Jordan <[email protected]>

* fix: manually point storybook to correct core-js

Signed-off-by: Jordan <[email protected]>

* fix: address review comments

Signed-off-by: Jordan <[email protected]>

* refactor: move e2e failure output to e2e folder

Signed-off-by: Jordan <[email protected]>

* feat: file restructure

Signed-off-by: Jordan <[email protected]>

* refactor: restructure of all utility/config/tooling files

Signed-off-by: Jordan <[email protected]>

* fix: update links in test doc

Signed-off-by: Jordan <[email protected]>

* refactor: javascript purge

Signed-off-by: Jordan <[email protected]>

.gitignore

@@ -8,6 +8,8 @@ dist/
 
 # test/supporting generated content
 generated/
+coverage/
+e2e/failure_output
 
 # misc
 .history

.prettierignore

@@ -1 +1 @@
-utils/linting/.prettierignore
+linting/.prettierignore

.storybook/main.js

@@ -4,6 +4,7 @@
  */
 
 const devWebpackConfig = require('../utils/build/webpack.dev.js');
+const path = require('path');
 
 module.exports = {
   stories: ['../client/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -33,7 +34,15 @@ module.exports = {
       alias: {
         ...devWebpackConfig.resolve.alias,
         ...storybookWebpackConfig.resolve.alias,
+        // storybook can accidentally pick up other versions of core-js brought in
+        // by other modules. This makes sure it only ever uses the version it's
+        // expecting to exist. Issue: https://github.com/storybookjs/storybook/issues/11255
+        'core-js/modules': path.resolve(
+          __dirname,
+          '..',
+          'node_modules/storybook/node_modules/core-js/modules'
+        ),
       },
-    },
+    }
   }),
 };

README.md

@@ -39,4 +39,4 @@ Further details around how this UI is implemented can be found below:
 - [Build](./docs/Build.md)
 - [Linting](./docs/Linting.md)
 - [Test](./docs/Test.md)
-- [Contribution](./docs/Contribution.md)
+- [Contribution](./docs/Contribution.md)

utils/build/README.md → build/README.md

@@ -1,6 +1,6 @@
 # Build
 
-This directory contains code relating to the building of the UI at dev and production build time. [Full details on how the build has been set up can be found here.](../../docs/Build.md). The intent is as much configuration is shared as possible from `webpack.common.js`, and the function it exports, `returnBasicConfigMergedWith`. This allows the various build modes to define (in an additive manner) just the configuration they need to, thus keeping the configuration purposeful/readable both in that file, and in common. If a new build mode is added, it should follow the form set by the `webpack.dev.js` and `webpack.prod.js`.
+This directory contains code relating to the building of the UI at dev and production build time. [Full details on how the build has been set up can be found here.](../docs/Build.md). The intent is as much configuration is shared as possible from `webpack.common.js`, and the function it exports, `returnBasicConfigMergedWith`. This allows the various build modes to define (in an additive manner) just the configuration they need to, thus keeping the configuration purposeful/readable both in that file, and in common. If a new build mode is added, it should follow the form set by the `webpack.dev.js` and `webpack.prod.js`.
 
 ## Files
 

utils/build/babelPresets.js → build/babelPresets.js

@@ -17,4 +17,5 @@ module.exports = [
       },
     },
   ],
+  ['@babel/preset-react'],
 ];

utils/build/webpack.common.js → build/webpack.common.js

@@ -3,17 +3,17 @@
  * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
  */
 const path = require('path');
-const { webpackAliases } = require('../aliasHelper.js');
-const { PRODUCTION, DEVELOPMENT } = require('../constants.js');
+const { webpackAliases } = require('../utils/tooling/aliasHelper.js');
+const { PRODUCTION, DEVELOPMENT } = require('../utils/tooling/constants.js');
 const babelPresets = require('./babelPresets.js');
 
 // constants
 const UI_TITLE = 'Strimzi UI';
-const BUILD_DIR = path.resolve(__dirname, '../../dist');
-const GENERATED_DIR = path.resolve(__dirname, '../../generated');
+const BUILD_DIR = path.resolve(__dirname, '../dist');
+const GENERATED_DIR = path.resolve(__dirname, '../generated');
 const BUNDLE_ANALYSER_DIR = `${GENERATED_DIR}/bundle-analyser/`;
-const BOOTSTRAP_DIR = path.resolve(__dirname, '../../client/Bootstrap/');
-const IMAGES_DIR = path.resolve(__dirname, '../../client/Images');
+const BOOTSTRAP_DIR = path.resolve(__dirname, '../client/Bootstrap/');
+const IMAGES_DIR = path.resolve(__dirname, '../client/Images');
 
 // common plugin imports/functions to wrap them with common default config
 const HtmlPlugin = require('html-webpack-plugin');

utils/build/webpack.prod.js → build/webpack.prod.js

@@ -16,7 +16,7 @@ const {
   moduleLoaders,
   CONSTANTS,
 } = require('./webpack.common.js');
-const { STRIMZI_HEADER } = require('../constants.js');
+const { STRIMZI_HEADER } = require('../utils/tooling/constants.js');
 const {
   withStylingModuleLoader,
   withJSModuleLoader,

commitlint.config.js

@@ -1 +1 @@
-utils/linting/commitlint.config.js
+linting/commitlint.config.js

cypress-cucumber-preprocessor.config.js

@@ -0,0 +1 @@
+e2e/cypress-cucumber-preprocessor.config.js

docs/Test.md

@@ -48,14 +48,16 @@ test assets, such as `describe`, `it` and `expect`:
 ### Behavioural Driven Development
 
 Code in the following directories are expected to be driven by behavioural
-driven deveopment. They use _Jest_ as a test runner, using standard Jest test
-assets, such as `describe`, `it` and `expect`, and _RTL_ to mount and interact
-with React component code:
+driven development. They use _Jest_ as a test runner, with _jest-cucumber-fusion_
+to link jest and cucumber. Jest `expects` and all aspects of `RTL` can still be
+used to test React code:
 
 - `client/Elements`
 - `client/Groups`
 - `client/Panels`
 
+Common step definitions should be defined in `test_common/jest_cucumber_support/common_stepdefs.ts`.
+
 ### Server Testing
 
 The strimzi-ui server should be tested from outside the server, as a user would
@@ -87,7 +89,7 @@ syntax. Your `.feature` file should live inside `e2e/features`. The steps are
 written inside `e2e/features/step_definitions`. Definition files are written using
 [cypress-cucumber-preprocessor](https://github.com/TheBrainFamily/cypress-cucumber-preprocessor).
 
-On failure - the `failure_output/screenshots` and `failure_output/videos`
+On failure - the `e2e/failure_output/screenshots` and `e2e/failure_output/videos`
 directories will contain a capture of the page at failure time, and a
 recordings of the test until failure.
 
@@ -120,7 +122,7 @@ To be discussed at https://github.com/strimzi/strimzi-ui/issues/20
 ## Test tooling used
 
 The current set of tooling used to implement tests can be found below. In
-addition to this set, a library of [test utilities exist](../src/TestUtils/README.md)
+addition to this set, a library of [test utilities exist](../utils/test/README.md)
 to help enable the fast and reliable creation and maintaince of tests going
 forwards.
 
@@ -141,4 +143,4 @@ function signatures that are well documented. Once implemented these should
 not be changed so that function complexity does not grow. If additional behaviour
 is required later on, these should be extended through new utility functions.
 
-View all test utily documentation [here](../utils/test/README.md).
+View all test utility documentation [here](../test_common/README.md).

e2e/cypress-cucumber-preprocessor.config.js

@@ -0,0 +1,7 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+module.exports = {
+  stepDefinitions: 'e2e/features/step_definitions',
+};

e2e/cypress.json

@@ -0,0 +1,10 @@
+{
+  "baseUrl": "http://localhost:8080",
+  "screenshotsFolder": "e2e/failure_output/screenshots",
+  "videosFolder": "e2e/failure_output/videos",
+  "integrationFolder": "e2e/features",
+  "fixturesFolder": "e2e/fixtures",
+  "supportFile": "e2e/support/index.ts",
+  "pluginsFile": "e2e/plugins/index.ts",
+  "testFiles": "**/*.feature"
+}

e2e/features/README.md

@@ -1,3 +1,3 @@
 # Cypress features
 
-This directory is home to all `.feature` file. Each file should focus on a specific area of testing, but not as specific as particular components. All step definitions for these features go in the `step_definition` directory. Where possible, step definitions should be as generic and re-usable as possible.
+This directory is home to all Cypress `.feature` files. Each feature should focus on a suite of scenarios for testing - but not for testing specific components. All step definitions for these features go in the `step_definitions` directory. Where possible, step definitions should be as generic and re-usable as possible.

e2e/plugins/README.md

@@ -1,4 +1,4 @@
 # Cypress Plugins
 
-This directory holds an `index.js` file that Cypress uses to load any plugins for e2e tests. If a new plugin is installed,
+This directory holds an `index.ts` file that Cypress uses to load any plugins for e2e tests. If a new plugin is installed,
 this is where it will need to be set up. See [Cypress plugins](https://docs.cypress.io/guides/tooling/plugins-guide.html).

e2e/plugins/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+import cucumber from 'cypress-cucumber-preprocessor';
+
+module.exports = (on: Function) => {
+  const options = {
+    typescript: require.resolve('typescript'),
+  };
+
+  on('file:preprocessor', cucumber(options));
+};

e2e/support/README.md

@@ -1,3 +1,3 @@
 # Cypress support
 
-This directory contains an `index.js` file that will run before every Cypress features. This can be useful for having global commands or setup that needs to be run before any test. See [Cypress support file](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Support-file).
+This directory contains an `index.ts` file that will run before every Cypress features. This can be useful for having global commands or setup that needs to be run before any test. See [Cypress support file](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Support-file).

e2e/support/index.ts

@@ -0,0 +1,4 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */

e2e/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["cypress", "node"]
+  }
+}

husky.config.js

@@ -1 +1 @@
-utils/linting/husky.config.js
+linting/husky.config.js

utils/linting/.prettierignore → linting/.prettierignore

@@ -3,4 +3,7 @@
 # prettier ignore file - files/directories to be excluded
 dist/
 generated/
-utils/linting/.eslintignore
+coverage/
+.*
+*.txt
+*.feature

linting/README.md

@@ -0,0 +1,3 @@
+# Linting
+
+This directory contains code and configuration required to lint this codebase, as per [the linting documentation](../docs/Linting.md). Some of the tools used require configuration to exist at the root of the project. In these cases, symlinks are used to reference the actual configuration in this directory. All files in this directory are named to indicate what tool they are used with, and will contain comments to reference how they implement/enable the configuration desired.

utils/linting/eslint.config.js → linting/eslint.config.js

@@ -23,6 +23,8 @@ module.exports = {
     browser: true,
     node: true,
     es6: true,
+    'jest/globals': true,
+    'cypress/globals': true,
   },
   // extend recommended rule sets - combine with prettier config, which must go last to work properly
   extends: rulesets.concat(['prettier']),
@@ -33,7 +35,7 @@ module.exports = {
     },
     sourceType: 'module',
   },
-  plugins: ['react'],
+  plugins: ['react', 'jest', 'cypress'],
   // detect and use the version of react installed to guide rules used
   settings: {
     react: {

utils/linting/husky.config.js → linting/husky.config.js

@@ -5,7 +5,7 @@
 
 // https://github.com/typicode/husky#supported-hooks
 const config = {
-  'pre-commit': 'lint-staged --config ./utils/linting/lint-staged.config.js',
+  'pre-commit': 'lint-staged --config ./linting/lint-staged.config.js',
   'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
 };
 

utils/linting/license-check-and-add.config.json → linting/license-check-and-add.config.json

@@ -1,8 +1,8 @@
 {
-  "license": "./utils/headers/StrimziHeader.txt",
-  "ignore": [".**", ".git/**", "./utils/headers", "**.md", "**.pptx"],
+  "license": "./utils/tooling/headers/StrimziHeader.txt",
+  "ignore": [".**", ".git/**", "./utils/tooling/headers", "**.md", "**.pptx"],
   "licenseFormats": {
-    "js|css|scss": {
+    "js|ts|tsx|css|scss": {
       "prepend": "/*",
       "append": " */",
       "eachLine": {
@@ -16,7 +16,7 @@
         "prepend": " "
       }
     },
-    "dotfiles|prettierignore": {
+    "dotfiles|prettierignore|feature": {
       "eachLine": {
         "prepend": "# "
       }