test(react): add fix for flaky Cypress test

add fix for flaky Cypress test
mi6 · Aug 7, 2024 · 3b9b2f9 · 3b9b2f9
1 parent 6bd637b
commit 3b9b2f9
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 1 deletion.
diff --git a/...image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-high-contrast.png b/...image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-high-contrast.png
diff --git a/...ess-image-diff-screenshots/baseline/IcButton.cy.tsx-secondary-high-contrast.png b/...ess-image-diff-screenshots/baseline/IcButton.cy.tsx-secondary-high-contrast.png
diff --git a/...ess-image-diff-screenshots/baseline/IcClassificationBanner.cy.tsx-undefined.png b/...ess-image-diff-screenshots/baseline/IcClassificationBanner.cy.tsx-undefined.png
diff --git a/packages/react/src/component-tests/IcButton/IcButton.cy.tsx b/packages/react/src/component-tests/IcButton/IcButton.cy.tsx
@@ -317,6 +317,8 @@ describe("IcButton visual regression and a11y tests", () => {
   it("should render text-based primary buttons", () => {
     mount(<TextPrimaryButton />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.checkA11yWithWait();
     cy.compareSnapshot({
       name: "primary",
@@ -327,6 +329,8 @@ describe("IcButton visual regression and a11y tests", () => {
   it("should render text-based secondary buttons", () => {
     mount(<TextSecondaryButton />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.checkA11yWithWait();
     cy.compareSnapshot({
       name: "secondary",
@@ -337,6 +341,8 @@ describe("IcButton visual regression and a11y tests", () => {
   it("should render text-based tertiary buttons", () => {
     mount(<TextTertiaryButton />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.checkA11yWithWait();
     cy.compareSnapshot({
       name: "tertiary",
@@ -347,6 +353,8 @@ describe("IcButton visual regression and a11y tests", () => {
   it("should render text-based destructive buttons", () => {
     mount(<TextDestructiveButton />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.checkA11yWithWait();
     cy.compareSnapshot({
       name: "destructive",
@@ -357,6 +365,8 @@ describe("IcButton visual regression and a11y tests", () => {
   it("should render with-icon buttons", () => {
     mount(<WithIcons />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.checkA11yWithWait();
     cy.compareSnapshot({
       name: "with-icon",
@@ -367,6 +377,8 @@ describe("IcButton visual regression and a11y tests", () => {
   it("should render with-icon buttons without viewbox", () => {
     mount(<IconNoViewbox />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.checkA11yWithWait();
     cy.compareSnapshot({
       name: "icon-without-viewbox",
@@ -377,6 +389,8 @@ describe("IcButton visual regression and a11y tests", () => {
   it("should render different sized buttons", () => {
     mount(<DifferentSizes />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.checkA11yWithWait();
     cy.compareSnapshot({
       name: "size",
@@ -387,6 +401,8 @@ describe("IcButton visual regression and a11y tests", () => {
   it("should render full width buttons", () => {
     mount(<FullWidth />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.get(IC_BUTTON_SELECTOR)
       .shadow()
       .find("button")
@@ -404,6 +420,8 @@ describe("IcButton visual regression and a11y tests", () => {
   it("should render dropdown buttons", () => {
     mount(<DropdownButtons />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.checkA11yWithWait();
     cy.compareSnapshot({
       name: "dropdown",
@@ -433,6 +451,8 @@ describe("IcButton visual regression and a11y tests", () => {
       </IcButton>
     );
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.checkA11yWithWait();
     cy.compareSnapshot({
       name: "router-slot",
@@ -443,6 +463,8 @@ describe("IcButton visual regression and a11y tests", () => {
   it("should render with icon variant button group", () => {
     mount(<IconButtonGroup />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.checkA11yWithWait();
     cy.wait(500).compareSnapshot({
       name: "icon-variants-button-group",
@@ -617,6 +639,8 @@ describe("IcButton visual regression and a11y tests", () => {
   it("should render button with custom height and width", () => {
     mount(<CustomHeightMinWidth />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.checkA11yWithWait();
     cy.compareSnapshot({
       name: "height-width",
@@ -641,6 +665,8 @@ describe("IcButton visual regression tests in high contrast mode", () => {
   it("should render text-based primary buttons in high contrast mode", () => {
     mount(<TextPrimaryButton />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.compareSnapshot({
       name: "primary-high-contrast",
       testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.031),
@@ -650,6 +676,8 @@ describe("IcButton visual regression tests in high contrast mode", () => {
   it("should render text-based secondary buttons in high contrast mode", () => {
     mount(<TextSecondaryButton />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.compareSnapshot({
       name: "secondary-high-contrast",
       testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.038),
@@ -659,6 +687,8 @@ describe("IcButton visual regression tests in high contrast mode", () => {
   it("should render text-based tertiary buttons in high contrast mode", () => {
     mount(<TextTertiaryButton />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.compareSnapshot({
       name: "tertiary-high-contrast",
       testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.031),
@@ -668,6 +698,8 @@ describe("IcButton visual regression tests in high contrast mode", () => {
   it("should render text-based destructive buttons in high contrast mode", () => {
     mount(<TextDestructiveButton />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.compareSnapshot({
       name: "destructive-high-contrast",
       testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.013),
@@ -677,6 +709,8 @@ describe("IcButton visual regression tests in high contrast mode", () => {
   it("should render with-icon buttons in high contrast mode", () => {
     mount(<WithIcons />);
 
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
     cy.compareSnapshot({
       name: "with-icon-high-contrast",
       testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.071),
@@ -686,7 +720,9 @@ describe("IcButton visual regression tests in high contrast mode", () => {
   it("should render icon variants in high contrast mode", () => {
     mount(<IconButtonGroup />);
 
-    cy.wait(500).compareSnapshot({
+    cy.checkHydrated(IC_BUTTON_SELECTOR);
+
+    cy.compareSnapshot({
       name: "icon-variants-high-contrast",
       testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.047),
     });