Guide to UI testing with Jest and Puppeteer (digital-asset#5119)

* First draft of guide to UI testing changelog_begin changelog_end * Address Nemanja's feedback * Add copyright headers * Cut down intro and description of Jest/Puppeteer * Shorten a bit more
axman6 · Mar 24, 2020 · c950bf9 · c950bf9
1 parent d834b9b
commit c950bf9
Show file tree

Hide file tree

Showing 6 changed files with 539 additions and 0 deletions.
diff --git a/docs/configs/pdf/index.rst b/docs/configs/pdf/index.rst
@@ -103,6 +103,7 @@ Experimental features
    tools/visual
    daml2ts/index
    getting-started/index
+   getting-started/testing
 
 Support and updates
 -------------------

diff --git a/docs/source/getting-started/code/ui-before/LoginScreen.tsx b/docs/source/getting-started/code/ui-before/LoginScreen.tsx
@@ -0,0 +1,114 @@
+// Copyright (c) 2020 The DAML Authors. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useCallback } from 'react'
+import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react'
+import Credentials, { computeCredentials } from '../Credentials';
+import Ledger from '@daml/ledger';
+import { User } from '@daml-ts/create-daml-app-0.1.0/lib/User';
+import { DeploymentMode, deploymentMode, ledgerId, httpBaseUrl, wsBaseUrl } from '../config';
+import { useEffect } from 'react';
+
+type Props = {
+  onLogin: (credentials: Credentials) => void;
+}
+
+/**
+ * React component for the login screen of the `App`.
+ */
+const LoginScreen: React.FC<Props> = ({onLogin}) => {
+  const [username, setUsername] = React.useState('');
+
+  const login = useCallback(async (credentials: Credentials) => {
+    try {
+      const ledger = new Ledger({token: credentials.token, httpBaseUrl, wsBaseUrl});
+      let userContract = await ledger.lookupByKey(User, credentials.party);
+      if (userContract === null) {
+        const user = {username: credentials.party, following: []};
+        userContract = await ledger.create(User, user);
+      }
+      onLogin(credentials);
+    } catch(error) {
+      alert(`Unknown error:\n${JSON.stringify(error)}`);
+    }
+  }, [onLogin]);
+
+  const handleLogin = async (event: React.FormEvent) => {
+    event.preventDefault();
+    const credentials = computeCredentials(username);
+    await login(credentials);
+  }
+
+  const handleDablLogin = () => {
+    window.location.assign(`https://login.projectdabl.com/auth/login?ledgerId=${ledgerId}`);
+  }
+
+  useEffect(() => {
+    const url = new URL(window.location.toString());
+    const token = url.searchParams.get('token');
+    if (token === null) {
+      return;
+    }
+    const party = url.searchParams.get('party');
+    if (party === null) {
+      throw Error("When 'token' is passed via URL, 'party' must be passed too.");
+    }
+    url.search = '';
+    window.history.replaceState(window.history.state, '', url.toString());
+    login({token, party, ledgerId});
+  }, [login]);
+
+  return (
+    <Grid textAlign='center' style={{ height: '100vh' }} verticalAlign='middle'>
+      <Grid.Column style={{ maxWidth: 450 }}>
+        <Header as='h1' textAlign='center' size='huge' style={{color: '#223668'}}>
+          <Header.Content>
+            Create
+            <Image
+              as='a'
+              href='https://www.daml.com/'
+              target='_blank'
+              src='/daml.svg'
+              alt='DAML Logo'
+              spaced
+              size='small'
+              verticalAlign='middle'
+            />
+            App
+          </Header.Content>
+        </Header>
+        <Form size='large' className='test-select-login-screen'>
+          <Segment>
+            {deploymentMode !== DeploymentMode.PROD_DABL
+            ? <>
+                // BEGIN_FORM
+                <Form.Input
+                  fluid
+                  icon='user'
+                  iconPosition='left'
+                  placeholder='Username'
+                  value={username}
+                  className='test-select-username-field'
+                  onChange={e => setUsername(e.currentTarget.value)}
+                />
+                <Button
+                  primary
+                  fluid
+                  className='test-select-login-button'
+                  onClick={handleLogin}>
+                  Log in
+                </Button>
+                // END_FORM
+              </>
+            : <Button primary fluid onClick={handleDablLogin}>
+                Log in with DABL
+              </Button>
+            }
+          </Segment>
+        </Form>
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export default LoginScreen;