Improve ids for automated testing (#1377)

Follow-up to #1310
sillsdev · Sep 17, 2021 · 09edeee · 09edeee
1 parent 8dc4c86
commit 09edeee
Show file tree

Hide file tree

Showing 18 changed files with 341 additions and 295 deletions.
diff --git a/src/components/AppBar/UserMenu.tsx b/src/components/AppBar/UserMenu.tsx
@@ -15,6 +15,8 @@ import history, { openUserGuide, Path } from "browserHistory";
 import { clearCurrentProject } from "components/Project/ProjectActions";
 import theme, { tabColor } from "types/theme";
 
+const idAffix = "user-menu";
+
 export async function getIsAdmin(): Promise<boolean> {
   const userId = LocalStorage.getUserId();
   const user = await getUser(userId);
@@ -56,7 +58,7 @@ export default function UserMenu(props: UserMenuProps) {
         style={{
           background: tabColor(props.currentTab, Path.UserSettings),
         }}
-        id="avatar-user-menu"
+        id={`avatar-${idAffix}`}
       >
         <Hidden smDown>{LocalStorage.getCurrentUser()?.username}</Hidden>
         {avatar ? (
@@ -67,7 +69,7 @@ export default function UserMenu(props: UserMenuProps) {
       </Button>
       <Menu
         getContentAnchorEl={null}
-        id="user-menu"
+        id={idAffix}
         anchorEl={anchorElement}
         open={Boolean(anchorElement)}
         onClose={handleClose}
@@ -112,6 +114,7 @@ export function UserMenuList(props: UserMenuListProps) {
       {/* Only show Site Settings link to Admin users. */}
       {props.isAdmin && (
         <MenuItem
+          id={`${idAffix}-admin`}
           onClick={() => {
             dispatch(clearCurrentProject());
             history.push(Path.SiteSettings);
@@ -124,6 +127,7 @@ export function UserMenuList(props: UserMenuListProps) {
       )}
 
       <MenuItem
+        id={`${idAffix}-user`}
         onClick={() => {
           history.push(Path.UserSettings);
           props.onSelect();
@@ -134,6 +138,7 @@ export function UserMenuList(props: UserMenuListProps) {
       </MenuItem>
 
       <MenuItem
+        id={`${idAffix}-guide`}
         onClick={() => {
           openUserGuide();
           props.onSelect();
@@ -144,6 +149,7 @@ export function UserMenuList(props: UserMenuListProps) {
       </MenuItem>
 
       <MenuItem
+        id={`${idAffix}-logout`}
         onClick={() => {
           history.push(Path.Login);
           props.onSelect();
@@ -153,7 +159,11 @@ export function UserMenuList(props: UserMenuListProps) {
         <Translate id="userMenu.logout" />
       </MenuItem>
 
-      <MenuItem disabled style={{ justifyContent: "center" }}>
+      <MenuItem
+        id={`${idAffix}-version`}
+        disabled
+        style={{ justifyContent: "center" }}
+      >
         v{REACT_APP_VERSION}
       </MenuItem>
     </div>

diff --git a/src/components/DataEntry/DataEntryTable/DataEntryTable.tsx b/src/components/DataEntry/DataEntryTable/DataEntryTable.tsx
@@ -22,6 +22,8 @@ import Recorder from "components/Pronunciations/Recorder";
 import theme from "types/theme";
 import { newSense, simpleWord } from "types/word";
 
+export const exitButtonId = "exit-to-domain-tree";
+
 interface DataEntryTableProps {
   semanticDomain: SemanticDomain;
   displaySemanticDomainView: (isGettingSemanticDomain: boolean) => void;
@@ -532,6 +534,7 @@ export class DataEntryTable extends React.Component<
               ) ? null /*Word not shows because it's being edited*/ : (
                 <RecentEntry
                   key={wordAccess.word.id + "_" + wordAccess.senseIndex}
+                  rowIndex={index}
                   entry={wordAccess.word}
                   senseIndex={wordAccess.senseIndex}
                   updateGloss={(newDef: string) =>
@@ -602,7 +605,7 @@ export class DataEntryTable extends React.Component<
           </Grid>
           <Grid item>
             <Button
-              id="complete"
+              id={exitButtonId}
               type="submit"
               variant="contained"
               color={this.state.isReady ? "primary" : "secondary"}

diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry.tsx
@@ -7,6 +7,7 @@ import CancelConfirmDialog from "components/Buttons/CancelConfirmDialog";
 
 interface DeleteEntryProps {
   removeEntry: () => void;
+  buttonId: string;
   // confirmId is the translation id for the text of the delete confirmation popup;
   // if no confirmId is specified, then there is no popup
   // and deletion will happen when the button is pressed
@@ -35,7 +36,7 @@ export default function DeleteEntry(props: DeleteEntryProps) {
           tabIndex={-1}
           size="small"
           onClick={handleClick}
-          id={`word-delete-${props.wordId}`}
+          id={props.buttonId}
         >
           <Delete />
         </IconButton>

diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx
@@ -35,6 +35,7 @@ export class GlossWithSuggestions extends React.Component<
   render() {
     return (
       <Autocomplete
+        id={this.props.textFieldId}
         filterOptions={(options: unknown[]) =>
           options.length <= this.maxSuggestions
             ? options
@@ -58,7 +59,6 @@ export class GlossWithSuggestions extends React.Component<
         renderInput={(params) => (
           <TextField
             {...params}
-            id={this.props.textFieldId}
             fullWidth
             inputRef={this.props.glossInput}
             label={

diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx
@@ -26,6 +26,7 @@ export class VernWithSuggestions extends React.Component<
     return (
       <React.Fragment>
         <Autocomplete
+          id={this.props.textFieldId}
           freeSolo
           disabled={this.props.isDisabled}
           value={this.props.vernacular}
@@ -50,7 +51,6 @@ export class VernWithSuggestions extends React.Component<
           renderInput={(params) => (
             <TextField
               {...params}
-              id={this.props.textFieldId}
               fullWidth
               inputRef={this.props.vernInput}
               label={