patternfly · fhlavac · Apr 15, 2024 · Apr 12, 2024 · Apr 12, 2024 · Apr 12, 2024
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,8 @@ tsc_out
 .DS_Store
 coverage
 .cache
+.cypress-cache
+results
 .tmp
 .eslintcache
 generated

diff --git a/config/webpack.cy.config.js b/config/webpack.cy.config.js
@@ -0,0 +1,67 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+/** @type { import("webpack").Configuration } */
+const JSConfig = {
+  module: {
+    rules: [
+      {
+        test: /\.(js|ts)x?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'swc-loader',
+          options: {
+            jsc: {
+              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',
+    }),
+  ],
+};
+
+module.exports = JSConfig;
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -11,4 +11,11 @@ export default defineConfig({
       toConsole: true
     },
   },
+  component: {
+    devServer: {
+      framework: "react",
+      bundler: "webpack",
+      webpackConfig: require('./config/webpack.cy.config.js'),
+    }
+  }
 });
diff --git a/cypress/component/CloseButton.cy.tsx b/cypress/component/CloseButton.cy.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import CloseButton from '../../packages/module/dist/dynamic/CloseButton';
+
+describe('CloseButton', () => {
+  it('renders the Close button', () => {
+    /* eslint-disable no-console */
+    cy.mount(<CloseButton dataTestID="close-button-example" onClick={()=>{console.log('Close button clicked')}} style={{ float: 'none' }}/>)
+    cy.get('[data-test-id="close-button-example"]').should('exist');
+  })
+})
diff --git a/cypress/support/component-index.html b/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>
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
@@ -0,0 +1,47 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+// ***********************************************************
+// 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'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react18'
+
+// Patternfly
+import '@patternfly/patternfly/patternfly.css';
+// Patternfly utilities
+import '@patternfly/patternfly/patternfly-addons.css';
+// Global theme CSS
+import '@patternfly/documentation-framework/global.css';
+
+// 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.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)
diff --git a/cypress/support/tsconfig.json b/cypress/support/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "sourceMap": false,
+    "noImplicitAny": true,
+    "module": "esnext",
+    "target": "esnext",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "removeComments": false,
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "baseUrl": "./",
+    "types": ["cypress", "node"]
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"],
+  "exclude": [
+    "../src/**/*.test.ts",
+    "../src/**/*.test.tsx",
+    "../src/**/*.spec.tsx",
+    "../src/**/*.spec.ts",
+    "../src/**/__mocks__/**/*.ts",
+    "../src/**/__mocks__/**/*.tx",
+  ]
+}