-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(conditional styling): conditional visibility for images and alpha…
…-numerics in display layouts (#7824) * fix: apply `is-style-invisible` className to image and alphanumeric items * test: generate storagestate file with basic condition set * refactor: small a11y additions for Toolbars * test: add suite for display layout conditional styling * fix: make condition true half of the time * fix: use a period of 5 so tests are more stable * test: mark as slow * test: use inline base64 image text instead of a url * fix: use vue reactivity system to conditionally show these objects * test: use tiny base64 image * fix: condition for v-show * fix: use both v-if and v-show to toggle visibility * refactor: convert to ES6 class * fix: remove focused test * fix: switch back to a div due to visual artifacts. settle for an aria role instead - IT'S CALLED COMPROMISE!
- Loading branch information
Showing
9 changed files
with
259 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| { | ||
| "cookies": [], | ||
| "origins": [ | ||
| { | ||
| "origin": "http://localhost:8080", | ||
| "localStorage": [ | ||
| { | ||
| "name": "mct", | ||
| "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"954af939-eaf8-4977-8cee-57f36b58aae3\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1725480977300,\"created\":1725480975674,\"persisted\":1725480977301},\"954af939-eaf8-4977-8cee-57f36b58aae3\":{\"identifier\":{\"key\":\"954af939-eaf8-4977-8cee-57f36b58aae3\",\"namespace\":\"\"},\"name\":\"Test Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"id\":\"1f4b8d87-297b-4a2a-a2d2-46c42eb41b39\",\"configuration\":{\"name\":\"Test Condition\",\"output\":\"Test Condition Met\",\"trigger\":\"all\",\"criteria\":[{\"id\":\"034b4dfe-b17e-43f0-9787-93e4666d2690\",\"telemetry\":{\"key\":\"1eafa8cc-092f-4a5f-9206-9e5d8a070ea1\",\"namespace\":\"\"},\"operation\":\"greaterThan\",\"input\":[0],\"metadata\":\"sin\"}]},\"summary\":\"Match if all criteria are met: VIPER Rover Heading Sine > 0 \"},{\"isDefault\":true,\"id\":\"c56ff651-547e-4704-a8b7-4f01247e2fa7\",\"configuration\":{\"name\":\"Default\",\"output\":\"Test Condition Unmet\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"\"}]},\"composition\":[{\"key\":\"1eafa8cc-092f-4a5f-9206-9e5d8a070ea1\",\"namespace\":\"\"}],\"telemetry\":{},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Conditional Styling Data @localStorage @generatedata\\nGenerate basic condition set\\nchrome\",\"modified\":1725480978924,\"location\":\"mine\",\"created\":1725480977299,\"persisted\":1725480978924},\"1eafa8cc-092f-4a5f-9206-9e5d8a070ea1\":{\"identifier\":{\"key\":\"1eafa8cc-092f-4a5f-9206-9e5d8a070ea1\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":5,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"modified\":1725480978545,\"location\":\"954af939-eaf8-4977-8cee-57f36b58aae3\",\"created\":1725480977993,\"persisted\":1725480978545}}" | ||
| }, | ||
| { | ||
| "name": "mct-tree-expanded", | ||
| "value": "[]" | ||
| }, | ||
| { | ||
| "name": "mct-recent-objects", | ||
| "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"954af939-eaf8-4977-8cee-57f36b58aae3\",\"namespace\":\"\"},\"name\":\"Test Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"c56ff651-547e-4704-a8b7-4f01247e2fa7\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[{\"key\":\"1eafa8cc-092f-4a5f-9206-9e5d8a070ea1\",\"namespace\":\"\"}],\"telemetry\":{},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Conditional Styling Data @localStorage @generatedata\\nGenerate basic condition set\\nchrome\",\"modified\":1725480977994,\"location\":\"mine\",\"created\":1725480977299,\"persisted\":1725480977994},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"954af939-eaf8-4977-8cee-57f36b58aae3\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1725480977300,\"created\":1725480975674,\"persisted\":1725480977301},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/954af939-eaf8-4977-8cee-57f36b58aae3\",\"domainObject\":{\"identifier\":{\"key\":\"954af939-eaf8-4977-8cee-57f36b58aae3\",\"namespace\":\"\"},\"name\":\"Test Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"c56ff651-547e-4704-a8b7-4f01247e2fa7\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[{\"key\":\"1eafa8cc-092f-4a5f-9206-9e5d8a070ea1\",\"namespace\":\"\"}],\"telemetry\":{},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Conditional Styling Data @localStorage @generatedata\\nGenerate basic condition set\\nchrome\",\"modified\":1725480977994,\"location\":\"mine\",\"created\":1725480977299,\"persisted\":1725480977994}},{\"objectPath\":[{\"identifier\":{\"key\":\"1eafa8cc-092f-4a5f-9206-9e5d8a070ea1\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":5,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"modified\":1725480978545,\"location\":\"954af939-eaf8-4977-8cee-57f36b58aae3\",\"created\":1725480977993,\"persisted\":1725480978545},{\"identifier\":{\"key\":\"954af939-eaf8-4977-8cee-57f36b58aae3\",\"namespace\":\"\"},\"name\":\"Test Condition Set\",\"type\":\"conditionSet\",\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"c56ff651-547e-4704-a8b7-4f01247e2fa7\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[{\"key\":\"1eafa8cc-092f-4a5f-9206-9e5d8a070ea1\",\"namespace\":\"\"}],\"telemetry\":{},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Conditional Styling Data @localStorage @generatedata\\nGenerate basic condition set\\nchrome\",\"modified\":1725480977994,\"location\":\"mine\",\"created\":1725480977299,\"persisted\":1725480977994},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"954af939-eaf8-4977-8cee-57f36b58aae3\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1725480977300,\"created\":1725480975674,\"persisted\":1725480977301},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/954af939-eaf8-4977-8cee-57f36b58aae3/1eafa8cc-092f-4a5f-9206-9e5d8a070ea1\",\"domainObject\":{\"identifier\":{\"key\":\"1eafa8cc-092f-4a5f-9206-9e5d8a070ea1\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"exceedFloat32\":false,\"staleness\":false},\"modified\":1725480978542,\"location\":\"954af939-eaf8-4977-8cee-57f36b58aae3\",\"created\":1725480977993,\"persisted\":1725480977993}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"954af939-eaf8-4977-8cee-57f36b58aae3\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1725480977300,\"created\":1725480975674,\"persisted\":1725480977301},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"954af939-eaf8-4977-8cee-57f36b58aae3\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1725480977300,\"created\":1725480975674,\"persisted\":1725480977301}}]" | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
114 changes: 114 additions & 0 deletions
114
e2e/tests/functional/plugins/styling/conditional/displayLayoutConditionalStyling.e2e.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| /***************************************************************************** | ||
| * Open MCT, Copyright (c) 2014-2024, 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 { fileURLToPath } from 'url'; | ||
|
|
||
| import { | ||
| createDomainObjectWithDefaults, | ||
| navigateToObjectWithRealTime | ||
| } from '../../../../../appActions.js'; | ||
| import { expect, test } from '../../../../../pluginFixtures.js'; | ||
|
|
||
| const TINY_IMAGE_BASE64 = | ||
| 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII'; | ||
|
|
||
| test.describe('Display Layout Conditional Styling', () => { | ||
| test.use({ | ||
| storageState: fileURLToPath( | ||
| new URL('../../../../../test-data/condition_set_storage.json', import.meta.url) | ||
| ) | ||
| }); | ||
|
|
||
| let displayLayout; | ||
| test.beforeEach(async ({ page }) => { | ||
| await page.goto('./', { waitUntil: 'domcontentloaded' }); | ||
| displayLayout = await createDomainObjectWithDefaults(page, { | ||
| type: 'Display Layout', | ||
| name: 'Test Display Layout' | ||
| }); | ||
| }); | ||
|
|
||
| test('Image Drawing Object can have visibility toggled conditionally', async ({ page }) => { | ||
| await page.getByLabel('Edit Object').click(); | ||
|
|
||
| // Add Image Drawing Object to the layout | ||
| await page.getByLabel('Add Drawing Object').click(); | ||
| await page.getByLabel('Image').click(); | ||
| await page.getByLabel('Image URL').fill(TINY_IMAGE_BASE64); | ||
| await page.getByText('Ok').click(); | ||
|
|
||
| // Use the "Test Condition Set" for conditional styling on the image | ||
| await page.getByRole('tab', { name: 'Styles' }).click(); | ||
| await page.getByRole('button', { name: 'Use Conditional Styling...' }).click(); | ||
| await page.getByLabel('Modal Overlay').getByLabel('Expand My Items folder').click(); | ||
| await page.getByLabel('Modal Overlay').getByLabel('Preview Test Condition Set').click(); | ||
| await page.getByText('Ok').click(); | ||
|
|
||
| // Set the image to be hidden when the condition is met | ||
| await page.getByTitle('Visible').first().click(); | ||
| await page.getByLabel('Save Style').first().click(); | ||
| await page.getByLabel('Save', { exact: true }).click(); | ||
| await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click(); | ||
|
|
||
| // Switch to real-time mode and verify that the image toggles visibility | ||
| await navigateToObjectWithRealTime(page, displayLayout.url); | ||
| await expect(page.getByLabel('Image View')).toBeVisible(); | ||
| await expect(page.getByLabel('Image View')).toBeHidden(); | ||
|
|
||
| // Reload the page and verify that the image toggles visibility | ||
| await page.reload({ waitUntil: 'domcontentloaded' }); | ||
| await expect(page.getByLabel('Image View')).toBeVisible(); | ||
| await expect(page.getByLabel('Image View')).toBeHidden(); | ||
| }); | ||
|
|
||
| test('Alphanumeric object can have visibility toggled conditionally', async ({ page }) => { | ||
| await page.getByLabel('Edit Object').click(); | ||
|
|
||
| // Add Alphanumeric Object to the layout | ||
| await page.getByLabel('Expand My Items folder').click(); | ||
| await page.getByLabel('Expand Test Condition Set').click(); | ||
| await page.getByLabel('Preview VIPER Rover Heading').dragTo(page.getByLabel('Layout Grid')); | ||
|
|
||
| // Use the "Test Condition Set" for conditional styling on the alphanumeric | ||
| await page.getByRole('tab', { name: 'Styles' }).click(); | ||
| await page.getByRole('button', { name: 'Use Conditional Styling...' }).click(); | ||
| await page.getByLabel('Modal Overlay').getByLabel('Expand My Items folder').click(); | ||
| await page.getByLabel('Modal Overlay').getByLabel('Preview Test Condition Set').click(); | ||
| await page.getByText('Ok').click(); | ||
|
|
||
| // Set the alphanumeric to be hidden when the condition is met | ||
| await page.getByTitle('Visible').first().click(); | ||
| await page.getByLabel('Save Style').first().click(); | ||
| await page.getByLabel('Save', { exact: true }).click(); | ||
| await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click(); | ||
|
|
||
| // Switch to real-time mode and verify that the image toggles visibility | ||
| await navigateToObjectWithRealTime(page, displayLayout.url); | ||
| await expect(page.getByLabel('Alpha-numeric telemetry', { exact: true })).toBeVisible(); | ||
| await expect(page.getByLabel('Alpha-numeric telemetry', { exact: true })).toBeHidden(); | ||
|
|
||
| // Reload the page and verify that the alphanumeric toggles visibility | ||
| await page.reload({ waitUntil: 'domcontentloaded' }); | ||
| await expect(page.getByLabel('Alpha-numeric telemetry', { exact: true })).toBeVisible(); | ||
| await expect(page.getByLabel('Alpha-numeric telemetry', { exact: true })).toBeHidden(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.