MWPW-161235 [MEP] add nala test for timeline block (#3099)

* add nala test for timeline block

* add accessibility test

* fix test name in spec file

* Update nala/blocks/timeline/timeline.test.js

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: John Pratt <jpratt@adobe.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

nala/blocks/timeline/timeline.page.js

@@ -0,0 +1,21 @@
+export default class TimelineBlock {
+  constructor(page, nth = 0) {
+    this.page = page;
+    // timeline locators
+
+    this.timelineBlock = page.locator('.timeline').nth(nth);
+
+    this.heading1 = this.timelineBlock.locator('h3').nth(0);
+    this.heading2 = this.timelineBlock.locator('h3').nth(1);
+    this.heading3 = this.timelineBlock.locator('h3').nth(2);
+    this.text1 = this.timelineBlock.locator('h3+p').nth(0);
+    this.text2 = this.timelineBlock.locator('h3+p').nth(1);
+    this.text3 = this.timelineBlock.locator('h3+p').nth(2);
+    this.banner1 = this.timelineBlock.locator('.period.body-s').nth(0);
+    this.banner2 = this.timelineBlock.locator('.period.body-s').nth(1);
+
+    this.bar1 = page.locator('.bar').nth(0);
+    this.bar2 = page.locator('.bar').nth(1);
+    this.bar3 = page.locator('.bar').nth(2);
+  }
+}

nala/blocks/timeline/timeline.spec.js

@@ -0,0 +1,26 @@
+module.exports = {
+  BlockName: 'Timeline Block',
+  features: [
+    {
+      tcid: '0',
+      name: '@Verify text in timeline block',
+      path: '/drafts/nala/blocks/timeline/timeline',
+      data: {},
+      tags: '@timeline @timeline0 @smoke @regression @milo',
+    },
+    {
+      tcid: '1',
+      name: '@Verify CSS in timeline block',
+      path: '/drafts/nala/blocks/timeline/timeline',
+      data: {},
+      tags: '@timeline @timeline1 @smoke @regression @milo',
+    },
+    {
+      tcid: '2',
+      name: '@Accessibility tests in timeline block',
+      path: '/drafts/nala/blocks/timeline/timeline',
+      data: {},
+      tags: '@timeline @timeline2 @smoke @regression @milo',
+    },
+  ],
+};

nala/blocks/timeline/timeline.test.js

@@ -0,0 +1,55 @@
+// run test:
+// npm run nala stage tag=timeline
+
+import { expect, test } from '@playwright/test';
+import { features } from './timeline.spec.js';
+import TimelineBlock from './timeline.page.js';
+import { runAccessibilityTest } from '../../libs/accessibility.js';
+
+const miloLibs = process.env.MILO_LIBS || '';
+
+// Test 0: verify the text in the timeline block
+test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
+  const timeline = new TimelineBlock(page);
+  const URL = `${baseURL}${features[0].path}${miloLibs}`;
+  console.info(`[Test Page]: ${URL}`);
+  await page.goto(URL);
+
+  await expect(timeline.heading1).toHaveText('Day 1');
+  await expect(timeline.heading2).toHaveText('Day 8');
+  await expect(timeline.heading3).toHaveText('Day 21');
+  await expect(timeline.text1).toHaveText('If you start your free trial today');
+  await expect(timeline.text2).toHaveText('Your subscription starts and billing begins');
+  await expect(timeline.text3).toHaveText('Full refund period ends');
+  await expect(timeline.banner1).toHaveText('7-day free trial');
+  await expect(timeline.banner2).toHaveText('14-day full refund period');
+});
+
+// Test 1: verify the CSS style and the analytic
+test(`${features[1].name},${features[1].tags}`, async ({ page, baseURL }) => {
+  const timeline = new TimelineBlock(page);
+  const URL = `${baseURL}${features[1].path}${miloLibs}`;
+  console.info(`[Test Page]: ${URL}`);
+  await page.goto(URL);
+
+  await expect(timeline.bar1).toHaveCSS('background-color', 'rgb(230, 56, 136)');
+  await expect(timeline.bar2).toHaveCSS('background-color', 'rgb(233, 116, 154)');
+  await expect(timeline.bar3).toHaveCSS('background-color', 'rgb(255, 206, 46)');
+  await expect(timeline.bar1).toHaveCSS('width', '2px');
+  await expect(timeline.bar2).toHaveCSS('width', '2px');
+  await expect(timeline.bar3).toHaveCSS('width', '2px');
+  await expect(timeline.banner1).toHaveCSS('background-image', 'linear-gradient(to right, rgb(230, 56, 136) 0px, rgb(233, 116, 154) 100%)');
+  await expect(timeline.banner2).toHaveCSS('background-color', 'rgb(255, 206, 46)');
+
+  await expect(timeline.timelineBlock).toHaveAttribute('daa-lh', 'b2|timeline');
+  await expect(timeline.timelineBlock).toBeVisible();
+});
+
+// Test 2: run Accessibility tests
+test(`${features[2].name},${features[2].tags}`, async ({ page, baseURL }) => {
+  const timeline = new TimelineBlock(page);
+  const URL = `${baseURL}${features[1].path}${miloLibs}`;
+  console.info(`[Test Page]: ${URL}`);
+  await page.goto(URL);
+  await runAccessibilityTest({ page, testScope: timeline.timelineBlock });
+});