chore: Add tests for babel-preset-global-context (#23453)

* chore: Add tests for babel-preset-global-context

Following #23435, adds an extended cypress config in
babel-preset-global-context with tests.

* add pre script to build

* scope babel-prest-global-context

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

@@ -0,0 +1,36 @@
+import { defineConfig } from 'cypress';
+import { Configuration } from 'webpack';
+import baseConfig from '@fluentui/scripts/cypress.config';
+
+/**
+ * Extends the base cypress webpack config to add the babel preset
+ * to be tested
+ */
+const webpackConfigWithBabelPreset = () => {
+  const baseDevServerConfig = baseConfig.component.devServer;
+  if (typeof baseDevServerConfig === 'object' && baseDevServerConfig.bundler === 'webpack') {
+    const baseWebpackConfig = baseDevServerConfig.webpackConfig as Configuration;
+
+    baseWebpackConfig.module.rules.unshift({
+      test: /\.(ts|tsx)$/,
+      loader: 'babel-loader',
+      include: [/fake_node_modules\/context-*/],
+      options: {
+        presets: ['@fluentui/babel-preset-global-context'],
+      },
+    });
+  }
+};
+
+defineConfig({
+  ...baseConfig,
+  component: {
+    ...baseConfig.component,
+    devServer: {
+      bundler: 'webpack',
+      framework: 'react',
+      webpackConfig: webpackConfigWithBabelPreset(),
+    },
+  },
+});
+export default baseConfig;

packages/react-components/babel-preset-global-context/e2e/Test.e2e.tsx

@@ -0,0 +1,96 @@
+/*
+ * These tests are run with the specific cypress.config.ts file
+ * in this project in order to consume @fluentui/babel-preset-global-context during bundling
+ */
+
+import * as React from 'react';
+import { mount } from '@cypress/react';
+import { ProviderContext as ProviderContextV1 } from './fake_node_modules/context-v1.0.0';
+import { ProviderContext as ProviderContextV11 } from './fake_node_modules/context-v1.1.0';
+import { ProviderContext as ProviderContextV2 } from './fake_node_modules/context-v2.0.0';
+
+import { ProviderContext as IgnoredContextV1 } from './fake_node_modules/ignored-context-v1.0.0';
+import { ProviderContext as IgnoredContextV11 } from './fake_node_modules/ignored-context-v1.1.0';
+
+describe('babel-preset-global-context', () => {
+  describe('targeted packages', () => {
+    const v1Foo = 'v1-foo';
+    const v1Bar = 'v1-bar';
+    const v2Bar = 'v2-bar';
+
+    function Consumer() {
+      const ctx = React.useContext(ProviderContextV1);
+      const ctxV11 = React.useContext(ProviderContextV11);
+      const ctxV2 = React.useContext(ProviderContextV2);
+      return (
+        <>
+          <div className={v1Foo}>{ctx.foo}</div>
+          <div className={v1Bar}>{ctx.bar}</div>
+          <div className={v1Foo}>{ctxV11.foo}</div>
+          <div className={v1Bar}>{ctxV11.bar}</div>
+          <div className={v2Bar}>{ctxV2.bar}</div>
+        </>
+      );
+    }
+
+    function Example() {
+      return (
+        <ProviderContextV1.Provider value={{ foo: 'red', bar: 'blue' }}>
+          <ProviderContextV2.Provider value={{ bar: 'white', baz: 'black' }}>
+            <Consumer />
+          </ProviderContextV2.Provider>
+        </ProviderContextV1.Provider>
+      );
+    }
+
+    it('Contexts in the same major should have the same values', () => {
+      mount(<Example />);
+      cy.get(`.${v1Foo}`).each($el => {
+        expect($el.text()).equals('red');
+      });
+      cy.get(`.${v1Bar}`).each($el => {
+        expect($el.text()).equals('blue');
+      });
+    });
+
+    it('Contexts between different majors should have different values', () => {
+      mount(<Example />);
+      cy.get(`.${v1Bar}`).each($el => {
+        expect($el.text()).equals('blue');
+      });
+
+      cy.get(`.${v2Bar}`).each($el => {
+        expect($el.text()).equals('white');
+      });
+    });
+  });
+
+  // The contexts used in these tests should be ignored by babel preset
+  // configured in cypress.config.ts
+  describe('untargeted packages', () => {
+    const v1Foo = 'v1-foo';
+
+    function Consumer() {
+      const ctx = React.useContext(IgnoredContextV1);
+      const ctxV11 = React.useContext(IgnoredContextV11);
+      return (
+        <>
+          <div className={v1Foo}>{ctx.foo}</div>
+          <div className={v1Foo}>{ctxV11.foo}</div>
+        </>
+      );
+    }
+
+    function Example() {
+      return (
+        <IgnoredContextV1.Provider value={{ foo: 'red' }}>
+          <Consumer />
+        </IgnoredContextV1.Provider>
+      );
+    }
+    it('Contexts should have different values', () => {
+      mount(<Example />);
+      cy.get(`.${v1Foo}`).first().should('have.text', 'red').get(`.${v1Foo}`).eq(1).should('have.text', 'foo');
+    });
+  });
+});

packages/react-components/babel-preset-global-context/e2e/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": false,
+    "types": ["node", "cypress", "cypress-storybook/cypress", "cypress-real-events"],
+    "lib": ["ES2019", "dom"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}

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

@@ -14,6 +14,9 @@
     "build": "just-scripts build --commonjs",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
+    "pree2e": "yarn build",
+    "e2e": "yarn cypress run --component",
+    "e2e:local": "yarn cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",