diff --git a/vuu-ui/cypress/e2e/layout-management/screenshot.cy.js b/vuu-ui/cypress/e2e/layout-management/screenshot.cy.js new file mode 100644 index 0000000000..b7efeea0b6 --- /dev/null +++ b/vuu-ui/cypress/e2e/layout-management/screenshot.cy.js @@ -0,0 +1,31 @@ +import "cypress-iframe"; +import { SHELL_WITH_NEW_THEME_URL } from "../../support/constants"; + +context("Screenshot", () => { + beforeEach(() => { + cy.visit(SHELL_WITH_NEW_THEME_URL); + }); + + it("Takes a screenshot of the current layout and displays it in the save layout dialog", () => { + // Click the menu button + // 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); + }); + }); + }); +}); diff --git a/vuu-ui/cypress/support/constants.ts b/vuu-ui/cypress/support/constants.ts new file mode 100644 index 0000000000..23f0a315cd --- /dev/null +++ b/vuu-ui/cypress/support/constants.ts @@ -0,0 +1,2 @@ +export const SHELL_WITH_NEW_THEME_URL = + "/Apps/ShellWithNewTheme?standalone&theme=vuu"; diff --git a/vuu-ui/cypress/support/e2e.ts b/vuu-ui/cypress/support/e2e.ts index 54489b4ffe..4aa4c04d84 100644 --- a/vuu-ui/cypress/support/e2e.ts +++ b/vuu-ui/cypress/support/e2e.ts @@ -13,11 +13,8 @@ // https://on.cypress.io/configuration // *********************************************************** -// Import commands.js using ES2015 syntax: +// Import commands.ts using ES2015 syntax: // import "./commands"; // Add support for testing library commands import "@testing-library/cypress/add-commands"; - -// Alternatively you can use CommonJS syntax: -// require('./commands') diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx index abac6d72e0..2d396dca9b 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx +++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx @@ -1,15 +1,9 @@ -import {ComboBox, Dialog, FormField, FormLabel, Input} from "@salt-ds/lab"; -import { - Button, - Checkbox, - CheckboxGroup, - RadioButton, - RadioButtonGroup, -} from "@salt-ds/core"; -import {ChevronDownIcon} from "@salt-ds/icons"; +import { ComboBox, Dialog, FormField, FormLabel, Input } from "@salt-ds/lab"; +import { Button, Checkbox, CheckboxGroup, RadioButton, RadioButtonGroup } from "@salt-ds/core"; +import { ChevronDownIcon } from "@salt-ds/icons"; import "./SaveLayoutPanel.css"; -import {useState} from "react"; +import { useState } from "react"; // TODO: replace const groups = ["Group 1", "Group 2", "Group 3", "Group 4", "Group 5"]; diff --git a/vuu-ui/packages/vuu-utils/src/screenshot-utils.ts b/vuu-ui/packages/vuu-utils/src/screenshot-utils.ts index 5642783c8f..36b14d7c18 100644 --- a/vuu-ui/packages/vuu-utils/src/screenshot-utils.ts +++ b/vuu-ui/packages/vuu-utils/src/screenshot-utils.ts @@ -1,4 +1,4 @@ -import {toPng} from "html-to-image"; +import { toPng } from "html-to-image"; /** * Takes a screenshot of the given node and returns the base64 encoded image url diff --git a/vuu-ui/showcase/src/components/iframe/IFrame.tsx b/vuu-ui/showcase/src/components/iframe/IFrame.tsx index 4b620ee3ae..9ee0d9d72c 100644 --- a/vuu-ui/showcase/src/components/iframe/IFrame.tsx +++ b/vuu-ui/showcase/src/components/iframe/IFrame.tsx @@ -3,6 +3,7 @@ export const IFrame = () => { return (