VUU21: Create e2e test for screenshot functionality

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);
+        });
+    });
+  });
+});

vuu-ui/cypress/support/constants.ts

@@ -0,0 +1,2 @@
+export const SHELL_WITH_NEW_THEME_URL =
+  "/Apps/ShellWithNewTheme?standalone&theme=vuu";

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')

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"];

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

vuu-ui/showcase/src/components/iframe/IFrame.tsx

@@ -3,6 +3,7 @@ export const IFrame = () => {
   return (
     <div className="ShowCaseIFrame-container">
       <iframe
+        id={"showcase-iframe"}
         className="ShowCaseIFrame"
         src={src}
         // ref={iframeRef}