Skip to content

Commit 625ced5

Browse files
InsaneZeinInsaneZein
authored
adds config for cypress component tests (#130)
* adds config for cypress component tests * update cypress build command * fix cypress script name * revert change
1 parent b97c9db commit 625ced5

File tree

9 files changed

+474
-7
lines changed

9 files changed

+474
-7
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ tsc_out
77
.DS_Store
88
coverage
99
.cache
10+
.cypress-cache
11+
results
1012
.tmp
1113
.eslintcache
1214
generated

‎config/webpack.cy.config.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
const path = require('path');
2+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3+
4+
/** @type { import("webpack").Configuration } */
5+
const JSConfig = {
6+
module: {
7+
rules: [
8+
{
9+
test: /\.(js|ts)x?$/,
10+
exclude: /node_modules/,
11+
use: {
12+
loader: 'swc-loader',
13+
options: {
14+
jsc: {
15+
parser: {
16+
syntax: 'typescript',
17+
tsx: true,
18+
},
19+
},
20+
},
21+
},
22+
},
23+
{
24+
test: /\.s?[ac]ss$/,
25+
use: [
26+
MiniCssExtractPlugin.loader,
27+
'css-loader',
28+
{
29+
loader: 'sass-loader',
30+
options: {
31+
sourceMap: true,
32+
},
33+
},
34+
],
35+
},
36+
{
37+
test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
38+
type: 'asset/resource',
39+
},
40+
],
41+
},
42+
resolve: {
43+
extensions: [ '.tsx', '.ts', '.js' ],
44+
},
45+
output: {
46+
filename: 'bundle.js',
47+
hashFunction: 'xxhash64',
48+
path: path.resolve(__dirname, 'dist'),
49+
},
50+
cache: {
51+
type: 'filesystem',
52+
buildDependencies: {
53+
config: [ __filename ],
54+
},
55+
cacheDirectory: path.resolve(__dirname, '../.cypress-cache'),
56+
},
57+
stats: {
58+
errorDetails: true,
59+
},
60+
plugins: [
61+
new MiniCssExtractPlugin({
62+
filename: '[name].[contenthash].css',
63+
}),
64+
],
65+
};
66+
67+
module.exports = JSConfig;

‎cypress.config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,11 @@ export default defineConfig({
1111
toConsole: true
1212
},
1313
},
14+
component: {
15+
devServer: {
16+
framework: "react",
17+
bundler: "webpack",
18+
webpackConfig: require('./config/webpack.cy.config.js'),
19+
}
20+
}
1421
});

‎cypress/component/CloseButton.cy.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import CloseButton from '../../packages/module/dist/dynamic/CloseButton';
3+
4+
describe('CloseButton', () => {
5+
it('renders the Close button', () => {
6+
/* eslint-disable no-console */
7+
cy.mount(<CloseButton dataTestID="close-button-example" onClick={()=>{console.log('Close button clicked')}} style={{ float: 'none' }}/>)
8+
cy.get('[data-test-id="close-button-example"]').should('exist');
9+
})
10+
})

‎cypress/support/component-index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title>Components App</title>
8+
</head>
9+
<body>
10+
<div data-cy-root></div>
11+
</body>
12+
</html>

‎cypress/support/component.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/* eslint-disable @typescript-eslint/no-namespace */
2+
// ***********************************************************
3+
// This example support/component.ts is processed and
4+
// loaded automatically before your test files.
5+
//
6+
// This is a great place to put global configuration and
7+
// behavior that modifies Cypress.
8+
//
9+
// You can change the location of this file or turn off
10+
// automatically serving support files with the
11+
// 'supportFile' configuration option.
12+
//
13+
// You can read more here:
14+
// https://on.cypress.io/configuration
15+
// ***********************************************************
16+
17+
// Import commands.js using ES2015 syntax:
18+
import './commands'
19+
20+
// Alternatively you can use CommonJS syntax:
21+
// require('./commands')
22+
23+
import { mount } from 'cypress/react18'
24+
25+
// Patternfly
26+
import '@patternfly/patternfly/patternfly.css';
27+
// Patternfly utilities
28+
import '@patternfly/patternfly/patternfly-addons.css';
29+
// Global theme CSS
30+
import '@patternfly/documentation-framework/global.css';
31+
32+
// Augment the Cypress namespace to include type definitions for
33+
// your custom command.
34+
// Alternatively, can be defined in cypress/support/component.d.ts
35+
// with a <reference path="./component" /> at the top of your spec.
36+
declare global {
37+
namespace Cypress {
38+
interface Chainable {
39+
mount: typeof mount
40+
}
41+
}
42+
}
43+
44+
Cypress.Commands.add('mount', mount)
45+
46+
// Example use:
47+
// cy.mount(<MyComponent />)

‎cypress/support/tsconfig.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"compilerOptions": {
3+
"sourceMap": false,
4+
"noImplicitAny": true,
5+
"module": "esnext",
6+
"target": "esnext",
7+
"jsx": "react",
8+
"moduleResolution": "node",
9+
"removeComments": false,
10+
"strict": true,
11+
"allowSyntheticDefaultImports": true,
12+
"esModuleInterop": true,
13+
"forceConsistentCasingInFileNames": true,
14+
"resolveJsonModule": true,
15+
"baseUrl": "./",
16+
"types": ["cypress", "node"]
17+
},
18+
"include": ["./**/*.ts", "./**/*.tsx"],
19+
"exclude": [
20+
"../src/**/*.test.ts",
21+
"../src/**/*.test.tsx",
22+
"../src/**/*.spec.tsx",
23+
"../src/**/*.spec.ts",
24+
"../src/**/__mocks__/**/*.ts",
25+
"../src/**/__mocks__/**/*.tx",
26+
]
27+
}

0 commit comments

Comments
 (0)