chore: Bump cypress to v10 (#23435)

* chore: Bump cypress to v10

Bumps cypress to [latest major v10](https://docs.cypress.io/guides/references/changelog#10-0-0) which introduces code config (`cypress.config.ts`).

Done for both v9 and northstar.

* update CI command

* changefiles

* update package.json

* new e2e:local command

* remove cypress plugins

* update generator

* fix script types

* remove unnecessary deps

* fix changefiles

* fix gulp

change/@fluentui-react-2f53b9f6-dfb1-4bc5-bde8-648d91f1dded.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Bump cypress to v10",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-card-cb431b04-92ad-4928-ae7c-7d1fa13d8021.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Bump cypress to v10",
+  "packageName": "@fluentui/react-card",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-menu-b71dc5b0-0f29-47a4-9f8e-00e564852313.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Bump cypress to v10",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-popover-f29a77e6-85cc-40c6-b1f8-d79ce4323ef1.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Bump cypress to v10",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tabster-741540b1-91bb-4a96-9939-9c49bc6491d9.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Bump cypress to v10",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -26,14 +26,14 @@
     "check:change": "beachball check",
     "check:modified-files": "yarn workspace @fluentui/scripts just check-for-modified-files",
     "check:affected-package": "node ./scripts/monorepo/checkIfPackagesAffected.js",
-    "check:installed-dependencies-versions": "satisfied --skip-invalid --ignore \"prettier|angular|lit|sass|@storybook/web-components|@storybook/html|@storybook/mdx2-csf|svelte|@testing-library|vue|@cypress/react\"",
+    "check:installed-dependencies-versions": "satisfied --skip-invalid --ignore \"prettier|angular|lit|sass|@storybook/web-components|@storybook/html|@storybook/mdx2-csf|svelte|@testing-library|vue|@cypress/react|cypress\"",
     "clean": "lage clean --verbose",
     "code-style": "lage code-style --verbose",
     "codepen": "cd packages/react && node ../../scripts/local-codepen.js",
     "copy-notices": "node scripts/copy-notices.js",
     "create-component": "plop --plopfile ./scripts/create-component/create-component.ts --dest . --require ./scripts/ts-node-register",
     "create-package": "plop --plopfile ./scripts/create-package/plopfile.ts --dest . --require ./scripts/ts-node-register",
-    "e2e": "lage e2e --verbose --concurrency=1 --mode run",
+    "e2e": "lage e2e --verbose --concurrency=1",
     "format": "node scripts/format.js",
     "generate-version-files": "yarn workspace @fluentui/scripts just generate-version-files",
     "graph": "node ./scripts/dependency-graph-generator/index.js",
@@ -168,7 +168,7 @@
     "copy-webpack-plugin": "8.1.0",
     "cross-env": "^5.1.4",
     "css-loader": "5.0.1",
-    "cypress": "9.5.2",
+    "cypress": "10.0.3",
     "cypress-real-events": "1.7.0",
     "cypress-storybook": "0.5.1",
     "danger": "^11.0.0",

packages/fluentui/e2e/cypress.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  video: false,
+  screenshotOnRunFailure: false,
+  e2e: {
+    specPattern: './tests/**/*.spec.ts',
+  },
+  retries: {
+    runMode: 2,
+    openMode: 0,
+  },
+});

packages/fluentui/e2e/package.json

@@ -9,8 +9,6 @@
     "@fluentui/react-northstar": "^0.63.0",
     "@fluentui/react-northstar-prototypes": "^0.63.0",
     "@types/react-router-dom": "^5.1.5",
-    "cypress": "9.5.2",
-    "cypress-real-events": "1.7.0",
     "lerna-alias": "^3.0.3-0",
     "lodash": "^4.17.15",
     "react-router-dom": "^5.2.0"

packages/react-components/global-context/cypress.config.ts

@@ -0,0 +1,3 @@
+import baseConfig from '@fluentui/scripts/cypress.config';
+
+export default baseConfig;

packages/react-components/global-context/package.json

@@ -17,7 +17,8 @@
     "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
-    "e2e": "e2e",
+    "e2e": "yarn cypress run --component",
+    "e2e:local": "yarn cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",

packages/react-components/react-card/cypress.config.ts

@@ -0,0 +1,3 @@
+import baseConfig from '@fluentui/scripts/cypress.config';
+
+export default baseConfig;

packages/react-components/react-card/package.json

@@ -17,7 +17,8 @@
     "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
-    "e2e": "e2e",
+    "e2e": "yarn cypress run --component",
+    "e2e:local": "yarn cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",

packages/react-components/react-menu/cypress.config.ts

@@ -0,0 +1,3 @@
+import baseConfig from '@fluentui/scripts/cypress.config';
+
+export default baseConfig;

packages/react-components/react-menu/package.json

@@ -18,7 +18,8 @@
     "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
-    "e2e": "e2e",
+    "e2e": "yarn cypress run --component",
+    "e2e:local": "yarn cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",

packages/react-components/react-popover/cypress.config.ts

@@ -0,0 +1,3 @@
+import baseConfig from '@fluentui/scripts/cypress.config';
+
+export default baseConfig;

packages/react-components/react-popover/package.json

@@ -19,7 +19,8 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
-    "e2e": "e2e",
+    "e2e": "yarn cypress run --component",
+    "e2e:local": "yarn cypress open --component",
     "storybook": "node ../../../scripts/storybook/runner",
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",

packages/react-components/react-tabster/cypress.config.ts

@@ -0,0 +1,3 @@
+import baseConfig from '@fluentui/scripts/cypress.config';
+
+export default baseConfig;

packages/react-components/react-tabster/package.json

@@ -15,7 +15,8 @@
     "build": "just-scripts build",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
-    "e2e": "e2e",
+    "e2e": "yarn cypress run --component",
+    "e2e:local": "yarn cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "storybook": "node ../../../scripts/storybook/runner",

packages/react-examples/cypress.config.ts

@@ -0,0 +1,3 @@
+import baseConfig from '@fluentui/scripts/cypress.config';
+
+export default baseConfig;

packages/react/package.json

@@ -21,7 +21,8 @@
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "codepen": "node ../../scripts/local-codepen.js",
-    "e2e": "yarn workspace @fluentui/react-examples e2e",
+    "e2e": "yarn workspace @fluentui/react-examples cypress run --component",
+    "e2e:local": "yarn workspace @fluentui/react-examples cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "cross-env NODE_OPTIONS=--max-old-space-size=3072 just-scripts dev:storybook",

scripts/beachball/tsconfig.json

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

scripts/cypress.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig } from 'cypress';
+import { Configuration } from 'webpack';
+import * as path from 'path';
+import * as fs from 'fs';
+import * as jju from 'jju';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+import * as applyV8WebpackConfig from './storybook/webpack.config';
+
+const isLocalRun = !process.env.DEPLOYURL;
+
+export const cypressWebpackConfig = (): Configuration => {
+  const webpackConfig: Configuration = {
+    resolve: {
+      extensions: ['.js', '.ts', '.jsx', '.tsx'],
+    },
+    mode: 'development',
+    devtool: 'eval',
+    output: {
+      publicPath: '/',
+      chunkFilename: '[name].bundle.js',
+    },
+    module: {
+      rules: [],
+    },
+  };
+
+  if (path.basename(process.cwd()) === 'react-examples') {
+    // For v8, reuse the storybook webpack config helper to add required options for building v8,
+    // including the `resolve.alias` config that's currently REQUIRED to make tests re-run when a
+    // component file in @fluentui/react is modified while running in open mode.
+    // (This is different than the v9 config because v8 doesn't use tsconfig paths, so the only way
+    // it can respond to file edits is by using `resolve.alias`, which doesn't work with esbuild.)
+    applyV8WebpackConfig(webpackConfig);
+  } else {
+    // For v9, use tsconfig paths and esbuild-loader
+    const tsConfigBasePath = path.resolve(__dirname, '../tsconfig.base.json');
+    /** @type {import("../../../tools/types").TsConfig} */
+    const tsConfigBase = jju.parse(fs.readFileSync(tsConfigBasePath).toString());
+    const tsPaths = new TsconfigPathsPlugin({
+      configFile: tsConfigBasePath,
+    });
+
+    webpackConfig.resolve.plugins = [tsPaths];
+    webpackConfig.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      loader: 'esbuild-loader',
+      options: {
+        loader: 'tsx',
+        target: tsConfigBase.compilerOptions.target,
+      },
+    });
+  }
+
+  return webpackConfig;
+};
+
+export default defineConfig({
+  video: false,
+  component: {
+    specPattern: path.join(process.cwd(), '**/*.e2e.tsx'),
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+      webpackConfig: cypressWebpackConfig(),
+    },
+    supportFile: path.join(__dirname, './cypress/support/component.js'),
+    indexHtmlFile: path.join(__dirname, './cypress/support/component-index.html'),
+  },
+  retries: {
+    runMode: 2,
+    openMode: 0,
+  },
+  // Screenshots go under <pkg>/cypress/screenshots and can be useful to look at after failures in
+  // local headless runs (especially if the failure is specific to headless runs)
+  // screenshotOnRunFailure: isLocalRun && argv.mode === 'run',
+  fixturesFolder: path.join(__dirname, 'cypress/fixtures'),
+});

scripts/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 id="__cy_root"></div>
+  </body>
+</html>

scripts/gulp/plugins/gulp-cypress.ts

@@ -10,13 +10,9 @@ const cypress = (config: CypressPluginConfig) => cb => {
   process.env.NODE_ENV = 'test';
   process.env.CI = process.env.TF_BUILD ? 'true' : undefined;
 
-  const configArguments = [
-    `baseUrl=${config.serverUrl}`,
-    config.rootDir && `integrationFolder=${config.rootDir}`,
-    config.testNamePattern && `testFiles=${config.testNamePattern}`,
-  ].filter(Boolean);
+  const configArguments = [`baseUrl=${config.serverUrl}`].filter(Boolean);
 
-  const command = `./node_modules/.bin/cypress run --config ${configArguments.join(',')}`;
+  const command = `yarn cypress run --config ${configArguments.join(',')}`;
 
   console.log(command);
   return sh(command);

scripts/gulp/tasks/test-e2e.ts

@@ -40,7 +40,7 @@ task('test:e2e:run', cb => {
   const e2ePort = Number(process.env.E2E_PORT) || 8082;
   const serverUrl = `http://${serverHost}:${e2ePort}`;
 
-  return cypress({ serverUrl, rootDir: paths.e2eTests(), testNamePattern: argv.testNamePattern as string })(cb);
+  return cypress({ serverUrl })(cb);
 });
 
 task(