diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 5f043684b25..c8739007291 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -5,7 +5,7 @@ import { setLanguage } from '@ui5/webcomponents-base/dist/config/Language.js'; import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js'; import applyDirection from '@ui5/webcomponents-base/dist/locale/applyDirection.js'; import { ContentDensity, Modals, ThemeProvider } from '@ui5/webcomponents-react'; -import { useEffect } from 'react'; +import { StrictMode, useEffect } from 'react'; import 'tocbot/dist/tocbot.css'; import '../packages/main/dist/Assets.js'; import languages from './components/languageCodes.json'; @@ -56,10 +56,12 @@ const preview: Preview = { }, [theme]); return ( - - {viewMode !== 'docs' && } - - + + + {viewMode !== 'docs' && } + + + ); } ], diff --git a/cypress/support/commands.tsx b/cypress/support/commands.tsx index b85b117f650..0ec9b8d2261 100644 --- a/cypress/support/commands.tsx +++ b/cypress/support/commands.tsx @@ -8,7 +8,9 @@ declare global { namespace Cypress { interface Chainable { /** - * Cypress mount with ThemeProvider + * Cypress mount with ThemeProvider. + * + * __Note:__ Per default `options.strict` is enabled */ mount: ( jsx: ReactNode, @@ -43,7 +45,7 @@ declare global { * Cypress mount with ThemeProvider */ Cypress.Commands.add('mount', (component, { themeProviderProps = {}, ...options } = {}) => { - return mount({component}, options); + return mount({component}, { strict: true, ...options }); }); // copied from https://github.com/cypress-io/cypress/discussions/21150#discussioncomment-2620947 and edited slightly diff --git a/packages/compat/src/components/Toolbar/Toolbar.cy.tsx b/packages/compat/src/components/Toolbar/Toolbar.cy.tsx index 8feca74c2fc..a68db4ca792 100644 --- a/packages/compat/src/components/Toolbar/Toolbar.cy.tsx +++ b/packages/compat/src/components/Toolbar/Toolbar.cy.tsx @@ -141,7 +141,7 @@ describe('Toolbar', () => { it('overflow menu', () => { const onOverflowChange = cy.spy().as('overflowChangeSpy'); cy.viewport(300, 500); - cy.mount(); + cy.mount(, { strict: false }); cy.get('@overflowChangeSpy').should('have.been.calledOnce'); cy.findByTestId('toolbarElements').should('have.text', 2); cy.findByTestId('overflowElements').should('have.text', 3); @@ -159,7 +159,7 @@ describe('Toolbar', () => { // flaky - remount component instead // cy.get(`[ui5-toggle-button]`).click(); - cy.mount(); + cy.mount(, { strict: false }); cy.get('[ui5-popover]').should('not.have.attr', 'open'); cy.get('@overflowChangeSpy').should('have.callCount', 2); @@ -324,7 +324,8 @@ describe('Toolbar', () => { Item1 Item2 - + , + { strict: false } ); let height = '44px'; //2.75rem let background = 'rgba(0, 0, 0, 0)'; // transparent @@ -371,7 +372,8 @@ describe('Toolbar', () => { Item3 - + , + { strict: false } ); cy.wait(200); cy.findAllByTestId('tbi').each(($el) => { @@ -395,7 +397,8 @@ describe('Toolbar', () => { Item3 - + , + { strict: false } ); cy.wait(200); cy.findAllByTestId('tbiV').each(($el) => { @@ -529,7 +532,7 @@ describe('Toolbar', () => { ); }; const overflowChange = cy.spy().as('overflowChange'); - cy.mount(); + cy.mount(, { strict: false }); cy.get('[ui5-toggle-button]').should('not.exist'); cy.findByText('add').click(); @@ -573,7 +576,8 @@ describe('Toolbar', () => {
Text1
Text2 no id
- + , + { strict: false } ); cy.get('#1').should('have.length', 1); @@ -590,7 +594,8 @@ describe('Toolbar', () => {
Text1
Text2
- + , + { strict: false } ); cy.get('section[role="alertdialog"]').should('exist'); @@ -599,7 +604,8 @@ describe('Toolbar', () => {
Text1
Text2
- + , + { strict: false } ); cy.get('section').should('not.have.attr', 'role'); cy.get('[data-component-name="ToolbarOverflowPopoverContent"]').should('have.attr', 'role', 'menu'); @@ -609,7 +615,8 @@ describe('Toolbar', () => {
Text1
Text2
- + , + { strict: false } ); cy.get('section').should('not.have.attr', 'role'); cy.get('[data-component-name="ToolbarOverflowPopoverContent"]').should('have.attr', 'role', 'menu'); diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx index b4efa40d696..8a52071b421 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx @@ -813,13 +813,15 @@ describe('AnalyticalTable', () => { const { onRowSelect } = props; const [relevantPayload, setRelevantPayload] = useState>({}); const tableInstance = useRef>(null); + // strict mode + const hasRun = useRef(false); useEffect(() => { - if (tableInstance.current) { - tableInstance.current.setGroupBy(['name']); + if (tableInstance.current && !hasRun.current) { setTimeout(() => { - tableInstance.current.toggleAllRowsExpanded(); + tableInstance.current.toggleAllRowsExpanded(true); }, 100); + hasRun.current = true; } }, []); @@ -850,6 +852,7 @@ describe('AnalyticalTable', () => { onRowSelect(e); }} data={groupableData} + reactTableOptions={{ initialState: { groupBy: ['name'] } }} selectionMode="Multiple" />
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx index b6d56c89c96..72d33d355b8 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx @@ -348,16 +348,18 @@ describe('ObjectPage', () => { ); + cy.wait(200); + cy.findByText('Goals').should('not.be.visible'); cy.findByText('Employment').should('not.be.visible'); cy.findByText('Test').should('be.visible'); - cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick(); - //fallback - cy.wait(50); cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick(); cy.findByText('Employment').should('be.visible'); - cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click(); + + cy.wait(200); + + cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').realClick(); cy.findByText('Test').should('be.visible'); cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus(); @@ -377,6 +379,7 @@ describe('ObjectPage', () => { {OPContent} ); + cy.wait(100); cy.findByText('Employment').should('not.be.visible'); cy.findByText('Test').should('be.visible'); @@ -1034,6 +1037,8 @@ describe('ObjectPage', () => { }; cy.mount(); + cy.wait(200); + cy.get('[ui5-tabcontainer]').findUi5TabByText('test2').realClick(); cy.findByText('Content1').should('not.be.visible'); cy.findByText('Content2').should('be.visible'); diff --git a/packages/main/src/components/ThemeProvider/I18n.cy.tsx b/packages/main/src/components/ThemeProvider/I18n.cy.tsx index 59c8c98c6dc..29dc1a0820a 100644 --- a/packages/main/src/components/ThemeProvider/I18n.cy.tsx +++ b/packages/main/src/components/ThemeProvider/I18n.cy.tsx @@ -76,7 +76,8 @@ describe('I18nProvider', () => { ); }; - cy.mount(); + // strict mode disabled, otherwise counter is incremented twice on each render + cy.mount(, { strict: false }); cy.findByTestId('counter').should('have.text', 1); cy.findByText('Please wait') .then(() => { diff --git a/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx b/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx index 57948f0014b..0d99bc31803 100644 --- a/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx +++ b/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx @@ -52,7 +52,8 @@ describe('VariantManagement', () => { VariantItem 3 ]} - + , + { strict: false } ); cy.contains('VariantItem 2').click(); @@ -66,7 +67,7 @@ describe('VariantManagement', () => { cy.findByText('Save').click(); cy.get('@onSaveManageViews').should('have.been.calledOnce'); - + //todo: investigate why this matcher fails in React strict mode cy.get('@onSaveManageViews').should( 'have.been.calledWith', Cypress.sinon.match({