From c5eeb3a937dcf1e6e15f9b9433e171cc27893745 Mon Sep 17 00:00:00 2001 From: kennylam <909118+kennylam@users.noreply.github.com> Date: Thu, 4 Apr 2024 20:54:50 -0400 Subject: [PATCH 1/2] chore(storybook): content-block-card storybook link fix (#11692) ### Description Deprecated component name in Storybook story was causing the components to render incorrectly. ### Changelog **Changed** - use `c4d-card-footer` instead of `c4d-card-cta-footer` --- .../feature-card/_feature-card.scss | 4 +- .../back-to-top/__stories__/data/content.ts | 14 +- .../__stories__/README.stories.react.mdx | 71 +++--- .../__stories__/button.stories.react.tsx | 18 +- .../card-group/__stories__/README.stories.mdx | 52 ++-- .../__stories__/card-group.stories.ts | 16 +- .../__stories__/README.stories.mdx | 6 +- .../card-section-offset.stories.ts | 6 +- .../__tests__/card-section-offset.test.ts | 12 +- .../__stories__/README.stories.mdx | 4 +- .../card-section-simple.stories.ts | 8 +- .../__tests__/card-section-simple.test.ts | 6 +- .../card/__stories__/README.stories.mdx | 4 +- .../card/__stories__/README.stories.react.mdx | 2 +- .../content-block-card-static.test.ts | 6 +- .../__stories__/README.stories.mdx | 6 +- .../content-block-cards.stories.ts | 16 +- .../__tests__/content-block-cards.test.ts | 6 +- .../content-block-media.stories.ts | 10 +- .../content-block-mixed.stories.ts | 6 +- .../content-block-segmented.stories.ts | 6 +- .../content-block-simple.stories.ts | 29 +-- .../content-group-simple.stories.ts | 4 +- .../__stories__/README.stories.mdx | 235 ++++++++++-------- .../components/cta/__stories__/cta.stories.ts | 2 +- .../cta/__tests__/card-cta-footer.test.ts | 22 +- .../components/cta/__tests__/card-cta.test.ts | 12 +- .../src/components/cta/card-cta-footer.ts | 4 +- .../dotcom-shell/__stories__/data/content.ts | 10 +- .../filter-panel/filter-panel-composite.ts | 6 +- .../locale-modal/locale-modal.e2e.js | 6 +- .../masthead/masthead-authenticated.e2e.js | 18 +- .../tests/snapshots/c4d-card-cta-footer.md | 2 +- .../tests/snapshots/c4d-card-footer.md | 56 +++++ .../c4d-content-block-card-static.md | 7 +- .../snapshots/c4d-search-with-typeahead.md | 7 - .../dds-content-block-card-static.md | 126 +++++----- .../snapshots/dds-filter-panel-composite.md | 14 +- .../snapshots/dds-locale-modal-composite.md | 46 ++-- 39 files changed, 464 insertions(+), 421 deletions(-) create mode 100644 packages/web-components/tests/snapshots/c4d-card-footer.md diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss index dc652a6ad9e..fb335a2ac42 100644 --- a/packages/styles/scss/components/feature-card/_feature-card.scss +++ b/packages/styles/scss/components/feature-card/_feature-card.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 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. @@ -588,7 +588,7 @@ $feature-flags: ( } &[size='large'] { - .dds-ce--card__footer ::slotted(svg[slot='icon']) { + .#{$c4d-prefix}-ce--card__footer ::slotted(svg[slot='icon']) { @include breakpoint(max) { block-size: $spacing-10; inline-size: $spacing-10; diff --git a/packages/web-components/src/components/back-to-top/__stories__/data/content.ts b/packages/web-components/src/components/back-to-top/__stories__/data/content.ts index d5b696aff46..d4ed6f5d8f6 100644 --- a/packages/web-components/src/components/back-to-top/__stories__/data/content.ts +++ b/packages/web-components/src/components/back-to-top/__stories__/data/content.ts @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 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. @@ -273,9 +273,9 @@ export const StoryContent = () => Linux on IBM mainframes lets you transform your application and data portfolio with data privacy, security, and cyber resiliency. - + ${ArrowRight20({ slot: 'icon' })} - + Linux OS on LinuxONE @@ -284,9 +284,9 @@ export const StoryContent = () => innovative data privacy, security and cyber resiliency capabilities, plus minimal downtime.

- + ${ArrowRight20({ slot: 'icon' })} - + Linux OS on Power Systems @@ -295,9 +295,9 @@ export const StoryContent = () => cost-effectively on an open, scalable infrastructure with built-in acceleration.

- + ${ArrowRight20({ slot: 'icon' })} - + diff --git a/packages/web-components/src/components/button/__stories__/README.stories.react.mdx b/packages/web-components/src/components/button/__stories__/README.stories.react.mdx index ee7adb94004..c34edf2f890 100644 --- a/packages/web-components/src/components/button/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/button/__stories__/README.stories.react.mdx @@ -1,4 +1,9 @@ -import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks'; +import { + Preview, + Props, + Description, + Story, +} from '@storybook/addon-docs/blocks'; import contributing from '../../../../../../docs/contributing-license.md'; import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/button/button'; @@ -20,37 +25,39 @@ Here's a quick example to get you started. import DDSButton from '@carbon/ibmdotcom-web-components/es/components-react/button/index.js'; function App() { - return ( - Example - ); + return Example; } ``` ### CTA features -The `cta-type` attribute allows every type of CTA and icon available in the Carbon for IBM.com library. -The default CTA style is `local`, which provides a basic link and arrow icon. - -In order to use the desired type, modify the `cta-type` attribute to one of the following: - -* local -* jump -* external -* new tab -* download -* video -* pdf -* blog -* email -* schedule -* chat -* call - -Notes: -* When using `video`, you need to pass the video ID as the `href` attribute. -* The Button component will need to be wrapped within a `DDSVideoCTAContainer` components for videos to play. -* Custom icons can replace the built-in ones within `DDSCardFooter`, they only need to be assigned to the `icon` slot. - +The `cta-type` attribute allows every type of CTA and icon available in the +Carbon for IBM.com library. The default CTA style is `local`, which provides a +basic link and arrow icon. + +In order to use the desired type, modify the `cta-type` attribute to one of the +following: + +- local +- jump +- external +- new tab +- download +- video +- pdf +- blog +- email +- schedule +- chat +- call + +Notes: + +- When using `video`, you need to pass the video ID as the `href` attribute. +- The Button component will need to be wrapped within a `DDSVideoCTAContainer` + components for videos to play. +- Custom icons can replace the built-in ones within `DDSCardFooter`, they only + need to be assigned to the `icon` slot. ## Props @@ -58,10 +65,12 @@ Notes: ## Stable selectors -See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used. +See +[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) +to see how Web Components selector and `data-autoid` should be used. -| Web Components selector | Compatibility selector | Description | -| ------------------------- | -------------------------------------- | ----------- | -| `` | `data-autoid="dds--button"` | Component | +| Web Components selector | Compatibility selector | Description | +| ----------------------- | --------------------------- | ----------- | +| `` | `data-autoid="c4d--button"` | Component | diff --git a/packages/web-components/src/components/button/__stories__/button.stories.react.tsx b/packages/web-components/src/components/button/__stories__/button.stories.react.tsx index 101e658ba42..216489e7809 100644 --- a/packages/web-components/src/components/button/__stories__/button.stories.react.tsx +++ b/packages/web-components/src/components/button/__stories__/button.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * Copyright IBM Corp. 2020, 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. @@ -27,14 +27,14 @@ import { types, } from '../../cta/__stories__/ctaTypeConfig'; -export const Default = args => { +export const Default = (args) => { const { copy, customVideoTitle, ctaType, disabled, download, href } = args?.Button ?? {}; let videoCopy; if (ctaType === CTA_TYPE.VIDEO) { - const button = document.querySelector('dds-button') as any; + const button = document.querySelector('cds-button') as any; const duration = button?.videoTitle?.match(/\((.*)\)/)?.pop(); if (!customVideoTitle) { @@ -48,7 +48,11 @@ export const Default = args => { return ( - + {videoCopy ?? copy} @@ -97,11 +101,13 @@ Default.story = { export default { title: 'Components/Button', decorators: [ - story => { + (story) => { return (
-
{story()}
+
+ {story()} +
); diff --git a/packages/web-components/src/components/card-group/__stories__/README.stories.mdx b/packages/web-components/src/components/card-group/__stories__/README.stories.mdx index 0b92c32941c..07e70fb720e 100644 --- a/packages/web-components/src/components/card-group/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/card-group/__stories__/README.stories.mdx @@ -42,15 +42,11 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + - + Top level card link - - + ``` @@ -58,12 +54,8 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; ### HTML (with Card pictogram) ```html - - + Aerospace and defence

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut @@ -90,10 +82,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; 18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" /> - + Aerospace and defence

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut @@ -120,10 +109,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; 18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" /> - + Aerospace and defence

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut @@ -149,9 +135,8 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; 0.904,0.736,1.64,1.64,1.64h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36, 18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" /> - + - ``` ### HTML (with Card static) @@ -165,14 +150,11 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + - + Top level card link - - + ``` @@ -188,7 +170,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; pattern-background> IBM Developer - Card 01

Learn, code and connect with your community

- + IBM Developer - Card 02

Learn, code and connect with your community

- + IBM Developer - Card 03

Learn, code and connect with your community

- + ``` @@ -288,7 +270,7 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + ``` @@ -297,9 +279,9 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j There are three different options for the `grid-mode` property: -* Default (32px gap) -* Condensed (16px gap) -* Collapsed (no gap) +- Default (32px gap) +- Condensed (16px gap) +- Collapsed (no gap) ## Props diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts index 6c6ddc2793e..af1cf16d5f9 100644 --- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts +++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -85,7 +85,7 @@ const cardsDiffLengthPhrase = (index, tagGroup, media, cardType, addCta) => { ? addCta ? textCTAContent : '' - : html` `} + : html` `} `; @@ -128,7 +128,7 @@ const longHeadingCardGroupItem = (tagGroup, media, cardType, addCta) => { ? addCta ? textCTAContent : '' - : html` `} + : html` `} `; }; @@ -171,7 +171,7 @@ const cardLink = html` pattern-background> IBM Developer

Learn, code and connect with your community

- + `; @@ -187,7 +187,7 @@ const cardInCardItems = (i, tagGroup, media) => { marine litter ${tagGroup ? tagGroupContent : ''} - + ` : html` @@ -207,7 +207,7 @@ const cardInCardItems = (i, tagGroup, media) => { litter ${tagGroup ? tagGroupContent : ''} - + `; }; @@ -230,7 +230,7 @@ export const Default = (args) => { html` Top level card link - + ` ); @@ -255,7 +255,7 @@ export const Default = (args) => { html` Top level card link - + ` ); diff --git a/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx index ef010165f9f..b9624695c97 100644 --- a/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx @@ -54,7 +54,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-offset/index Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis

- + - + - + - - ${ArrowRight20({ slot: 'icon' })} - + ${ArrowRight20({ slot: 'icon' })} `; diff --git a/packages/web-components/src/components/card-section-offset/__tests__/card-section-offset.test.ts b/packages/web-components/src/components/card-section-offset/__tests__/card-section-offset.test.ts index cbb89864e1f..b5aca4eb505 100644 --- a/packages/web-components/src/components/card-section-offset/__tests__/card-section-offset.test.ts +++ b/packages/web-components/src/components/card-section-offset/__tests__/card-section-offset.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -50,23 +50,23 @@ describe('c4d-card-section-offset', function () { Topic Natural Language Processing. - + ${ArrowRight20({ slot: 'icon' })} - + Topic Natural Language Processing. - + ${ArrowRight20({ slot: 'icon' })} Topic Natural Language Processing. - + ${ArrowRight20({ slot: 'icon' })} - + `, }), diff --git a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx index 3afa50125b1..a0f93df727c 100644 --- a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx @@ -40,7 +40,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-simple/index ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + @@ -59,7 +59,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-simple/index Topic Natural Language Processing. - + diff --git a/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts b/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts index 518a0d9588d..7b753f1fcf8 100644 --- a/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts +++ b/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -34,7 +34,7 @@ const cardGroupItems = (withImages) => { ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + `; }; @@ -59,9 +59,9 @@ export const Default = (args) => { color-scheme="inverse" cta-type="local"> Top level card link - + color-scheme="inverse"> ` : ``} diff --git a/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts b/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts index 6ac2e7b2085..c9bae56b832 100644 --- a/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts +++ b/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -45,9 +45,9 @@ describe('c4d-card-section-simple', function () { Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + ${ArrowRight20({ slot: 'icon' })} - + `, }), diff --git a/packages/web-components/src/components/card/__stories__/README.stories.mdx b/packages/web-components/src/components/card/__stories__/README.stories.mdx index c7c28051e8e..7e576419e14 100644 --- a/packages/web-components/src/components/card/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/card/__stories__/README.stories.mdx @@ -34,7 +34,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card/index.js'; Eyebrow text Lorem ipsum dolor sit amet - + - + ${ArrowRight20({ slot: 'icon' })} - + `, contentItemHeading: 'Lorem ipsum', diff --git a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx index 37aed37138e..f044a7f35df 100644 --- a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx @@ -43,7 +43,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-cards/index ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + - + - + - + `; @@ -45,14 +45,14 @@ const cardGroupItemWithImages = html` Topic Natural Language Processing. - + `; const cardGroupItemWithVideos = html` - - + + `; @@ -70,7 +70,7 @@ export const Default = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - + `; @@ -91,7 +91,7 @@ export const withImages = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - + `; @@ -116,7 +116,7 @@ export const withVideos = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - + `; diff --git a/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts b/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts index e6ce316e3f7..19eead8932a 100644 --- a/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts +++ b/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -53,9 +53,9 @@ describe('c4d-content-block-cards', function () { Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + ${ArrowRight20({ slot: 'icon' })} - + `, }), diff --git a/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts b/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts index 7310fa96929..2b892240561 100644 --- a/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts +++ b/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -128,7 +128,7 @@ export const Default = (args) => { Lorem ipsum dolor sit amet - + @@ -164,7 +164,7 @@ export const Default = (args) => { Lorem ipsum dolor sit amet - + @@ -239,7 +239,7 @@ export const withLinkList = (args) => { Lorem ipsum dolor sit amet - + @@ -275,7 +275,7 @@ export const withLinkList = (args) => { Lorem ipsum dolor sit amet - + diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts index b673a773884..f2944824119 100644 --- a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts +++ b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts @@ -2,7 +2,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -235,7 +235,7 @@ export const Default = (args) => { Lorem ipsum dolor sit amet - + @@ -339,7 +339,7 @@ export const WithLinkList = (args) => { Lorem ipsum dolor sit amet - + diff --git a/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts b/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts index 1ca4bb11ce0..260070282de 100644 --- a/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts +++ b/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -142,7 +142,7 @@ export const Default = (args) => { cta-type=${ctaType} href=${hrefsForType[ctaType]}> Lorem ipsum dolor - + `} @@ -227,7 +227,7 @@ export const withLinkList = (args) => { cta-type=${ctaType} href=${hrefsForType[ctaType]}> Lorem ipsum dolor - + `} diff --git a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts index 5cf80b803eb..afd424b29f0 100644 --- a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts +++ b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -13,9 +13,6 @@ import '../../link-list/index'; import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { select } from '@storybook/addon-knobs'; -import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js'; -import ArrowDown20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--down/20.js'; -import Launch20 from '../../../internal/vendor/@carbon/web-components/icons/launch/20.js'; import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../../content-block/content-block'; import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy'; import { CTA_STYLE, CTA_TYPE } from '../../cta/defs'; @@ -93,11 +90,7 @@ export const Default = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - - ${ctaType === 'local' ? ArrowRight20({ slot: 'icon' }) : ''} - ${ctaType === 'jump' ? ArrowDown20({ slot: 'icon' }) : ''} - ${ctaType === 'external' ? Launch20({ slot: 'icon' }) : ''} - + ` : html` @@ -134,11 +127,7 @@ export const WithImage = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - - ${ctaType === 'local' ? ArrowRight20({ slot: 'icon' }) : ''} - ${ctaType === 'jump' ? ArrowDown20({ slot: 'icon' }) : ''} - ${ctaType === 'external' ? Launch20({ slot: 'icon' }) : ''} - + ` : html` @@ -181,11 +170,7 @@ export const WithVideo = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - - ${ctaType === 'local' ? ArrowRight20({ slot: 'icon' }) : ''} - ${ctaType === 'jump' ? ArrowDown20({ slot: 'icon' }) : ''} - ${ctaType === 'external' ? Launch20({ slot: 'icon' }) : ''} - + ` : html` @@ -244,11 +229,7 @@ export const WithLinkList = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - - ${ctaType === 'local' ? ArrowRight20({ slot: 'icon' }) : ''} - ${ctaType === 'jump' ? ArrowDown20({ slot: 'icon' }) : ''} - ${ctaType === 'external' ? Launch20({ slot: 'icon' }) : ''} - + ` : html` diff --git a/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts b/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts index 4e2fa77064c..fbcada32b9f 100644 --- a/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts +++ b/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -143,7 +143,7 @@ export const Default = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - + `; diff --git a/packages/web-components/src/components/content-section/__stories__/README.stories.mdx b/packages/web-components/src/components/content-section/__stories__/README.stories.mdx index 667467100b9..5d663419adb 100644 --- a/packages/web-components/src/components/content-section/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-section/__stories__/README.stories.mdx @@ -89,7 +89,7 @@ component to render correctly within the grid. ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + @@ -276,48 +276,56 @@ component to render correctly within the grid. ``` -As part of the ongoing upgrade to Carbon for IBM.com v2, we have consolidated some of the other `Content section` variants under a single one. -Some of the components that are compatible with the `Content section` component are: `Card group`, `Carousel`, `Link list`. +As part of the ongoing upgrade to Carbon for IBM.com v2, we have consolidated +some of the other `Content section` variants under a single one. Some of the +components that are compatible with the `Content section` component are: +`Card group`, `Carousel`, `Link list`. ### Card group ```html - - - Heading - Copy - CTA text - - - Nunc convallis lobortis + + Heading + Copy + + CTA text + + + Nunc convallis lobortis

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. - Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et + ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at + elit sollicitudin, sodales nulla quis, consequat libero.

- - - - - + + + + ``` ### Carousel ```html - - - Heading - Copy - CTA text - Lorem ipsum dolor sit amet - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. - - - - Lorem ipsum dolor sit amet - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. - + + Heading + Copy + + CTA text + Lorem ipsum dolor sit amet + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies + est. + + + + Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et + ultricies est. + - - - - Lorem ipsum dolor sit amet - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. - + + + + Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et + ultricies est. + - - - - Lorem ipsum dolor sit amet - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. - + + + + Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et + ultricies est. + - - - - Lorem ipsum dolor sit amet - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. - + + + + Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et + ultricies est. + - - - - Lorem ipsum dolor sit amet - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. - + + + + Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et + ultricies est. + - - - - Lorem ipsum dolor sit amet - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. - + + + + Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et + ultricies est. + - - - - + + + + ``` ### Link list ```html - - Heading - Copy - CTA text - Lorem ipsum dolor sit amet - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. - - - - Learn more about Kubernetes and automating deployment ${ArrowRight20({ slot: 'icon' })} - - + + Heading + Copy + + CTA text + Lorem ipsum dolor sit amet + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies + est. + + + + Learn more about Kubernetes and automating deployment ${ArrowRight20({ + slot: 'icon' })} + + Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })} - - + + Microservices and containers ${ArrowRight20({ slot: 'icon' })} - - + + Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })} - - + + Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })} - - + + Microservices and containers ${ArrowRight20({ slot: 'icon' })} - - - + + + ``` ## Props diff --git a/packages/web-components/src/components/cta/__stories__/cta.stories.ts b/packages/web-components/src/components/cta/__stories__/cta.stories.ts index a48d08423bc..21e9a9f4aef 100644 --- a/packages/web-components/src/components/cta/__stories__/cta.stories.ts +++ b/packages/web-components/src/components/cta/__stories__/cta.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. diff --git a/packages/web-components/src/components/cta/__tests__/card-cta-footer.test.ts b/packages/web-components/src/components/cta/__tests__/card-cta-footer.test.ts index 97160e08428..9d9ac79bd9a 100644 --- a/packages/web-components/src/components/cta/__tests__/card-cta-footer.test.ts +++ b/packages/web-components/src/components/cta/__tests__/card-cta-footer.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -21,24 +21,24 @@ const template = (props?) => { children, } = props ?? {}; return html` - ${children} - + `; }; -describe('c4d-card-cta-footer', function () { +describe('c4d-card-footer', function () { describe('Misc attributes', function () { it('should render with minimum attributes', async function () { render(template(), document.body); await Promise.resolve(); - expect( - document.body.querySelector('c4d-card-cta-footer') - ).toMatchSnapshot({ mode: 'shadow' }); + expect(document.body.querySelector('c4d-card-footer')).toMatchSnapshot({ + mode: 'shadow', + }); }); it('should render with various attributes', async function () { @@ -54,9 +54,9 @@ describe('c4d-card-cta-footer', function () { document.body ); await Promise.resolve(); - expect( - document.body.querySelector('c4d-card-cta-footer') - ).toMatchSnapshot({ mode: 'shadow' }); + expect(document.body.querySelector('c4d-card-footer')).toMatchSnapshot({ + mode: 'shadow', + }); }); }); @@ -76,7 +76,7 @@ describe('c4d-card-cta-footer', function () { await Promise.resolve(); // Update cycle for rendering upon `slotchange` event expect( document.body - .querySelector('c4d-card-cta-footer')! + .querySelector('c4d-card-footer')! .shadowRoot!.querySelector('.cds--card__cta__copy')! .textContent!.trim() ).toBe(''); diff --git a/packages/web-components/src/components/cta/__tests__/card-cta.test.ts b/packages/web-components/src/components/cta/__tests__/card-cta.test.ts index ff7fe5b2de2..db2a868b46a 100644 --- a/packages/web-components/src/components/cta/__tests__/card-cta.test.ts +++ b/packages/web-components/src/components/cta/__tests__/card-cta.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -73,15 +73,15 @@ xdescribe('c4d-card-cta', function () { // Should yeild to `undefined` in `name` part given card footer doesn't render the video name formatVideoCaption: ({ name, duration }) => `${name}-${duration}`, formatVideoDuration: ({ duration }) => duration, - children: html` `, + children: html` `, }), document.body ); await Promise.resolve(); // Update cycle for `` - await Promise.resolve(); // Update cycle for `` upon property forwarding - expect( - document.body.querySelector('c4d-card-cta-footer') - ).toMatchSnapshot({ mode: 'shadow' }); + await Promise.resolve(); // Update cycle for `` upon property forwarding + expect(document.body.querySelector('c4d-card-footer')).toMatchSnapshot({ + mode: 'shadow', + }); }); }); diff --git a/packages/web-components/src/components/cta/card-cta-footer.ts b/packages/web-components/src/components/cta/card-cta-footer.ts index fa61670086d..e0180431e8a 100644 --- a/packages/web-components/src/components/cta/card-cta-footer.ts +++ b/packages/web-components/src/components/cta/card-cta-footer.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -27,7 +27,7 @@ const { prefix, stablePrefix: c4dPrefix } = settings; /** * Card CTA footer. * - * @element c4d-card-cta-footer + * @element c4d-card-footer */ @customElement(`${c4dPrefix}-card-cta-footer`) class C4DCardCTAFooter extends VideoCTAMixin(CTAMixin(C4DCardFooter)) { diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts index c7929c53031..d9732bc3b77 100644 --- a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts +++ b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts @@ -1,6 +1,6 @@ /* eslint-disable max-len */ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 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. @@ -149,9 +149,7 @@ export const cardGroupItems = html` Topic Natural Language Processing. - - ${ArrowRight20({ slot: 'icon' })} - + ${ArrowRight20({ slot: 'icon' })} `; @@ -270,7 +268,7 @@ export const tocContent = html` ${Array.from([1, 2]).map(() => contentBlockSegmentedItemsWithImage)} Lorem ipsum dolor - + @@ -470,7 +468,7 @@ export const StoryContentNoToC = () => cta-type="local" href="https://example.com"> Lorem ipsum dolor - + diff --git a/packages/web-components/src/components/filter-panel/filter-panel-composite.ts b/packages/web-components/src/components/filter-panel/filter-panel-composite.ts index 95d0c21e85b..726bd6f19dd 100644 --- a/packages/web-components/src/components/filter-panel/filter-panel-composite.ts +++ b/packages/web-components/src/components/filter-panel/filter-panel-composite.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 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. @@ -443,10 +443,10 @@ class C4DFilterPanelComposite extends MediaQueryMixin( render() { // Note that the contents, intended to be - // are never shown as is. The text contents + // are never shown as is. The text contents // are composed, using this._getComposedHeadingFilterCount(), together with // the current filter count, and passed as an attribute to - // and . + // and . return html` { ); }); - cy.get('dds-locale-modal') + cy.get('c4d-locale-modal') .shadow() - .find('dds-expressive-modal-close-button') + .find('c4d-expressive-modal-close-button') .shadow() .find('button') .click(); diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js index 88808f61294..aff19c9b2ed 100644 --- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js +++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2021, 2023 + * 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. @@ -14,38 +14,38 @@ const _pathDefault = '/iframe.html?id=components-masthead--default&knob-use%20mock%20nav%20data%20(use-mock)=true&knob-The%20user%20authenticated%20status%20(user-status)=test.user@ibm.com'; -describe('dds-masthead | authenticated (desktop)', () => { +describe('c4d-masthead | authenticated (desktop)', () => { beforeEach(() => { cy.viewport(1280, 780).visit(`/${_pathDefault}`); }); it('should open the login menu with 4 items', () => { - cy.get('dds-masthead-profile') + cy.get('c4d-masthead-profile') .shadow() .find('a') .click(); - cy.get('dds-masthead-profile-item').should('have.length', 4); + cy.get('c4d-masthead-profile-item').should('have.length', 4); cy.takeSnapshots(); }); it('should not render profile menu when disabled', () => { - cy.get('dds-masthead-composite').invoke('attr', 'has-profile', 'false'); - cy.get('dds-masthead-profile').should('not.exist'); + cy.get('c4d-masthead-composite').invoke('attr', 'has-profile', 'false'); + cy.get('c4d-masthead-profile').should('not.exist'); cy.takeSnapshots(); }); }); -describe('dds-masthead | default (mobile)', () => { +describe('c4d-masthead | default (mobile)', () => { beforeEach(() => { cy.viewport(320, 780).visit(`/${_pathDefault}`); }); it('should open the login menu with 4 items', () => { - cy.get('dds-masthead-profile') + cy.get('c4d-masthead-profile') .shadow() .find('a') .click(); - cy.get('dds-masthead-profile-item').should('have.length', 4); + cy.get('c4d-masthead-profile-item').should('have.length', 4); cy.takeSnapshots('mobile'); }); }); diff --git a/packages/web-components/tests/snapshots/c4d-card-cta-footer.md b/packages/web-components/tests/snapshots/c4d-card-cta-footer.md index cf57d5f779e..c7273d32fe0 100644 --- a/packages/web-components/tests/snapshots/c4d-card-cta-footer.md +++ b/packages/web-components/tests/snapshots/c4d-card-cta-footer.md @@ -1,4 +1,4 @@ -# `c4d-card-cta-footer` +# `c4d-card-footer` ## `Misc attributes` diff --git a/packages/web-components/tests/snapshots/c4d-card-footer.md b/packages/web-components/tests/snapshots/c4d-card-footer.md new file mode 100644 index 00000000000..9eb4d6d71ed --- /dev/null +++ b/packages/web-components/tests/snapshots/c4d-card-footer.md @@ -0,0 +1,56 @@ +# `c4d-card-footer` + +## `Misc attributes` + +#### `should render with minimum attributes` + +``` + + + + + + + + +``` + +#### `should render with various attributes` + +``` + + + + + - This link plays a video + + + + +``` + diff --git a/packages/web-components/tests/snapshots/c4d-content-block-card-static.md b/packages/web-components/tests/snapshots/c4d-content-block-card-static.md index a34f4602654..5cd164f0327 100644 --- a/packages/web-components/tests/snapshots/c4d-content-block-card-static.md +++ b/packages/web-components/tests/snapshots/c4d-content-block-card-static.md @@ -103,14 +103,15 @@ Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- - + diff --git a/packages/web-components/tests/snapshots/c4d-search-with-typeahead.md b/packages/web-components/tests/snapshots/c4d-search-with-typeahead.md index b849a1887eb..b48126ac74a 100644 --- a/packages/web-components/tests/snapshots/c4d-search-with-typeahead.md +++ b/packages/web-components/tests/snapshots/c4d-search-with-typeahead.md @@ -100,13 +100,6 @@ -
-
- - + ``` @@ -30,13 +30,13 @@
- - + ``` diff --git a/packages/web-components/tests/snapshots/dds-locale-modal-composite.md b/packages/web-components/tests/snapshots/dds-locale-modal-composite.md index 80173431c00..01af4ef9144 100644 --- a/packages/web-components/tests/snapshots/dds-locale-modal-composite.md +++ b/packages/web-components/tests/snapshots/dds-locale-modal-composite.md @@ -1,62 +1,62 @@ -# `dds-locale-modal-composite` +# `c4d-locale-modal-composite` ## `Misc attributes` #### `should render minimum attributes` ``` - - - - + - - + + ``` #### `should render various attributes` ``` - - - - - - - - + + + + + - - + + ``` From 856b2b685f35e01ddf0e720fcecd82e3dd9485ce Mon Sep 17 00:00:00 2001 From: bruno-amorim Date: Thu, 4 Apr 2024 23:55:38 -0300 Subject: [PATCH 2/2] chore(masthead-tests): updating/fixing masthead cypress tests (#11686) ### Related Ticket(s) Closes # ADCMS-4576 | https://jsw.ibm.com/browse/ADCMS-4576 ### Description There were some gaps in our tests for the masthead and they're now fixed: - tests were using the wrong prefix, trying to access elements that had their semantics changed - all prefixes are now grouped in an object for better maintenance - fixed lots of tests that were not working - added mobile test cases for the L1 --- .../masthead/masthead-authenticated.e2e.js | 19 +++-- .../masthead/masthead-custom-search.e2e.js | 25 +++--- .../masthead/masthead-default.e2e.js | 2 - .../integration/masthead/masthead-l1.e2e.js | 54 ++++++++++--- .../masthead/masthead-platform.e2e.js | 17 ++-- .../masthead/masthead-scoped-search.e2e.js | 78 +++++++++++-------- .../masthead/masthead-search-onload.e2e.js | 19 +++-- .../integration/masthead/masthead.e2e.js | 56 ++++++++----- 8 files changed, 183 insertions(+), 87 deletions(-) diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js index aff19c9b2ed..86eca6d5969 100644 --- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js +++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js @@ -11,6 +11,13 @@ * @type {string} * @private */ + +const _selectors = { + mastheadContainer: 'c4d-masthead-container', + mastheadProfile: 'c4d-masthead-profile', + mastheadProfileItem: 'c4d-masthead-profile-item', +} + const _pathDefault = '/iframe.html?id=components-masthead--default&knob-use%20mock%20nav%20data%20(use-mock)=true&knob-The%20user%20authenticated%20status%20(user-status)=test.user@ibm.com'; @@ -20,17 +27,17 @@ describe('c4d-masthead | authenticated (desktop)', () => { }); it('should open the login menu with 4 items', () => { - cy.get('c4d-masthead-profile') + cy.get(_selectors.mastheadProfile) .shadow() .find('a') .click(); - cy.get('c4d-masthead-profile-item').should('have.length', 4); + cy.get(_selectors.mastheadProfileItem).should('have.length', 4); cy.takeSnapshots(); }); it('should not render profile menu when disabled', () => { - cy.get('c4d-masthead-composite').invoke('attr', 'has-profile', 'false'); - cy.get('c4d-masthead-profile').should('not.exist'); + cy.get(_selectors.mastheadContainer).invoke('attr', 'has-profile', 'false'); + cy.get(_selectors.mastheadProfile).should('not.exist'); cy.takeSnapshots(); }); }); @@ -41,11 +48,11 @@ describe('c4d-masthead | default (mobile)', () => { }); it('should open the login menu with 4 items', () => { - cy.get('c4d-masthead-profile') + cy.get(_selectors.mastheadProfile) .shadow() .find('a') .click(); - cy.get('c4d-masthead-profile-item').should('have.length', 4); + cy.get(_selectors.mastheadProfileItem).should('have.length', 4); cy.takeSnapshots('mobile'); }); }); diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-custom-search.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-custom-search.e2e.js index 78e2fdcb022..b5262595c86 100644 --- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-custom-search.e2e.js +++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-custom-search.e2e.js @@ -11,10 +11,17 @@ * @type {string} * @private */ + +const _selectors = { + masthead: 'c4d-masthead', + mastheadSearch: 'c4d-search-with-typeahead', + mastheadSearchButton: '.cds--header__search--search', +} + const _pathCustomSearch = '/iframe.html?id=components-masthead--with-custom-typeahead&knob-use%20mock%20nav%20data%20(use-mock)=true'; -describe('cds-masthead | custom search (desktop)', () => { +describe('c4d-masthead | custom search (desktop)', () => { beforeEach(() => { cy.visit(`/${_pathCustomSearch}`); cy.injectAxe(); @@ -28,30 +35,30 @@ describe('cds-masthead | custom search (desktop)', () => { }); it('should open the search bar on click', () => { - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearch}`) .shadow() - .find('.bx--header__search--search') + .find(_selectors.mastheadSearchButton) .click(); cy.takeSnapshots(); }); - xit('should display grouped results with hrefs', () => { + it('should display grouped results with hrefs', () => { // Mock grouped search typeahead API. Below we user the "cloud" search // string. Every keypress will trigger an API request, so here we mock each // successive cumulative search query. - [('c', 'cl', 'clo', 'clou', 'cloud')].forEach(query => { - cy.intercept(`https://ibmdocs-dev.dcs.ibm.com/docs/api/v1/suggest?query=${query}&lang=undefined&categories=&limit=6`, { + ['c', 'cl', 'clo', 'clou', 'cloud'].forEach(query => { + cy.intercept(`https://ibm.com/docs/api/v1/suggest?query=${query}&lang=undefined&categories=&limit=6`, { fixture: `grouped-typeahead-${query}.json`, }).as(`grouped-typeahead-${query}`); }); - cy.get('c4d-masthead > c4d-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearch}`) .shadow() - .find('.bx--header__search--search') + .find(_selectors.mastheadSearchButton) .click(); - cy.get('c4d-masthead > c4d-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearch}`) .shadow() .find('.react-autosuggest__container > input') .type('cloud', { force: true }); diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-default.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-default.e2e.js index a42bdc8d4ba..22da2139d84 100644 --- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-default.e2e.js +++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-default.e2e.js @@ -442,7 +442,6 @@ describe('c4d-masthead | performance optimizations', () => { // Left nav not opened yet, assert that none of the lazy loaded elements // are registered. [ - 'c4d-left-nav-cta-item', 'c4d-left-nav-name', 'c4d-left-nav-menu', 'c4d-left-nav-menu-section', @@ -463,7 +462,6 @@ describe('c4d-masthead | performance optimizations', () => { // Left nav opened! Assert that all the lazy loaded elements have been // loaded and registered. [ - 'c4d-left-nav-cta-item', 'c4d-left-nav-name', 'c4d-left-nav-menu', 'c4d-left-nav-menu-section', diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-l1.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-l1.e2e.js index 0d56ce05fb1..97af5b16cd4 100644 --- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-l1.e2e.js +++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-l1.e2e.js @@ -18,19 +18,23 @@ const _pathl1 = '/iframe.html?id=components-masthead--with-l-1&knob-use%20mock%2 */ const _selectors = { l1: 'c4d-masthead-l1', + l1CtaContainer: 'c4d-masthead-l1-cta', l1Name: '.cds--masthead__l1-title', l1Login: '.cds--masthead__l1-login', - l1Cta: '.cds--masthead__l1-login', + l1Cta: '.cds--masthead__l1-cta', l1Menu: '.cds--masthead__l1-menu', l1Item: '.cds--masthead__l1-item', + l1ScrollNextArrow: '#scroll-next', l1Dropdown: '.cds--masthead__l1-dropdown', + l1DropdownSubSection: '.cds--masthead__l1-dropdown-subsection', + l1DropdownContainer: '.cds--masthead__l1-inner-container', l1DropdownAnnouncement: '.cds--masthead__l1-dropdown-announcement', l1DropdownLinks: '.cds--masthead__l1-dropdown-links', l1DropdownSection: '.cds--masthead__l1-dropdown-section', l1DropdownViewAll: '.cds--masthead__l1-dropdown-viewall', }; -describe('cds-masthead | with L1 (desktop)', () => { +describe('c4d-masthead | with L1 (desktop)', () => { beforeEach(() => { cy.visit(`/${_pathl1}`); cy.injectAxe(); @@ -108,8 +112,7 @@ describe('cds-masthead | with L1 (desktop)', () => { }); }); - // @TODO: re-enable once :has selector use is replaced - it.skip('should support two column dropdowns', () => { + it('should support two column dropdowns', () => { cy.get(_selectors.l1) .shadow() .find(_selectors.l1Item) @@ -125,8 +128,7 @@ describe('cds-masthead | with L1 (desktop)', () => { }); }); - // @TODO: re-enable once :has selector use is replaced - it.skip('should support asymmetrical two column dropdowns', () => { + it('should support asymmetrical two column dropdowns', () => { cy.get(_selectors.l1) .shadow() .find(_selectors.l1Item) @@ -142,8 +144,7 @@ describe('cds-masthead | with L1 (desktop)', () => { }); }); - // @TODO: re-enable once :has selector use is replaced - it.skip('should support three column dropdowns', () => { + it('should support three column dropdowns', () => { cy.get(_selectors.l1) .shadow() .find(_selectors.l1Item) @@ -173,7 +174,7 @@ describe('cds-masthead | with L1 (desktop)', () => { }); it('should render a single CTA link', () => { - cy.get(_selectors.l1) + cy.get(_selectors.l1CtaContainer) .shadow() .find(_selectors.l1Cta) .should('have.length', 1) @@ -183,4 +184,39 @@ describe('cds-masthead | with L1 (desktop)', () => { }) }); + it('should have horizontal scroll for L1 items working', () => { + cy.viewport(1100, 780); + + cy.get(_selectors.l1) + .shadow() + .find(_selectors.l1ScrollNextArrow) + .click(); + + cy.get(_selectors.l1) + .shadow() + .find(_selectors.l1Item) + .eq(5) + .should('be.visible'); + }); + +}); + +describe('c4d-masthead L1 | default (mobile)', () => { + const mastheadButton = () => cy.get(_selectors.l1).shadow().find(`${_selectors.l1DropdownContainer} > button`); + + beforeEach(() => { + cy.viewport(320, 780).visit(`/${_pathl1}`); + }); + + it('should open L1 menu with all items', () => { + mastheadButton().click(); + cy.get(`${_selectors.l1Dropdown} > li`).should('be.visible'); + }); + + it('should open L1 sub menus', () => { + mastheadButton().click(); + cy.get(`${_selectors.l1Dropdown} > li:nth-child(2)`).click(); + cy.get(`${_selectors.l1DropdownSubSection} > ul:first-child > li > a`).should('be.visible'); + }); }); + diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-platform.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-platform.e2e.js index 95e60c70dc0..13d9fd806dc 100644 --- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-platform.e2e.js +++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-platform.e2e.js @@ -11,9 +11,16 @@ * @type {string} * @private */ + +const _selectors = { + masthead: 'c4d-masthead', + mastheadNavName: 'c4d-top-nav-name', + mastheadSearchBar: 'c4d-search-with-typeahead', +} + const _pathPlatform = '/iframe.html?id=components-masthead--with-platform&knob-use%20mock%20nav%20data%20(use-mock)=true'; -describe('cds-masthead | with platform (desktop)', () => { +describe('c4d-masthead | with platform (desktop)', () => { beforeEach(() => { cy.visit(`/${_pathPlatform}`); cy.injectAxe(); @@ -25,7 +32,7 @@ describe('cds-masthead | with platform (desktop)', () => { }); it('should load platform containing a link', () => { - cy.get('cds-masthead > cds-top-nav-name') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadNavName}`) .shadow() .find('a') .then($link => { @@ -35,15 +42,15 @@ describe('cds-masthead | with platform (desktop)', () => { }); it('should render platform next to IBM logo', () => { - cy.get('cds-masthead > cds-top-nav-name').then($platform => { - cy.get('cds-masthead > cds-masthead-logo').then($logo => { + cy.get(`${_selectors.masthead} > ${_selectors.mastheadNavName}`).then($platform => { + cy.get(`${_selectors.masthead} > ${_selectors.masthead}-logo`).then($logo => { expect($logo[0].getBoundingClientRect().right).to.equal($platform[0].getBoundingClientRect().left); }); }); }); it('should open the search bar with platform', () => { - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchBar}`) .shadow() .find('[part="open-button"]') .click(); diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-scoped-search.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-scoped-search.e2e.js index 96582b742be..3a5048e0a6a 100644 --- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-scoped-search.e2e.js +++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-scoped-search.e2e.js @@ -11,9 +11,23 @@ * @type {string} * @private */ + +const _selectors = { + masthead: 'c4d-masthead', + mastheadNavName: 'c4d-top-nav-name', + mastheadSearchBar: 'c4d-search-with-typeahead', + mastheadSearchButton: '.cds--header__search--search', + mastheadScopedSearchDropDown: 'c4d-scoped-search-dropdown', + mastheadScopedSearchDropDownMobile: 'c4d-scoped-search-dropdown-mobile', + mastheadSearchItem: 'c4d-search-with-typeahead-item', + mastheadDropDownButton: '.cds--dropdown', + mastheadDropDownButtonMobile: '.cds--select-input', + mastheadDropDownItem: 'cds-dropdown-item', +} + const _pathScopedSearch = '/iframe.html?id=components-masthead--with-scoped-search'; -describe('cds-masthead | scoped search (desktop)', () => { +describe('c4d-masthead | scoped search (desktop)', () => { beforeEach(() => { cy.visit(`/${_pathScopedSearch}`); cy.injectAxe(); @@ -27,28 +41,28 @@ describe('cds-masthead | scoped search (desktop)', () => { }); it('should open the search bar on click', () => { - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchBar}`) .shadow() - .find('.bx--header__search--search') + .find(_selectors.mastheadSearchButton) .click(); cy.takeSnapshots(); }); it('should retrieve regular results with "all" scope', () => { - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchBar}`) .shadow() - .find('.bx--header__search--search') + .find(_selectors.mastheadSearchButton) .click(); - cy.get('cds-scoped-search-dropdown').should('have.value', 'all'); + cy.get(_selectors.mastheadScopedSearchDropDown).should('have.value', 'all'); - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchBar}`) .shadow() .find('input[type="text"]') .type('cloud', { force: true }); - cy.get('cds-search-with-typeahead-item').should('have.length', 10); + cy.get(_selectors.mastheadSearchItem).should('have.length', 10); cy.takeSnapshots(); }); @@ -59,33 +73,33 @@ describe('cds-masthead | scoped search (desktop)', () => { fixture: 'scoped-typeahead.json', }); - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchBar}`) .shadow() - .find('.bx--header__search--search') + .find(_selectors.mastheadSearchButton) .click(); - cy.get('cds-scoped-search-dropdown') + cy.get(_selectors.mastheadScopedSearchDropDown) .shadow() - .find('.bx--dropdown') + .find(_selectors.mastheadDropDownButton) .click(); - cy.get('cds-scoped-search-dropdown') - .find(`bx-dropdown-item[value="pw"]`) + cy.get(_selectors.mastheadScopedSearchDropDown) + .find(`${_selectors.mastheadDropDownItem}[value="pw"]`) .click(); - cy.get('cds-scoped-search-dropdown').should('have.value', 'pw'); + cy.get(_selectors.mastheadScopedSearchDropDown).should('have.value', 'pw'); - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchBar}`) .shadow() .find('input[type="text"]') .type('cloud', { force: true }); - cy.get('cds-search-with-typeahead-item').should('have.length', 5); + cy.get(_selectors.mastheadSearchItem).should('have.length', 5); cy.takeSnapshots(); }); }); -describe('cds-masthead | scoped search (mobile)', () => { +describe('c4d-masthead | scoped search (mobile)', () => { beforeEach(() => { cy.visit(`/${_pathScopedSearch}`); cy.viewport(320, 780); @@ -94,28 +108,28 @@ describe('cds-masthead | scoped search (mobile)', () => { }); it('should open the search bar on click', () => { - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchBar}`) .shadow() - .find('.bx--header__search--search') + .find(_selectors.mastheadSearchButton) .click(); cy.takeSnapshots(); }); it('should retrieve regular results with "all" scope', () => { - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchBar}`) .shadow() - .find('.bx--header__search--search') + .find(_selectors.mastheadSearchButton) .click(); - cy.get('cds-scoped-search-dropdown-mobile').should('have.value', 'all'); + cy.get(_selectors.mastheadScopedSearchDropDownMobile).should('have.value', 'all'); - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchBar}`) .shadow() .find('input[type="text"]') .type('cloud', { force: true }); - cy.get('cds-search-with-typeahead-item').should('have.length', 10); + cy.get(_selectors.mastheadSearchItem).should('have.length', 10); cy.takeSnapshots(); }); @@ -126,23 +140,23 @@ describe('cds-masthead | scoped search (mobile)', () => { fixture: 'scoped-typeahead.json', }); - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchBar}`) .shadow() - .find('.bx--header__search--search') + .find(_selectors.mastheadSearchButton) .click(); - cy.get('cds-scoped-search-dropdown-mobile') + cy.get(_selectors.mastheadScopedSearchDropDownMobile) .shadow() - .find('.bx--select-input') + .find(_selectors.mastheadDropDownButtonMobile) .select('pw'); - cy.get('cds-scoped-search-dropdown-mobile').should('have.value', 'pw'); + cy.get(_selectors.mastheadScopedSearchDropDownMobile).should('have.value', 'pw'); - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchBar}`) .shadow() .find('input[type="text"]') .type('cloud', { force: true }); - cy.get('cds-search-with-typeahead-item').should('have.length', 5); + cy.get(_selectors.mastheadSearchItem).should('have.length', 5); cy.takeSnapshots(); }); }); diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-search-onload.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-search-onload.e2e.js index 12abc66f7b8..b09d4cecbbe 100644 --- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-search-onload.e2e.js +++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-search-onload.e2e.js @@ -11,10 +11,17 @@ * @type {string} * @private */ + +const _selectors = { + mastheadSearch: 'c4d-search-with-typeahead', + mastheadSearchItem: 'c4d-search-with-typeahead-item', + mastheadTopNav: 'c4d-top-nav', +} + const _pathSearchOpenOnload = '/iframe.html?id=components-masthead--search-open-onload&knob-use%20mock%20nav%20data%20(use-mock)=true'; -describe('cds-masthead | search open onload (desktop)', () => { +describe('c4d-masthead | search open onload (desktop)', () => { beforeEach(() => { // TODO: fix the uncaught exception in Firefox only cy.on('uncaught:exception', (err, runnable) => { @@ -35,7 +42,7 @@ describe('cds-masthead | search open onload (desktop)', () => { }); it('should load search field open by default', () => { - cy.get('cds-search-with-typeahead') + cy.get(_selectors.mastheadSearch) .shadow() .find('input[type="text"]') .should('be.visible'); @@ -44,7 +51,7 @@ describe('cds-masthead | search open onload (desktop)', () => { }); it('should have typable search field', () => { - cy.get('cds-search-with-typeahead') + cy.get(_selectors.mastheadSearch) .shadow() .find('input[type="text"]') .type('test') @@ -52,17 +59,17 @@ describe('cds-masthead | search open onload (desktop)', () => { }); it('should display 10 auto suggest results', () => { - cy.get('cds-search-with-typeahead') + cy.get(_selectors.mastheadSearch) .shadow() .find('input[type="text"]') .type('test'); - cy.get('c4d-search-with-typeahead-item').should('have.length', 10); + cy.get(_selectors.mastheadSearchItem).should('have.length', 10); cy.takeSnapshots(); }); it('should not display menu options while search field is open', () => { - cy.get('cds-top-nav').should('have.attr', 'hidenav'); + cy.get(_selectors.mastheadTopNav).should('have.attr', 'hidenav'); }); }); diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead.e2e.js index c6933d1fdc0..f24ebefc381 100755 --- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead.e2e.js +++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead.e2e.js @@ -11,9 +11,29 @@ * @type {string} * @private */ + +const _selectors = { + masthead: 'c4d-masthead', + mastheadLogo: 'c4d-masthead-logo', + mastheadSearchTypeBar: 'c4d-search-with-typeahead', + mastheadSearchResultItem: 'c4d-search-with-typeahead-item', + mastheadSearchBtn: '.cds--header__search--search', + mastheadMenuItem: 'c4d-top-nav-item', + mastheadDropDownMenuItem: 'c4d-megamenu-top-nav-menu', + mastheadProfileBtn: 'c4d-masthead-profile', + mastheadProfileItems: 'c4d-masthead-profile-item', + mastheadMenuBtnMobile: 'c4d-masthead-menu-button', + mastheadRightNav: 'c4d-megamenu-right-navigation', + mastheadLeftNav: 'c4d-left-nav-menu', + mastheadCategoryGroup: 'c4d-megamenu-category-group', + mastheadCategoryLink: 'c4d-megamenu-category-link', + mastheadNavMenuSection: 'c4d-left-nav-menu-section', + +} + const _pathDefault = '/iframe.html?id=components-masthead--default'; -describe('cds-masthead | default (desktop)', () => { +describe('c4d-masthead | default (desktop)', () => { beforeEach(() => { cy.visit(`/${_pathDefault}`); cy.injectAxe(); @@ -27,7 +47,7 @@ describe('cds-masthead | default (desktop)', () => { }); it('should have url for IBM logo', () => { - cy.get('cds-masthead-logo') + cy.get(_selectors.mastheadLogo) .shadow() .find('a') .then($link => { @@ -38,7 +58,7 @@ describe('cds-masthead | default (desktop)', () => { it('should load menu item with selected state', () => { let selectedState = false; - cy.get('cds-megamenu-top-nav-menu') + cy.get(_selectors.mastheadMenuItem) .each($menuItem => { if ($menuItem.attr('active') !== undefined) { selectedState = true; @@ -52,7 +72,7 @@ describe('cds-masthead | default (desktop)', () => { }); it('should load a megamenu with links', () => { - cy.get('cds-megamenu-top-nav-menu:nth-child(2)') + cy.get(`${_selectors.mastheadDropDownMenuItem}:nth-child(2)`) .shadow() .find('a') .click(); @@ -63,13 +83,13 @@ describe('cds-masthead | default (desktop)', () => { it('should have urls for the submenu items within the megamenu', () => { // Click to open the megamenu that we're interested in inspecting, since // due to lazy loading, it's not in the DOM by default. - cy.get('cds-megamenu-top-nav-menu:nth-child(2)') + cy.get(`${_selectors.mastheadDropDownMenuItem}:nth-child(2)`) .shadow() .find('[part=trigger]') .click(); cy.get( - 'cds-megamenu-top-nav-menu:nth-child(2) > cds-megamenu > cds-megamenu-right-navigation > cds-megamenu-category-group > cds-megamenu-category-link:nth-child(1)' + `${_selectors.mastheadRightNav} > ${_selectors.mastheadCategoryGroup} > ${_selectors.mastheadCategoryLink}:nth-child(1)` ) .shadow() .find('a') @@ -80,7 +100,7 @@ describe('cds-masthead | default (desktop)', () => { }); it('should open the login menu', () => { - cy.get('cds-masthead-profile') + cy.get(_selectors.mastheadProfileBtn) .shadow() .find('a') .click(); @@ -89,36 +109,36 @@ describe('cds-masthead | default (desktop)', () => { }); it('should have 2 menu items under the login menu', () => { - cy.get('cds-masthead-profile-item').should('have.length', 2); + cy.get(_selectors.mastheadProfileItems).should('have.length', 2); }); it('should open the search bar on click', () => { - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchTypeBar}`) .shadow() - .find('.bx--header__search--search') + .find(_selectors.mastheadSearchBtn) .click(); cy.takeSnapshots(); }); it('should allow keywords in the search bar and display 10 suggested results', () => { - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchTypeBar}`) .shadow() - .find('.bx--header__search--search') + .find(_selectors.mastheadSearchBtn) .click(); - cy.get('cds-masthead > cds-search-with-typeahead') + cy.get(`${_selectors.masthead} > ${_selectors.mastheadSearchTypeBar}`) .shadow() .find('.react-autosuggest__container > input') .type('redhat', { force: true }); - cy.get('cds-search-with-typeahead-item').should('have.length', 10); + cy.get(_selectors.mastheadSearchResultItem).should('have.length', 10); cy.takeSnapshots(); }); }); -describe('cds-masthead | default (mobile)', () => { +describe('c4d-masthead | default (mobile)', () => { beforeEach(() => { cy.visit(`/${_pathDefault}`); cy.injectAxe(); @@ -132,7 +152,7 @@ describe('cds-masthead | default (mobile)', () => { }); it('should load the mobile menu', () => { - cy.get('cds-masthead-menu-button') + cy.get(_selectors.mastheadMenuBtnMobile) .shadow() .find('button') .click(); @@ -141,12 +161,12 @@ describe('cds-masthead | default (mobile)', () => { }); it('should load the mobile menu | level 2', () => { - cy.get('cds-masthead-menu-button') + cy.get(_selectors.mastheadMenuBtnMobile) .shadow() .find('button') .click(); - cy.get('cds-left-nav-menu-section:nth-child(1) > cds-left-nav-menu:nth-child(2)') + cy.get(`${_selectors.mastheadNavMenuSection}:nth-child(1) > ${_selectors.mastheadLeftNav}:nth-child(2)`) .shadow() .find('button') .click();