feat: complete refactor of e2e tests

Tests have been seperated into different commands.

azure-pipelines.yml

@@ -3,3 +3,8 @@ jobs:
     parameters:
       name: Linux
       vmImage: 'ubuntu-16.04'
+
+  - template: support/pipelines/jobs.yml
+    parameters:
+      name: macOS
+      vmImage: 'macOS-10.14'

e2e/basic.e2e.test.ts

@@ -0,0 +1,7 @@
+// A test to ensure that the server builds and opens the home url.
+
+describe('Basic Home', () => {
+  it('can navigate to the home page', async () => {
+    await page.goto(__SERVER__.home);
+  });
+});

e2e/helpers/index.ts

@@ -1,6 +1,6 @@
 import { MakeOptional } from '@remirror/core';
-import { getBrowserName, SupportedServers } from '@test-fixtures/test-links';
 import { SupportedCharacters } from 'jest-remirror';
+import { getBrowserName } from './test-environment';
 
 /**
  * Clear the editor via triple click and delete
@@ -18,29 +18,23 @@ export const sel = (...selectors: string[]) => selectors.join(' ');
 /**
  * Obtain the inner HTML
  */
-export const innerHtml = async (selector: string) => page.$eval(selector, e => e.innerHTML);
+export const innerHtml = async (selector: string) => page.$eval(selector, element => element.innerHTML);
 
 /**
  * Retrieve the text content from the editor
  */
-export const textContent = async (selector: string) => page.$eval(selector, e => e.textContent);
+export const textContent = async (selector: string) => page.$eval(selector, element => element.textContent);
 
 /**
  * Retrieve the outerHTML from the editor
  */
-export const outerHtml = async (selector: string) => page.$eval(selector, e => e.outerHTML);
+export const outerHtml = async (selector: string) => page.$eval(selector, element => element.outerHTML);
 
 /**
  * Skips the test on Firefox.
  */
 export const skipTestOnFirefox = getBrowserName() === 'firefox' ? test.skip : test;
 
-/**
- * Runs describe block only on provided servers
- */
-export const describeServer = (servers: SupportedServers[]): jest.Describe =>
-  servers.some(server => __SERVERS__.includes(server)) ? describe : describe.skip;
-
 /**
  * Creates an array of length `length` `and transforms each index value with the provided function.
  *

e2e/helpers/test-environment.ts

@@ -0,0 +1,56 @@
+/**
+ * Retrieve the browser name from the environment
+ */
+export const getBrowserName = (): SupportedBrowserName => process.env.REMIRROR_E2E_BROWSER || 'chromium';
+
+/**
+ * Prefix the browser name to the passed in string
+ */
+export const prefixBrowserName = (...value: string[]) =>
+  `${getBrowserName()}-${process.platform}-${__SERVER__.name}-${value.join('-')}`;
+
+/**
+ * Declare the globals used throughout tests
+ */
+declare global {
+  const __DEV__: boolean;
+  const __TEST__: boolean;
+  /**
+   * Identifies whether this is an e2e test
+   */
+  const __E2E__: boolean;
+
+  /**
+   * Lists the servers running for end to end test.
+   * Currently this supports ['next', 'storybook', 'docz']
+   */
+  const __SERVER__: {
+    config: {
+      command: string;
+      port: number;
+      usedPortAction: 'ask' | 'error' | 'ignore' | 'kill';
+      launchTimeout: number;
+    };
+    regex: string;
+    urls: Record<RemirrorTestEditors, { empty: string; content: string }>;
+    home: string;
+    name: string;
+  };
+
+  namespace NodeJS {
+    interface ProcessEnv {
+      REMIRROR_E2E_BROWSER?: SupportedBrowserName;
+      REMIRROR_E2E_SERVER?: string;
+      REMIRROR_E2E_DEBUG?: string;
+      REMIRROR_E2E_DOCKER?: string;
+      /**
+       * When set only run the most basic of tests.
+       */
+      REMIRROR_E2E_BASIC?: string;
+    }
+  }
+
+  type RemirrorTestServers = 'storybook' | 'next' | 'docz' | 'razzle';
+  type RemirrorTestEditors = 'twitter' | 'wysiwyg' | 'epic';
+  type SupportedBrowserName = 'firefox' | 'chromium';
+}

e2e/jest.config.js

@@ -1,5 +1,6 @@
 const config = require('../support/jest/jest.config');
 const { jestSupportDir, baseDir } = require('../support/jest/helpers');
+const { server: __SERVER__ } = require('./server.config');
 
 const {
   clearMocks,
@@ -12,25 +13,19 @@ const {
   moduleNameMapper,
 } = config;
 
-const { PUPPETEER_SERVERS } = process.env;
-
-const __SERVERS__ = PUPPETEER_SERVERS
-  ? PUPPETEER_SERVERS.split(',')
-  : ['next', 'docz', 'storybook'];
-
 module.exports = {
   clearMocks,
   verbose,
   moduleFileExtensions,
   globals: {
     ...globals,
     __E2E__: true,
-    __SERVERS__,
+    __SERVER__,
   },
   transform,
   rootDir: baseDir('e2e'),
   testPathIgnorePatterns,
-  testRegex: '/.*\\.puppeteer\\.ts$',
+  testRegex: __SERVER__.regex,
   cacheDirectory,
   moduleNameMapper,
   modulePathIgnorePatterns: ['node_modules'],

e2e/server.config.js

@@ -0,0 +1,110 @@
+const {
+  REMIRROR_E2E_BROWSER = 'chromium',
+  REMIRROR_E2E_SERVER = 'storybook',
+  REMIRROR_E2E_BASIC,
+} = process.env;
+
+const basicRegex = 'basic\\.e2e\\.test\\.ts$';
+
+const noSSRRegex = REMIRROR_E2E_BASIC
+  ? basicRegex
+  : `.*\\.(e2e|${REMIRROR_E2E_SERVER})\\.test\\.ts$`;
+
+const allTestRegex = REMIRROR_E2E_BASIC
+  ? basicRegex
+  : REMIRROR_E2E_BROWSER === 'firefox'
+  ? noSSRRegex
+  : `.*\\.(e2e|ssr|${REMIRROR_E2E_SERVER})\\.test\\.ts$`;
+
+const servers = (exports.servers = {
+  next: {
+    server: {
+      command: 'cd examples/with-next && yarn build && yarn start -p 3030',
+      port: 3030,
+      usedPortAction: 'kill',
+      launchTimeout: 120000,
+    },
+    regex: allTestRegex,
+    home: 'http://localhost:3030',
+  },
+  storybook: {
+    server: {
+      command: 'yarn start-storybook -p 3030 -c support/storybook --quiet --ci',
+      port: 3030,
+      usedPortAction: 'kill',
+      launchTimeout: 120000,
+    },
+    regex: noSSRRegex,
+    home: 'http://localhost:3030',
+  },
+  docz: {
+    server: {
+      command: 'cd docs && yarn docz dev --debug -p 3030',
+      port: 3030,
+      usedPortAction: 'kill',
+      launchTimeout: 120000,
+    },
+    regex: noSSRRegex,
+    home: 'http://localhost:3030',
+  },
+  razzle: {
+    server: {
+      command: 'cd examples/with-razzle && PORT=3030 yarn start',
+      port: 3030,
+      usedPortAction: 'kill',
+      launchTimeout: 120000,
+    },
+    regex: allTestRegex,
+    home: 'http://localhost:3030',
+  },
+});
+
+const editors = (exports.editors = {
+  twitter: {
+    storybook: {
+      empty: 'http://localhost:3030/iframe.html?id=twitter-editor--basic',
+      content: 'http://localhost:3030/iframe.html?id=twitter-editor--with-content',
+    },
+    next: {
+      empty: 'http://localhost:3030/editor/twitter',
+      content: 'http://localhost:3030/editor/twitter/content',
+    },
+    docz: {
+      empty: 'http://localhost:3030/showcase/twitter',
+      content: '',
+    },
+    razzle: {
+      empty: 'http://localhost:3030/editors/twitter',
+      content: 'http://localhost:3030/editors/twitter/content',
+    },
+  },
+  wysiwyg: {
+    storybook: {
+      empty: 'http://localhost:3030/iframe.html?id=wysiwyg-editor--basic',
+      content: 'http://localhost:3030/iframe.html?id=wysiwyg-editor--with-content',
+    },
+    next: {
+      empty: 'http://localhost:3030/editor/wysiwyg',
+      content: 'http://localhost:3030/editor/wysiwyg/content',
+    },
+    docz: {
+      empty: 'http://localhost:3030/showcase/wysiwyg',
+      content: '',
+    },
+    razzle: {
+      empty: 'http://localhost:3030/editors/wysiwyg',
+      content: 'http://localhost:3030/editors/wysiwyg/content',
+    },
+  },
+});
+
+exports.server = {
+  ...servers[REMIRROR_E2E_SERVER],
+  name: REMIRROR_E2E_SERVER,
+  urls: Object.keys(editors).reduce((acc, key) => {
+    return {
+      ...acc,
+      [key]: editors[key][REMIRROR_E2E_SERVER],
+    };
+  }, {}),
+};