Introducing E2E Tests

.github/workflows/node.js.yml

@@ -42,15 +42,14 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [12.x]
 
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-
       - name: Get Yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -62,9 +61,42 @@ jobs:
           key: v2-${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             v2-${{ runner.os }}-yarn-
-
       - run: yarn
       - run: yarn test
       - name: Install examples dependencies
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn --cwd examples/app-host install
+  test_e2e:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Get Yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Cache Yarn
+        uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: v2-${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            v2-${{ runner.os }}-yarn-
+      - name: Install dependencies
+        run: yarn
+        env:
+          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: "true"
+      - name: Run E2E tests
+        uses: ianwalter/puppeteer-container@v4.0.0
+        with:
+          args: yarn e2e --forceExit
+        env:
+          CI: "true"

e2e-tests/TestApp.test-tsx

@@ -0,0 +1,41 @@
+// We need to ensure that the `app/src/App.tsx` used by `yarn start` renders widgets
+// in order that we can test that an application can render widgets.
+// Therefore, this is a copy of `App.tsx` which renders all of the widgets.
+// I've changed the extension, because I don't want it to be picked up by TypeScript or ESLint.
+import * as React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+import widgets from './widgets';
+
+function App(): JSX.Element {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+      <div data-testid="widgets">
+        <React.Suspense fallback={null}>
+          {Object.keys(widgets).length > 0
+            ? Object.entries(widgets).map(([widgetName, Widget]) => (
+                <Widget key={widgetName} />
+              ))
+            : 'No widgets found...'}
+        </React.Suspense>
+      </div>
+    </div>
+  );
+}
+
+export default App;