Add a range of data-testid tags to be able to cleanly identify parts of the application.

src/home/JoinExistingCallModal.tsx

@@ -43,7 +43,7 @@ export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) {
         <p>{t("This call already exists, would you like to join?")}</p>
         <FieldRow rightAlign className={styles.buttons}>
           <Button onPress={onClose}>{t("No")}</Button>
-          <Button onPress={onJoin}>{t("Yes, join call")}</Button>
+          <Button onPress={onJoin} data-testid="home_joinExistingRoom">{t("Yes, join call")}</Button>
         </FieldRow>
       </ModalContent>
     </Modal>

src/home/UnauthenticatedView.tsx

@@ -142,6 +142,7 @@ export const UnauthenticatedView: FC = () => {
                 type="text"
                 required
                 autoComplete="off"
+                data-testid="home_callName"
               />
             </FieldRow>
             <FieldRow>
@@ -152,6 +153,7 @@ export const UnauthenticatedView: FC = () => {
                 placeholder={t("Display name")}
                 type="text"
                 required
+                data-testid="home_displayName"
                 autoComplete="off"
               />
             </FieldRow>
@@ -171,7 +173,7 @@ export const UnauthenticatedView: FC = () => {
                 <ErrorMessage error={error} />
               </FieldRow>
             )}
-            <Button type="submit" size="lg" disabled={loading}>
+            <Button type="submit" size="lg" disabled={loading} data-testid="home_go">
               {loading ? t("Loading…") : t("Go")}
             </Button>
             <div id={recaptchaId} />