[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
53
e2e/tests/visual-a11y/components/about.visual.spec.js
Normal file
53
e2e/tests/visual-a11y/components/about.visual.spec.js
Normal file
@@ -0,0 +1,53 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
|
||||
/*
|
||||
Tests the branding associated with the default deployment. At least the about modal for now
|
||||
*/
|
||||
|
||||
const { test, expect } = require('../../../pluginFixtures');
|
||||
const percySnapshot = require('@percy/playwright');
|
||||
const VISUAL_URL = require('../../../constants').VISUAL_URL;
|
||||
|
||||
test.describe('Visual - Branding', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
//Go to baseURL and Hide Tree
|
||||
await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
|
||||
});
|
||||
|
||||
test('Visual - About Modal', async ({ page, theme }) => {
|
||||
// Click About button
|
||||
await page.click('.l-shell__app-logo');
|
||||
|
||||
// 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 =
|
||||
'<li>Version: visual-snapshot</li> <li>Build Date: Mon Nov 15 2021 08:07:51 GMT-0800 (Pacific Standard Time)</li> <li>Revision: 93049cdbc6c047697ca204893db9603b864b8c9f</li> <li>Branch: master</li>')
|
||||
);
|
||||
|
||||
// Take a snapshot of the About modal
|
||||
await percySnapshot(page, `About (theme: '${theme}')`);
|
||||
});
|
||||
});
|
||||
56
e2e/tests/visual-a11y/components/inspector.visual.spec.js
Normal file
56
e2e/tests/visual-a11y/components/inspector.visual.spec.js
Normal file
@@ -0,0 +1,56 @@
|
||||
/*****************************************************************************
|
||||
* 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 } = require('../../../pluginFixtures.js');
|
||||
const { VISUAL_URL, MISSION_TIME } = require('../../../constants.js');
|
||||
const percySnapshot = require('@percy/playwright');
|
||||
|
||||
//Declare the scope of the visual test
|
||||
const inspectorPane = '.l-shell__pane-inspector';
|
||||
|
||||
test.describe('Visual - Controlled Clock', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
|
||||
});
|
||||
test.use({
|
||||
storageState: './e2e/test-data/overlay_plot_with_delay_storage.json',
|
||||
clockOptions: {
|
||||
now: MISSION_TIME,
|
||||
shouldAdvanceTime: true
|
||||
}
|
||||
});
|
||||
|
||||
test('Inspector from overlay_plot_with_delay_storage @localStorage', async ({ page, theme }) => {
|
||||
//Expand the Inspector Pane
|
||||
await page.getByRole('button', { name: 'Inspect' }).click();
|
||||
|
||||
await percySnapshot(page, `Inspector view of overlayPlot (theme: ${theme})`, {
|
||||
scope: inspectorPane
|
||||
});
|
||||
//Open Annotations Tab
|
||||
await page.getByRole('tab', { name: 'Annotations' }).click();
|
||||
|
||||
await percySnapshot(page, `Inspector view of Annotations Tab (theme: ${theme})`, {
|
||||
scope: inspectorPane
|
||||
});
|
||||
});
|
||||
});
|
||||
98
e2e/tests/visual-a11y/components/tree.visual.spec.js
Normal file
98
e2e/tests/visual-a11y/components/tree.visual.spec.js
Normal file
@@ -0,0 +1,98 @@
|
||||
/*****************************************************************************
|
||||
* 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 } = require('../../../pluginFixtures.js');
|
||||
const {
|
||||
expandTreePaneItemByName,
|
||||
createDomainObjectWithDefaults
|
||||
} = require('../../../appActions.js');
|
||||
const VISUAL_URL = require('../../../constants.js').VISUAL_URL;
|
||||
const percySnapshot = require('@percy/playwright');
|
||||
|
||||
//Declare the scope of the visual test
|
||||
const treePane = "[role=tree][aria-label='Main Tree']";
|
||||
|
||||
test.describe('Visual - Tree Pane', () => {
|
||||
test('Tree pane in various states', async ({ page, theme, openmctConfig }) => {
|
||||
const { myItemsFolderName } = openmctConfig;
|
||||
await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
|
||||
|
||||
//Open Tree
|
||||
await page.getByRole('button', { name: 'Browse' }).click();
|
||||
|
||||
//Create a Folder Structure
|
||||
const foo = await createDomainObjectWithDefaults(page, {
|
||||
type: 'Folder',
|
||||
name: 'Foo Folder'
|
||||
});
|
||||
|
||||
const bar = await createDomainObjectWithDefaults(page, {
|
||||
type: 'Folder',
|
||||
name: 'Bar Folder',
|
||||
parent: foo.uuid
|
||||
});
|
||||
|
||||
const baz = await createDomainObjectWithDefaults(page, {
|
||||
type: 'Folder',
|
||||
name: 'Baz Folder',
|
||||
parent: bar.uuid
|
||||
});
|
||||
|
||||
await createDomainObjectWithDefaults(page, {
|
||||
type: 'Clock',
|
||||
name: 'A Clock'
|
||||
});
|
||||
|
||||
await createDomainObjectWithDefaults(page, {
|
||||
type: 'Clock',
|
||||
name: 'Z Clock'
|
||||
});
|
||||
|
||||
await percySnapshot(page, `Tree Pane w/ collapsed tree (theme: ${theme})`, {
|
||||
scope: treePane
|
||||
});
|
||||
|
||||
await expandTreePaneItemByName(page, myItemsFolderName);
|
||||
|
||||
await page.goto(foo.url);
|
||||
await page.dragAndDrop('role=treeitem[name=/A Clock/]', '.c-object-view');
|
||||
await page.dragAndDrop('role=treeitem[name=/Z Clock/]', '.c-object-view');
|
||||
await page.goto(bar.url);
|
||||
await page.dragAndDrop('role=treeitem[name=/A Clock/]', '.c-object-view');
|
||||
await page.dragAndDrop('role=treeitem[name=/Z Clock/]', '.c-object-view');
|
||||
await page.goto(baz.url);
|
||||
await page.dragAndDrop('role=treeitem[name=/A Clock/]', '.c-object-view');
|
||||
await page.dragAndDrop('role=treeitem[name=/Z Clock/]', '.c-object-view');
|
||||
|
||||
await percySnapshot(page, `Tree Pane w/ single level expanded (theme: ${theme})`, {
|
||||
scope: treePane
|
||||
});
|
||||
|
||||
await expandTreePaneItemByName(page, foo.name);
|
||||
await expandTreePaneItemByName(page, bar.name);
|
||||
await expandTreePaneItemByName(page, baz.name);
|
||||
|
||||
await percySnapshot(page, `Tree Pane w/ multiple levels expanded (theme: ${theme})`, {
|
||||
scope: treePane
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user