From 51be7b202ffec3d9e035cb3da315c09d42c26f98 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 20 Mar 2025 13:56:57 +0100 Subject: [PATCH] refactor: rearrange folders and files to scale better --- apps/react-18-tests-v9/src/App.tsx | 24 ------ apps/react-18-tests-v9/src/Portal.cy.tsx | 80 ------------------- .../react-18-tests-v9/src/components/.gitkeep | 0 .../src/components/Dialog/Dialog.cy.tsx | 31 +++++++ .../src/components/Menu/Menu.cy.tsx | 32 ++++++++ .../{ => components/Overflow}/Overflow.cy.tsx | 12 +-- .../src/components/Popover/Popover.cy.tsx | 17 ++++ .../Popover/Popover.test.tsx} | 6 +- .../src/components/Popover/Popover.tsx | 16 ++++ .../Provider/Provider.cy.tsx} | 11 +-- .../src/components/Provider/Provider.test.tsx | 35 ++++++++ .../src/components/Provider/Provider.tsx | 10 +++ apps/react-18-tests-v9/src/index.tsx | 11 +-- .../motion}/createPresenceComponent.test.tsx | 0 14 files changed, 155 insertions(+), 130 deletions(-) delete mode 100644 apps/react-18-tests-v9/src/App.tsx delete mode 100644 apps/react-18-tests-v9/src/Portal.cy.tsx delete mode 100644 apps/react-18-tests-v9/src/components/.gitkeep create mode 100644 apps/react-18-tests-v9/src/components/Dialog/Dialog.cy.tsx create mode 100644 apps/react-18-tests-v9/src/components/Menu/Menu.cy.tsx rename apps/react-18-tests-v9/src/{ => components/Overflow}/Overflow.cy.tsx (94%) create mode 100644 apps/react-18-tests-v9/src/components/Popover/Popover.cy.tsx rename apps/react-18-tests-v9/src/{App.test.tsx => components/Popover/Popover.test.tsx} (86%) create mode 100644 apps/react-18-tests-v9/src/components/Popover/Popover.tsx rename apps/react-18-tests-v9/src/{App.cy.tsx => components/Provider/Provider.cy.tsx} (69%) create mode 100644 apps/react-18-tests-v9/src/components/Provider/Provider.test.tsx create mode 100644 apps/react-18-tests-v9/src/components/Provider/Provider.tsx rename apps/react-18-tests-v9/src/{ => utils/motion}/createPresenceComponent.test.tsx (100%) diff --git a/apps/react-18-tests-v9/src/App.tsx b/apps/react-18-tests-v9/src/App.tsx deleted file mode 100644 index 6151cadd81aece..00000000000000 --- a/apps/react-18-tests-v9/src/App.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import { - webLightTheme, - FluentProvider, - Button, - Popover, - PopoverTrigger, - PopoverSurface, -} from '@fluentui/react-components'; - -// This app is here as a simple sandbox to render v9 controls inside of an React 18 environement. - -export const App = () => { - return ( - - - - - - This is a popover - - - ); -}; diff --git a/apps/react-18-tests-v9/src/Portal.cy.tsx b/apps/react-18-tests-v9/src/Portal.cy.tsx deleted file mode 100644 index a1cc40f574371f..00000000000000 --- a/apps/react-18-tests-v9/src/Portal.cy.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react'; -import { mount as mountBase } from '@cypress/react'; -import { - FluentProvider, - teamsLightTheme, - Popover, - PopoverTrigger, - PopoverSurface, - Menu, - MenuTrigger, - MenuPopover, - MenuList, - MenuItem, - Dialog, - DialogSurface, - DialogTrigger, - DialogBody, -} from '@fluentui/react-components'; - -const mount = (element: JSX.Element) => { - mountBase( - - {element} - , - ); -}; - -describe('Portal based components', () => { - it('should render a Popover', () => { - mount( - - - - - This is a popover - , - ); - - cy.get('button').click().get('.fui-PopoverSurface').should('exist'); - }); - - it('should render a Menu', () => { - mount( - - - - - - - Item - Item - Item - Item - - - , - ); - - cy.get('button').click().get('.fui-MenuList').should('exist'); - }); - - it('should render a Dialog', () => { - mount( - - - - - - - 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? - - - , - ); - - cy.get('button').click().get('.fui-DialogSurface').should('exist'); - }); -}); diff --git a/apps/react-18-tests-v9/src/components/.gitkeep b/apps/react-18-tests-v9/src/components/.gitkeep deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/apps/react-18-tests-v9/src/components/Dialog/Dialog.cy.tsx b/apps/react-18-tests-v9/src/components/Dialog/Dialog.cy.tsx new file mode 100644 index 00000000000000..0af55112b5210a --- /dev/null +++ b/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({element}); +}; + +describe('Dialog', () => { + it('should render a Dialog', () => { + mount( + + + + + + + + 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? + + + , + ); + + cy.get('button').click().get('.fui-DialogSurface').should('exist'); + }); +}); diff --git a/apps/react-18-tests-v9/src/components/Menu/Menu.cy.tsx b/apps/react-18-tests-v9/src/components/Menu/Menu.cy.tsx new file mode 100644 index 00000000000000..985e1db97e717c --- /dev/null +++ b/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({element}); +}; + +describe('Menu', () => { + it('should render a Menu', () => { + mount( + + + + + + + + Item + Item + Item + Item + + + , + ); + + cy.get('button').click().get('.fui-MenuList').should('exist'); + }); +}); diff --git a/apps/react-18-tests-v9/src/Overflow.cy.tsx b/apps/react-18-tests-v9/src/components/Overflow/Overflow.cy.tsx similarity index 94% rename from apps/react-18-tests-v9/src/Overflow.cy.tsx rename to apps/react-18-tests-v9/src/components/Overflow/Overflow.cy.tsx index 99695266cfa062..0a48a32696115f 100644 --- a/apps/react-18-tests-v9/src/Overflow.cy.tsx +++ b/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( - - {element} - , - ); + mountBase({element}); }; describe('Overflow', () => { diff --git a/apps/react-18-tests-v9/src/components/Popover/Popover.cy.tsx b/apps/react-18-tests-v9/src/components/Popover/Popover.cy.tsx new file mode 100644 index 00000000000000..e6578628c9b4f4 --- /dev/null +++ b/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({element}); +}; + +describe('Popover with React 18', () => { + it('should render a Popover', () => { + mount(); + + cy.get('button').click().get('.fui-PopoverSurface').should('exist'); + }); +}); diff --git a/apps/react-18-tests-v9/src/App.test.tsx b/apps/react-18-tests-v9/src/components/Popover/Popover.test.tsx similarity index 86% rename from apps/react-18-tests-v9/src/App.test.tsx rename to apps/react-18-tests-v9/src/components/Popover/Popover.test.tsx index 4910a67a1f8446..48e395870de870 100644 --- a/apps/react-18-tests-v9/src/App.test.tsx +++ b/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( - + , ); const element = getByText('Click Me'); diff --git a/apps/react-18-tests-v9/src/components/Popover/Popover.tsx b/apps/react-18-tests-v9/src/components/Popover/Popover.tsx new file mode 100644 index 00000000000000..d1146fbf682b99 --- /dev/null +++ b/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 ( + + + + + + This is a popover + + + ); +}; diff --git a/apps/react-18-tests-v9/src/App.cy.tsx b/apps/react-18-tests-v9/src/components/Provider/Provider.cy.tsx similarity index 69% rename from apps/react-18-tests-v9/src/App.cy.tsx rename to apps/react-18-tests-v9/src/components/Provider/Provider.cy.tsx index eb843f612206c2..66499dc09f5086 100644 --- a/apps/react-18-tests-v9/src/App.cy.tsx +++ b/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( - - - , + + + , ); cy.get(providerSelector) diff --git a/apps/react-18-tests-v9/src/components/Provider/Provider.test.tsx b/apps/react-18-tests-v9/src/components/Provider/Provider.test.tsx new file mode 100644 index 00000000000000..a4dd43781b1ba6 --- /dev/null +++ b/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( + + + , + ); + const element = getByText('Click Me'); + const elementProviderClassName = element.className.split(' ')[1]; + const matchingStyleTag = document.getElementById(elementProviderClassName); + + expect(matchingStyleTag).toBeDefined(); + }); + }); +}); diff --git a/apps/react-18-tests-v9/src/components/Provider/Provider.tsx b/apps/react-18-tests-v9/src/components/Provider/Provider.tsx new file mode 100644 index 00000000000000..7d12010c3191d0 --- /dev/null +++ b/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 ( + + {children} + + ); +}; diff --git a/apps/react-18-tests-v9/src/index.tsx b/apps/react-18-tests-v9/src/index.tsx index 87a4f9be66eab4..cb0ff5c3b541f6 100644 --- a/apps/react-18-tests-v9/src/index.tsx +++ b/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( - - - , -); +export {}; diff --git a/apps/react-18-tests-v9/src/createPresenceComponent.test.tsx b/apps/react-18-tests-v9/src/utils/motion/createPresenceComponent.test.tsx similarity index 100% rename from apps/react-18-tests-v9/src/createPresenceComponent.test.tsx rename to apps/react-18-tests-v9/src/utils/motion/createPresenceComponent.test.tsx