add nala tests to milo repo

.github/workflows/run-nala-default.yml

@@ -0,0 +1,48 @@
+name: Run Nala Tests
+
+on:
+  push:
+    branches:
+      - stage
+      - main
+  pull_request:
+    branches:
+      - stage
+      - main
+    types: [opened, synchronize, reopened]
+
+jobs:
+  run-nala-tests:
+    name: Running Nala E2E UI Tests
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Set execute permission for nalarun.sh
+        run: chmod +x ./nalarun.sh
+
+      - name: Run Nala Tests via run.sh
+        run: ./nalarun.sh
+        env:
+          labels: ${{ join(github.event.pull_request.labels.*.name, ' ') }}
+          branch: ${{ github.event.pull_request.head.ref }}
+          repoName: ${{ github.repository }}
+          prUrl: ${{ github.event.pull_request.head.repo.html_url }}
+          prOrg: ${{ github.event.pull_request.head.repo.owner.login }}
+          prRepo: ${{ github.event.pull_request.head.repo.name }}
+          prBranch: ${{ github.event.pull_request.head.ref }}
+          prBaseBranch: ${{ github.event.pull_request.base.ref }}
+          GITHUB_ACTION_PATH: ${{ github.workspace }}
+          IMS_EMAIL: ${{ secrets.IMS_EMAIL }}
+          IMS_PASS: ${{ secrets.IMS_PASS }}

nala/blocks/accordion/accordion.spec.js

@@ -11,7 +11,7 @@ module.exports = {
         heading1: 'What size PDFs can I compress?',
         heading2: 'How do I check my PDF file size?',
       },
-      tags: '@accordion @t1 @smoke @regression @milo',
+      tags: '@accordion @smoke @regression @milo',
     },
     {
       tcid: '1',

nala/blocks/accordion/accordion.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, max-len, no-console */
 import { expect, test } from '@playwright/test';
 import WebUtil from '../../libs/webutil.js';
 import { features } from './accordion.spec.js';

nala/blocks/actionitem/actionitem.page.js

@@ -0,0 +1,33 @@
+export default class ActionItem {
+  constructor(page, nth = 0) {
+    this.page = page;
+
+    this.actionItem = this.page.locator('.action-item').nth(nth);
+    this.small = this.page.locator('.action-item.small').nth(nth);
+    this.medium = this.page.locator('.action-item.medium').nth(nth);
+    this.large = this.page.locator('.action-item.large').nth(nth);
+    this.center = this.page.locator('.action-item.center').nth(nth);
+    this.rounded = this.page.locator('.action-item.rounded').nth(nth);
+    this.actionItemFloat = this.page.locator('.action-item.float-button').nth(nth);
+    this.floatButton = this.page.locator('.action-item.float-button > div > div> p > a');
+    this.libraryContainerStart = this.page.locator('.library-container-start').nth(nth);
+    this.libraryContainerEnd = this.page.locator('.library-container-end').nth(nth);
+    this.actionScroller = this.page.locator('.action-scroller').nth(nth);
+    this.scroller = this.page.locator('.scroller  ').nth(nth);
+    this.scrollerActionItems = this.scroller.locator('.action-item');
+
+    this.navigationPrevious = this.actionScroller.locator('.nav-grad.previous');
+    this.navigationNext = this.actionScroller.locator('.nav-grad.next');
+    this.nextButton = this.navigationNext.locator('.nav-button.next-button');
+    this.previousButton = this.navigationPrevious.locator('.nav-button.previous-button');
+
+    this.scrollerActionItems = this.scroller.locator('.action-item');
+
+    this.mainImage = this.actionItem.locator('.main-image').nth(nth);
+    this.mainImageDark = this.actionItem.locator('.main-image.dark').nth(nth);
+    this.image = this.mainImage.locator('img').nth(0);
+    this.bodyText = this.actionItem.locator('p').nth(1);
+    this.bodyTextLink = this.actionItem.locator('a').nth(0);
+    this.floatOutlineButton = this.mainImage.locator('a');
+  }
+}

nala/blocks/actionitem/actionitem.spec.js

@@ -0,0 +1,87 @@
+module.exports = {
+  FeatureName: 'Action Item Block',
+  features: [
+    {
+      tcid: '0',
+      name: '@Action-item (small)',
+      path: '/drafts/nala/blocks/action-item/action-item-small',
+      data: {
+        bodyText: 'Body XS Regular - Image min-height 56px',
+        imgMinHeight: '56px',
+      },
+      tags: '@action-item @smoke @regression @milo',
+    },
+    {
+      tcid: '1',
+      name: '@Action-item (medium)',
+      path: '/drafts/nala/blocks/action-item/action-item-medium',
+      data: {
+        bodyText: 'Body S Regular - Image min-height 80px',
+        imgMinHeight: '80px',
+      },
+      tags: '@action-item @smoke @regression @milo',
+    },
+    {
+      tcid: '2',
+      name: '@Action-item (large)',
+      path: '/drafts/nala/blocks/action-item/action-item-large',
+      data: {
+        bodyText: 'Body M Regular - Image min-height 104px',
+        imgMinHeight: '104px',
+      },
+      tags: '@action-item @smoke @regression @milo',
+    },
+    {
+      tcid: '3',
+      name: '@Action-item (center)',
+      path: '/drafts/nala/blocks/action-item/action-item-center',
+      data: {
+        bodyText: 'Center content',
+        margin: '0 auto',
+      },
+      tags: '@action-item @smoke @regression @milo',
+    },
+    {
+      tcid: '4',
+      name: '@Action-item (rounded)',
+      path: '/drafts/nala/blocks/action-item/action-item-rounded',
+      data: {
+        bodyText: 'Border radius 4px',
+        borderRadius: '4px',
+      },
+      tags: '@action-item @smoke @regression @milo',
+    },
+    {
+      tcid: '5',
+      name: '@Action-item (float-button)',
+      path: '/drafts/nala/blocks/action-item/action-item-float-button',
+      data: {
+        bodyText: 'Float button',
+        floatButtonText: 'Edit',
+      },
+      tags: '@action-item @smoke @regression @milo',
+    },
+    {
+      tcid: '6',
+      name: '@Action-item (scroller)',
+      path: '/drafts/nala/blocks/action-item/action-scroller',
+      data: {
+        bodyText: 'content',
+        floatButtonText: 'Edit',
+        actionItemsCount: 6,
+      },
+      tags: '@action-item @smoke @regression @milo',
+    },
+    {
+      tcid: '7',
+      name: '@Action-item (scroller with navigation)',
+      path: '/drafts/nala/blocks/action-item/action-scroller-navigation',
+      data: {
+        bodyText: 'content',
+        floatButtonText: 'Edit',
+        actionItemsCount: 8,
+      },
+      tags: '@action-item @smoke @regression @milo',
+    },
+  ],
+};

nala/blocks/actionitem/actionitem.test.js

@@ -0,0 +1,189 @@
+/* eslint-disable import/no-extraneous-dependencies, max-len, no-console */
+import { expect, test } from '@playwright/test';
+import { features } from './actionitem.spec.js';
+import ActionItem from './actionitem.page.js';
+
+let actionItem;
+
+const miloLibs = process.env.MILO_LIBS || '';
+
+test.describe('Milo Action-Item block test suite', () => {
+  test.beforeEach(async ({ page }) => {
+    actionItem = new ActionItem(page);
+  });
+
+  // Test 0 : Action-Item (Small)
+  test(`0: @Action-item (small), ${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 Action item 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 Action item content/specs', async () => {
+      await expect(await actionItem.small).toBeVisible();
+      await expect(await actionItem.image).toBeVisible();
+      await expect(await actionItem.image).toHaveCSS('min-height', data.imgMinHeight);
+
+      await expect(await actionItem.bodyTextLink).toBeVisible();
+      await expect(await actionItem.bodyText).toContainText(data.bodyText);
+    });
+  });
+
+  // Test 1 : Action-Item (Medium)
+  test(`1: @Action-item (medium), ${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 Action item 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 Action item content/specs', async () => {
+      await expect(await actionItem.medium).toBeVisible();
+      await expect(await actionItem.image).toBeVisible();
+      await expect(await actionItem.image).toHaveCSS('min-height', data.imgMinHeight);
+
+      await expect(await actionItem.bodyTextLink).toBeVisible();
+      await expect(await actionItem.bodyText).toContainText(data.bodyText);
+    });
+  });
+
+  // Test 2 : Action-Item (Large)
+  test(`2: @Action-item (large), ${features[2].tags}`, async ({ page, baseURL }) => {
+    console.info(`[Test Page]: ${baseURL}${features[2].path}${miloLibs}`);
+    const { data } = features[2];
+
+    await test.step('step-1: Go to Action item block test page', async () => {
+      await page.goto(`${baseURL}${features[2].path}${miloLibs}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[2].path}${miloLibs}`);
+    });
+
+    await test.step('step-2: Verify Action item content/specs', async () => {
+      await expect(await actionItem.large).toBeVisible();
+      await expect(await actionItem.image).toBeVisible();
+      await expect(await actionItem.image).toHaveCSS('min-height', data.imgMinHeight);
+
+      await expect(await actionItem.bodyTextLink).toBeVisible();
+      await expect(await actionItem.bodyText).toContainText(data.bodyText);
+    });
+  });
+
+  // Test 3 : Action-Item (Center)
+  test(`3: @Action-item (center), ${features[3].tags}`, async ({ page, baseURL }) => {
+    console.info(`[Test Page]: ${baseURL}${features[3].path}${miloLibs}`);
+    const { data } = features[3];
+
+    await test.step('step-1: Go to Action item block test page', async () => {
+      await page.goto(`${baseURL}${features[3].path}${miloLibs}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[3].path}${miloLibs}`);
+    });
+
+    await test.step('step-2: Verify Action item content/specs', async () => {
+      await expect(await actionItem.center).toBeVisible();
+      await expect(await actionItem.image).toBeVisible();
+
+      await expect(await actionItem.bodyTextLink).toBeVisible();
+      await expect(await actionItem.bodyText).toContainText(data.bodyText);
+    });
+  });
+
+  // Test 4 : Action-Item (Rounded)
+  test(`4: @Action-item (rounded), ${features[4].tags}`, async ({ page, baseURL }) => {
+    console.info(`[Test Page]: ${baseURL}${features[4].path}${miloLibs}`);
+    const { data } = features[4];
+
+    await test.step('step-1: Go to Action item block test page', async () => {
+      await page.goto(`${baseURL}${features[4].path}${miloLibs}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[4].path}${miloLibs}`);
+    });
+
+    await test.step('step-2: Verify Action item content/specs', async () => {
+      await expect(await actionItem.rounded).toBeVisible();
+      await expect(await actionItem.image).toBeVisible();
+      await expect(await actionItem.image).toHaveCSS('border-radius', data.borderRadius);
+
+      await expect(await actionItem.bodyTextLink).toBeVisible();
+      await expect(await actionItem.bodyText).toContainText(data.bodyText);
+    });
+  });
+
+  // Test 5 : Action-Item (Float Button)
+  test(`5: @Action-item (float-button), ${features[5].tags}`, async ({ page, baseURL }) => {
+    const testPage = `${baseURL}${features[5].path}${miloLibs}`;
+    console.info(`[Test Page]: ${testPage}`);
+    const { data } = features[5];
+
+    await test.step('step-1: Go to Action item block test page', async () => {
+      await page.goto(`${baseURL}${features[5].path}${miloLibs}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[5].path}${miloLibs}`);
+    });
+
+    await test.step('step-2: Verify Action item content/specs', async () => {
+      await expect(await actionItem.actionItemFloat).toBeVisible();
+      await expect(await actionItem.image).toBeVisible();
+      await expect(await actionItem.floatOutlineButton).toBeVisible();
+      await expect(await actionItem.floatOutlineButton).toContainText(data.floatButtonText);
+    });
+    await test.step('step-3: Click the float button', async () => {
+      await actionItem.floatButton.click();
+      expect(await page.url()).not.toBe(testPage);
+    });
+  });
+
+  // Test 6 : Action-Item (scroller)
+  test(`6: @Action-item (scroller), ${features[6].tags}`, async ({ page, baseURL }) => {
+    console.info(`[Test Page]: ${baseURL}${features[6].path}${miloLibs}`);
+    const { data } = features[6];
+
+    await test.step('step-1: Go to Action item block test page', async () => {
+      await page.goto(`${baseURL}${features[6].path}${miloLibs}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[6].path}${miloLibs}`);
+    });
+
+    await test.step('step-2: Verify Action item content/specs', async () => {
+      await expect(await actionItem.actionScroller).toBeVisible();
+      await expect(await actionItem.scroller).toBeVisible();
+      await expect(await actionItem.scrollerActionItems).toHaveCount(data.actionItemsCount);
+
+      await expect(await actionItem.image).toBeVisible();
+      await expect(await actionItem.bodyText).toContainText(data.bodyText);
+    });
+  });
+
+  // Test 7 : Action-Item (scroller)
+  test(`7: @Action-item (scroller with navigation), ${features[7].tags}`, async ({ page, baseURL }) => {
+    console.info(`[Test Page]: ${baseURL}${features[7].path}${miloLibs}`);
+    const { data } = features[7];
+
+    await test.step('step-1: Go to Action item block test page', async () => {
+      await page.goto(`${baseURL}${features[7].path}${miloLibs}`);
+      await page.waitForLoadState('domcontentloaded');
+      await expect(page).toHaveURL(`${baseURL}${features[7].path}${miloLibs}`);
+    });
+
+    await test.step('step-2: Verify Action item content/specs', async () => {
+      await expect(await actionItem.actionScroller).toBeVisible();
+      await expect(await actionItem.scroller).toBeVisible();
+      await expect(await actionItem.scrollerActionItems).toHaveCount(data.actionItemsCount);
+
+      await expect(await actionItem.image).toBeVisible();
+      await expect(await actionItem.bodyText).toContainText(data.bodyText);
+
+      await expect(await actionItem.nextButton).toBeVisible({ timeout: 1000 });
+      await actionItem.nextButton.click();
+      await expect(await actionItem.previousButton).toBeVisible({ timeout: 1000 });
+      await expect(await actionItem.navigationNext).toHaveAttribute('hide-btn', 'false');
+    });
+  });
+});