[tests] fix e2e-storybook tests

.github/workflows/e2e-tests-parallel.yml

@@ -112,7 +112,10 @@ jobs:
         id: cypress-tests-wc
         continue-on-error: true
         working-directory: packages/web-components
-        run: yarn test:e2e-storybook:test:parallel
+        run: |
+          export CYPRESS_VERIFY_TIMEOUT=60000
+          yarn cypress:verify
+          yarn test:e2e-storybook:test:parallel
         env:
           CI_BUILD_ID: '${{ github.sha }}-${{ github.workflow }}-wc'
           CYPRESS_API_URL: "https://sorry-cypress-director.qfl95m0zv01.us-east.codeengine.appdomain.cloud"

packages/web-components/package.json

@@ -88,7 +88,8 @@
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "upgrade-carbon": "yarn upgrade-interactive @carbon/web-components @carbon/icon-helpers @carbon/icons --latest --exact",
     "visual-snapshot": "yarn percy storybook:start ./storybook-static",
-    "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
+    "wca": "web-component-analyzer analyze src --outFile custom-elements.json",
+    "cypress:verify": "cypress verify"
   },
   "dependencies": {
     "@carbon/ibmdotcom-services": "2.15.1",

packages/web-components/src/components/card/__stories__/card.stories.ts

@@ -56,7 +56,6 @@ export const Default = (args) => {
     customVideoTitle,
   } = args?.Card ?? {};
   /* eslint-disable no-nested-ternary */
-
   let videoCopy;
   let videoFooterCopy;
 
@@ -97,7 +96,7 @@ export const Default = (args) => {
           : ``}
         <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
         <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
-        ${copy ? html`<p></p>` : ``}
+        ${copy ? html`<p>${copy}</p>` : ``}
         ${tagGroup ? html` ${tagGroupContent} ` : ``}
         ${ctaType === CTA_TYPE.VIDEO
           ? html` <c4d-card-footer> ${videoFooterCopy} </c4d-card-footer> `

packages/web-components/tests/e2e-storybook/cypress.json

@@ -14,8 +14,8 @@
   "screenshotOnRunFailure": false,
   "video": false,
   "testFiles": "**/*.e2e.js",
-  "pageLoadTimeout": 90000,
-  "defaultCommandTimeout": 90000,
+  "pageLoadTimeout": 30000,
+  "defaultCommandTimeout": 4000,
   "retries": {
     "runMode": 2,
     "openMode": 0

packages/web-components/tests/e2e-storybook/cypress/integration/card-section-simple/card-section-simple.e2e.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -17,7 +17,7 @@ const _paths = {
 };
 
 /**
- * Collection of all tests for cds-card-section-simple
+ * Collection of all tests for c4d-card-section-simple
  *
  * @function checkForBlocklink - Asserts a full-sized pseudoelement from the footer link
  * @function checkForTitlePosition - Asserts left-aligned title (16 || 32)px from left edge
@@ -29,11 +29,11 @@ const _tests = {
     cy.checkAxeA11y();
   },
   checkForBlocklink: () => {
-    cy.get('cds-card-group-item > cds-card-cta-footer').each(footer => {
+    cy.get('c4d-card-group-item > c4d-card-footer').each((footer) => {
       cy.get(footer)
         .shadow()
         .find('a')
-        .then($els => {
+        .then(($els) => {
           const win = $els[0].ownerDocument.defaultView;
           const after = win.getComputedStyle($els[0], ':after');
           const positionValue = after.getPropertyValue('position');
@@ -47,13 +47,15 @@ const _tests = {
     });
   },
   checkForTitlePosition: () => {
-    cy.get('cds-content-section-heading').then(heading => {
-      expect(heading.offset().left == 16 || heading.offset().left == 32).to.be.eq(true);
+    cy.get('c4d-content-section-heading').then((heading) => {
+      expect(
+        heading.offset().left == 16 || heading.offset().left == 32
+      ).to.be.eq(true);
       expect(heading.css('textAlign')).to.be.eq('start');
     });
   },
   checkForCardContent: () => {
-    cy.get('cds-card-group-item').each(card => {
+    cy.get('c4d-card-group-item').each((card) => {
       card.children().each((_i, child) => {
         const cardRoot = card[0].shadowRoot;
         expect(child.assignedSlot.getRootNode()).to.be.eq(cardRoot);
@@ -62,13 +64,13 @@ const _tests = {
   },
   checkCTACard: () => {
     cy.visit(`${_paths.default}&knob-With%20CTA:=true`);
-    cy.get('cds-card-group-item')
+    cy.get('c4d-card-group-item')
       .last()
       .should('have.attr', 'color-scheme', 'inverse');
   },
   checkCardWithImages: () => {
     cy.visit(`${_paths.default}&knob-With%20images:=true`);
-    cy.get('cds-card-group-item > cds-image').each($img => {
+    cy.get('c4d-card-group-item > c4d-image').each(($img) => {
       cy.wrap($img).should('be.visible');
     });
   },
@@ -77,7 +79,7 @@ const _tests = {
   },
 };
 
-describe('cds-card-section-simple | default (desktop)', () => {
+describe('c4d-card-section-simple | default (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
     cy.visit(`/${_paths.default}`);
@@ -93,7 +95,7 @@ describe('cds-card-section-simple | default (desktop)', () => {
   it('should check a11y', _tests.checkA11y);
 });
 
-describe('cds-card-section-simple | default (mobile)', () => {
+describe('c4d-card-section-simple | default (mobile)', () => {
   beforeEach(() => {
     cy.viewport(375, 720);
     cy.visit(`/${_paths.default}`);