generated from adobe/aem-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 174
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[MWPW-158314 : NALA] Add nala tests for additional marquee variants (#…
…2950) * add nala tests for additional marquee variants * fix eslint errors * fix eslint errors * add analytics steps * fix eslint errors --------- Co-authored-by: Santoshkumar Sharanappa Nateekar <nateekar@SantoshumarsMBP.attlocal.net> Co-authored-by: Santoshkumar Sharanappa Nateekar <nateekar@santoshumarsmbp.corp.adobe.com>
- Loading branch information
3 people
authored
Sep 26, 2024
1 parent
00f139c
commit 501a373
Showing
6 changed files
with
554 additions
and
204 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| export default class MarqueeAnchors { | ||
| constructor(page, nth = 0) { | ||
| this.page = page; | ||
|
|
||
| // marquee anchor variants locators | ||
| this.marqueeAnchors = page.locator('.marquee-anchors').nth(nth); | ||
| this.marqueeAnchorsTransparent = page.locator('.marquee-anchors').nth(nth); | ||
|
|
||
| // marquee details | ||
| this.detailM = this.marqueeAnchors.locator('.detail-m'); | ||
| this.detailL = this.marqueeAnchors.locator('.detail-l'); | ||
|
|
||
| // marquee headings | ||
| this.headingL = this.marqueeAnchors.locator('.heading-l').nth(0); | ||
|
|
||
| // marquee body area | ||
| this.bodyM = this.marqueeAnchors.locator('.body-m').nth(0); | ||
|
|
||
| // marquee actions area | ||
| this.actionArea = this.marqueeAnchors.locator('.action-area'); | ||
| this.outlineButton = this.marqueeAnchors.locator('.con-button.outline'); | ||
| this.blueButton = this.marqueeAnchors.locator('.con-button.blue'); | ||
| this.supplementalText = this.marqueeAnchors.locator('.supplemental-text'); | ||
| this.foregroundImage = this.marqueeAnchors.locator('.supplemental-text img'); | ||
| // marquee anchor link | ||
| this.anchorHeader = this.marqueeAnchors.locator('.links-header'); | ||
| this.anchorFooter = this.marqueeAnchors.locator('.links-footer'); | ||
|
|
||
| this.anchorLinks = this.marqueeAnchors.locator('.anchor-link'); | ||
| this.anchorLink = { | ||
| howTo: { | ||
| link: this.anchorLinks.nth(0), | ||
| linkHeader: this.anchorLinks.nth(0).locator('#anchor-how-to'), | ||
| linkText: this.anchorLinks.nth(0).locator('#anchor-how-to p').nth(0), | ||
| icon: this.anchorLinks.nth(0).locator('img.icon-milo'), | ||
| }, | ||
| text: { | ||
| link: this.anchorLinks.nth(1), | ||
| linkHeader: this.anchorLinks.locator('#anchor-text'), | ||
| linkText: this.anchorLinks.locator('#anchor-text p').nth(0), | ||
| icon: this.anchorLinks.nth(1).locator('img.icon-milo'), | ||
| }, | ||
| media: { | ||
| link: this.anchorLinks.nth(2), | ||
| linkHeader: this.anchorLinks.locator('#anchor-media'), | ||
| linkText: this.anchorLinks.locator('#anchor-media p').nth(0), | ||
| icon: this.anchorLinks.nth(2).locator('img.icon-milo'), | ||
| }, | ||
| linkToAdobe: { | ||
| link: this.anchorLinks.nth(3), | ||
| linkHeader: this.anchorLinks.locator('h4#anchor-link-to-adobe'), | ||
| linkText: this.anchorLinks.locator('#anchor-link-to-adobe p').nth(0), | ||
| icon: this.anchorLinks.nth(3).locator('img.icon-milo'), | ||
| }, | ||
| }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| module.exports = { | ||
| name: 'Marquee Anchors Block', | ||
| features: [ | ||
| { | ||
| tcid: '0', | ||
| name: 'Marquee Anchors', | ||
| path: '/drafts/nala/blocks/marquee/marquee-anchors', | ||
| data: { | ||
| detailText: 'Heading M Bold 24/30', | ||
| h2Text: 'Heading XL Bold (36/45) Lorem ipsum (Image Background)', | ||
| bodyText: 'Lorem ipsum dolor sit amet,.', | ||
| outlineButtonText: 'Lorem ipsum', | ||
| blueButtonText: 'Call to action', | ||
| anchors: { | ||
| linkCount: 4, | ||
| headerText: 'Anchors header (optional)', | ||
| footerText: 'Anchors footer What we offer (optional)', | ||
| howTo: { | ||
| h4Text: 'How to', | ||
| linkText: 'Link to a section with header “How To”', | ||
| href: 'http://how-to-block/', | ||
| }, | ||
| text: { | ||
| h4Text: 'Text', | ||
| linkText: 'Link to a section with header “Text”', | ||
| href: 'http://text-block/', | ||
| }, | ||
| media: { | ||
| h4Text: 'Media', | ||
| linkText: 'Link to a section with header “Media”', | ||
| href: 'http://media-block/', | ||
| }, | ||
| linkToAdobe: { | ||
| h4Text: 'Link to Adobe', | ||
| linkText: 'Link to a new page', | ||
| href: 'https://adobe.com/', | ||
| }, | ||
| }, | ||
| }, | ||
| tags: '@marquee @marquee-anchors @smoke @regression @milo', | ||
| }, | ||
| { | ||
| tcid: '1', | ||
| name: 'Marquee Anchors (Transparent)', | ||
| path: '/drafts/nala/blocks/marquee/marquee-anchors-transparent', | ||
| data: { | ||
| detailText: 'Heading M Bold 24/30', | ||
| h2Text: 'Heading XL Bold (36/45) Lorem ipsum (Image Background)', | ||
| bodyText: 'Lorem ipsum dolor sit amet.', | ||
| outlineButtonText: 'Lorem ipsum', | ||
| blueButtonText: 'Call to action', | ||
| anchors: { | ||
| linkCount: 4, | ||
| headerText: 'Anchors header (optional)', | ||
| footerText: 'Anchors footer What we offer (optional)', | ||
| howTo: { | ||
| h4Text: 'How to', | ||
| linkText: 'Link to a section with header “How To”', | ||
| href: 'http://how-to-block/', | ||
| }, | ||
| text: { | ||
| h4Text: 'Text', | ||
| linkText: 'Link to a section with header “Text”', | ||
| href: 'http://text-block/', | ||
| }, | ||
| media: { | ||
| h4Text: 'Media', | ||
| linkText: 'Link to a section with header “Media”', | ||
| href: 'http://media-block/', | ||
| }, | ||
| linkToAdobe: { | ||
| h4Text: 'Link to Adobe', | ||
| linkText: 'Link to a new page', | ||
| href: 'https://adobe.com/', | ||
| }, | ||
| }, | ||
| }, | ||
| tags: '@marquee @marquee-anchors @smoke @regression @milo', | ||
| }, | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import { expect, test } from '@playwright/test'; | ||
| import WebUtil from '../../libs/webutil.js'; | ||
| import { features } from './marquee-anchors.spec.js'; | ||
| import MarqueeAnchors from './marquee-anchors.page.js'; | ||
|
|
||
| let webUtil; | ||
| let marquee; | ||
|
|
||
| const miloLibs = process.env.MILO_LIBS || ''; | ||
|
|
||
| test.describe('Milo Marquee Anchors test suite', () => { | ||
| test.beforeEach(async ({ page }) => { | ||
| webUtil = new WebUtil(page); | ||
| marquee = new MarqueeAnchors(page); | ||
| }); | ||
|
|
||
| // Test 0 : Marquee anchors | ||
| test(`[Test Id - ${features[0].tcid}] ${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => { | ||
| console.info(`[Test Page]: ${baseURL}${features[0].path}${miloLibs}`); | ||
| const { data } = features[0]; | ||
|
|
||
| await test.step('step-1: Go to Marquee anchors block test page', async () => { | ||
| await page.goto(`${baseURL}${features[0].path}${miloLibs}`); | ||
| await page.waitForLoadState('domcontentloaded'); | ||
| await expect(page).toHaveURL(`${baseURL}${features[0].path}${miloLibs}`); | ||
| }); | ||
|
|
||
| await test.step('step-2: Verify marquee anchors specs', async () => { | ||
| await expect(await marquee.marqueeAnchors).toBeVisible(); | ||
|
|
||
| await expect(await marquee.detailM).toContainText(data.detailText); | ||
| await expect(await marquee.headingL).toContainText(data.h2Text); | ||
| await expect(await marquee.bodyM).toContainText(data.bodyText); | ||
| await expect(await marquee.outlineButton).toContainText(data.outlineButtonText); | ||
| await expect(await marquee.blueButton).toContainText(data.blueButtonText); | ||
|
|
||
| await expect(await marquee.foregroundImage).toBeVisible(); | ||
|
|
||
| // verify marquee anchors links | ||
| await expect(marquee.anchorLinks).toHaveCount(data.anchors.linkCount); | ||
| await expect(marquee.anchorHeader).toContainText(data.anchors.headerText); | ||
|
|
||
| await expect(marquee.anchorLink.howTo.link).toContainText(data.anchors.howTo.linkText); | ||
| await expect(marquee.anchorLink.howTo.linkHeader).toContainText(data.anchors.howTo.h4Text); | ||
| await expect(marquee.anchorLink.howTo.link).toHaveAttribute('href', data.anchors.howTo.href); | ||
| await expect(marquee.anchorLink.howTo.icon).toBeVisible(); | ||
|
|
||
| await expect(marquee.anchorLink.text.link).toContainText(data.anchors.text.linkText); | ||
| await expect(marquee.anchorLink.text.linkHeader).toContainText(data.anchors.text.h4Text); | ||
| await expect(marquee.anchorLink.text.link).toHaveAttribute('href', data.anchors.text.href); | ||
| await expect(marquee.anchorLink.text.icon).toBeVisible(); | ||
|
|
||
| await expect(marquee.anchorLink.media.link).toContainText(data.anchors.media.linkText); | ||
| await expect(marquee.anchorLink.media.linkHeader).toContainText(data.anchors.media.h4Text); | ||
| await expect(marquee.anchorLink.media.link).toHaveAttribute('href', data.anchors.media.href); | ||
| await expect(marquee.anchorLink.media.icon).toBeVisible(); | ||
|
|
||
| await expect(marquee.anchorLink.linkToAdobe.link).toContainText(data.anchors.linkToAdobe.linkText); | ||
| await expect(marquee.anchorLink.linkToAdobe.linkHeader).toContainText(data.anchors.linkToAdobe.h4Text); | ||
| await expect(marquee.anchorLink.linkToAdobe.link).toHaveAttribute('href', data.anchors.linkToAdobe.href); | ||
| await expect(marquee.anchorLink.linkToAdobe.icon).toBeVisible(); | ||
|
|
||
| await expect(marquee.anchorFooter).toContainText(data.anchors.footerText); | ||
| }); | ||
|
|
||
| await test.step('step-3: Verify analytics attributes', async () => { | ||
| await expect(await marquee.marqueeAnchors).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee-anchors', 1)); | ||
|
|
||
| await expect(await marquee.outlineButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text)); | ||
| await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text)); | ||
|
|
||
| await expect(await marquee.anchorLink.howTo.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.howTo.h4Text} ${data.anchors.howTo.linkText}`, 3, data.anchors.headerText)); | ||
| await expect(await marquee.anchorLink.text.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.text.h4Text} ${data.anchors.text.linkText}`, 4, data.anchors.howTo.h4Text)); | ||
| await expect(await marquee.anchorLink.media.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.media.h4Text} ${data.anchors.media.linkText}`, 5, data.anchors.text.h4Text)); | ||
| await expect(await marquee.anchorLink.linkToAdobe.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.linkToAdobe.h4Text} ${data.anchors.linkToAdobe.linkText}`, 6, data.anchors.media.h4Text)); | ||
| }); | ||
| }); | ||
|
|
||
| // Test 1 : Marquee anchors (transparent) | ||
| test(`[Test Id - ${features[1].tcid}] ${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => { | ||
| console.info(`[Test Page]: ${baseURL}${features[1].path}${miloLibs}`); | ||
| const { data } = features[1]; | ||
|
|
||
| await test.step('step-1: Go to Marquee anchors (Transparent) block test page', async () => { | ||
| await page.goto(`${baseURL}${features[1].path}${miloLibs}`); | ||
| await page.waitForLoadState('domcontentloaded'); | ||
| await expect(page).toHaveURL(`${baseURL}${features[1].path}${miloLibs}`); | ||
| }); | ||
|
|
||
| await test.step('step-2: Verify marquee anchors (Transparent) specs', async () => { | ||
| await expect(await marquee.marqueeAnchorsTransparent).toBeVisible(); | ||
|
|
||
| await expect(await marquee.detailM).toContainText(data.detailText); | ||
| await expect(await marquee.headingL).toContainText(data.h2Text); | ||
| await expect(await marquee.bodyM).toContainText(data.bodyText); | ||
| await expect(await marquee.outlineButton).toContainText(data.outlineButtonText); | ||
| await expect(await marquee.blueButton).toContainText(data.blueButtonText); | ||
|
|
||
| await expect(await marquee.foregroundImage).toBeVisible(); | ||
|
|
||
| // verify marquee anchors links | ||
| await expect(marquee.anchorLinks).toHaveCount(data.anchors.linkCount); | ||
| await expect(marquee.anchorHeader).toContainText(data.anchors.headerText); | ||
|
|
||
| await expect(marquee.anchorLink.howTo.link).toContainText(data.anchors.howTo.linkText); | ||
| await expect(marquee.anchorLink.howTo.linkHeader).toContainText(data.anchors.howTo.h4Text); | ||
| await expect(marquee.anchorLink.howTo.link).toHaveAttribute('href', data.anchors.howTo.href); | ||
| await expect(marquee.anchorLink.howTo.icon).toBeVisible(); | ||
|
|
||
| await expect(marquee.anchorLink.text.link).toContainText(data.anchors.text.linkText); | ||
| await expect(marquee.anchorLink.text.linkHeader).toContainText(data.anchors.text.h4Text); | ||
| await expect(marquee.anchorLink.text.link).toHaveAttribute('href', data.anchors.text.href); | ||
| await expect(marquee.anchorLink.text.icon).toBeVisible(); | ||
|
|
||
| await expect(marquee.anchorLink.media.link).toContainText(data.anchors.media.linkText); | ||
| await expect(marquee.anchorLink.media.linkHeader).toContainText(data.anchors.media.h4Text); | ||
| await expect(marquee.anchorLink.media.link).toHaveAttribute('href', data.anchors.media.href); | ||
| await expect(marquee.anchorLink.media.icon).toBeVisible(); | ||
|
|
||
| await expect(marquee.anchorLink.linkToAdobe.link).toContainText(data.anchors.linkToAdobe.linkText); | ||
| await expect(marquee.anchorLink.linkToAdobe.linkHeader).toContainText(data.anchors.linkToAdobe.h4Text); | ||
| await expect(marquee.anchorLink.linkToAdobe.link).toHaveAttribute('href', data.anchors.linkToAdobe.href); | ||
| await expect(marquee.anchorLink.linkToAdobe.icon).toBeVisible(); | ||
|
|
||
| await expect(marquee.anchorFooter).toContainText(data.anchors.footerText); | ||
|
|
||
| await test.step('step-3: Verify analytics attributes', async () => { | ||
| await expect(await marquee.marqueeAnchorsTransparent).toHaveAttribute('daa-lh', await webUtil.getBlockDaalh('marquee-anchors', 1)); | ||
|
|
||
| await expect(await marquee.outlineButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.outlineButtonText, 1, data.h2Text)); | ||
| await expect(await marquee.blueButton).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(data.blueButtonText, 2, data.h2Text)); | ||
|
|
||
| await expect(await marquee.anchorLink.howTo.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.howTo.h4Text} ${data.anchors.howTo.linkText}`, 3, data.anchors.headerText)); | ||
| await expect(await marquee.anchorLink.text.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.text.h4Text} ${data.anchors.text.linkText}`, 4, data.anchors.howTo.h4Text)); | ||
| await expect(await marquee.anchorLink.media.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.media.h4Text} ${data.anchors.media.linkText}`, 5, data.anchors.text.h4Text)); | ||
| await expect(await marquee.anchorLink.linkToAdobe.link).toHaveAttribute('daa-ll', await webUtil.getLinkDaall(`${data.anchors.linkToAdobe.h4Text} ${data.anchors.linkToAdobe.linkText}`, 6, data.anchors.media.h4Text)); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.