Fix integration tests

springload · Feb 11, 2025 · 868f703 · 868f703
1 parent 3c9fe7e
commit 868f703
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 22 deletions.
diff --git a/examples/tests.story.tsx b/examples/tests.story.tsx
@@ -1,6 +1,8 @@
 import { storiesOf } from "@storybook/react";
 import React, { Component, useState } from "react";
 
+import { BlockToolbar, InlineToolbar, MetaToolbar } from "../src";
+
 import {
   INLINE_CONTROL,
   BLOCK_CONTROL,
@@ -10,6 +12,7 @@ import {
 } from "./constants/ui";
 
 import EditorWrapper from "./components/EditorWrapper";
+import CharCount from "./components/CharCount";
 
 storiesOf("Tests", module)
   // Add a decorator rendering story as a component for hooks support.
@@ -180,4 +183,48 @@ storiesOf("Tests", module)
         </button>
       </>
     );
-  });
+  })
+  .add("Integration", () => (
+    <main>
+      <p id="integration-editor">Integration tests</p>
+      <EditorWrapper
+        id="integration"
+        ariaDescribedBy="integration-editor"
+        placeholder="Write here…"
+        // Makes it easier to write automated tests retrieving the content.
+        stateSaveInterval={50}
+        enableHorizontalRule
+        enableLineBreak
+        stripPastedStyles={false}
+        maxListNesting={6}
+        spellCheck
+        entityTypes={[
+          ENTITY_CONTROL.IMAGE,
+          ENTITY_CONTROL.EMBED,
+          ENTITY_CONTROL.LINK,
+          ENTITY_CONTROL.DOCUMENT,
+        ]}
+        blockTypes={[
+          BLOCK_CONTROL.HEADER_TWO,
+          BLOCK_CONTROL.HEADER_THREE,
+          BLOCK_CONTROL.HEADER_FOUR,
+          BLOCK_CONTROL.HEADER_FIVE,
+          BLOCK_CONTROL.UNORDERED_LIST_ITEM,
+          BLOCK_CONTROL.ORDERED_LIST_ITEM,
+        ]}
+        inlineStyles={[INLINE_CONTROL.BOLD, INLINE_CONTROL.ITALIC]}
+        controls={[
+          {
+            meta: CharCount,
+          },
+        ]}
+        topToolbar={(props) => (
+          <>
+            <InlineToolbar defaultToolbar="sticky" {...props} />
+            <BlockToolbar {...props} />
+          </>
+        )}
+        bottomToolbar={MetaToolbar}
+      />
+    </main>
+  ));
diff --git a/tests/integration/PuppeteerEnvironment.js b/tests/integration/PuppeteerEnvironment.js
@@ -1,4 +1,4 @@
-const NodeEnvironment = require("jest-environment-node");
+const { TestEnvironment } = require("jest-environment-node");
 const puppeteer = require("puppeteer");
 const fs = require("fs");
 const os = require("os");
@@ -12,7 +12,7 @@ const IS_WATCH = process.argv.includes("--watch");
  * Automated end to end integration tests built with Puppeteer.
  * See https://facebook.github.io/jest/docs/en/puppeteer.html.
  */
-class PuppeteerEnvironment extends NodeEnvironment {
+class PuppeteerEnvironment extends TestEnvironment {
   constructor(config, options) {
     super(config, options);
 

diff --git a/...mage_snapshots__/regression-test-js-regression-simple-editor-renders-1-snap.png b/...mage_snapshots__/regression-test-js-regression-simple-editor-renders-1-snap.png
diff --git a/tests/integration/examples.test.js b/tests/integration/examples.test.js
@@ -8,9 +8,7 @@ describe("/storybook/", () => {
   let page;
   beforeAll(async () => {
     page = await global.BROWSER.newPage();
-    await page.goto(
-      `${global.ROOT}?selectedKind=Examples&selectedStory=Wagtail%20features`,
-    );
+    await page.goto(`${global.ROOT}?id=tests--integration`);
 
     await page.addScriptTag({ path: require.resolve("axe-core") });
   });
@@ -62,7 +60,7 @@ describe("/storybook/", () => {
       await page.keyboard.press("ArrowRight");
       await page.waitFor(100);
       const content = await page.evaluate(() =>
-        JSON.parse(window.sessionStorage.getItem("wagtail:content")),
+        JSON.parse(window.sessionStorage.getItem("integration:content")),
       );
       content.blocks.forEach((b) => delete b.key);
       expect(content.blocks).toMatchSnapshot();
@@ -72,7 +70,7 @@ describe("/storybook/", () => {
       await page.type('[role="textbox"]', "### H3");
       await page.waitFor(100);
       const content = await page.evaluate(() =>
-        JSON.parse(window.sessionStorage.getItem("wagtail:content")),
+        JSON.parse(window.sessionStorage.getItem("integration:content")),
       );
       content.blocks.forEach((b) => delete b.key);
       expect(content.blocks).toMatchSnapshot();
@@ -82,7 +80,7 @@ describe("/storybook/", () => {
       await page.type('[role="textbox"]', "* UL");
       await page.waitFor(100);
       const content = await page.evaluate(() =>
-        JSON.parse(window.sessionStorage.getItem("wagtail:content")),
+        JSON.parse(window.sessionStorage.getItem("integration:content")),
       );
       content.blocks.forEach((b) => delete b.key);
       expect(content.blocks).toMatchSnapshot();
@@ -92,7 +90,7 @@ describe("/storybook/", () => {
       await page.type('[role="textbox"]', "---");
       await page.waitFor(100);
       const content = await page.evaluate(() =>
-        JSON.parse(window.sessionStorage.getItem("wagtail:content")),
+        JSON.parse(window.sessionStorage.getItem("integration:content")),
       );
       content.blocks.forEach((b) => delete b.key);
       expect(content).toMatchSnapshot();
@@ -107,7 +105,7 @@ describe("/storybook/", () => {
       await page.type('[role="textbox"]', "lo");
       await page.waitFor(100);
       const content = await page.evaluate(() =>
-        JSON.parse(window.sessionStorage.getItem("wagtail:content")),
+        JSON.parse(window.sessionStorage.getItem("integration:content")),
       );
       content.blocks.forEach((b) => delete b.key);
       expect(content).toMatchSnapshot();
@@ -119,7 +117,7 @@ describe("/storybook/", () => {
       await page.keyboard.press("Enter");
       await page.waitFor(100);
       const content = await page.evaluate(() =>
-        JSON.parse(window.sessionStorage.getItem("wagtail:content")),
+        JSON.parse(window.sessionStorage.getItem("integration:content")),
       );
       content.blocks.forEach((b) => delete b.key);
       expect(content).toMatchSnapshot();
@@ -137,7 +135,7 @@ describe("/storybook/", () => {
       await page.keyboard.press("Enter");
       await page.waitFor(100);
       const content = await page.evaluate(() =>
-        JSON.parse(window.sessionStorage.getItem("wagtail:content")),
+        JSON.parse(window.sessionStorage.getItem("integration:content")),
       );
       content.blocks.forEach((b) => delete b.key);
       expect(content).toMatchSnapshot();

diff --git a/tests/integration/performance.test.js b/tests/integration/performance.test.js
@@ -7,9 +7,7 @@ describe("performance", () => {
   });
 
   it("simple editor", async () => {
-    await page.goto(
-      `${global.ROOT}?selectedKind=Draftail&selectedStory=Simple`,
-    );
+    await page.goto(`${global.ROOT}?id=draftail--simple`);
 
     await page.type('[role="textbox"]', "Hello");
     await page.keyboard.press("Enter");
@@ -26,9 +24,7 @@ describe("performance", () => {
 
   it("markov_draftjs 41 memory", async () => {
     jest.setTimeout(20000);
-    await page.goto(
-      `${global.ROOT}?selectedKind=Performance&selectedStory=markov_draftjs%2041`,
-    );
+    await page.goto(`${global.ROOT}?id=performance--markov_draftjs%2041`);
 
     const heapSize = await page.evaluate(
       () => window.performance.memory.usedJSHeapSize,
@@ -39,9 +35,8 @@ describe("performance", () => {
 
   it("markov_draftjs 41 speed", async () => {
     jest.setTimeout(20000);
-    await page.goto(
-      `${global.ROOT}?selectedKind=Performance&selectedStory=markov_draftjs%2041`,
-    );
+    await page.goto(`${global.ROOT}?id=performance--markov-draftjs-41`);
+    await page.waitForSelector('[data-benchmark="mean"]');
 
     const mean = await page.$eval('[data-benchmark="mean"]', (elt) =>
       parseFloat(elt.innerHTML),