Try timeouts

.github/workflows/build.yml

@@ -330,7 +330,7 @@ jobs:
       - run: pnpm install
 
       - name: Install Cypress binary if not found
-        run: pnpx cypress@14.0.1 install
+        run: pnpx cypress@13.8.1 install
 
       - name: Run a11y tests
         run: pnpm run test --filter=a11y

CONTRIBUTING.md

@@ -372,6 +372,8 @@ describe('Alert', () => {
     it(testName, () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/package.json

@@ -13,7 +13,7 @@
     "@types/node": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "cypress": "14.0.1",
+    "cypress": "13.8.1",
     "cypress-image-diff-js": "1.30.1",
     "eslint": "*",
     "eslint-config-prettier": "^8.8.0",

apps/react-workshop/scripts/run-tests.js

@@ -5,7 +5,7 @@
 const spawn = require('child_process').spawn;
 const args = process.argv.slice(2).join(' ');
 
-const IMAGE_NAME = 'cypress/included:14.0.1'; // https://hub.docker.com/r/cypress/included
+const IMAGE_NAME = 'cypress/included:13.8.1'; // https://hub.docker.com/r/cypress/included
 
 // Need to use this script because current directory variable is different in different shells
 const dockerProcess = spawn(

apps/react-workshop/src/Alert.test.ts

@@ -18,6 +18,8 @@ describe('Alert', () => {
     it(testName, () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Anchor.test.ts

@@ -10,6 +10,8 @@ describe('Anchor', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Avatar.test.ts

@@ -17,6 +17,7 @@ describe('Avatar', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
 
       // Hide images if present to avoid uncertainties in testing
       if (testName === 'With Image') {

apps/react-workshop/src/AvatarGroup.test.ts

@@ -16,6 +16,7 @@ describe('AvatarGroup', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
 
       if (testName.includes('Tooltip')) {
         cy.get('div').contains('3').trigger('mouseenter');

apps/react-workshop/src/Badge.test.ts

@@ -10,6 +10,8 @@ describe('Badge', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Blockquote.test.ts

@@ -10,6 +10,8 @@ describe('Blockquote', () => {
     it(testName, () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Breadcrumbs.test.ts

@@ -18,6 +18,7 @@ describe('Breadcrumbs', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
 
       if (testName.includes('Overflow')) {
         cy.get('small').hide();

apps/react-workshop/src/Button.test.ts

@@ -21,6 +21,8 @@ describe('Button', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/ButtonGroup.test.ts

@@ -16,6 +16,7 @@ describe('ButtonGroup', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
 
       if (testName.includes('Overflow')) {
         cy.get('small').hide();

apps/react-workshop/src/Carousel.test.ts

@@ -10,6 +10,8 @@ describe('Carousel', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.wait(1000); // wait for dots list to finish scrolling
       cy.compareSnapshot(testName);
     });

apps/react-workshop/src/Checkbox.test.ts

@@ -19,6 +19,8 @@ describe('Checkbox', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Code.test.ts

@@ -10,6 +10,8 @@ describe('Code', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/ColorPicker.test.ts

@@ -10,6 +10,8 @@ describe('ColorPicker', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.get('#ladle-root').within(() => {
         cy.get('button').first().click();
       });

apps/react-workshop/src/ComboBox.test.ts

@@ -21,6 +21,7 @@ describe('ComboBox', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
 
       if (testName === 'Multiple Select') {
         // Hide the dividers and checkboxs/labels for test image

apps/react-workshop/src/DatePicker.test.ts

@@ -18,6 +18,8 @@ describe('DatePicker', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.get('#picker-button').siblings('span').hide();
       cy.get('#picker-button').click();
       cy.wait(30);

apps/react-workshop/src/Dialog.test.ts

@@ -16,6 +16,8 @@ describe('Dialog', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.get('#ladle-root').within(() => {
         cy.get('button').first().click();
       });

apps/react-workshop/src/DropdownButton.test.ts

@@ -10,6 +10,8 @@ describe('DropdownButton', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(`${testName} (Closed)`);
       cy.get('#ladle-root').within(() => {
         cy.get('button').click();

apps/react-workshop/src/DropdownMenu.test.ts

@@ -18,6 +18,8 @@ describe('DropdownMenu', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(`${testName} (Closed)`);
       cy.get('#ladle-root').within(() => {
         cy.get('button').first().click();

apps/react-workshop/src/ExpandableBlock.test.ts

@@ -18,6 +18,8 @@ describe('ExpandableBlock', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(`${testName} (Closed)`);
       if (testName !== 'Disabled') {
         cy.get('[type=button]').first().click();

apps/react-workshop/src/Fieldset.test.ts

@@ -10,6 +10,8 @@ describe('Fieldset', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/FileUpload.test.ts

@@ -14,6 +14,8 @@ describe('FileUpload', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
       if (
         testName === 'Default File Upload Card' ||

apps/react-workshop/src/Flex.test.ts

@@ -10,6 +10,8 @@ describe('Flex', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Footer.test.ts

@@ -17,6 +17,8 @@ describe('Footer', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Header.test.ts

@@ -10,6 +10,7 @@ describe('Header', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
 
       // Hide images if present to avoid uncertainties in testing
       if (

apps/react-workshop/src/Icon.test.ts

@@ -17,6 +17,8 @@ describe('Icon', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/IconButton.test.ts

@@ -15,6 +15,8 @@ describe('IconButton', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
 
       if (index === 0) {

apps/react-workshop/src/IdeasButton.test.ts

@@ -10,6 +10,8 @@ describe('IdeasButton', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/InformationPanel.test.ts

@@ -10,6 +10,8 @@ describe('InformationPanel', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.get('#ladle-root').within(() => {
         cy.get('button').first().click();
       });

apps/react-workshop/src/Input.test.ts

@@ -10,6 +10,8 @@ describe('Input', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/InputGrid.test.ts

@@ -16,6 +16,8 @@ describe('InputGrid', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/InputGroup.test.ts

@@ -10,6 +10,8 @@ describe('InputGroup', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/InputWithDecoration.test.ts

@@ -10,6 +10,8 @@ describe('InputWithDecorations', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Kbd.test.ts

@@ -11,6 +11,8 @@ describe('Kbd', () => {
 
     it(testName, () => {
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Label.test.ts

@@ -10,6 +10,8 @@ describe('Label', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/LabeledInput.test.ts

@@ -24,6 +24,8 @@ describe('LabeledInput', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });
@@ -35,6 +37,7 @@ describe('LabeledInput', () => {
     it(newTestName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
 
       // Click the input to show the status outline
       cy.get('input').first().click();

apps/react-workshop/src/LabeledSelect.test.ts

@@ -17,6 +17,8 @@ describe('LabeledSelect', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/LabeledTextarea.test.ts

@@ -21,6 +21,8 @@ describe('LabeledTextarea', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });
@@ -32,6 +34,7 @@ describe('LabeledTextarea', () => {
     it(newTestName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
 
       // Click the textarea to show the status outline
       cy.get('textarea').first().click();

apps/react-workshop/src/List.test.ts

@@ -11,6 +11,8 @@ describe('NotificationMarker', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.compareSnapshot(testName);
     });
   });

apps/react-workshop/src/Modal.test.ts

@@ -10,6 +10,8 @@ describe('Modal', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
+      cy.wait(300);
+
       cy.get('#ladle-root').within(() => {
         cy.get('button').first().click();
       });