VUU21: Implement the screenshot functionality into the Save Layout component #23
Conversation
cfisher-scottlogic
changed the base branch from
feature/VUU-17-layoutSave
to
feature/layout-management/layout-management-feature
| // TODO: Give the button and tab an accessible selector | ||
| cy.findByRole("tab", { name: "My Instruments" }).then((tab) => { | ||
| cy.wrap(tab).findByRole("button").click(); | ||
| }); | ||
|
|
||
| // Click the save layout button | ||
| // TODO: Can this be more accessible? | ||
| cy.findByRole("menuitem", { name: "Save Layout" }).click(); | ||
|
|
||
| // Check the screenshot is displayed | ||
| // TODO: Don't find by classname, use an accessible selector | ||
| cy.get(".vuuSaveLayoutPanel").then((dialog) => { | ||
| cy.wrap(dialog) | ||
| .find("img") | ||
| .should("be.visible") | ||
| .and(($img) => { | ||
| expect($img[0].naturalWidth).to.be.greaterThan(0); |
There was a problem hiding this comment.
I'm going to explore alternative selector options to hopefully land on something which is more indicative of what a user would actually do to make it more accessible.
There was a problem hiding this comment.
We're wrapping up improvements to the e2e testing strategy (selectors, POM, etc) into a separate ticket as it'll be more of an ongoing effort. I've given the TODO comments ticket numbers to track it: 01d099d
vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css
Outdated
Show resolved
Hide resolved
vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx
Outdated
Show resolved
Hide resolved
|
We need to decide what the base of this PR should be. As this is adding functionality to VUU-17-layoutSave it makes sense to make that the base branch. But, if this (VUU21) is merged into that branch (VUU17) before VUU17 is merged into the feature branch, it could really bloat the PR for VUU17 and make it harder to review non-screenshot related changes. So we can either wait till VUU17 is merged into the feature branch before merging this PR in. Or we can merge this PR straight into the feature branch. |
Discussed offline. Base branch will be VUU-17-layoutSave for reviewing but should be merged into the feature branch when #17 has been merged. |
cfisher-scottlogic
changed the base branch from
feature/layout-management/layout-management-feature
to
feature/VUU-17-layoutSave
pling-scottlogic
force-pushed
the
feature/VUU-17-layoutSave
branch
from
0839f52
to
53b16e2
Compare
cfisher-scottlogic
force-pushed
the
feature/layout-management/VUU21-save-layout-screenshot
branch
from
f116bec
to
f7d4f53
Compare
pling-scottlogic
force-pushed
the
feature/VUU-17-layoutSave
branch
from
53b16e2
to
f75a8aa
Compare
cfisher-scottlogic
force-pushed
the
feature/layout-management/VUU21-save-layout-screenshot
branch
from
01d099d
to
ad6e272
Compare
cfisher-scottlogic
force-pushed
the
feature/layout-management/VUU21-save-layout-screenshot
branch
from
f1f951e
to
ba5b5fb
Compare
…ttps://github.com/ScottLogic/finos-vuu into feature/layout-management/VUU21-save-layout-screenshot
vferraro-scottlogic
merged commit 8909696
into
feature/layout-management/layout-management-feature
cfisher-scottlogic
deleted the
feature/layout-management/VUU21-save-layout-screenshot
branch
Scope
VUU21
This incorporates the work done in the screenshot spike (#19) by adding screenshot functionality into the save dialog component.
Implementation
Screenshot functionality is provided with the html-to-image package in
screenshot-utils.ts. The screenshot is currently stored in browser (local) storage as a base64 encoded string. Where fonts are imported externally via a link, thecrossorigin="anonymous"tag has been added due to CORS issues, see this stackoverflow post and this html-to-image GitHub issue discussing the issue.A unit test has been written for
takeScreenshot(). The html-to-image package had to be mocked out as the browser operations it relies on are not available in the test environment (neither happy-dom nor jsdom).A Cypress e2e test has been written to check a screenshot can be taken and rendered successfully from the UI. I've restructured the directory by separating the
./supportfiles relevant to component & e2e tests.Screenshots