From a17f237b752508cd7ef58e16e8e2eba383e49977 Mon Sep 17 00:00:00 2001
From: Marcus Eide <eide@spotify.com>
Date: Fri, 27 Mar 2020 13:42:27 +0100
Subject: [PATCH] Add data-testid to buttons used by e2e tests

---
 .../components/ErrorDisplay/ErrorDisplay.tsx    | 17 +++++++++++++++--
 .../core/src/api/app/LoginPage/LoginPage.tsx    | 13 ++++++++-----
 .../components/SupportButton/SupportButton.tsx  |  6 +++++-
 packages/core/src/layout/Sidebar/Items.tsx      |  2 +-
 .../src/components/WelcomePage/ErrorButton.tsx  |  7 ++++++-
 5 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/components/ErrorDisplay/ErrorDisplay.tsx b/packages/app/src/components/ErrorDisplay/ErrorDisplay.tsx
index 25e87c7bff..ef24821508 100644
--- a/packages/app/src/components/ErrorDisplay/ErrorDisplay.tsx
+++ b/packages/app/src/components/ErrorDisplay/ErrorDisplay.tsx
@@ -16,7 +16,8 @@
 
 import React, { FC, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Snackbar } from '@material-ui/core';
+import { Snackbar, IconButton } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
 import { Alert } from '@material-ui/lab';
 import { ErrorApi, ErrorContext } from '@backstage/core';
 
@@ -73,7 +74,19 @@ const ErrorDisplay: FC<Props> = ({ forwarder }) => {
       message={firstError.toString()}
       anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
     >
-      <Alert onClose={handleClose} severity="error">
+      <Alert
+        action={
+          <IconButton
+            color="inherit"
+            size="small"
+            onClick={handleClose}
+            data-testid="error-button-close"
+          >
+            <CloseIcon />
+          </IconButton>
+        }
+        severity="error"
+      >
         {firstError.toString()}
       </Alert>
     </Snackbar>
diff --git a/packages/core/src/api/app/LoginPage/LoginPage.tsx b/packages/core/src/api/app/LoginPage/LoginPage.tsx
index 4f8214b35c..7352600f63 100644
--- a/packages/core/src/api/app/LoginPage/LoginPage.tsx
+++ b/packages/core/src/api/app/LoginPage/LoginPage.tsx
@@ -27,7 +27,7 @@ import {
   TextField,
   List,
   ListItem,
-  Link
+  Link,
 } from '@material-ui/core';
 import InfoCard from '../../../layout/InfoCard/InfoCard';
 
@@ -37,7 +37,9 @@ enum AuthType {
 
 const LoginPage: FC<{}> = () => {
   const [githubUsername, setGithubUsername] = useState(String);
-  const [githubPersonalAuthToken, setGithubPersonalAuthToken] = useState(String);
+  const [githubPersonalAuthToken, setGithubPersonalAuthToken] = useState(
+    String,
+  );
   const [loginDetails, setLoginDetails] = useState(Object);
 
   const saveGithubInfo = (info: {}) => {
@@ -70,11 +72,11 @@ const LoginPage: FC<{}> = () => {
         'Content-Type': 'application/x-www-form-urlencoded',
       }),
     })
-      .then((response) => {
+      .then(response => {
         if (response.status === 200) return response.json();
         throw Error(`${response.status} ${response.statusText}`);
       })
-      .then((data) => {
+      .then(data => {
         const info = {
           username: username,
           token: token,
@@ -158,6 +160,7 @@ const LoginPage: FC<{}> = () => {
                 </ListItem>
                 <ListItem>
                   <Button
+                    data-testid="github-auth-button"
                     variant="outlined"
                     color="primary"
                     onClick={() => authenticate(AuthType.GitHub)}
@@ -174,4 +177,4 @@ const LoginPage: FC<{}> = () => {
   );
 };
 
-export default LoginPage;
\ No newline at end of file
+export default LoginPage;
diff --git a/packages/core/src/components/SupportButton/SupportButton.tsx b/packages/core/src/components/SupportButton/SupportButton.tsx
index 4a9046d0e8..076ec2d3c9 100644
--- a/packages/core/src/components/SupportButton/SupportButton.tsx
+++ b/packages/core/src/components/SupportButton/SupportButton.tsx
@@ -78,7 +78,11 @@ const SupportButton: FC<Props> = ({
 
   return (
     <Fragment>
-      <Button color="primary" onClick={onClickHandler}>
+      <Button
+        data-testid="support-button"
+        color="primary"
+        onClick={onClickHandler}
+      >
         <HelpIcon className={classes.leftIcon} />
         Support
       </Button>
diff --git a/packages/core/src/layout/Sidebar/Items.tsx b/packages/core/src/layout/Sidebar/Items.tsx
index ddce3b4301..87a3038a55 100644
--- a/packages/core/src/layout/Sidebar/Items.tsx
+++ b/packages/core/src/layout/Sidebar/Items.tsx
@@ -94,7 +94,7 @@ export const SidebarItem: FC<SidebarItemProps> = ({
       onClick={onClick}
       underline="none"
     >
-      <div className={classes.iconContainer}>
+      <div data-testid="login-button" className={classes.iconContainer}>
         <Icon fontSize="small" />
       </div>
       <Typography variant="subtitle1" className={classes.label}>
diff --git a/plugins/welcome/src/components/WelcomePage/ErrorButton.tsx b/plugins/welcome/src/components/WelcomePage/ErrorButton.tsx
index 390c434633..daaf4c94ac 100644
--- a/plugins/welcome/src/components/WelcomePage/ErrorButton.tsx
+++ b/plugins/welcome/src/components/WelcomePage/ErrorButton.tsx
@@ -26,7 +26,12 @@ const ErrorButton: FC<{}> = () => {
   };
 
   return (
-    <Button variant="contained" color="primary" onClick={handleClick}>
+    <Button
+      data-testid="error-button"
+      variant="contained"
+      color="primary"
+      onClick={handleClick}
+    >
       Trigger an error!
     </Button>
   );