From 8953b327edc3a203866a91faea23f3612c339b3d Mon Sep 17 00:00:00 2001 From: John Hill Date: Tue, 9 Jan 2024 09:30:11 -0800 Subject: [PATCH 01/35] remove remaining page.locators --- e2e/tests/functional/branding.e2e.spec.js | 33 ++++----- .../components/about.visual.spec.js | 24 ++++--- .../components/inspector.visual.spec.js | 2 +- .../controlledClock.visual.spec.js | 13 ++-- .../visual-a11y/notification.visual.spec.js | 69 +++++++++++-------- .../folderView/components/GridItem.vue | 14 +++- .../folderView/components/GridView.vue | 3 +- src/plugins/plot/chart/MctChart.vue | 8 ++- src/ui/layout/AboutDialog.vue | 9 ++- src/ui/layout/AppLogo.vue | 8 ++- 10 files changed, 109 insertions(+), 74 deletions(-) diff --git a/e2e/tests/functional/branding.e2e.spec.js b/e2e/tests/functional/branding.e2e.spec.js index 4da18d157b0..31a0ba74ddf 100644 --- a/e2e/tests/functional/branding.e2e.spec.js +++ b/e2e/tests/functional/branding.e2e.spec.js @@ -27,39 +27,36 @@ This test suite is dedicated to tests which verify branding related components. import { expect, test } from '../../baseFixtures.js'; test.describe('Branding tests', () => { - test('About Modal launches with basic branding properties', async ({ page }) => { - // Go to baseURL + test.beforeEach(async ({ page }) => { await page.goto('./', { waitUntil: 'domcontentloaded' }); - - // Click About button - await page.click('.l-shell__app-logo'); + }); + test('About Modal launches with basic branding properties', async ({ page }) => { + await page.getByLabel('About Modal').click(); // Verify that the NASA Logo Appears - await expect(page.locator('.c-about__image')).toBeVisible(); + await expect(page.getByAltText('Open MCT Splash Logo')).toBeVisible(); // Modify the Build information in 'about' Modal - const versionInformationLocator = page.locator('ul.t-info.l-info.s-info').first(); - await expect(versionInformationLocator).toBeEnabled(); - await expect.soft(versionInformationLocator).toContainText(/Version: \d/); + await expect(page.getByTestId('versionInfo')).toBeEnabled(); + await expect.soft(page.getByTestId('versionInfo')).toContainText(/Version: \d/); await expect - .soft(versionInformationLocator) + .soft(page.getByTestId('versionInfo')) .toContainText(/Build Date: ((?:Mon|Tue|Wed|Thu|Fri|Sat|Sun))/); - await expect.soft(versionInformationLocator).toContainText(/Revision: \b[0-9a-f]{5,40}\b/); - await expect.soft(versionInformationLocator).toContainText(/Branch: ./); + await expect + .soft(page.getByTestId('versionInfo')) + .toContainText(/Revision: \b[0-9a-f]{5,40}\b/); + await expect.soft(page.getByTestId('versionInfo')).toContainText(/Branch: ./); }); test('Verify Links in About Modal @2p', async ({ page }) => { - // Go to baseURL - await page.goto('./', { waitUntil: 'domcontentloaded' }); - // Click About button - await page.click('.l-shell__app-logo'); + await page.getByLabel('About Modal').click(); // Verify that clicking on the third party licenses information opens up another tab on licenses url const [page2] = await Promise.all([ page.waitForEvent('popup'), - page.locator('text=click here for third party licensing information').click() + page.getByText('click here for third party licensing information').click() ]); - await page2.waitForLoadState('networkidle'); //Avoids timing issues with juggler/firefox + await page2.waitForLoadState('domcontentloaded'); //Avoids timing issues with juggler/firefox expect(page2.waitForURL('**/licenses**')).toBeTruthy(); }); }); diff --git a/e2e/tests/visual-a11y/components/about.visual.spec.js b/e2e/tests/visual-a11y/components/about.visual.spec.js index bc879e8dc11..fe4c0046d1e 100644 --- a/e2e/tests/visual-a11y/components/about.visual.spec.js +++ b/e2e/tests/visual-a11y/components/about.visual.spec.js @@ -26,10 +26,10 @@ Tests the branding associated with the default deployment. At least the about mo import percySnapshot from '@percy/playwright'; +import { expect, scanForA11yViolations, test } from '../../../avpFixtures.js'; import { VISUAL_URL } from '../../../constants.js'; -import { expect, test } from '../../../pluginFixtures.js'; -test.describe('Visual - Branding', () => { +test.describe('Visual - Branding @a11y', () => { test.beforeEach(async ({ page }) => { //Go to baseURL and Hide Tree await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' }); @@ -37,18 +37,22 @@ test.describe('Visual - Branding', () => { test('Visual - About Modal', async ({ page, theme }) => { // Click About button - await page.click('.l-shell__app-logo'); + await page.getByLabel('About Modal').click(); // Modify the Build information in 'about' to be consistent run-over-run - const versionInformationLocator = page.locator('ul.t-info.l-info.s-info').first(); - await expect(versionInformationLocator).toBeEnabled(); - await versionInformationLocator.evaluate( - (node) => - (node.innerHTML = - '
  • Version: visual-snapshot
  • Build Date: Mon Nov 15 2021 08:07:51 GMT-0800 (Pacific Standard Time)
  • Revision: 93049cdbc6c047697ca204893db9603b864b8c9f
  • Branch: master
    • ') - ); + await expect(page.getByTestId('versionInfo')).toBeEnabled(); + await page + .getByTestId('versionInfo') + .evaluate( + (node) => + (node.innerHTML = + '
  • Version: visual-snapshot
  • Build Date: Mon Nov 15 2021 08:07:51 GMT-0800 (Pacific Standard Time)
  • Revision: 93049cdbc6c047697ca204893db9603b864b8c9f
  • Branch: master
    • ') + ); // Take a snapshot of the About modal await percySnapshot(page, `About (theme: '${theme}')`); }); }); +test.afterEach(async ({ page }, testInfo) => { + await scanForA11yViolations(page, testInfo.title); +}); diff --git a/e2e/tests/visual-a11y/components/inspector.visual.spec.js b/e2e/tests/visual-a11y/components/inspector.visual.spec.js index 8fdbe180980..2776a39965e 100644 --- a/e2e/tests/visual-a11y/components/inspector.visual.spec.js +++ b/e2e/tests/visual-a11y/components/inspector.visual.spec.js @@ -28,7 +28,7 @@ import { test } from '../../../pluginFixtures.js'; //Declare the scope of the visual test const inspectorPane = '.l-shell__pane-inspector'; -test.describe('Visual - Controlled Clock', () => { +test.describe('Visual - Inspector @ally', () => { test.beforeEach(async ({ page }) => { await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' }); }); diff --git a/e2e/tests/visual-a11y/controlledClock.visual.spec.js b/e2e/tests/visual-a11y/controlledClock.visual.spec.js index 05e551b78bc..afb5087544f 100644 --- a/e2e/tests/visual-a11y/controlledClock.visual.spec.js +++ b/e2e/tests/visual-a11y/controlledClock.visual.spec.js @@ -44,14 +44,15 @@ test.describe('Visual - Controlled Clock', () => { test('Overlay Plot Loading Indicator @localStorage', async ({ page, theme }) => { await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' }); - await page.locator('a').filter({ hasText: 'Overlay Plot with 5s Delay' }).click(); + await page + .getByRole('gridcell', { hasText: 'Overlay Plot with 5s Delay Overlay Plot ' }) + .click(); //Ensure that we're on the Unnamed Overlay Plot object - await expect(page.locator('.l-browse-bar__object-name')).toContainText( - 'Overlay Plot with 5s Delay' - ); + await expect(page.getByRole('main')).toContainText('Overlay Plot with 5s Delay'); - //Wait for canvas to be rendered and stop animating, but plot should not be loaded. Cannot use waitForPlotsToRender - await page.locator('canvas >> nth=1').hover({ trial: true }); + //Wait for canvas to be rendered and stop animating, but plot should not be loaded. + //Cannot use waitForPlotsToRender due to clockOptions. + await page.getByAltText('webglContext').hover({ trial: true }); //Take snapshot of Sine Wave Generator within Overlay Plot await percySnapshot(page, `SineWaveInOverlayPlot (theme: '${theme}')`); diff --git a/e2e/tests/visual-a11y/notification.visual.spec.js b/e2e/tests/visual-a11y/notification.visual.spec.js index 7be4a4e92f3..4d7a44a9e90 100644 --- a/e2e/tests/visual-a11y/notification.visual.spec.js +++ b/e2e/tests/visual-a11y/notification.visual.spec.js @@ -26,41 +26,54 @@ import percySnapshot from '@percy/playwright'; -import { createDomainObjectWithDefaults } from '../../appActions.js'; +import { createNotification } from '../../appActions.js'; import { expect, scanForA11yViolations, test } from '../../avpFixtures.js'; import { VISUAL_URL } from '../../constants.js'; -test.describe("Visual - Check Notification Info Banner of 'Save successful' @a11y", () => { +test.describe('Visual - Notifications @a11y', () => { test.beforeEach(async ({ page }) => { await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' }); }); - test("Create a clock, click on 'Save successful' banner and dismiss it", async ({ - page, - theme - }) => { - // Create a clock domain object - await createDomainObjectWithDefaults(page, { - type: 'Clock', - name: 'Default Clock' + test('Alert Levels and Notification List Modal', async ({ page, theme }) => { + await createNotification(page, { + message: 'Test info notification', + severity: 'info' }); - // Click on the div with role="alert" that has "Save successful" text - await page.locator('div[role="alert"]:has-text("Save successful")').click(); - // Verify there is a div with role="dialog" - expect(await page.locator('div[role="dialog"]').isVisible()).toBe(true); - // Verify the div with role="dialog" contains text "Save successful" - expect(await page.locator('div[role="dialog"]').innerText()).toContain('Save successful'); - await percySnapshot(page, `Notification banner shows Save successful (theme: '${theme}')`); - // Verify there is a button with text "Dismiss" - expect(await page.locator('button:has-text("Dismiss")').isVisible()).toBe(true); - await percySnapshot(page, `Notification banner shows Dismiss (theme: '${theme}')`); - // Click on button with text "Dismiss" - await page.locator('button:has-text("Dismiss")').click(); - // Verify there is no div with role="dialog" - expect(await page.locator('div[role="dialog"]').isVisible()).toBe(false); - await percySnapshot(page, `Notification banner dismissed (theme: '${theme}')`); - }); - test.afterEach(async ({ page }, testInfo) => { - await scanForA11yViolations(page, testInfo.title); + await expect(page.getByText('Test info notification')).toBeVisible(); + await percySnapshot(page, `Info Notification banner shown (theme: '${theme}')`); + await page.getByLabel('Dismiss').click(); + await page.getByRole('alert').waitFor({ state: 'detached' }); + await createNotification(page, { + message: 'Test alert notification', + severity: 'alert' + }); + await expect(page.getByText('Test alert notification')).toBeVisible(); + await percySnapshot(page, `Alert Notification banner shown (theme: '${theme}')`); + await page.getByLabel('Dismiss').click(); + await page.getByRole('alert').waitFor({ state: 'detached' }); + await createNotification(page, { + message: 'Test error notification', + severity: 'error' + }); + await expect(page.getByText('Test error notification')).toBeVisible(); + await percySnapshot(page, `Error Notification banner shown (theme: '${theme}')`); + await page.getByLabel('Dismiss').click(); + await page.getByRole('alert').waitFor({ state: 'detached' }); + + await page.getByLabel('Review 2 Notifications').click(); + await page.getByText('Test alert notification').waitFor(); + await percySnapshot(page, `Notification List Modal with alert and error (theme: '${theme}')`); + + // Skipping due to https://github.com/nasa/openmct/issues/6820 + // await page.getByLabel('Dismiss notification of Test alert notification').click(); + // await page.getByText('Test alert notification').waitFor({ state: 'detached' }); + // await percySnapshot(page, `Notification Modal with error only (theme: '${theme}')`); + + await page.getByRole('button', { name: 'Clear All Notifications', exact: true }).click(); + await percySnapshot(page, `Notification Modal after Clear All (theme: '${theme}')`); }); }); +test.afterEach(async ({ page }, testInfo) => { + await scanForA11yViolations(page, testInfo.title); +}); diff --git a/src/plugins/folderView/components/GridItem.vue b/src/plugins/folderView/components/GridItem.vue index c58f3fdd66f..569ea93255d 100644 --- a/src/plugins/folderView/components/GridItem.vue +++ b/src/plugins/folderView/components/GridItem.vue @@ -42,14 +42,22 @@
    {{ item.model.name }}
    -
    +
    {{ item.type.name }}
    -
    +
    - +
    diff --git a/src/plugins/folderView/components/GridView.vue b/src/plugins/folderView/components/GridView.vue index d92cea2fb4f..325fa60c988 100644 --- a/src/plugins/folderView/components/GridView.vue +++ b/src/plugins/folderView/components/GridView.vue @@ -20,12 +20,13 @@ at runtime from the About dialog for additional information. --> diff --git a/src/plugins/plot/chart/MctChart.vue b/src/plugins/plot/chart/MctChart.vue index d8602de3e4a..f875487fe2a 100644 --- a/src/plugins/plot/chart/MctChart.vue +++ b/src/plugins/plot/chart/MctChart.vue @@ -22,20 +22,22 @@