[WIP] [RFC] [PoC] Automated screenshots

web/package.json

@@ -17,7 +17,8 @@
     "preview": "vite preview",
     "test": "jest",
     "lint": "npx eslint src",
-    "format": "npx prettier --write \"src/**/*.js{,x}\""
+    "format": "npx prettier --write \"src/**/*.js{,x}\"",
+    "screenshots": "viteshot shoot"
   },
   "browserslist": {
     "production": [
@@ -51,8 +52,10 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jest-transform-stub": "^2.0.0",
+    "playwright": "^1.20.2",
     "prettier": "^2.5.1",
     "sass": "^1.49.8",
-    "vite": "^2.8.4"
+    "vite": "^2.8.4",
+    "viteshot": "^0.3.1"
   }
 }

web/src/InstallationFinished.screenshot.jsx

@@ -0,0 +1,4 @@
+import React from "react";
+import InstallationFinished from "./InstallationFinished";
+
+export const InstallationFinishedScreenshot = () => <InstallationFinished />;

web/src/ScreenshotsWrapper.jsx

@@ -0,0 +1,25 @@
+import React, { StrictMode } from "react";
+import { InstallerClientProvider } from "./context/installer";
+import { AuthProvider } from "./context/auth";
+import { createClient } from "./lib/client";
+
+import "./patternfly.scss";
+import "@fontsource/lato/400.css";
+import "@fontsource/lato/400-italic.css";
+import "@fontsource/lato/700.css";
+import "@fontsource/poppins/300.css";
+import "@fontsource/poppins/500.css";
+import "@fontsource/roboto-mono/400.css";
+import "./app.scss";
+
+const client = createClient();
+
+export const ScreenshotsWrapper = ({ children }) => (
+  <StrictMode>
+    <InstallerClientProvider client={client}>
+      <AuthProvider>
+        {children}
+      </AuthProvider>
+    </InstallerClientProvider>
+  </StrictMode>
+);

web/viteshot.config.js

@@ -0,0 +1,30 @@
+const playwrightShooter = require("viteshot/shooters/playwright");
+const playwright = require("playwright");
+const viteCommonjs = require("@originjs/vite-plugin-commonjs").viteCommonjs;
+const vite = require("vite");
+
+module.exports = {
+  framework: {
+    type: "react"
+  },
+  vite: vite.defineConfig({
+    base: "./",
+    plugins: [viteCommonjs()],
+    optimizeDeps: {
+      include: ['attr-accept', '@patternfly/react-styles']
+    }
+  }),
+  shooter: playwrightShooter(playwright.chromium, {
+    contexts: {
+      desktop: playwright.devices["Desktop Chrome"],
+      desktopHiDPI: playwright.devices["Desktop Chrome HiDPI"],
+      pixel5: playwright.devices["Pixel 5"]
+    }
+  }),
+  filePathPattern: "**/*.screenshot.@(js|jsx|tsx|vue|svelte)",
+
+  wrapper: {
+    path: "src/ScreenshotsWrapper.jsx",
+    componentName: "ScreenshotsWrapper"
+  }
+};