Test storybook iframe URL directly, remove storybook test util (#995)

seek-oss · Jun 11, 2024 · 8b7bf11 · 8b7bf11
1 parent 367918c
commit 8b7bf11
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 48 deletions.
diff --git a/test-utils/assetServer.js b/test-utils/assetServer.js
@@ -6,6 +6,8 @@ const startAssetServer = async (port, targetDirectory, rewrites = []) =>
     const server = http.createServer((request, response) => {
       return handler(request, response, {
         public: targetDirectory,
+        // So we can test storybook iframe pages when serving a built storybook
+        cleanUrls: ['!/iframe.html'],
         rewrites,
         headers: [
           {

diff --git a/test-utils/index.js b/test-utils/index.js
@@ -4,19 +4,14 @@ const { startAssetServer } = require('./assetServer');
 const { dirContentsToObject } = require('./dirContentsToObject');
 const { run, runSkuScriptInDir } = require('./process');
 const { makeStableHashes } = require('./skuConfig');
-const {
-  getStoryFrame,
-  getStoryPage,
-  getTextContentFromFrameOrPage,
-} = require('./storybook');
+const { getStoryPage, getTextContentFromFrameOrPage } = require('./storybook');
 const { waitForUrls } = require('./waitForUrls');
 
 module.exports = {
   ListExternalsWebpackPlugin,
   ...appSnapshot,
   startAssetServer,
   dirContentsToObject,
-  getStoryFrame,
   getStoryPage,
   getTextContentFromFrameOrPage,
   makeStableHashes,

diff --git a/test-utils/storybook.js b/test-utils/storybook.js
@@ -15,39 +15,6 @@ export const getStoryPage = async (storyIframeUrl) => {
   return storyPage;
 };
 
-/**
- * Returns the iframe of the first story at the provided storybook URL
- *
- * @param {string} storybookUrl A URL pointing to a storybook
- */
-export const getStoryFrame = async (storybookUrl) => {
-  const storybookPage = await browser.newPage();
-  storybookPage.setDefaultNavigationTimeout(10_000);
-
-  await storybookPage.goto(storybookUrl, { waitUntil: ['load'] });
-
-  const firstStoryButton = await storybookPage.waitForSelector(
-    '#storybook-explorer-menu button',
-    { timeout: 10_000 },
-  );
-
-  // Ensure default story is activated
-  await firstStoryButton.click();
-
-  const iframeElement = await storybookPage.waitForSelector(
-    '#storybook-preview-iframe',
-  );
-
-  const storyFrame = await iframeElement.contentFrame();
-
-  if (!storyFrame) {
-    console.log('Unable to find storybookFrame', storyFrame);
-    throw new Error('Unable to find iframe by id');
-  }
-
-  return storyFrame;
-};
-
 /**
  * Runs the provided element selector on the provided frame and returns the text content and font size of the selected element
  *

diff --git a/tests/storybook-config.test.js b/tests/storybook-config.test.js
@@ -3,7 +3,6 @@ const {
   runSkuScriptInDir,
   waitForUrls,
   startAssetServer,
-  getStoryFrame,
   getTextContentFromFrameOrPage,
   getStoryPage,
 } = require('@sku-private/test-utils');
@@ -98,10 +97,13 @@ describe('storybook-config', () => {
   describe('build-storybook', () => {
     const assetServerPort = 4232;
     const assetServerUrl = `http://localhost:${assetServerPort}`;
+    const storyIframePath =
+      '/iframe.html?viewMode=story&id=testcomponent--default';
+    const storyIframeUrl = `${assetServerUrl}${storyIframePath}`;
 
     let closeStorybookServer;
-    /** @type {import("puppeteer").Frame} */
-    let storyFrame;
+    /** @type {import("puppeteer").Page} */
+    let storyPage;
 
     beforeAll(async () => {
       await runSkuScriptInDir('build-storybook', appDir, [
@@ -112,8 +114,8 @@ describe('storybook-config', () => {
         assetServerPort,
         storybookDistDir,
       );
-      await waitForUrls(assetServerUrl);
-      storyFrame = await getStoryFrame(assetServerUrl);
+      await waitForUrls(storyIframeUrl);
+      storyPage = await getStoryPage(storyIframeUrl);
     }, 200000);
 
     afterAll(() => {
@@ -122,7 +124,7 @@ describe('storybook-config', () => {
 
     it('should render decorators defined in the storybook preview file', async () => {
       const { text, fontSize } = await getTextContentFromFrameOrPage(
-        storyFrame,
+        storyPage,
         '[data-automation-decorator]',
       );
 
@@ -132,7 +134,7 @@ describe('storybook-config', () => {
 
     it('should render a component inside a story', async () => {
       const { text, fontSize } = await getTextContentFromFrameOrPage(
-        storyFrame,
+        storyPage,
         '[data-automation-text]',
       );
 
@@ -142,7 +144,7 @@ describe('storybook-config', () => {
 
     it('should render vanilla styles', async () => {
       const { text, fontSize } = await getTextContentFromFrameOrPage(
-        storyFrame,
+        storyPage,
         '[data-automation-vanilla]',
       );
 
@@ -152,7 +154,7 @@ describe('storybook-config', () => {
 
     it('should render less styles', async () => {
       const { text, fontSize } = await getTextContentFromFrameOrPage(
-        storyFrame,
+        storyPage,
         '[data-automation-less]',
       );