Fux cypress after PF upgrades.

.gitignore

@@ -33,3 +33,4 @@ lerna-debug.log
 packages/**/package-lock.json
 packages/**/.cache
 *.tgz
+!/packages/*/cypress/

package.json

@@ -65,6 +65,8 @@
         "@patternfly/react-core": "^5.0.0",
         "@patternfly/react-icons": "^5.0.0",
         "@patternfly/react-table": "^5.0.0",
+        "@simonsmith/cypress-image-snapshot": "^8.0.2",
+        "@swc/core": "^1.3.74",
         "@testing-library/dom": "^8.18.1",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^14.0.0",
@@ -110,6 +112,7 @@
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.55.0",
         "style-to-object": "^0.3.0",
+        "swc-loader": "^0.2.3",
         "ts-jest": "^29.1.1",
         "typescript": "^4.8.4",
         "whatwg-fetch": "^3.6.2"

packages/advisor-components/.gitignore

@@ -24,6 +24,7 @@
 !cypress
 !cypress/*
 !.eslintrc
+!cypress.config.js
 
 # Incremental ts info
 tsconfig.tsbuildinfo

packages/advisor-components/README.md

@@ -20,12 +20,12 @@ This package is dependent on [@redhat-cloud-services/frontend-components](https:
 
 Run cypress component tests in terminal:
 ```bash
-npx cypress run-ct
+npx cypress run --component
 ```
 
 Run cypress components tests in the interactive (window) mode:
 ```bash
-npx cypress open-ct
+npx cypress open --component
 ```
 
 ## Documentation Links

packages/advisor-components/cypress.config.js

@@ -0,0 +1,34 @@
+const { defineConfig } = require('cypress')
+const { addMatchImageSnapshotPlugin } = require('@simonsmith/cypress-image-snapshot/plugin');
+
+/** @type {import('cypress').defineConfig} */
+module.exports = defineConfig({
+  component: {
+    specPattern: "src/**/*.spec.ct.{js,ts,jsx,tsx}",
+    viewportHeight: 660,
+    viewportWidth: 1000,
+    video: false,
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+      webpackConfig: require('./cypress/cypress.webpack.config')
+    },
+    setupNodeEvents(on, config) {
+      addMatchImageSnapshotPlugin(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;
+        }
+      });
+    },
+  }
+})

packages/advisor-components/cypress/cypress.webpack.config.js

@@ -1,29 +1,62 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
+const { createJoinFunction, createJoinImplementation, asGenerator, defaultJoinGenerator } = require('resolve-url-loader');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+// call default generator then pair different variations of uri with each base
+const myGenerator = asGenerator((item, ...rest) => {
+  const defaultTuples = [...defaultJoinGenerator(item, ...rest)];
+  if (item.uri.includes('./assets')) {
+    return defaultTuples.map(([base]) => {
+      if (base.includes('@patternfly/patternfly')) {
+        return [base, path.relative(base, path.resolve(__dirname, '../node_modules/@patternfly/patternfly', item.uri))];
+      }
+    });
+  }
+  return defaultTuples;
+});
 
 module.exports = {
-  entry: '../src/index.ts',
   module: {
     rules: [
       {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.jsx?$/,
+        test: /\.(js|ts)x?$/,
         exclude: /node_modules/,
         use: {
-          loader: 'babel-loader',
-        }
+          loader: 'swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+            },
+          },
+        },
       },
       {
         test: /\.s?[ac]ss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'resolve-url-loader',
+            options: {
+              join: createJoinFunction('myJoinFn', createJoinImplementation(myGenerator)),
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
       },
       {
-        test: /\.(png|svg|jpg|jpeg)/,
-        type: 'asset/resource'
-      }
+        test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
+        type: 'asset/resource',
+      },
     ],
   },
   resolve: {
@@ -37,6 +70,22 @@ module.exports = {
   },
   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].[fullhash].css',
+    }),
+  ],
 };

packages/advisor-components/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

packages/advisor-components/cypress/support/component.js

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable prettier/prettier */
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+import '@patternfly/patternfly/patternfly.css';
+import '@patternfly/patternfly/patternfly-addons.css';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react'
+const { addMatchImageSnapshotCommand,  } = require('@simonsmith/cypress-image-snapshot/command');
+
+// configure the matcher to be less precise to adjust between the headless and normal browser rendering differences
+addMatchImageSnapshotCommand({
+  failureThreshold: 0.03, // threshold for entire image
+  failureThresholdType: 'percent', // percent of image or number of pixels
+  customDiffConfig: { threshold: 0.1 }, // threshold for each pixel
+  capture: 'viewport', // capture viewport in screenshot
+});
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)

packages/advisor-components/package.json

@@ -14,8 +14,8 @@
         "build:css": "node ../../scripts/build-styles.js",
         "build:packages": "node ../../scripts/build-packages.js --forceTypes",
         "start": "concurrently \"npm run build:esm -- --watch\" \"npm run build:js -- --watch\" \"npm run build:css -- --watch\"",
-        "test:ct": "cypress run-ct",
-        "test:openct": "cypress open-ct"
+        "test:ct": "cypress run --component",
+        "test:openct": "cypress open --component"
     },
     "repository": {
         "type": "git",

packages/advisor-components/src/ReportDetails/ReportDetails.spec.ct.js

@@ -18,7 +18,7 @@ describe('report details: kba loaded', () => {
   });
 
   it('renders component and matches screenshot', () => {
-    cy.get(ROOT).matchImage({
+    cy.get(ROOT).matchImageSnapshot({
       maxDiffThreshold: 0.5,
     });
   });
@@ -29,7 +29,7 @@ describe('report details: kba loaded', () => {
   });
 
   it('each header has an icon', () => {
-    cy.get('.pf-v5-c-card__header > .ins-c-report-details__icon').should('have.length', HEADERS.length);
+    cy.get('.pf-v5-c-card__header-main > .ins-c-report-details__icon').should('have.length', HEADERS.length);
   });
 
   it('links have an icon', () => {

packages/components/.gitignore

@@ -20,6 +20,8 @@
 !tsconfig.json
 !pre-publish.js
 !tsconfig.*
+!cypress.config.js
+!cypress/support/component.js
 
 # Incremental ts info
 tsconfig.tsbuildinfo

packages/components/.npmignore

@@ -8,3 +8,5 @@ doc/
 config/
 tsconfig.json
 pre-publish.js
+.cypress-cache/
+cypress/

packages/components/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-    extends: '../../babel.config.js'
-};

packages/components/cypress.config.js

@@ -0,0 +1,16 @@
+const { defineConfig } = require('cypress')
+
+/** @type {import('cypress').defineConfig} */
+module.exports = defineConfig({
+  component: {
+    specPattern: "src/**/*.spec.ct.{js,ts,jsx,tsx}",
+    viewportHeight: 660,
+    viewportWidth: 1000,
+    video: false,
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+      webpackConfig: require('./cypress/cypress.webpack.config')
+    }
+  }
+})