From 8d320769ca23ea1b8c97e10c6e28924e4e56d6e8 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 31 Aug 2023 19:36:01 +0200 Subject: [PATCH 1/2] test(react-drawer): add renderization tests for drawer subcomponents --- ...-c5be950c-8d8e-4cae-8837-d0b0c22b26dc.json | 7 ++++ .../src/components/Drawer/Drawer.cy.tsx | 4 ++- .../components/DrawerBody/DrawerBody.cy.tsx | 3 +- .../DrawerFooter/DrawerFooter.cy.tsx | 20 +++++++++++ .../DrawerHeader/DrawerHeader.cy.tsx | 20 +++++++++++ .../DrawerHeaderNavigation.cy.tsx | 20 +++++++++++ .../DrawerHeaderTitle.cy.tsx | 35 +++++++++++++++++++ 7 files changed, 107 insertions(+), 2 deletions(-) create mode 100644 change/@fluentui-react-drawer-c5be950c-8d8e-4cae-8837-d0b0c22b26dc.json create mode 100644 packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.cy.tsx create mode 100644 packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.cy.tsx create mode 100644 packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.cy.tsx create mode 100644 packages/react-components/react-drawer/src/components/DrawerHeaderTitle/DrawerHeaderTitle.cy.tsx diff --git a/change/@fluentui-react-drawer-c5be950c-8d8e-4cae-8837-d0b0c22b26dc.json b/change/@fluentui-react-drawer-c5be950c-8d8e-4cae-8837-d0b0c22b26dc.json new file mode 100644 index 00000000000000..f9586094522032 --- /dev/null +++ b/change/@fluentui-react-drawer-c5be950c-8d8e-4cae-8837-d0b0c22b26dc.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "test: add simple renderization tests for sub components", + "packageName": "@fluentui/react-drawer", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx b/packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx index 3104939adde7b9..e262c583a0e3d2 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx +++ b/packages/react-components/react-drawer/src/components/Drawer/Drawer.cy.tsx @@ -2,9 +2,11 @@ import * as React from 'react'; import { mount } from '@cypress/react'; import { FluentProvider } from '@fluentui/react-provider'; import { webLightTheme } from '@fluentui/react-theme'; -import { Drawer, DrawerProps } from '@fluentui/react-drawer'; import { dialogSurfaceClassNames } from '@fluentui/react-dialog'; +import { Drawer } from './Drawer'; +import type { DrawerProps } from './Drawer.types'; + const mountFluent = (element: JSX.Element) => { mount({element}); }; diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx index 950009e3a42b61..e436d504f464dd 100644 --- a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { mount } from '@cypress/react'; import { FluentProvider } from '@fluentui/react-provider'; import { webLightTheme } from '@fluentui/react-theme'; -import { DrawerBody } from '@fluentui/react-drawer'; + +import { DrawerBody } from './DrawerBody'; const mountFluent = (element: JSX.Element) => { mount({element}); diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.cy.tsx new file mode 100644 index 00000000000000..e861c0cccedbe8 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.cy.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { mount } from '@cypress/react'; +import { FluentProvider } from '@fluentui/react-provider'; +import { webLightTheme } from '@fluentui/react-theme'; + +import { DrawerFooter } from './DrawerFooter'; + +const mountFluent = (element: JSX.Element) => { + mount({element}); +}; + +describe('DrawerFooter', () => { + it('should render drawer footer with correct tag name and content', () => { + mountFluent(Content); + + cy.get('#drawer-footer').should('exist'); + cy.get('#drawer-footer').should('match', 'footer'); + cy.get('#drawer-footer').should('have.html', 'Content'); + }); +}); diff --git a/packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.cy.tsx new file mode 100644 index 00000000000000..ecf0dff61e4c50 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerHeader/DrawerHeader.cy.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { mount } from '@cypress/react'; +import { FluentProvider } from '@fluentui/react-provider'; +import { webLightTheme } from '@fluentui/react-theme'; + +import { DrawerHeader } from './DrawerHeader'; + +const mountFluent = (element: JSX.Element) => { + mount({element}); +}; + +describe('DrawerHeader', () => { + it('should render drawer header with correct tag name and content', () => { + mountFluent(Content); + + cy.get('#drawer-header').should('exist'); + cy.get('#drawer-header').should('match', 'header'); + cy.get('#drawer-header').should('have.html', 'Content'); + }); +}); diff --git a/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.cy.tsx new file mode 100644 index 00000000000000..4a67d317f87582 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.cy.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { mount } from '@cypress/react'; +import { FluentProvider } from '@fluentui/react-provider'; +import { webLightTheme } from '@fluentui/react-theme'; + +import { DrawerHeaderNavigation } from './DrawerHeaderNavigation'; + +const mountFluent = (element: JSX.Element) => { + mount({element}); +}; + +describe('DrawerHeaderNavigation', () => { + it('should render drawer nav with correct tag name and content', () => { + mountFluent(Content); + + cy.get('#drawer-nav').should('exist'); + cy.get('#drawer-nav').should('match', 'nav'); + cy.get('#drawer-nav').should('have.html', 'Content'); + }); +}); diff --git a/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/DrawerHeaderTitle.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/DrawerHeaderTitle.cy.tsx new file mode 100644 index 00000000000000..ebe36efc53de18 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/DrawerHeaderTitle.cy.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { mount } from '@cypress/react'; +import { FluentProvider } from '@fluentui/react-provider'; +import { webLightTheme } from '@fluentui/react-theme'; + +import { DrawerHeaderTitle } from './DrawerHeaderTitle'; + +const mountFluent = (element: JSX.Element) => { + mount({element}); +}; + +describe('DrawerHeaderTitle', () => { + it('should render drawer title with correct tag name', () => { + mountFluent(Content); + + cy.get('#drawer-title').should('exist'); + cy.get('#drawer-title').should('match', 'div'); + }); + + it('should render children H2 tag by default', () => { + mountFluent(Content); + + cy.get('#drawer-title').contains('h2', 'Content'); + }); + + it('should render different heading when provided', () => { + mountFluent( + + Content + , + ); + + cy.get('#drawer-title').contains('h1', 'Content'); + }); +}); From 0dc902fc7c8b4fbcc89669a1ab03549d465c6415 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 31 Aug 2023 19:38:13 +0200 Subject: [PATCH 2/2] test(react-drawer): add test for drawer header title action --- .../DrawerHeaderTitle/DrawerHeaderTitle.cy.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/DrawerHeaderTitle.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/DrawerHeaderTitle.cy.tsx index ebe36efc53de18..4c3afb97ea3b8c 100644 --- a/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/DrawerHeaderTitle.cy.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/DrawerHeaderTitle.cy.tsx @@ -25,11 +25,22 @@ describe('DrawerHeaderTitle', () => { it('should render different heading when provided', () => { mountFluent( - + Content , ); cy.get('#drawer-title').contains('h1', 'Content'); }); + + it('should render action when provided', () => { + mountFluent( + Action}> + Content + , + ); + + cy.get('#drawer-title').contains('h2', 'Content'); + cy.get('#drawer-title').contains('button', 'Action'); + }); });