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({