Move puppeteer tests out of create-daml-app (digital-asset#5420)

As expected, the `puppeteer` library used to demonstrate how to test DAML apps end-to-end, causes issues in CI. It is not very unlikely that users of the getting started guide would run into the same issues. In addition, `puppeteer` is a _huge_ dependency, we should probably not shove down everybody's throat who just wants to walk throught the GSG. Thus, this PR moves everything related to testing out of `create-daml-app` and exclusively into the docs. This is completly lacking tests, but since it wasn't tested before either, I consider this acceptable. My manual tests succeeded. Since merging this might unblock quite a few other PRs, I defer test into a followup PR. CHANGELOG_BEGIN CHANGELOG_END
kgeonw · Apr 3, 2020 · 7cf5018 · 7cf5018
1 parent f82f98b
commit 7cf5018
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/...tes/create-daml-app/ui/src/index.test.tsx → ...ng-started/code/test-before/index.test.ts b/...tes/create-daml-app/ui/src/index.test.tsx → ...ng-started/code/test-before/index.test.ts
diff --git a/docs/source/getting-started/testing.rst b/docs/source/getting-started/testing.rst
@@ -15,12 +15,23 @@ Of course there are more to choose from, but this is one combination that works.
     - `Jest <https://jestjs.io/>`_ is a general-purpose testing framework for JavaScript that's well integrated with both TypeScript and React. Jest helps you structure your tests and express expectations of the app's behaviour.
     - `Puppeteer <https://pptr.dev/>`_ is a library for controlling a Chrome browser from JavaScript/TypeScript. Puppeteer allows you to simulate interactions with the app in place of a real user.
 
+To install Puppeteer and some other testing utilities we are going to use,
+run the following command in the ``ui`` directory::
+
+    yarn add --dev puppeteer wait-on @types/jest @types/node @types/puppeteer @types/wait-on
 
 Setting up our tests
 ====================
 
 Let's see how to use these tools to write some tests for our social network app.
-You can see the full suite in the file ``index.test.tsx``.
+You can see the full suite in section :ref:`Full Test Suite` at the bottom of
+this page.
+To run this test suite, create a new file ``ui/src/index.test.ts``, copy the
+code in this section into that file and run the following command in the ``ui``
+folder::
+
+    yarn test
+
 The actual tests are the clauses beginning with ``test``.
 You can scroll down to the important ones with the following descriptions (the first argument to each ``test``):
 
@@ -49,8 +60,8 @@ This means we use Puppeteer to type text into input forms, click buttons and sea
 In order to find those elements, we do need to make some adjustments in our React components, which we'll show later.
 Let's start at a higher level with a ``test``.
 
-.. literalinclude:: code/templates-tarball/create-daml-app/ui/src/index.test.tsx
-  :language: tsx
+.. literalinclude:: code/test-before/index.test.ts
+  :language: ts
   :start-after: // LOGIN_TEST_BEGIN
   :end-before: // LOGIN_TEST_END
 
@@ -75,8 +86,8 @@ We showed how to write a simple test at a high level, but haven't shown how to m
 This was hidden in the ``login()`` and ``logout()`` functions.
 Let's see how ``login()`` is implemented.
 
-.. literalinclude:: code/templates-tarball/create-daml-app/ui/src/index.test.tsx
-  :language: tsx
+.. literalinclude:: code/test-before/index.test.ts
+  :language: ts
   :start-after: // LOGIN_FUNCTION_BEGIN
   :end-before: // LOGIN_FUNCTION_END
 
@@ -116,3 +127,12 @@ Semantic UI provides a convenient set of UI elements which get translated to HTM
 In the example of the username field above, the original Semantic UI ``Input`` is translated to nested ``div`` nodes with the ``input`` inside.
 You can see this highlighted on the right side of the screenshot.
 While harmless in this case, in general you may need to inspect the HTML translation of UI elements and write your CSS selectors accordingly.
+
+
+.. _Full Test Suite:
+
+The Full Test Suite
+===================
+
+.. literalinclude:: code/test-before/index.test.ts
+  :language: ts
diff --git a/templates/create-daml-app/ui/package.json.template b/templates/create-daml-app/ui/package.json.template
@@ -4,18 +4,14 @@
   "private": true,
   "dependencies": {
     "@daml.js/create-daml-app-0.1.0": "file:../daml.js/create-daml-app-0.1.0",
-    "@daml/types": "__VERSION__",
     "@daml/ledger": "__VERSION__",
     "@daml/react": "__VERSION__",
-    "@types/puppeteer": "^2.0.1",
+    "@daml/types": "__VERSION__",
     "jwt-simple": "^0.5.6",
-    "puppeteer": "^2.1.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-scripts": "^3.3.0",
     "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^0.88.1",
-    "typescript": "~3.7.4"
+    "semantic-ui-react": "^0.88.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -41,13 +37,10 @@
   },
   "proxy": "http://localhost:7575",
   "devDependencies": {
-    "@types/jest": "24.0.18",
     "@types/jwt-simple": "^0.5.33",
-    "@types/node": "12.7.12",
     "@types/react": "^16.9.16",
     "@types/react-dom": "^16.9.4",
-    "@types/wait-on": "^4.0.0",
-    "wait-on": "^4.0.1",
-    "eslint-config-react-app": "^5.2.0"
+    "react-scripts": "^3.3.0",
+    "typescript": "~3.8.3"
   }
 }