wip: wire up storybook for e2e

remirror · Jan 19, 2021 · 8037e1e · 8037e1e
1 parent ababce2
commit 8037e1e
Show file tree

Hide file tree

Showing 14 changed files with 322 additions and 49 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -55,8 +55,8 @@ jobs:
 
       - name: ${{ matrix.server }} e2e - ${{ matrix.browser }} - ${{matrix.mode}}
         env:
-          REMIRROR_E2E_ENVIRONMENT: playwright
-          REMIRROR_E2E_SERVER: ${{matrix.server}}
-          REMIRROR_E2E_BROWSER: ${{matrix.browser}}
-          REMIRROR_E2E_MODE: ${{matrix.mode}}
+          E2E_ENVIRONMENT: playwright
+          E2E_SERVER: ${{matrix.server}}
+          E2E_BROWSER: ${{matrix.browser}}
+          E2E_MODE: ${{matrix.mode}}
         run: pnpm e2e
diff --git a/examples/storybook-react/__e2e__/__snapshots__/annotations.test.ts.snap b/examples/storybook-react/__e2e__/__snapshots__/annotations.test.ts.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Positioner Bubble menu should show the bubble menu 1`] = `
+<span data-id="remirror-positioner-widget"
+      role="presentation"
+      contenteditable="false"
+      class="ProseMirror-widget"
+>
+  <div style="top: 33px; left: 71.1094px; position: absolute; border: 1px solid black; white-space: pre-line; background: white;">
+    This is a sample text
+  </div>
+</span>
+<p class>
+  This is text
+  <span style="background: rgb(215, 215, 255);">
+    This is
+  </span>
+  <span style="background: rgb(175, 175, 255);">
+    a
+  </span>
+  <span style="background: rgb(135, 135, 255);">
+    sample
+  </span>
+  <span style="background: rgb(175, 175, 255);">
+    text
+  </span>
+</p>
+`;
diff --git a/examples/storybook-react/__e2e__/annotations.test.ts b/examples/storybook-react/__e2e__/annotations.test.ts
@@ -1,3 +1,4 @@
+import delay from 'delay';
 import { getDocument, queries } from 'playwright-testing-library';
 import { ElementHandle } from 'playwright-testing-library/dist/typedefs';
 import { goto, selectAll } from 'testing/playwright';
@@ -17,25 +18,27 @@ describe('Positioner', () => {
 
   describe('Bubble menu', () => {
     it('should show the bubble menu', async () => {
+      console.log('here I am');
       await $editor.focus();
-      await $editor.type('This is text', { delay: 20 });
-      await expect($editor.innerHTML()).resolves.toMatchSnapshot();
-      const $bubbleMenu = await getByTestId($document, 'bubble-menu');
-      await expect($bubbleMenu.getAttribute('style')).resolves.toBe(
-        'bottom:999999px;left:-999999px;position:absolute',
-      );
+      await delay(30_000);
+      // await $editor.type('This is text', { delay: 20 });
+      // await expect($editor.innerHTML()).resolves.toMatchSnapshot();
+      // const $bubbleMenu = await getByTestId($document, 'bubble-menu');
+      // await expect($bubbleMenu.getAttribute('style')).resolves.toBe(
+      //   'bottom:999999px;left:-999999px;position:absolute',
+      // );
 
-      await selectAll();
-      const $visibleBubbleMenu = await getByTestId($document, 'bubble-menu');
-      const newStyles = await $visibleBubbleMenu.getAttribute('style');
-      expect(newStyles).toInclude('bottom');
-      expect(newStyles).not.toInclude('999999px');
-      expect(newStyles).toInclude('left');
+      // await selectAll();
+      // const $visibleBubbleMenu = await getByTestId($document, 'bubble-menu');
+      // const newStyles = await $visibleBubbleMenu.getAttribute('style');
+      // expect(newStyles).toInclude('bottom');
+      // expect(newStyles).not.toInclude('999999px');
+      // expect(newStyles).toInclude('left');
 
-      const $boldButton = await getByText($document, 'Bold');
-      await $boldButton.click();
+      // const $boldButton = await getByText($document, 'Bold');
+      // await $boldButton.click();
 
-      await expect($editor.innerHTML()).resolves.toMatchSnapshot();
+      // await expect($editor.innerHTML()).resolves.toMatchSnapshot();
     });
   });
 });
diff --git a/examples/storybook-react/package.json b/examples/storybook-react/package.json
@@ -6,7 +6,8 @@
   "repository": "https://github.com/remirror/remirror/tree/HEAD/examples/storybook-react",
   "scripts": {
     "build": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}'  build-storybook -c ./",
-    "e2e": "",
+    "e2e": "E2E_DEBUG=true E2E_SERVER=storybook-react pnpm -w e2e",
+    "e2e:watch": "E2E_DEBUG=true E2E_SERVER=storybook-react pnpm -w e2e:watch",
     "start": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}'  start-storybook -p 6006 -c ./"
   },
   "dependencies": {

diff --git a/package.json b/package.json
@@ -157,6 +157,7 @@
     "case-anything": "^1.1.2",
     "core-js": "^3.8.2",
     "cpy-cli": "^3.1.1",
+    "delay": "^4.4.0",
     "downlevel-dts": "^0.7.0",
     "eslint": "^7.18.0",
     "eslint-config-prettier": "^7.2.0",

diff --git a/packages/remirror__theme/__tests__/theme.spec.ts b/packages/remirror__theme/__tests__/theme.spec.ts
@@ -1,4 +1,4 @@
-import { createThemeVariables, defaultRemirrorTheme } from '../utils';
+import { createThemeVariables, defaultRemirrorTheme } from '../';
 
 test('theme', () => {
   expect(createThemeVariables(defaultRemirrorTheme)).toMatchSnapshot();

diff --git a/packages/testing/src/playwright/playwright-helpers.ts b/packages/testing/src/playwright/playwright-helpers.ts
@@ -39,11 +39,6 @@ export function outerHtml(selector: string) {
   return page.$eval(selector, (element) => element.outerHTML);
 }
 
-/**
- * Skips the test on Firefox.
- */
-export const skipTestOnFirefox = getBrowserName() === 'firefox' ? test.skip : test;
-
 /**
  * Creates an array of length `length` `and transforms each index value with the provided function.
  *
@@ -146,7 +141,7 @@ export async function goto(url = ''): Promise<Response | null> {
  * Retrieve the browser name from the environment
  */
 export function getBrowserName(): PlaywrightBrowserName {
-  return process.env.REMIRROR_E2E_BROWSER ?? 'chromium';
+  return process.env.E2E_BROWSER ?? 'chromium';
 }
 
 /**

diff --git a/packages/testing/src/playwright/playwright-launcher.ts b/packages/testing/src/playwright/playwright-launcher.ts
@@ -13,6 +13,7 @@ export const destroyServer = async (globalConfig?: Config.GlobalConfig) => {
     return;
   }
 
+  console.log('destroying the server');
   serverSetupPromise = undefined;
   await teardown();
   await globalTeardown(globalConfig);
@@ -23,14 +24,17 @@ export const setupServer = async (globalConfig: Config.GlobalConfig) => {
     return;
   }
 
+  console.log('setting up server');
   await setup([server.config]);
 
   onExit(() => {
     destroyServer().then(() => {
+      console.log('destroying server');
       process.exit();
     });
   });
 
+  console.log('global setup');
   await globalSetup(globalConfig);
 };
 

diff --git a/packages/testing/src/playwright/playwright-server.config.ts b/packages/testing/src/playwright/playwright-server.config.ts
@@ -1,7 +1,7 @@
 import { TestServer, TestServerName } from './playwright-types';
 
-const { REMIRROR_E2E_SERVER = 'next', REMIRROR_E2E_MODE = 'development' } = process.env;
-const dev = REMIRROR_E2E_MODE === 'development';
+const { E2E_SERVER = 'next', E2E_MODE = 'development' } = process.env;
+const dev = E2E_MODE === 'development';
 
 export const servers: Record<TestServerName, TestServer> = {
   next: {
@@ -38,16 +38,19 @@ export const servers: Record<TestServerName, TestServer> = {
     environment: 'playwright',
     config: {
       command: dev
-        ? 'cd examples/storybook-react && pnpm start -- -p 3032'
+        ? 'cd examples/storybook-react && pnpm start -- -p 3032 --ci'
         : 'cd examples/storybook-react && pnpm build && pnpx http-server storybook-static -p 3032',
       port: 3032,
       usedPortAction: 'kill',
       launchTimeout: 120_000,
     },
-    testMatch: ['examples/storybook-react/__e2e__/**/*.test.ts'],
+    testMatch: [
+      '<rootDir>/examples/storybook-react/__e2e__/**/*.test.ts',
+      // 'examples/storybook-react/__e2e__/annotations.test.ts',
+    ],
     url: 'http://localhost:3032/iframe.html?id=',
     name: 'storybook-react',
   },
 };
 
-export const server: TestServer = servers[REMIRROR_E2E_SERVER];
+export const server: TestServer = servers[E2E_SERVER];
diff --git a/packages/testing/src/playwright/playwright-types.ts b/packages/testing/src/playwright/playwright-types.ts
@@ -40,16 +40,16 @@ declare global {
 
   namespace NodeJS {
     interface ProcessEnv {
-      REMIRROR_E2E_BROWSER?: PlaywrightBrowserName;
-      REMIRROR_E2E_MODE?: 'development' | 'production';
-      REMIRROR_E2E_SERVER?: TestServerName;
-      REMIRROR_E2E_ENVIRONMENT?: TestEnvironment;
-      REMIRROR_E2E_DEBUG?: string;
-      REMIRROR_E2E_COVERAGE?: string;
+      E2E_BROWSER?: PlaywrightBrowserName;
+      E2E_MODE?: 'development' | 'production';
+      E2E_SERVER?: TestServerName;
+      E2E_ENVIRONMENT?: TestEnvironment;
+      E2E_DEBUG?: string;
+      E2E_COVERAGE?: string;
       /**
        * When set only run the most basic of tests.
        */
-      REMIRROR_E2E_BASIC?: string;
+      E2E_BASIC?: string;
     }
   }
 }