mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 20:57:53 +00:00
[CI] Add a11y checks to our visual testing suite (#7047)
* Add a VISUAL_URL constant and remove all vestiges of hide inspector and tree * hide timer and add concurrency * turn off concurrency * factor out old appAction * Add expand button to panes * remove old slow annotations * fix fault * update domcontentloaded * missed refactor * driveby: setTimeBounds private * add comments to the percyCSS * suggest MISSION_TIME * more notes * regen * clean up test * driveby: clean up order * restructure * add new suite now that i'ts hidden * use mission time everywhere possible * driveby * rerun generatedata * comments * lint fix * add inital pass of a11y tests * first pass for fixing a11y problems * update build * add copyright * check for slashes * rename files * update testcases * update to latest * updates * section 508 * final version * remove leftover * comments * documentation * bad merge * comment * use current ruleset * typo * feedback * remove time conductor due to false positives * default to closed tabs * add some more accessiblity checking * change to a condition widget and update search * lint fix * turns this into a single function * update doc to match single function * update to single function * update to new function * lint * update locator for search input * fix extra page * why * comments * comments * refacotr * wrong paths and fixes
This commit is contained in:
John Hill
GitHub
parent
ec910dcbdc
commit
0d97675a0a
@ -219,7 +219,7 @@ jobs:
|
||||
equal: [42, 42] # Always run codecov reports regardless of test failure https://discuss.circleci.com/t/make-custom-command-run-always-with-when-always/38957/2
|
||||
steps:
|
||||
- generate_and_store_version_and_filesystem_artifacts
|
||||
visual-test:
|
||||
visual-a11y-tests:
|
||||
parameters:
|
||||
suite:
|
||||
type: string # ci or full
|
||||
@ -253,7 +253,7 @@ workflows:
|
||||
suite: stable
|
||||
- mem-test
|
||||
- perf-test
|
||||
- visual-test:
|
||||
- visual-a11y-tests:
|
||||
name: visual-test-ci
|
||||
suite: ci
|
||||
|
||||
@ -272,7 +272,7 @@ workflows:
|
||||
suite: full
|
||||
- mem-test
|
||||
- perf-test
|
||||
- visual-test:
|
||||
- visual-a11y-tests:
|
||||
name: visual-test-nightly
|
||||
suite: full
|
||||
- e2e-couchdb
|
||||
|
||||
@ -490,7 +490,8 @@
|
||||
"Blockquotes",
|
||||
"oger",
|
||||
"lcovonly",
|
||||
"gcov"
|
||||
"gcov",
|
||||
"WCAG"
|
||||
],
|
||||
"dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en_US"],
|
||||
"ignorePaths": [
|
||||
|
||||
@ -21,4 +21,8 @@ snapshot:
|
||||
/* Embedded timestamp in notebooks */
|
||||
.c-ne__embed__time{
|
||||
opacity: 0 !important;
|
||||
}
|
||||
/* Time Conductor Start Time */
|
||||
.c-compact-tc__setting-value{
|
||||
opacity: 0 !important;
|
||||
}
|
||||
@ -21,4 +21,8 @@ snapshot:
|
||||
/* Embedded timestamp in notebooks */
|
||||
.c-ne__embed__time{
|
||||
opacity: 0 !important;
|
||||
}
|
||||
/* Time Conductor Start Time */
|
||||
.c-compact-tc__setting-value{
|
||||
opacity: 0 !important;
|
||||
}
|
||||
@ -51,11 +51,13 @@ Next, you should walk through our implementation of Playwright in Open MCT:
|
||||
|
||||
## Types of e2e Testing
|
||||
|
||||
e2e testing describes the layer at which a test is performed without prescribing the assertions which are made. Generally, when writing an e2e test, we have three choices to make on an assertion strategy:
|
||||
e2e testing describes the layer at which a test is performed without prescribing the assertions which are made. Generally, when writing an e2e test, we have five choices to make on an assertion strategy:
|
||||
|
||||
1. Functional - Verifies the functional correctness of the application. Sometimes interchanged with e2e or regression testing.
|
||||
2. Visual - Verifies the "look and feel" of the application and can only detect _undesirable changes when compared to a previous baseline_.
|
||||
3. Snapshot - Similar to Visual in that it captures the "look" of the application and can only detect _undesirable changes when compared to a previous baseline_. **Generally not preferred due to advanced setup necessary.**
|
||||
4. Accessibility - Verifies that the application meets the accessibility standards defined by the [WCAG organization](https://www.w3.org/WAI/standards-guidelines/wcag/).
|
||||
5. Performance - Verifies that application provides a performant experience. Like Snapshot testing, these tests are generally not recommended due to their difficulty in providing a consistent result.
|
||||
|
||||
When choosing between the different testing strategies, think only about the assertion that is made at the end of the series of test steps. "I want to verify that the Timer plugin functions correctly" vs "I want to verify that the Timer plugin does not look different than originally designed".
|
||||
|
||||
@ -132,6 +134,35 @@ npm install
|
||||
npm run test:e2e:updatesnapshots
|
||||
```
|
||||
|
||||
## Automated Accessibility (a11y) Testing
|
||||
|
||||
Open MCT incorporates accessibility testing through two primary methods to ensure its compliance with accessibility standards:
|
||||
|
||||
1. **Usage of Playwright's Locator Strategy**: Open MCT utilizes Playwright's locator strategy, specifically the [page.getByRole('') function](https://playwright.dev/docs/api/class-framelocator#frame-locator-get-by-role), to ensure that web elements are accessible via assistive technologies. This approach focuses on the accessibility of elements rather than full adherence to a11y guidelines, which is covered in the second method.
|
||||
|
||||
2. **Enforcing a11y Guidelines with Playwright Axe Plugin**: To rigorously enforce a11y guideline compliance, Open MCT employs the [playwright axe plugin](https://playwright.dev/docs/accessibility-testing). This is achieved through the `scanForA11yViolations` function within the visual testing suite. This method not only benefits from the existing coverage of the visual tests but also targets specific a11y issues, such as `color-contrast` violations, which are particularly pertinent in the context of visual testing.
|
||||
|
||||
### a11y Standards (WCAG and Section 508)
|
||||
|
||||
Playwright axe supports a wide range of [WCAG Standards](https://playwright.dev/docs/accessibility-testing#scanning-for-wcag-violations) to test against. Open MCT is testing against the [Section 508](https://www.section508.gov/test/testing-overview/) accessibility guidelines with the intent to support higher standards over time. As of 2024, Section508 requirements now map completely to WCAG 2.0 AA. In the future, Section 508 requirements may map to WCAG 2.1 AA.
|
||||
|
||||
### Reading an a11y test failure
|
||||
|
||||
When an a11y test fails, the result must be interpreted in the html test report or the a11y report json artifact stored in the `/test-results/` folder. The json structure should be parsed for `"violations"` by `"id"` and identified `"target"`. Example provided for the 'color-contrast-enhanced' violation.
|
||||
|
||||
```json
|
||||
"violations":
|
||||
{
|
||||
"id": "color-contrast-enhanced",
|
||||
"impact": "serious",
|
||||
"html": "<span class=\"label c-indicator__label\">0 Snapshots <button aria-label=\"Show Snapshots\">Show</button></span>",
|
||||
"target": [
|
||||
".s-status-off > .label.c-indicator__label"
|
||||
],
|
||||
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.51 (foreground color: #aaaaaa, background color: #262626, font size: 8.1pt (10.8px), font weight: normal). Expected contrast ratio of 7:1"
|
||||
}
|
||||
```
|
||||
|
||||
## Performance Testing
|
||||
|
||||
The open source performance tests function in three ways which match their naming and folder structure:
|
||||
@ -142,6 +173,8 @@ The open source performance tests function in three ways which match their namin
|
||||
|
||||
These tests are expected to become blocking and gating with assertions as we extend the capabilities of Playwright.
|
||||
|
||||
In addition to the explicit definition of performance tests, we also ensure that our test timeout timing is "tight" to catch performance regressions detectable by action timeouts. i.e. [Notebooks load much slower than they used to #6459](https://github.com/nasa/openmct/issues/6459)
|
||||
|
||||
## Test Architecture and CI
|
||||
|
||||
### Architecture
|
||||
@ -161,8 +194,8 @@ Our file structure follows the type of type of testing being excercised at the e
|
||||
|`./tests/performance/` | Performance tests which should be run on every commit.|
|
||||
|`./tests/performance/contract/` | A subset of performance tests which are designed to provide a contract between the open source tests which are run on every commit and the downstream tests which are run post merge and with other frameworks.|
|
||||
|`./tests/performance/memory` | A subset of performance tests which are designed to test for memory leaks.|
|
||||
|`./tests/visual/` | Visual tests.|
|
||||
|`./tests/visual/component/` | Visual tests which are only run against a single component.|
|
||||
|`./tests/visual-a11y/` | Visual tests and accessibility tests.|
|
||||
|`./tests/visual-a11y/component/` | Visual and accessibility tests which are only run against a single component.|
|
||||
|`./appActions.js` | Contains common methods which can be leveraged by test case authors to quickly move through the application when writing new tests.|
|
||||
|`./baseFixture.js` | Contains base fixtures which only extend default `@playwright/test` functionality. The expectation is that these fixtures will be removed as the native Playwright API improves|
|
||||
|
||||
@ -180,7 +213,7 @@ Open MCT is leveraging the [config file](https://playwright.dev/docs/test-config
|
||||
|`./playwright-local.config.js` | Used when running locally|
|
||||
|`./playwright-performance.config.js` | Used when running performance tests in CI or locally|
|
||||
|`./playwright-performance-devmode.config.js` | Used when running performance tests in CI or locally|
|
||||
|`./playwright-visual.config.js` | Used to run the visual tests in CI or locally|
|
||||
|`./playwright-visual-a11y.config.js` | Used to run the visual and a11y tests in CI or locally|
|
||||
|
||||
#### Test Tags
|
||||
|
||||
@ -191,6 +224,7 @@ Current list of test tags:
|
||||
|Test Tag|Description|
|
||||
|:-:|-|
|
||||
|`@ipad` | Test case or test suite is compatible with Playwright's iPad support and Open MCT's read-only mobile view (i.e. no create button).|
|
||||
|`@a11y` | Test case or test suite to execute playwright-axe accessibility checks and generate a11y reports.|
|
||||
|`@gds` | Denotes a GDS Test Case used in the VIPER Mission.|
|
||||
|`@addInit` | Initializes the browser with an injected and artificial state. Useful for loading non-default plugins. Likely will not work outside of `npm start`.|
|
||||
|`@localStorage` | Captures or generates session storage to manipulate browser state. Useful for excluding in tests which require a persistent backend (i.e. CouchDB). See [note](#utilizing-localstorage)|
|
||||
@ -216,7 +250,7 @@ CircleCI
|
||||
- Stable e2e tests against ubuntu and chrome
|
||||
- Performance tests against ubuntu and chrome
|
||||
- e2e tests are linted
|
||||
- Visual tests are run in a single resolution on the default `espresso` theme
|
||||
- Visual and a11y tests are run in a single resolution on the default `espresso` theme
|
||||
|
||||
#### 2. Per-Merge Testing
|
||||
|
||||
@ -232,7 +266,7 @@ Nightly Testing in Circle CI
|
||||
- Full e2e suite against ubuntu and chrome, firefox, and an MMOC resolution profile
|
||||
- Performance tests against ubuntu and chrome
|
||||
- CouchDB suite
|
||||
- Visual Tests are run in the full profile
|
||||
- Visual and a11y Tests are run in the full profile
|
||||
|
||||
Github Actions / Workflow
|
||||
|
||||
@ -405,7 +439,7 @@ By adhering to this principle, we can create tests that are both robust and refl
|
||||
5. **Hide the Tree and Inspector**: Generally, your test will not require comparisons involving the tree and inspector. These aspects are covered in component-specific tests (explained below). To exclude them from the comparison by default, navigate to the root of the main view with the tree and inspector hidden:
|
||||
- `await page.goto('./#/browse/mine?hideTree=true&hideInspector=true')`
|
||||
|
||||
6. **Component-Specific Tests**: If you wish to focus on a particular component, use the `/visual/component/` folder and limit the scope of the comparison to that component. For instance:
|
||||
6. **Component-Specific Tests**: If you wish to focus on a particular component, use the `/visual-a11y/component/` folder and limit the scope of the comparison to that component. For instance:
|
||||
```js
|
||||
await percySnapshot(page, `Tree Pane w/ single level expanded (theme: ${theme})`, {
|
||||
scope: treePane
|
||||
|
||||
97
e2e/avpFixtures.js
Normal file
97
e2e/avpFixtures.js
Normal file
@ -0,0 +1,97 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2023, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/**
|
||||
* avpFixtures.js
|
||||
*
|
||||
* @file This module provides custom fixtures specifically tailored for Accessibility, Visual, and Performance (AVP) tests.
|
||||
* These fixtures extend the base functionality of the Playwright fixtures and appActions, and are designed to be
|
||||
* generalized across all plugins. They offer functionalities like scanning for accessibility violations, integrating
|
||||
* with axe-core, and more.
|
||||
*
|
||||
* IMPORTANT NOTE: This fixture file is not intended to be extended further by other fixtures. If you find yourself
|
||||
* needing to do so, please consult the documentation and consider creating a specialized fixture or modifying the
|
||||
* existing ones.
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const { test, expect } = require('./pluginFixtures');
|
||||
const AxeBuilder = require('@axe-core/playwright').default;
|
||||
|
||||
// Constants for repeated values
|
||||
const TEST_RESULTS_DIR = './test-results';
|
||||
|
||||
/**
|
||||
* Scans for accessibility violations on a page and writes a report to disk if violations are found.
|
||||
* Automatically asserts that no violations should be present.
|
||||
*
|
||||
* @typedef {object} GenerateReportOptions
|
||||
* @property {string} [reportName] - The name for the report file.
|
||||
*
|
||||
* @param {import('playwright').Page} page - The page object from Playwright.
|
||||
* @param {string} testCaseName - The name of the test case.
|
||||
* @param {GenerateReportOptions} [options={}] - The options for the report generation.
|
||||
*
|
||||
* @returns {Promise<object|null>} Returns the accessibility scan results if violations are found,
|
||||
* otherwise returns null.
|
||||
*/
|
||||
/* eslint-disable no-undef */
|
||||
exports.scanForA11yViolations = async function (page, testCaseName, options = {}) {
|
||||
const builder = new AxeBuilder({ page });
|
||||
builder.withTags(['wcag2aa']);
|
||||
// https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
|
||||
builder.disableRules(['color-contrast']);
|
||||
const accessibilityScanResults = await builder.analyze();
|
||||
|
||||
// Assert that no violations should be present
|
||||
expect(
|
||||
accessibilityScanResults.violations,
|
||||
`Accessibility violations found in test case: ${testCaseName}`
|
||||
).toEqual([]);
|
||||
|
||||
// Check if there are any violations
|
||||
if (accessibilityScanResults.violations.length > 0) {
|
||||
let reportName = options.reportName || testCaseName;
|
||||
let sanitizedReportName = reportName.replace(/\//g, '_');
|
||||
const reportPath = path.join(TEST_RESULTS_DIR, `${sanitizedReportName}.json`);
|
||||
|
||||
try {
|
||||
if (!fs.existsSync(TEST_RESULTS_DIR)) {
|
||||
fs.mkdirSync(TEST_RESULTS_DIR);
|
||||
}
|
||||
|
||||
fs.writeFileSync(reportPath, JSON.stringify(accessibilityScanResults, null, 2));
|
||||
console.log(`Accessibility report with violations saved successfully as ${reportPath}`);
|
||||
return accessibilityScanResults;
|
||||
} catch (err) {
|
||||
console.error(`Error writing the accessibility report to file ${reportPath}:`, err);
|
||||
throw err;
|
||||
}
|
||||
} else {
|
||||
console.log('No accessibility violations found, no report generated.');
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
exports.expect = expect;
|
||||
exports.test = test;
|
||||
189
e2e/helper/plotTagsUtils.js
Normal file
189
e2e/helper/plotTagsUtils.js
Normal file
@ -0,0 +1,189 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2023, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
import { expect } from '../pluginFixtures';
|
||||
const { waitForPlotsToRender } = require('../appActions');
|
||||
|
||||
/**
|
||||
* Given a canvas and a set of points, tags the points on the canvas.
|
||||
* @param {import('@playwright/test').Page} page
|
||||
* @param {HTMLCanvasElement} canvas a telemetry item with a plot
|
||||
* @param {Number} xEnd a telemetry item with a plot
|
||||
* @param {Number} yEnd a telemetry item with a plot
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export async function createTags({ page, canvas, xEnd = 700, yEnd = 520 }) {
|
||||
await canvas.hover({ trial: true });
|
||||
|
||||
//Alt+Shift Drag Start to select some points to tag
|
||||
await page.keyboard.down('Alt');
|
||||
await page.keyboard.down('Shift');
|
||||
|
||||
await canvas.dragTo(canvas, {
|
||||
sourcePosition: {
|
||||
x: 1,
|
||||
y: 1
|
||||
},
|
||||
targetPosition: {
|
||||
x: xEnd,
|
||||
y: yEnd
|
||||
}
|
||||
});
|
||||
|
||||
//Alt Drag End
|
||||
await page.keyboard.up('Alt');
|
||||
await page.keyboard.up('Shift');
|
||||
|
||||
//Wait for canvas to stabilize.
|
||||
await canvas.hover({ trial: true });
|
||||
|
||||
// add some tags
|
||||
await page.getByText('Annotations').click();
|
||||
await page.getByRole('button', { name: /Add Tag/ }).click();
|
||||
await page.getByPlaceholder('Type to select tag').click();
|
||||
await page.getByText('Driving').click();
|
||||
|
||||
await page.getByRole('button', { name: /Add Tag/ }).click();
|
||||
await page.getByPlaceholder('Type to select tag').click();
|
||||
await page.getByText('Science').click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a telemetry item (e.g., a Sine Wave Generator) with a plot, tests that the plot can be tagged.
|
||||
* @param {import('@playwright/test').Page} page
|
||||
* @param {import('../../../../appActions').CreatedObjectInfo} telemetryItem a telemetry item with a plot
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export async function testTelemetryItem(page, telemetryItem) {
|
||||
// Check that telemetry item also received the tag
|
||||
await page.goto(telemetryItem.url);
|
||||
|
||||
await expect(page.getByText('No tags to display for this item')).toBeVisible();
|
||||
|
||||
const canvas = page.locator('canvas').nth(1);
|
||||
//Wait for canvas to stabilize.
|
||||
await waitForPlotsToRender(page);
|
||||
|
||||
await expect(canvas).toBeInViewport();
|
||||
await canvas.hover({ trial: true });
|
||||
|
||||
// click on the tagged plot point
|
||||
await canvas.click({
|
||||
position: {
|
||||
x: 100,
|
||||
y: 100
|
||||
}
|
||||
});
|
||||
|
||||
await expect(page.getByText('Science')).toBeVisible();
|
||||
await expect(page.getByText('Driving')).toBeHidden();
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a page, tests that tags are searchable, deletable, and persist across reloads.
|
||||
* @param {import('@playwright/test').Page} page
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export async function basicTagsTests(page) {
|
||||
// Search for Driving
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).click();
|
||||
|
||||
// Clicking elsewhere should cause annotation selection to be cleared
|
||||
await expect(page.getByText('No tags to display for this item')).toBeVisible();
|
||||
//
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).fill('driv');
|
||||
|
||||
// Always click on the first Sine Wave result
|
||||
await page
|
||||
.getByLabel('Search Result')
|
||||
.getByText(/Sine Wave/)
|
||||
.first()
|
||||
.click();
|
||||
|
||||
// Delete Driving Tag
|
||||
await page.hover('[aria-label="Tag"]:has-text("Driving")');
|
||||
await page.locator('[aria-label="Remove tag Driving"]').click();
|
||||
|
||||
// Search for Science Tag
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).click();
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).fill('sc');
|
||||
|
||||
//Expect Science Tag to be present and and Driving Tags to be deleted
|
||||
await expect(page.getByLabel('Search Result').first()).toContainText('Science');
|
||||
await expect(page.getByLabel('Search Result').first()).not.toContainText('Driving');
|
||||
|
||||
// Search for Driving Tag and expect nothing found
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).click();
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).fill('driv');
|
||||
await expect(page.getByText('No results found')).toBeVisible();
|
||||
|
||||
await page.reload({ waitUntil: 'domcontentloaded' });
|
||||
|
||||
await waitForPlotsToRender(page);
|
||||
|
||||
//Navigate to the Inspector and check that all tags have been removed
|
||||
await expect(page.getByRole('tab', { name: 'Annotations' })).not.toHaveClass(/is-current/);
|
||||
await page.getByRole('tab', { name: 'Annotations' }).click();
|
||||
await expect(page.getByRole('tab', { name: 'Annotations' })).toHaveClass(/is-current/);
|
||||
await expect(page.getByText('No tags to display for this item')).toBeVisible();
|
||||
|
||||
const canvas = page.locator('canvas').nth(1);
|
||||
// click on the tagged plot point
|
||||
await canvas.click({
|
||||
position: {
|
||||
x: 100,
|
||||
y: 100
|
||||
}
|
||||
});
|
||||
|
||||
//Expect Science to be visible but Driving to be hidden
|
||||
await expect(page.getByText('Science')).toBeVisible();
|
||||
await expect(page.getByText('Driving')).toBeHidden();
|
||||
|
||||
//Click elsewhere
|
||||
await page.locator('body').click();
|
||||
//Click on tagged plot point again
|
||||
await canvas.click({
|
||||
position: {
|
||||
x: 100,
|
||||
y: 100
|
||||
}
|
||||
});
|
||||
|
||||
// Add Driving Tag again
|
||||
await page.getByText('Annotations').click();
|
||||
await page.getByRole('button', { name: /Add Tag/ }).click();
|
||||
await page.getByPlaceholder('Type to select tag').click();
|
||||
await page.getByText('Driving').click();
|
||||
|
||||
//Science and Driving Tags should be visible
|
||||
await expect(page.getByText('Science')).toBeVisible();
|
||||
await expect(page.getByText('Driving')).toBeVisible();
|
||||
|
||||
// Delete Driving Tag again
|
||||
await page.hover('[aria-label="Tag"]:has-text("Driving")');
|
||||
await page.locator('[aria-label="Remove tag Driving"]').click();
|
||||
|
||||
//Science Tag should be visible and Driving Tag should be hidden
|
||||
await expect(page.getByText('Science')).toBeVisible();
|
||||
await expect(page.getByText('Driving')).toBeHidden();
|
||||
}
|
||||
@ -17,7 +17,7 @@ const config = {
|
||||
command: 'npm run start:coverage',
|
||||
url: 'http://localhost:8080/#',
|
||||
timeout: 200 * 1000,
|
||||
reuseExistingServer: false
|
||||
reuseExistingServer: true //This was originally disabled to prevent differences in local debugging vs. CI. However, it significantly speeds up local debugging.
|
||||
},
|
||||
maxFailures: MAX_FAILURES, //Limits failures to 5 to reduce CI Waste
|
||||
workers: NUM_WORKERS, //Limit to 2 for CircleCI Agent
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
/** @type {import('@playwright/test').PlaywrightTestConfig<{ theme: string }>} */
|
||||
const config = {
|
||||
retries: 0, // Visual tests should never retry due to snapshot comparison errors. Leaving as a shim
|
||||
testDir: 'tests/visual',
|
||||
testDir: 'tests/visual-a11y',
|
||||
testMatch: '**/*.visual.spec.js', // only run visual tests
|
||||
timeout: 60 * 1000,
|
||||
workers: 1, //Lower stress on Circle CI Agent for Visual tests https://github.com/percy/cli/discussions/1067
|
||||
@ -25,6 +25,11 @@ Tests to verify plot tagging functionality.
|
||||
*/
|
||||
|
||||
const { test, expect } = require('../../../../pluginFixtures');
|
||||
const {
|
||||
basicTagsTests,
|
||||
createTags,
|
||||
testTelemetryItem
|
||||
} = require('../../../../helper/plotTagsUtils');
|
||||
const {
|
||||
createDomainObjectWithDefaults,
|
||||
setRealTimeMode,
|
||||
@ -33,163 +38,6 @@ const {
|
||||
} = require('../../../../appActions');
|
||||
|
||||
test.describe('Plot Tagging', () => {
|
||||
/**
|
||||
* Given a canvas and a set of points, tags the points on the canvas.
|
||||
* @param {import('@playwright/test').Page} page
|
||||
* @param {HTMLCanvasElement} canvas a telemetry item with a plot
|
||||
* @param {Number} xEnd a telemetry item with a plot
|
||||
* @param {Number} yEnd a telemetry item with a plot
|
||||
* @returns {Promise}
|
||||
*/
|
||||
async function createTags({ page, canvas, xEnd = 700, yEnd = 520 }) {
|
||||
await canvas.hover({ trial: true });
|
||||
|
||||
//Alt+Shift Drag Start to select some points to tag
|
||||
await page.keyboard.down('Alt');
|
||||
await page.keyboard.down('Shift');
|
||||
|
||||
await canvas.dragTo(canvas, {
|
||||
sourcePosition: {
|
||||
x: 1,
|
||||
y: 1
|
||||
},
|
||||
targetPosition: {
|
||||
x: xEnd,
|
||||
y: yEnd
|
||||
}
|
||||
});
|
||||
|
||||
//Alt Drag End
|
||||
await page.keyboard.up('Alt');
|
||||
await page.keyboard.up('Shift');
|
||||
|
||||
//Wait for canvas to stabilize.
|
||||
await canvas.hover({ trial: true });
|
||||
|
||||
// add some tags
|
||||
await page.getByText('Annotations').click();
|
||||
await page.getByRole('button', { name: /Add Tag/ }).click();
|
||||
await page.getByPlaceholder('Type to select tag').click();
|
||||
await page.getByText('Driving').click();
|
||||
|
||||
await page.getByRole('button', { name: /Add Tag/ }).click();
|
||||
await page.getByPlaceholder('Type to select tag').click();
|
||||
await page.getByText('Science').click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a telemetry item (e.g., a Sine Wave Generator) with a plot, tests that the plot can be tagged.
|
||||
* @param {import('@playwright/test').Page} page
|
||||
* @param {import('../../../../appActions').CreatedObjectInfo} telemetryItem a telemetry item with a plot
|
||||
* @returns {Promise}
|
||||
*/
|
||||
async function testTelemetryItem(page, telemetryItem) {
|
||||
// Check that telemetry item also received the tag
|
||||
await page.goto(telemetryItem.url);
|
||||
|
||||
await expect(page.getByText('No tags to display for this item')).toBeVisible();
|
||||
|
||||
const canvas = page.locator('canvas').nth(1);
|
||||
//Wait for canvas to stabilize.
|
||||
await waitForPlotsToRender(page);
|
||||
|
||||
await expect(canvas).toBeInViewport();
|
||||
await canvas.hover({ trial: true });
|
||||
|
||||
// click on the tagged plot point
|
||||
await canvas.click({
|
||||
position: {
|
||||
x: 100,
|
||||
y: 100
|
||||
}
|
||||
});
|
||||
|
||||
await expect(page.getByText('Science')).toBeVisible();
|
||||
await expect(page.getByText('Driving')).toBeHidden();
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a page, tests that tags are searchable, deletable, and persist across reloads.
|
||||
* @param {import('@playwright/test').Page} page
|
||||
* @returns {Promise}
|
||||
*/
|
||||
async function basicTagsTests(page) {
|
||||
// Search for Driving
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
|
||||
|
||||
// Clicking elsewhere should cause annotation selection to be cleared
|
||||
await expect(page.getByText('No tags to display for this item')).toBeVisible();
|
||||
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('driv');
|
||||
// click on the search result
|
||||
await page
|
||||
.getByRole('searchbox', { name: 'OpenMCT Search' })
|
||||
.getByText(/Sine Wave/)
|
||||
.first()
|
||||
.click();
|
||||
|
||||
// Delete Driving
|
||||
await page.hover('[aria-label="Tag"]:has-text("Driving")');
|
||||
await page.locator('[aria-label="Remove tag Driving"]').click();
|
||||
|
||||
// Search for Science
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
|
||||
await expect(page.locator('[aria-label="Search Result"]').nth(0)).toContainText('Science');
|
||||
await expect(page.locator('[aria-label="Search Result"]').nth(0)).not.toContainText('Drilling');
|
||||
|
||||
// Search for Driving
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('driv');
|
||||
await expect(page.getByText('No results found')).toBeVisible();
|
||||
|
||||
//Reload Page
|
||||
await page.reload({ waitUntil: 'domcontentloaded' });
|
||||
// wait for plots to load
|
||||
await waitForPlotsToRender(page);
|
||||
|
||||
await expect(page.getByRole('tab', { name: 'Annotations' })).not.toHaveClass(/is-current/);
|
||||
await page.getByRole('tab', { name: 'Annotations' }).click();
|
||||
await expect(page.getByRole('tab', { name: 'Annotations' })).toHaveClass(/is-current/);
|
||||
|
||||
await expect(page.getByText('No tags to display for this item')).toBeVisible();
|
||||
|
||||
const canvas = page.locator('canvas').nth(1);
|
||||
// click on the tagged plot point
|
||||
await canvas.click({
|
||||
position: {
|
||||
x: 100,
|
||||
y: 100
|
||||
}
|
||||
});
|
||||
|
||||
await expect(page.getByText('Science')).toBeVisible();
|
||||
await expect(page.getByText('Driving')).toBeHidden();
|
||||
|
||||
// click elsewhere
|
||||
await page.locator('body').click();
|
||||
//click on tagged plot point again
|
||||
await canvas.click({
|
||||
position: {
|
||||
x: 100,
|
||||
y: 100
|
||||
}
|
||||
});
|
||||
// Add driving tag again
|
||||
await page.getByText('Annotations').click();
|
||||
await page.getByRole('button', { name: /Add Tag/ }).click();
|
||||
await page.getByPlaceholder('Type to select tag').click();
|
||||
await page.getByText('Driving').click();
|
||||
await expect(page.getByText('Science')).toBeVisible();
|
||||
await expect(page.getByText('Driving')).toBeVisible();
|
||||
|
||||
// Delete Driving again
|
||||
await page.hover('[aria-label="Tag"]:has-text("Driving")');
|
||||
await page.locator('[aria-label="Remove tag Driving"]').click();
|
||||
await expect(page.getByText('Science')).toBeVisible();
|
||||
await expect(page.getByText('Driving')).toBeHidden();
|
||||
}
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('./', { waitUntil: 'domcontentloaded' });
|
||||
});
|
||||
@ -244,19 +92,17 @@ test.describe('Plot Tagging', () => {
|
||||
// set to real time mode
|
||||
await setRealTimeMode(page);
|
||||
|
||||
// Search for Science
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
|
||||
// click on the search result
|
||||
await page
|
||||
.getByRole('searchbox', { name: 'OpenMCT Search' })
|
||||
.getByText('Alpha Sine Wave')
|
||||
.first()
|
||||
.click();
|
||||
// wait for plots to load
|
||||
await expect(page.locator('.js-series-data-loaded')).toBeVisible();
|
||||
// Search for Science Tag
|
||||
await page.getByRole('searchbox', { name: 'Search Input' });
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).fill('sc');
|
||||
|
||||
// Click on the search object result
|
||||
await page.getByLabel('OpenMCT Search').getByText('Alpha Sine Wave').first().click();
|
||||
|
||||
await waitForPlotsToRender(page);
|
||||
|
||||
// expect plot to be paused
|
||||
await expect(page.locator('[title="Resume displaying real-time data"]')).toBeVisible();
|
||||
await expect(page.getByTitle('Resume displaying real-time data')).toBeVisible();
|
||||
|
||||
await setFixedTimeMode(page);
|
||||
});
|
||||
|
||||
@ -25,6 +25,7 @@ Tests to verify plot tagging performance.
|
||||
*/
|
||||
|
||||
const { test, expect } = require('../../pluginFixtures');
|
||||
const { basicTagsTests, createTags, testTelemetryItem } = require('../../helper/plotTagsUtils');
|
||||
const {
|
||||
createDomainObjectWithDefaults,
|
||||
setRealTimeMode,
|
||||
@ -33,135 +34,6 @@ const {
|
||||
} = require('../../appActions');
|
||||
|
||||
test.describe('Plot Tagging Performance', () => {
|
||||
/**
|
||||
* Given a canvas and a set of points, tags the points on the canvas.
|
||||
* @param {import('@playwright/test').Page} page
|
||||
* @param {HTMLCanvasElement} canvas a telemetry item with a plot
|
||||
* @param {Number} xEnd a telemetry item with a plot
|
||||
* @param {Number} yEnd a telemetry item with a plot
|
||||
* @returns {Promise}
|
||||
*/
|
||||
async function createTags({ page, canvas, xEnd = 700, yEnd = 520 }) {
|
||||
await canvas.hover({ trial: true });
|
||||
|
||||
//Alt+Shift Drag Start to select some points to tag
|
||||
await page.keyboard.down('Alt');
|
||||
await page.keyboard.down('Shift');
|
||||
|
||||
await canvas.dragTo(canvas, {
|
||||
sourcePosition: {
|
||||
x: 1,
|
||||
y: 1
|
||||
},
|
||||
targetPosition: {
|
||||
x: xEnd,
|
||||
y: yEnd
|
||||
}
|
||||
});
|
||||
|
||||
//Alt Drag End
|
||||
await page.keyboard.up('Alt');
|
||||
await page.keyboard.up('Shift');
|
||||
|
||||
//Wait for canvas to stabilize.
|
||||
await canvas.hover({ trial: true });
|
||||
|
||||
// add some tags
|
||||
await page.getByText('Annotations').click();
|
||||
await page.getByRole('button', { name: /Add Tag/ }).click();
|
||||
await page.getByPlaceholder('Type to select tag').click();
|
||||
await page.getByText('Driving').click();
|
||||
|
||||
await page.getByRole('button', { name: /Add Tag/ }).click();
|
||||
await page.getByPlaceholder('Type to select tag').click();
|
||||
await page.getByText('Science').click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a telemetry item (e.g., a Sine Wave Generator) with a plot, tests that the plot can be tagged.
|
||||
* @param {import('@playwright/test').Page} page
|
||||
* @param {import('../../../../appActions').CreatedObjectInfo} telemetryItem a telemetry item with a plot
|
||||
* @returns {Promise}
|
||||
*/
|
||||
async function testTelemetryItem(page, telemetryItem) {
|
||||
// Check that telemetry item also received the tag
|
||||
await page.goto(telemetryItem.url);
|
||||
|
||||
await expect(page.getByText('No tags to display for this item')).toBeVisible();
|
||||
|
||||
const canvas = page.locator('canvas').nth(1);
|
||||
|
||||
//Wait for canvas to stabilize.
|
||||
await canvas.hover({ trial: true });
|
||||
|
||||
// click on the tagged plot point
|
||||
await canvas.click({
|
||||
position: {
|
||||
x: 100,
|
||||
y: 100
|
||||
}
|
||||
});
|
||||
|
||||
await expect(page.getByText('Science')).toBeVisible();
|
||||
await expect(page.getByText('Driving')).toBeHidden();
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a page, tests that tags are searchable, deletable, and persist across reloads.
|
||||
* @param {import('@playwright/test').Page} page
|
||||
* @returns {Promise}
|
||||
*/
|
||||
async function basicTagsTests(page) {
|
||||
// Search for Driving
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
|
||||
|
||||
// Clicking elsewhere should cause annotation selection to be cleared
|
||||
await expect(page.getByText('No tags to display for this item')).toBeVisible();
|
||||
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('driv');
|
||||
// click on the search result
|
||||
await page
|
||||
.getByRole('searchbox', { name: 'OpenMCT Search' })
|
||||
.getByText(/Sine Wave/)
|
||||
.first()
|
||||
.click();
|
||||
|
||||
// Delete Driving
|
||||
await page.hover('[aria-label="Tag"]:has-text("Driving")');
|
||||
await page.locator('[aria-label="Remove tag Driving"]').click();
|
||||
|
||||
// Search for Science
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
|
||||
await expect(page.locator('[aria-label="Search Result"]').nth(0)).toContainText('Science');
|
||||
await expect(page.locator('[aria-label="Search Result"]').nth(0)).not.toContainText('Drilling');
|
||||
|
||||
// Search for Driving
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('driv');
|
||||
await expect(page.getByText('No results found')).toBeVisible();
|
||||
|
||||
//Reload Page
|
||||
await page.reload({ waitUntil: 'domcontentloaded' });
|
||||
// wait for plots to load
|
||||
await waitForPlotsToRender(page);
|
||||
|
||||
await page.getByText('Annotations').click();
|
||||
await expect(page.getByText('No tags to display for this item')).toBeVisible();
|
||||
|
||||
const canvas = page.locator('canvas').nth(1);
|
||||
// click on the tagged plot point
|
||||
await canvas.click({
|
||||
position: {
|
||||
x: 100,
|
||||
y: 100
|
||||
}
|
||||
});
|
||||
|
||||
await expect(page.getByText('Science')).toBeVisible();
|
||||
await expect(page.getByText('Driving')).toBeHidden();
|
||||
}
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('./', { waitUntil: 'domcontentloaded' });
|
||||
});
|
||||
@ -212,18 +84,15 @@ test.describe('Plot Tagging Performance', () => {
|
||||
await setRealTimeMode(page);
|
||||
|
||||
// Search for Science
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
|
||||
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
|
||||
await page.getByRole('searchbox', { name: 'Search Input' });
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).fill('sc');
|
||||
|
||||
// click on the search result
|
||||
await page
|
||||
.getByRole('searchbox', { name: 'OpenMCT Search' })
|
||||
.getByText('Alpha Sine Wave')
|
||||
.first()
|
||||
.click();
|
||||
// wait for plots to load
|
||||
await expect(page.locator('.js-series-data-loaded')).toBeVisible();
|
||||
await page.getByLabel('Search Result').getByText('Alpha Sine Wave').first().click();
|
||||
|
||||
await waitForPlotsToRender(page);
|
||||
// expect plot to be paused
|
||||
await expect(page.locator('[title="Resume displaying real-time data"]')).toBeVisible();
|
||||
await expect(page.getByTitle('Resume displaying real-time data')).toBeVisible();
|
||||
|
||||
await setFixedTimeMode(page);
|
||||
});
|
||||
|
||||
33
e2e/tests/visual-a11y/a11y.visual.spec.js
Normal file
33
e2e/tests/visual-a11y/a11y.visual.spec.js
Normal file
@ -0,0 +1,33 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2023, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
const { test, scanForA11yViolations } = require('../../avpFixtures');
|
||||
const VISUAL_URL = require('../../constants').VISUAL_URL;
|
||||
|
||||
test.describe('a11y - Default @a11y', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
|
||||
});
|
||||
test('main view @a11y', async ({ page }, testInfo) => {
|
||||
await scanForA11yViolations(page, testInfo.title);
|
||||
});
|
||||
});
|
||||
@ -26,12 +26,12 @@ are only meant to run against openmct's app.js started by `npm run start` within
|
||||
`./e2e/playwright-visual.config.js` file.
|
||||
*/
|
||||
|
||||
const { test, expect } = require('../../pluginFixtures');
|
||||
const { test, expect, scanForA11yViolations } = require('../../avpFixtures');
|
||||
const percySnapshot = require('@percy/playwright');
|
||||
const { createDomainObjectWithDefaults } = require('../../appActions');
|
||||
const { VISUAL_URL } = require('../../constants');
|
||||
|
||||
test.describe('Visual - Default', () => {
|
||||
test.describe('Visual - Default @a11y', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
|
||||
});
|
||||
@ -98,4 +98,8 @@ test.describe('Visual - Default', () => {
|
||||
// Take a snapshot of the newly created Gauge object
|
||||
await percySnapshot(page, `Default Gauge (theme: '${theme}')`);
|
||||
});
|
||||
|
||||
test.afterEach(async ({ page }, testInfo) => {
|
||||
await scanForA11yViolations(page, testInfo.title);
|
||||
});
|
||||
});
|
||||
@ -20,7 +20,7 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
const { test } = require('../../pluginFixtures');
|
||||
const { test, scanForA11yViolations } = require('../../avpFixtures');
|
||||
const percySnapshot = require('@percy/playwright');
|
||||
const { expandTreePaneItemByName, createDomainObjectWithDefaults } = require('../../appActions');
|
||||
const {
|
||||
@ -31,7 +31,8 @@ const { VISUAL_URL } = require('../../constants');
|
||||
|
||||
test.describe('Visual - Restricted Notebook', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await startAndAddRestrictedNotebookObject(page);
|
||||
const restrictedNotebook = await startAndAddRestrictedNotebookObject(page);
|
||||
await page.goto(restrictedNotebook.url + '?hideTree=true&hideInspector=true');
|
||||
});
|
||||
|
||||
test('Restricted Notebook is visually correct @addInit', async ({ page, theme }) => {
|
||||
@ -58,7 +59,7 @@ test.describe('Visual - Notebook', () => {
|
||||
name: 'Dropped Overlay Plot'
|
||||
});
|
||||
|
||||
//Open Tree
|
||||
//Open Tree to perform drag
|
||||
await page.getByRole('button', { name: 'Browse' }).click();
|
||||
|
||||
await expandTreePaneItemByName(page, myItemsFolderName);
|
||||
@ -126,4 +127,7 @@ test.describe('Visual - Notebook', () => {
|
||||
// Take a snapshot
|
||||
await percySnapshot(page, `Notebook Selected Entry Text Area Active (theme: '${theme}')`);
|
||||
});
|
||||
test.afterEach(async ({ page }, testInfo) => {
|
||||
await scanForA11yViolations(page, testInfo.title);
|
||||
});
|
||||
});
|
||||
@ -24,12 +24,12 @@
|
||||
* This test is dedicated to test notification banner functionality and its accessibility attributes.
|
||||
*/
|
||||
|
||||
const { test, expect } = require('../../pluginFixtures');
|
||||
const { test, expect, scanForA11yViolations } = require('../../avpFixtures');
|
||||
const percySnapshot = require('@percy/playwright');
|
||||
const { createDomainObjectWithDefaults } = require('../../appActions');
|
||||
const VISUAL_URL = require('../../constants').VISUAL_URL;
|
||||
|
||||
test.describe("Visual - Check Notification Info Banner of 'Save successful'", () => {
|
||||
test.describe("Visual - Check Notification Info Banner of 'Save successful' @a11y", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
|
||||
});
|
||||
@ -59,4 +59,7 @@ test.describe("Visual - Check Notification Info Banner of 'Save successful'", ()
|
||||
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);
|
||||
});
|
||||
});
|
||||
@ -20,7 +20,7 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
const { test } = require('../../pluginFixtures');
|
||||
const { test, scanForA11yViolations } = require('../../avpFixtures');
|
||||
const {
|
||||
setBoundsToSpanAllActivities,
|
||||
setDraftStatusForPlan
|
||||
@ -32,7 +32,7 @@ const examplePlanSmall = require('../../test-data/examplePlans/ExamplePlan_Small
|
||||
|
||||
const snapshotScope = '.l-shell__pane-main .l-pane__contents';
|
||||
|
||||
test.describe('Visual - Planning', () => {
|
||||
test.describe('Visual - Planning @a11y', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
|
||||
});
|
||||
@ -97,4 +97,7 @@ test.describe('Visual - Planning', () => {
|
||||
scope: snapshotScope
|
||||
});
|
||||
});
|
||||
test.afterEach(async ({ page }, testInfo) => {
|
||||
await scanForA11yViolations(page, testInfo.title);
|
||||
});
|
||||
});
|
||||
@ -24,14 +24,14 @@
|
||||
This test suite is dedicated to tests which verify search functionality.
|
||||
*/
|
||||
|
||||
const { test, expect } = require('../../pluginFixtures');
|
||||
const { test, expect, scanForA11yViolations } = require('../../avpFixtures');
|
||||
const { createDomainObjectWithDefaults } = require('../../appActions');
|
||||
const { VISUAL_URL } = require('../../constants');
|
||||
|
||||
const percySnapshot = require('@percy/playwright');
|
||||
|
||||
test.describe('Grand Search', () => {
|
||||
let clock;
|
||||
test.describe('Grand Search @a11y', () => {
|
||||
let conditionWidget;
|
||||
let displayLayout;
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
|
||||
@ -41,9 +41,9 @@ test.describe('Grand Search', () => {
|
||||
name: 'Visual Test Display Layout'
|
||||
});
|
||||
|
||||
clock = await createDomainObjectWithDefaults(page, {
|
||||
type: 'Clock',
|
||||
name: 'Visual Test Clock',
|
||||
conditionWidget = await createDomainObjectWithDefaults(page, {
|
||||
type: 'Condition Widget',
|
||||
name: 'Visual Condition Widget',
|
||||
parent: displayLayout.uuid
|
||||
});
|
||||
});
|
||||
@ -52,29 +52,27 @@ test.describe('Grand Search', () => {
|
||||
page,
|
||||
theme
|
||||
}) => {
|
||||
const searchInput = page.getByRole('searchbox', { name: 'Search Input' });
|
||||
const searchResults = page.getByRole('searchbox', { name: 'OpenMCT Search' });
|
||||
// Navigate to display layout
|
||||
await page.goto(displayLayout.url);
|
||||
|
||||
// Search for the clock object
|
||||
await searchInput.click();
|
||||
await searchInput.fill(clock.name);
|
||||
await expect(searchResults.getByText('Visual Test Clock')).toBeVisible();
|
||||
// Search for the object
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).click();
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).fill(conditionWidget.name);
|
||||
await expect(page.getByLabel('Search Result').getByText(conditionWidget.name)).toBeVisible();
|
||||
|
||||
//Searching for an object returns that object in the grandsearch
|
||||
await percySnapshot(page, `Searching for Clock Object (theme: '${theme}')`);
|
||||
await percySnapshot(page, `Searching for Object (theme: '${theme}')`);
|
||||
|
||||
// Enter Edit mode on the Display Layout
|
||||
await page.getByRole('button', { name: 'Edit' }).click();
|
||||
|
||||
// Navigate to the clock object while in edit mode on the display layout
|
||||
await searchInput.click();
|
||||
await searchResults.getByText('Visual Test Clock').click();
|
||||
// Navigate to the object while in edit mode on the display layout
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).click();
|
||||
await page.getByLabel('Search Result').getByText(conditionWidget.name).click();
|
||||
|
||||
await percySnapshot(
|
||||
page,
|
||||
`Preview for clock should display when editing enabled and search item clicked (theme: '${theme}')`
|
||||
`Preview should display when editing enabled and search item clicked (theme: '${theme}')`
|
||||
);
|
||||
|
||||
// Close the preview
|
||||
@ -88,17 +86,20 @@ test.describe('Grand Search', () => {
|
||||
await page.getByRole('button', { name: 'Save' }).click();
|
||||
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
|
||||
|
||||
// Search for the clock object
|
||||
await searchInput.click();
|
||||
await searchInput.fill(clock.name);
|
||||
await expect(searchResults.getByText('Visual Test Clock')).toBeVisible();
|
||||
// Search for the object
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).click();
|
||||
await page.getByRole('searchbox', { name: 'Search Input' }).fill(conditionWidget.name);
|
||||
await expect(page.getByLabel('Search Result').getByText(conditionWidget.name)).toBeVisible();
|
||||
|
||||
// Navigate to the clock object while not in edit mode on the display layout
|
||||
await searchResults.getByText('Visual Test Clock').click();
|
||||
// Navigate to the object while not in edit mode on the display layout
|
||||
await page.getByLabel('Search Result').getByText(conditionWidget.name).click();
|
||||
|
||||
await percySnapshot(
|
||||
page,
|
||||
`Clicking on search results should navigate to them if not editing (theme: '${theme}')`
|
||||
);
|
||||
});
|
||||
test.afterEach(async ({ page }, testInfo) => {
|
||||
await scanForA11yViolations(page, testInfo.title);
|
||||
});
|
||||
});
|
||||
@ -23,10 +23,8 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no"
|
||||
/>
|
||||
<!-- Modified viewport meta tag to improve accessibility -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<title>Open MCT</title>
|
||||
<script src="dist/openmct.js"></script>
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
"description": "The Open MCT core platform",
|
||||
"main": "dist/openmct.js",
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "4.8.2",
|
||||
"@babel/eslint-parser": "7.22.5",
|
||||
"@braintree/sanitize-url": "6.0.4",
|
||||
"@deploysentinel/playwright": "0.3.4",
|
||||
@ -100,14 +101,15 @@
|
||||
"test": "karma start",
|
||||
"test:debug": "KARMA_DEBUG=true karma start",
|
||||
"test:e2e": "npx playwright test",
|
||||
"test:e2e:a11y": "npx playwright test --config=e2e/playwright-visual-a11y.config.js --project=chrome --grep @a11y",
|
||||
"test:e2e:couchdb": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @couchdb --workers=1",
|
||||
"test:e2e:stable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep-invert \"@unstable|@couchdb|@generatedata\"",
|
||||
"test:e2e:unstable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @unstable",
|
||||
"test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome",
|
||||
"test:e2e:generatedata": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @generatedata",
|
||||
"test:e2e:updatesnapshots": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @snapshot --update-snapshots",
|
||||
"test:e2e:visual:ci": "percy exec --config ./e2e/.percy.ci.yml --partial -- npx playwright test --config=e2e/playwright-visual.config.js --project=chrome --grep-invert @unstable",
|
||||
"test:e2e:visual:full": "percy exec --config ./e2e/.percy.nightly.yml -- npx playwright test --config=e2e/playwright-visual.config.js --grep-invert @unstable",
|
||||
"test:e2e:visual:ci": "percy exec --config ./e2e/.percy.ci.yml --partial -- npx playwright test --config=e2e/playwright-visual-a11y.config.js --project=chrome --grep-invert @unstable",
|
||||
"test:e2e:visual:full": "percy exec --config ./e2e/.percy.nightly.yml -- npx playwright test --config=e2e/playwright-visual-a11y.config.js --grep-invert @unstable",
|
||||
"test:e2e:full": "npx playwright test --config=e2e/playwright-ci.config.js --grep-invert @couchdb",
|
||||
"test:e2e:watch": "npx playwright test --ui --config=e2e/playwright-ci.config.js",
|
||||
"test:perf:contract": "npx playwright test --config=e2e/playwright-performance-dev.config.js",
|
||||
|
||||
@ -21,7 +21,10 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="c-indicator t-indicator-clock icon-clock no-minify c-indicator--not-clickable">
|
||||
<div
|
||||
class="c-indicator t-indicator-clock icon-clock no-minify c-indicator--not-clickable"
|
||||
role="complementary"
|
||||
>
|
||||
<span class="label c-indicator__label">
|
||||
{{ timeTextValue }}
|
||||
</span>
|
||||
|
||||
@ -20,23 +20,28 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<template>
|
||||
<div
|
||||
class="c-indicator c-indicator--clickable icon-camera"
|
||||
:class="[
|
||||
{ 's-status-off': snapshotCount === 0 },
|
||||
{ 's-status-on': snapshotCount > 0 },
|
||||
{ 's-status-caution': snapshotCount === snapshotMaxCount },
|
||||
{ 'has-new-snapshot': flashIndicator }
|
||||
]"
|
||||
>
|
||||
<span class="label c-indicator__label">
|
||||
{{ indicatorTitle }}
|
||||
<button @click="toggleSnapshot">
|
||||
{{ expanded ? 'Hide' : 'Show' }}
|
||||
</button>
|
||||
</span>
|
||||
<span class="c-indicator__count">{{ snapshotCount }}</span>
|
||||
</div>
|
||||
<aside aria-label="Snapshot Indicator">
|
||||
<div
|
||||
class="c-indicator c-indicator--clickable icon-camera"
|
||||
:class="[
|
||||
{ 's-status-off': snapshotCount === 0 },
|
||||
{ 's-status-on': snapshotCount > 0 },
|
||||
{ 's-status-caution': snapshotCount === snapshotMaxCount },
|
||||
{ 'has-new-snapshot': flashIndicator }
|
||||
]"
|
||||
>
|
||||
<span class="label c-indicator__label">
|
||||
{{ indicatorTitle }}
|
||||
<button
|
||||
:aria-label="expanded ? 'Hide Snapshots' : 'Show Snapshots'"
|
||||
@click="toggleSnapshot"
|
||||
>
|
||||
{{ expanded ? 'Hide' : 'Show' }}
|
||||
</button>
|
||||
</span>
|
||||
<span class="c-indicator__count">{{ snapshotCount }}</span>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
<input
|
||||
class="c-search__input"
|
||||
aria-label="Search Input"
|
||||
tabindex="10000"
|
||||
tabindex="0"
|
||||
type="search"
|
||||
:value="value"
|
||||
v-bind="$attrs"
|
||||
|
||||
@ -120,7 +120,7 @@
|
||||
</pane>
|
||||
</multipane>
|
||||
</pane>
|
||||
<pane class="l-shell__pane-main">
|
||||
<pane class="l-shell__pane-main" role="main">
|
||||
<browse-bar
|
||||
ref="browseBar"
|
||||
class="l-shell__main-view-browse-bar"
|
||||
|
||||
@ -21,11 +21,10 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div ref="GrandSearch" aria-label="OpenMCT Search" class="c-gsearch" role="searchbox">
|
||||
<div ref="GrandSearch" aria-label="OpenMCT Search" class="c-gsearch" role="search">
|
||||
<search
|
||||
ref="shell-search"
|
||||
class="c-gsearch__input"
|
||||
tabindex="0"
|
||||
:value="searchValue"
|
||||
@input="searchEverything"
|
||||
@clear="searchEverything"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user