ignore all screenshots

yext · Oct 17, 2023 · a072c4d · a072c4d
1 parent dabec5d
commit a072c4d
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 43 deletions.
diff --git a/e2e-tests/playwright.config.ts b/e2e-tests/playwright.config.ts
@@ -1,6 +1,5 @@
 import { PlaywrightTestConfig, expect } from "@playwright/test";
 import fs from "node:fs";
-import os from "node:os";
 
 expect.extend({
   async toHaveContents(filepath: string, expectedContents: string) {
@@ -52,7 +51,7 @@ const config: PlaywrightTestConfig = {
     video: "on",
   },
   workers: 1,
-  ignoreSnapshots: os.platform() !== "darwin",
+  ignoreSnapshots: true,
 };
 
 export default config;
diff --git a/packages/studio-ui/src/AppWithLazyLoading.tsx b/packages/studio-ui/src/AppWithLazyLoading.tsx
@@ -2,7 +2,7 @@ import LoadingOverlay from "./components/LoadingOverlay";
 import { Suspense, lazy, useEffect, useState } from "react";
 import useStudioStore from "./store/useStudioStore";
 import ProgressBar from "./components/ProgressBar";
-import { loadComponents, loadStyling } from "./utils/preloadStudio";
+import { loadComponents, loadStyling } from "./utils/loadUserAssets";
 import classNames from "classnames";
 
 const AppPromise = import("./App");

diff --git a/packages/studio-ui/src/components/IFramePortal.tsx b/packages/studio-ui/src/components/IFramePortal.tsx
@@ -67,33 +67,46 @@ function useInjectUserStyles(iframeDocument: Document | undefined) {
       });
     });
     pageCss?.forEach((cssFilepath) => {
-        injectStyleIntoIframe(iframeDocument, cssFilepath);
+      injectStyleIntoIframe(iframeDocument, cssFilepath);
     });
 
     return () => {
       clearStylingFromIframe(iframeDocument);
     };
-  }, [componentTree, getComponentMetadata, iframeDocument, pageCss, activePage, UUIDToFileMetadata]);
+  }, [
+    componentTree,
+    getComponentMetadata,
+    iframeDocument,
+    pageCss,
+    activePage,
+    UUIDToFileMetadata,
+  ]);
 }
 
 function clearStylingFromIframe(iframeDocument: Document) {
-  const styleElements = Array.from(
-    iframeDocument.head.getElementsByTagName("style")
-  );
-  for (const el of styleElements) {
-    el.remove();
-  }
+  const styleElements = [...iframeDocument.head.getElementsByTagName("style")];
+  styleElements.forEach((element) => {
+    element.remove();
+  });
 }
 
-function injectStyleIntoIframe(iframeDocument: Document | undefined, filepath: string) {
-  const originalStyletag = document.querySelector(`[studio-style-filepath='${filepath}']`)
-  if (originalStyletag && iframeDocument) {
-    const iframeStyletag = originalStyletag.cloneNode(true)
-    iframeDocument.head.appendChild(iframeStyletag)
+function injectStyleIntoIframe(
+  iframeDocument: Document,
+  filepath: string
+) {
+  const originalStyletag = document.querySelector(
+    `[studio-style-filepath='${filepath}']`
+  );
+  if (originalStyletag) {
+    const iframeStyletag = originalStyletag.cloneNode(true);
+    iframeDocument.head.appendChild(iframeStyletag);
   }
 }
 
-const useViewportOption = (viewport: Viewport, previewRef: RefObject<HTMLDivElement>) => {
+const useViewportOption = (
+  viewport: Viewport,
+  previewRef: RefObject<HTMLDivElement>
+) => {
   const [css, setCss] = useState(
     (viewport.styles?.width ?? 0) * (previewRef.current?.clientHeight ?? 0) >
       (viewport.styles?.height ?? 0) * (previewRef.current?.clientWidth ?? 0)

diff --git a/...ges/studio-ui/src/utils/preloadStudio.tsx → ...es/studio-ui/src/utils/loadUserAssets.tsx b/...ges/studio-ui/src/utils/preloadStudio.tsx → ...es/studio-ui/src/utils/loadUserAssets.tsx
@@ -28,41 +28,35 @@ export function loadComponents(): Promise<void>[] {
 }
 
 /**
- * Load all user styling as disabled style tags in Studio's iframe.
+ * Load all user styling as disabled style tags in Studio's head.
  */
 export function loadStyling() {
-  const studioStore = useStudioStore.getState()
-  const UUIDToFileMetadata = studioStore.fileMetadatas.UUIDToFileMetadata
-  const pages = studioStore.pages.pages
+  const studioStore = useStudioStore.getState();
+  const UUIDToFileMetadata = studioStore.fileMetadatas.UUIDToFileMetadata;
+  const pages = studioStore.pages.pages;
 
-  Object.values(UUIDToFileMetadata).forEach(
-    (fileMetadata) => {
-      if (fileMetadata.kind === FileMetadataKind.Component) {
-        importAndInjectIntoStudio(fileMetadata.cssImports);
-      }
+  Object.values(UUIDToFileMetadata).forEach((fileMetadata) => {
+    if (fileMetadata.kind === FileMetadataKind.Component) {
+      importAndInjectIntoStudio(fileMetadata.cssImports);
     }
-  );
+  });
 
-  Object.values(pages).forEach(
-    (page) => {
-      importAndInjectIntoStudio(page.cssImports);
-    }
-  );
+  Object.values(pages).forEach((page) => {
+    importAndInjectIntoStudio(page.cssImports);
+  });
 }
 
 function importAndInjectIntoStudio(cssImports: string[]) {
   cssImports.forEach(async (filepath) => {
-    await dynamicImportFromBrowser(
-      filepath
-    ).then((styling) => {
-      if (document.querySelector(`[studio-style-filepath='${filepath}']`)){
-        return
+    await dynamicImportFromBrowser(filepath).then((styling) => {
+      if (document.querySelector(`[studio-style-filepath='${filepath}']`)) {
+        return;
       }
-      const styleEl = document.createElement("style")
+      const styleEl = document.createElement("style");
       styleEl.innerText = styling.default;
-      styleEl.setAttribute("studio-style-filepath", filepath)
-      document.head.appendChild(styleEl)
+      styleEl.setAttribute("studio-style-filepath", filepath);
+      document.head.appendChild(styleEl);
       styleEl.disabled = true;
     });
-  })
+  });
 }
diff --git a/packages/studio-ui/tests/components/PreviewPanel.test.tsx b/packages/studio-ui/tests/components/PreviewPanel.test.tsx
@@ -13,7 +13,7 @@ import {
   PropValueKind,
   PropValueType,
 } from "@yext/studio-plugin";
-import loadComponents from "../../src/utils/loadComponents";
+import { loadComponents } from "../../src/utils/loadUserAssets";
 
 const mockSetState = jest.fn();
 

diff --git a/packages/studio-ui/tests/utils/loadComponents.test.tsx b/packages/studio-ui/tests/utils/loadComponents.test.tsx
@@ -1,5 +1,5 @@
 import { FileMetadataKind } from "@yext/studio-plugin";
-import loadComponents from "../../src/utils/loadComponents";
+import { loadComponents } from "../../src/utils/loadUserAssets";
 import mockStore, { MockStudioStore } from "../__utils__/mockStore";
 import path from "path";
 import { waitFor } from "@testing-library/react";