Plots correctly use configuration set on the parent if they can't their own (#7770)

* For telemetry that cannot have it's own configuration, ensure that it is correct initialized by the parent.

* stacked plot test checks that config properties for immutable telemetry points are applied correctly

* add tab navigation to inspector tabs

* add accessibility metadata to this component

* Update title to be on the correct component. Add expand/collapse logic

* clean up test

* refactor: better a11y for plot forms, fix "expand by default" test, refactor out `plotActions.js`

* a11y: aria label for plotOptionsItem

* refactor(a11y): PlotOptionsBrowse structure to have better a11y

* fixed tests

* address comment

* reverted to match previous commit

---------

Co-authored-by: Hill, John (ARC-TI)[KBR Wyle Services, LLC] <john.c.hill@nasa.gov>
Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
This commit is contained in:
Shefali Joshi
2024-07-16 10:57:12 -07:00
committed by GitHub
parent 6983148aba
commit db808b4d54
13 changed files with 455 additions and 348 deletions

View File

@ -39,19 +39,23 @@ test.describe('Stacked Plot', () => {
await page.goto('./', { waitUntil: 'domcontentloaded' });
stackedPlot = await createDomainObjectWithDefaults(page, {
type: 'Stacked Plot'
type: 'Stacked Plot',
name: 'Stacked Plot'
});
swgA = await createDomainObjectWithDefaults(page, {
type: 'Sine Wave Generator',
name: 'Sine Wave Generator A',
parent: stackedPlot.uuid
});
swgB = await createDomainObjectWithDefaults(page, {
type: 'Sine Wave Generator',
name: 'Sine Wave Generator B',
parent: stackedPlot.uuid
});
swgC = await createDomainObjectWithDefaults(page, {
type: 'Sine Wave Generator',
name: 'Sine Wave Generator C',
parent: stackedPlot.uuid
});
});
@ -151,40 +155,80 @@ test.describe('Stacked Plot', () => {
await page.getByRole('tab', { name: 'Config' }).click();
// Click on the 1st plot
await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"] canvas`).nth(1).click();
await page
.getByLabel('Stacked Plot Item Sine Wave Generator A')
.getByLabel('Plot Canvas')
.click();
// Assert that the inspector shows the Y Axis properties for swgA
await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
'Plot Series'
);
await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
await expect(
page.locator('[aria-label="Plot Series Properties"] .c-object-label')
).toContainText(swgA.name);
page.getByLabel('Inspector Views').getByText('Sine Wave Generator A', { exact: true })
).toBeVisible();
// Click on the 2nd plot
await page.locator(`[aria-label="Stacked Plot Item ${swgB.name}"] canvas`).nth(1).click();
await page
.getByLabel('Stacked Plot Item Sine Wave Generator B')
.getByLabel('Plot Canvas')
.click();
// Assert that the inspector shows the Y Axis properties for swgB
await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
'Plot Series'
);
await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
await expect(
page.locator('[aria-label="Plot Series Properties"] .c-object-label')
).toContainText(swgB.name);
page.getByLabel('Inspector Views').getByText('Sine Wave Generator B', { exact: true })
).toBeVisible();
// Click on the 3rd plot
await page.locator(`[aria-label="Stacked Plot Item ${swgC.name}"] canvas`).nth(1).click();
// Assert that the inspector shows the Y Axis properties for swgC
await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
'Plot Series'
);
await page
.getByLabel('Stacked Plot Item Sine Wave Generator C')
.getByLabel('Plot Canvas')
.click();
// Assert that the inspector shows the Y Axis properties for swgB
await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
await expect(
page.locator('[aria-label="Plot Series Properties"] .c-object-label')
).toContainText(swgC.name);
page.getByLabel('Inspector Views').getByText('Sine Wave Generator C', { exact: true })
).toBeVisible();
// Go into edit mode
await page.getByLabel('Edit Object').click();
await page.getByRole('tab', { name: 'Config' }).click();
// Click on the 1st plot
await page.getByLabel('Stacked Plot Item Sine Wave Generator A').click();
// Assert that the inspector shows the Y Axis properties for swgA
await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
await expect(
page.getByLabel('Inspector Views').getByText('Sine Wave Generator A', { exact: true })
).toBeVisible();
// Click on the 2nd plot
await page.getByLabel('Stacked Plot Item Sine Wave Generator B').click();
// Assert that the inspector shows the Y Axis properties for swgB
await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
await expect(
page.getByLabel('Inspector Views').getByText('Sine Wave Generator B', { exact: true })
).toBeVisible();
// Click on the 3rd plot
await page.getByLabel('Stacked Plot Item Sine Wave Generator C').click();
// Assert that the inspector shows the Y Axis properties for swgC
await expect(page.getByRole('heading', { name: 'Plot Series' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
await expect(
page.getByLabel('Inspector Views').getByText('Sine Wave Generator C', { exact: true })
).toBeVisible();
});
test('Changing properties of an immutable child plot are applied correctly', async ({ page }) => {
await page.goto(stackedPlot.url);
// Go into edit mode
await page.getByLabel('Edit Object').click();
@ -192,40 +236,35 @@ test.describe('Stacked Plot', () => {
await page.getByRole('tab', { name: 'Config' }).click();
// Click on canvas for the 1st plot
await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"]`).click();
await page.getByLabel(`Stacked Plot Item ${swgA.name}`).click();
// Assert that the inspector shows the Y Axis properties for swgA
await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
'Plot Series'
);
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
// Expand config for the series
await page.getByLabel('Expand Sine Wave Generator').click();
// turn off alarm markers
await page.getByLabel('Alarm Markers').uncheck();
// save
await page.getByRole('button', { name: 'Save' }).click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
// reload page and waitForPlotsToRender
await page.reload();
await waitForPlotsToRender(page);
// Click on canvas for the 1st plot
await page.getByLabel(`Stacked Plot Item ${swgA.name}`).click();
// Expand config for the series
//TODO Fix this locator
await page.getByLabel('Expand Sine Wave Generator A generator').click();
// Assert that alarm markers are still turned off
await expect(
page.locator('[aria-label="Plot Series Properties"] .c-object-label')
).toContainText(swgA.name);
//Click on canvas for the 2nd plot
await page.locator(`[aria-label="Stacked Plot Item ${swgB.name}"]`).click();
// Assert that the inspector shows the Y Axis properties for swgB
await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
'Plot Series'
);
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
await expect(
page.locator('[aria-label="Plot Series Properties"] .c-object-label')
).toContainText(swgB.name);
//Click on canvas for the 3rd plot
await page.locator(`[aria-label="Stacked Plot Item ${swgC.name}"]`).click();
// Assert that the inspector shows the Y Axis properties for swgC
await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText(
'Plot Series'
);
await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
await expect(
page.locator('[aria-label="Plot Series Properties"] .c-object-label')
).toContainText(swgC.name);
page
.getByTitle('Display markers visually denoting points in alarm.')
.getByRole('cell', { name: 'Disabled' })
).toBeVisible();
});
test('the legend toggles between aggregate and per child', async ({ page }) => {