VUU-31 Layout Server POC

vuu-ui/.eslintrc.json

@@ -7,7 +7,8 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
+    "plugin:cypress/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -39,8 +40,7 @@
   },
   "overrides": [
     {
-      "files": ["*.cy.tsx"],
-      "extends": ["plugin:cypress/recommended"]
+      "files": ["*.cy.tsx"]
     }
   ]
 }

vuu-ui/cypress.config.ts

@@ -1,15 +1,10 @@
 import { defineConfig } from "cypress";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
-// import IstanbulPlugin from "vite-plugin-istanbul";
-import { isCI } from "ci-info";
-import path from "path";
-import { mergeConfig, UserConfig } from "vite";
+import { UserConfig } from "vite";
 import { version as reactVersion } from "react";
-// @ts-ignore
-// import installCoverageTask from "@cypress/code-coverage/task";
 
-let viteConfig: UserConfig = {
+const viteConfig: UserConfig = {
   plugins: [react(), tsconfigPaths() /*, IstanbulPlugin()*/],
   server: {
     watch: {
@@ -75,4 +70,14 @@ export default defineConfig({
     },
     specPattern: "packages/**/src/**/*.cy.{js,ts,jsx,tsx}",
   },
+
+  e2e: {
+    baseUrl: "http://127.0.0.1:5173/",
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    chromeWebSecurity: false,
+    defaultCommandTimeout: 10000,
+  },
 });

vuu-ui/cypress/e2e/layout-management/screenshot.cy.js

@@ -0,0 +1,29 @@
+import "cypress-iframe";
+import { SHELL_WITH_NEW_THEME_URL } from "../../support/e2e/constants";
+
+context("Screenshot", () => {
+  beforeEach(() => {
+    cy.visit(SHELL_WITH_NEW_THEME_URL);
+  });
+
+  // TODO (#VUU24): Improve test alignment with the user flow
+  it("Takes a screenshot of the current layout and displays it in the save layout dialog", () => {
+    // TODO (#VUU24): Improve selector
+    cy.findByRole("tab", { name: "My Instruments" }).then((tab) => {
+      cy.wrap(tab).findByRole("button").click();
+    });
+
+    // TODO (#VUU24): Improve selector
+    cy.findByRole("menuitem", { name: "Save Layout" }).click();
+
+    // TODO (#VUU24): 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/component.ts

@@ -1,10 +1,10 @@
 import "cypress-real-events";
 // import "@cypress/code-coverage/support";
-import "./assertions";
-import "./commands";
+import "./component/assertions";
+import "./component/commands";
 
-import "./cypress.css";
-import "./index.css";
+import "./component/cypress.css";
+import "./component/index.css";
 
 beforeEach(() => {
   cy.window({ log: false }).focus({ log: false });

vuu-ui/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+// import "./commands";
+
+// Add support for testing library commands
+import "@testing-library/cypress/add-commands";

vuu-ui/cypress/support/e2e/constants.ts

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

vuu-ui/cypress/tsconfig.json

@@ -1,7 +1,10 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "types": ["cypress"]
+    "types": ["cypress", "@testing-library/cypress"],
+    "typeRoots": [
+      "./support"
+    ]
   },
   "include": ["**/*.tsx", "../cypress.d.ts"]
 }