Basic Cypress configuration

.eslintrc.js

@@ -23,6 +23,14 @@ module.exports = {
         'react/prop-types': 'off',
       },
     },
+    {
+      files: ['cypress/**/*.ts', 'cypress/**/*.tsx'],
+      parser: '@typescript-eslint/parser',
+      plugins: ['jest'],
+      rules: {
+        'jest/expect-expect': 'off',
+      },
+    },
   ],
   rules: {
     'sort-imports': [

.gitignore

@@ -25,3 +25,8 @@ yalc.lock
 .env
 .cache
 .swc
+
+# cypress output
+.cypress-cache
+cypress/screenshots
+.nyc_output

config/webpack.cy.config.js

@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { ModuleFederationPlugin } = require('webpack').container;
+// eslint-disable-next-line rulesdir/disallow-fec-relative-imports
+import config from '@redhat-cloud-services/frontend-components-config';
+
+const JSConfig = {
+  module: {
+    rules: [
+      {
+        test: /\.(js|ts)x?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'swc-loader',
+          options: {
+            jsc: {
+              experimental: {
+                plugins: [
+                  [
+                    'swc-plugin-coverage-instrument',
+                    {
+                      compact: false,
+                    },
+                  ],
+                ],
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                },
+              },
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+            },
+          },
+        },
+      },
+      {
+        test: /\.s?[ac]ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'bundle.js',
+    hashFunction: 'xxhash64',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  cache: {
+    type: 'filesystem',
+    buildDependencies: {
+      config: [__filename],
+    },
+    cacheDirectory: path.resolve(__dirname, '../.cypress-cache'),
+  },
+  stats: {
+    errorDetails: true,
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash].css',
+    }),
+  ],
+};
+
+const { config: webpackConfig, plugins } = config({
+  rootFolder: path.resolve(__dirname, '../'),
+});
+
+module.exports = {
+  ...JSConfig,
+  ...webpackConfig,
+  plugins: [
+    ...plugins,
+    new ModuleFederationPlugin({
+      name: 'notifications',
+      filename: 'notifications.js',
+      shared: [
+        { react: { singleton: true, eager: true } },
+        { 'react-dom': { singleton: true, eager: true } },
+        { 'react-router-dom': { singleton: true } },
+        { '@patternfly/react-core': {} },
+      ],
+    }),
+  ],
+};

cypress.config.ts

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  component: {
+    specPattern: 'cypress/component/**/*.cy.{js,jsx,ts,tsx}',
+    excludeSpecPattern: ['/snapshots/*', '/image_snapshots/*', '/src/*'],
+    setupNodeEvents(on, config) {
+      on('before:browser:launch', (browser, launchOptions) => {
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          launchOptions.args.push('--window-size=1280,720');
+
+          // force screen to be non-retina
+          launchOptions.args.push('--force-device-scale-factor=1');
+        }
+
+        if (browser.name === 'electron' && browser.isHeadless) {
+          // fullPage screenshot size is 1280x720
+          launchOptions.preferences.width = 1280;
+          launchOptions.preferences.height = 720;
+        }
+      });
+      require('@cypress/code-coverage/task')(on, config);
+      config.port = 8002;
+      return config;
+    },
+    video: false,
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+      webpackConfig: require('./config/webpack.cy.config.js'),
+    },
+  },
+  e2e: {
+    blockHosts: ['consent.trustarc.com'],
+    baseUrl: 'https://stage.foo.redhat.com:1337',
+    env: {
+      E2E_USER: process.env.E2E_USER,
+      E2E_PASSWORD: process.env.E2E_PASSWORD,
+    },
+    // To avoid any flaky issues we set the timeouts to be extra gracious
+    // Slow tests are faster than rerunning flaky tests
+    defaultCommandTimeout: 60000,
+    requestTimeout: 60000,
+    // required for the redirects to work correctly due to a chromium issue
+    userAgent:
+      'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36',
+    screenshotOnRunFailure: false,
+    // required for the SSO redirect
+    chromeWebSecurity: false,
+    video: false,
+    setupNodeEvents(on, config) {
+      require('cypress-localstorage-commands/plugin')(on, config);
+      return config;
+      // implement node event listeners here
+    },
+  },
+});