refactor: reorganize folder structure of React 18 tests for v9

apps/react-18-tests-v9/src/components/Dialog/Dialog.cy.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { mount as mountBase } from '@cypress/react';
+import { Dialog, DialogSurface, DialogTrigger, DialogBody, Button } from '@fluentui/react-components';
+
+import { Provider } from '../Provider/Provider';
+
+const mount = (element: JSX.Element) => {
+  mountBase(<Provider>{element}</Provider>);
+};
+
+describe('Dialog', () => {
+  it('should render a Dialog', () => {
+    mount(
+      <Dialog>
+        <DialogTrigger>
+          <Button>Open dialog</Button>
+        </DialogTrigger>
+
+        <DialogSurface>
+          <DialogBody>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque
+            est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure
+            cumque eaque?
+          </DialogBody>
+        </DialogSurface>
+      </Dialog>,
+    );
+
+    cy.get('button').click().get('.fui-DialogSurface').should('exist');
+  });
+});

apps/react-18-tests-v9/src/components/Menu/Menu.cy.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { mount as mountBase } from '@cypress/react';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-components';
+
+import { Provider } from '../Provider/Provider';
+
+const mount = (element: JSX.Element) => {
+  mountBase(<Provider>{element}</Provider>);
+};
+
+describe('Menu', () => {
+  it('should render a Menu', () => {
+    mount(
+      <Menu>
+        <MenuTrigger>
+          <button>Click Me</button>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>Item</MenuItem>
+            <MenuItem>Item</MenuItem>
+            <MenuItem>Item</MenuItem>
+            <MenuItem>Item</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>,
+    );
+
+    cy.get('button').click().get('.fui-MenuList').should('exist');
+  });
+});

apps/react-18-tests-v9/src/Overflow.cy.tsx → apps/react-18-tests-v9/src/components/Overflow/Overflow.cy.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { mount as mountBase } from '@cypress/react';
 import {
   makeStyles,
   Button,
@@ -15,10 +16,9 @@ import {
   OverflowItemProps,
   useIsOverflowItemVisible,
   useOverflowMenu,
-  FluentProvider,
-  teamsLightTheme,
 } from '@fluentui/react-components';
-import { mount as mountBase } from '@cypress/react';
+
+import { Provider } from '../Provider/Provider';
 
 // eslint-disable-next-line @griffel/styles-file
 const useStyles = makeStyles({
@@ -90,11 +90,7 @@ const OverflowMenu: React.FC<{ itemIds: string[] }> = ({ itemIds }) => {
 };
 
 const mount = (element: JSX.Element) => {
-  mountBase(
-    <React.StrictMode>
-      <FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>
-    </React.StrictMode>,
-  );
+  mountBase(<Provider>{element}</Provider>);
 };
 
 describe('Overflow', () => {

apps/react-18-tests-v9/src/components/Popover/Popover.cy.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { mount as mountBase } from '@cypress/react';
+
+import { CustomPopover as Popover } from './Popover';
+import { Provider } from '../Provider/Provider';
+
+const mount = (element: JSX.Element) => {
+  mountBase(<Provider>{element}</Provider>);
+};
+
+describe('Popover with React 18', () => {
+  it('should render a Popover', () => {
+    mount(<Popover />);
+
+    cy.get('button').click().get('.fui-PopoverSurface').should('exist');
+  });
+});

apps/react-18-tests-v9/src/App.test.tsx → apps/react-18-tests-v9/src/components/Popover/Popover.test.tsx

@@ -2,9 +2,9 @@ import { resetIdsForTests } from '@fluentui/react-utilities';
 import { render } from '@testing-library/react';
 import * as React from 'react';
 
-import { App } from './App';
+import { CustomPopover as Popover } from './Popover';
 
-describe('App with React 18', () => {
+describe('Popover component with React 18', () => {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   const noop = () => {};
 
@@ -20,7 +20,7 @@ describe('App with React 18', () => {
     it('should apply matching className in strict mode', () => {
       const { getByText } = render(
         <React.StrictMode>
-          <App />
+          <Popover />
         </React.StrictMode>,
       );
       const element = getByText('Click Me');

apps/react-18-tests-v9/src/components/Popover/Popover.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Button, Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-components';
+import { Provider } from '../Provider/Provider';
+
+export const CustomPopover = () => {
+  return (
+    <Provider>
+      <Popover>
+        <PopoverTrigger>
+          <Button>Click Me</Button>
+        </PopoverTrigger>
+        <PopoverSurface>This is a popover</PopoverSurface>
+      </Popover>
+    </Provider>
+  );
+};

apps/react-18-tests-v9/src/App.cy.tsx → apps/react-18-tests-v9/src/components/Provider/Provider.cy.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react';
 import { mount } from '@cypress/react';
+import { Button } from '@fluentui/react-components';
 
-import { App } from './App';
+import { Provider } from './Provider';
 
 const providerSelector = '.fui-FluentProvider';
 
-describe('App with React 18', () => {
+describe('Provider with React 18', () => {
   describe('FluentProvider', () => {
     it('should apply matching className in strict mode', () => {
       mount(
-        <React.StrictMode>
-          <App />
-        </React.StrictMode>,
+        <Provider>
+          <Button>Click Me</Button>
+        </Provider>,
       );
 
       cy.get(providerSelector)

apps/react-18-tests-v9/src/components/Provider/Provider.test.tsx

@@ -0,0 +1,35 @@
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { Button } from '@fluentui/react-components';
+import { resetIdsForTests } from '@fluentui/react-utilities';
+
+import { Provider } from './Provider';
+
+describe('Provider with React 18', () => {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const noop = () => {};
+
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(noop);
+  });
+
+  afterEach(() => {
+    resetIdsForTests();
+  });
+
+  describe('FluentProvider', () => {
+    it('should apply matching className in strict mode', () => {
+      const { getByText } = render(
+        <Provider>
+          <Button>Click Me</Button>
+        </Provider>,
+      );
+      const element = getByText('Click Me');
+      const elementProviderClassName = element.className.split(' ')[1];
+      const matchingStyleTag = document.getElementById(elementProviderClassName);
+
+      expect(matchingStyleTag).toBeDefined();
+    });
+  });
+});

apps/react-18-tests-v9/src/components/Provider/Provider.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { webLightTheme, FluentProvider } from '@fluentui/react-components';
+
+export const Provider = ({ children }: React.PropsWithChildren) => {
+  return (
+    <React.StrictMode>
+      <FluentProvider theme={webLightTheme}>{children}</FluentProvider>
+    </React.StrictMode>
+  );
+};

apps/react-18-tests-v9/src/index.tsx

@@ -1,10 +1 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { App } from './App';
-
-const root = createRoot(document.getElementById('root') as HTMLElement);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+export {};