Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(#7338): Persisted styles correctly apply to StackedPlotItems on mount #7341

Merged
merged 10 commits into from
Jan 8, 2024
Merged

fix(#7338): Persisted styles correctly apply to StackedPlotItems on mount #7341

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
60829f2
refactor: use `Plot` component directly in `StackedPlotItem` template
ozyx Jan 4, 2024
b3c0274
test(e2e): fix style test for stackedplot
ozyx Jan 4, 2024
3c1c73e
test(e2e): add annotation back in
ozyx Jan 4, 2024
2fca66d
test: fix unit tests
ozyx Jan 4, 2024
930f95f
refactor: tidy up
ozyx Jan 4, 2024
64857a2
fix: move const, remove eslint ignore
ozyx Jan 4, 2024
fafc6b4
fix: apply staleness styling properly
ozyx Jan 4, 2024
8bae1f9
refactor: remove unused data()
ozyx Jan 4, 2024
9d5aeab
refactor: remove unused `isMissing`
ozyx Jan 4, 2024
b952990
refactor: remove debug statements
ozyx Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 88 additions & 89 deletions e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@ const setBackgroundColor = '#5b0f00';
const setTextColor = '#e6b8af';
const defaultTextColor = '#aaaaaa'; // default text color
const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
const DEFAULT_PLOT_VIEW_BORDER_COLOR = '#AAAAAA';
const setFontSize = '72px';
const setFontWeight = '700'; //bold for monospace bold
// eslint-disable-next-line prettier/prettier
const setFontFamily = "\"Andale Mono\", sans-serif";
const setFontFamily = '"Andale Mono", sans-serif';

test.describe('Stacked Plot styling', () => {
let stackedPlot;
Expand Down Expand Up @@ -156,91 +156,90 @@ test.describe('Stacked Plot styling', () => {
);
});

test.fixme(
'styling a child object of the flexible layout properly applies that style to only that child',
async ({ page }) => {
test.info().annotations.push({
type: 'issue',
description: 'https://github.com/nasa/openmct/issues/7338'
});
await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });

await page.getByLabel('Edit').click();

await page.getByRole('tab', { name: 'Styles' }).click();

//Check default styles for SWG1 and SWG2
await checkStyles(
NO_STYLE_RGBA,
NO_STYLE_RGBA,
hexToRGB(defaultTextColor),
page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
);

await checkStyles(
NO_STYLE_RGBA,
NO_STYLE_RGBA,
hexToRGB(defaultTextColor),
page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
);

// Set styles using setStyles function on StackedPlot1 but not StackedPlot2
await setStyles(
page,
setBorderColor,
setBackgroundColor,
setTextColor,
page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
);

//Set Font Styles on SWG1 but not SWG2
await page.getByLabel('Stacked Plot Item Sine Wave Generator 1').click();
//Set Font Size to 72
await page.getByLabel('Set Font Size').click();
await page.getByRole('menuitem', { name: '72px' }).click();

//Set Font Type to Monospace Bold. See setFontWeight and setFontFamily variables
await page.getByLabel('Set Font Type').click();
await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();

// Save Flexible Layout
await page.getByRole('button', { name: 'Save' }).click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();

// Check styles on StackedPlot1
await checkStyles(
hexToRGB(setBorderColor),
hexToRGB(setBackgroundColor),
hexToRGB(setTextColor),
page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
);

// Check styles on StackedPlot2
await checkStyles(
NO_STYLE_RGBA,
NO_STYLE_RGBA,
hexToRGB(defaultTextColor),
page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
);

// Reload page and verify that styles persist
await page.reload({ waitUntil: 'domcontentloaded' });

// Check styles on StackedPlot1
await checkStyles(
hexToRGB(setBorderColor),
hexToRGB(setBackgroundColor),
hexToRGB(setTextColor),
page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
);

// Check styles on StackedPlot2
await checkStyles(
NO_STYLE_RGBA,
NO_STYLE_RGBA,
hexToRGB(defaultTextColor),
page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
);
}
);
test('styling a child object of the flexible layout properly applies that style to only that child', async ({
page
}) => {
test.info().annotations.push({
type: 'issue',
description: 'https://github.com/nasa/openmct/issues/7338'
});
await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });

await page.getByLabel('Edit').click();

await page.getByRole('tab', { name: 'Styles' }).click();

//Check default styles for SWG1 and SWG2
await checkStyles(
NO_STYLE_RGBA,
NO_STYLE_RGBA,
hexToRGB(defaultTextColor),
page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
);

await checkStyles(
NO_STYLE_RGBA,
NO_STYLE_RGBA,
hexToRGB(defaultTextColor),
page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
);

// Set styles using setStyles function on StackedPlot1 but not StackedPlot2
await setStyles(
page,
setBorderColor,
setBackgroundColor,
setTextColor,
page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
);

//Set Font Styles on SWG1 but not SWG2
await page.getByLabel('Stacked Plot Item Sine Wave Generator 1').click();
//Set Font Size to 72
await page.getByLabel('Set Font Size').click();
await page.getByRole('menuitem', { name: '72px' }).click();

//Set Font Type to Monospace Bold. See setFontWeight and setFontFamily variables
await page.getByLabel('Set Font Type').click();
await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();

// Save Flexible Layout
await page.getByRole('button', { name: 'Save' }).click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();

// Check styles on StackedPlot1
await checkStyles(
hexToRGB(setBorderColor),
hexToRGB(setBackgroundColor),
hexToRGB(setTextColor),
page.getByLabel('Plot Container Style Target').first()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🥇

);

// Check styles on StackedPlot2
await checkStyles(
hexToRGB(DEFAULT_PLOT_VIEW_BORDER_COLOR),
NO_STYLE_RGBA,
hexToRGB(defaultTextColor),
page.getByLabel('Plot Container Style Target').nth(1)
);

// Reload page and verify that styles persist
await page.reload({ waitUntil: 'domcontentloaded' });

// Check styles on StackedPlot1
await checkStyles(
hexToRGB(setBorderColor),
hexToRGB(setBackgroundColor),
hexToRGB(setTextColor),
page.getByLabel('Plot Container Style Target').first()
);

// Check styles on StackedPlot2
await checkStyles(
hexToRGB(DEFAULT_PLOT_VIEW_BORDER_COLOR),
NO_STYLE_RGBA,
hexToRGB(defaultTextColor),
page.getByLabel('Plot Container Style Target').nth(1)
);
});
});
16 changes: 10 additions & 6 deletions src/plugins/plot/PlotView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,18 @@
at runtime from the About dialog for additional information.
-->
<template>
<div ref="plotWrapper" class="c-plot holder holder-plot has-control-bar" :class="staleClass">
<div
ref="plotWrapper"
class="c-plot holder holder-plot has-control-bar"
:class="isStale && 'is-stale'"
>
<div
ref="plotContainer"
class="l-view-section u-style-receiver js-style-receiver"
:class="{ 's-status-timeconductor-unsynced': status && status === 'timeconductor-unsynced' }"
aria-label="Plot Container Style Target"
:class="{
's-status-timeconductor-unsynced': status === 'timeconductor-unsynced'
}"
>
<progress-bar
v-show="!!loading"
Expand Down Expand Up @@ -78,7 +85,7 @@ export default {
PlotLegend
},
mixins: [stalenessMixin],
inject: ['openmct', 'domainObject', 'path'],
inject: ['openmct', 'domainObject'],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this isn't used so i removed it

props: {
options: {
type: Object,
Expand Down Expand Up @@ -157,9 +164,6 @@ export default {
gridLinesProp() {
return this.gridLines ?? !this.options.compact;
},
staleClass() {
return this.isStale ? 'is-stale' : '';
},
plotLegendPositionClass() {
return this.position ? `plot-legend-${this.position}` : '';
},
Expand Down
Loading
Loading