From 64e83f3cb6341f1f6deaf5600f1b9a0f5c5eb0fb Mon Sep 17 00:00:00 2001
From: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
Date: Tue, 10 May 2022 11:10:34 -0400
Subject: [PATCH] Test updates

Signed-off-by: Eric Voshall <6836155+ericvoshall@users.noreply.github.com>
---
 .changeset/short-jokes-applaud.md                  |  2 +-
 .../UserListPicker/UserListPicker.test.tsx         | 14 +++++---------
 .../components/UserListPicker/UserListPicker.tsx   |  2 +-
 .../src/components/CatalogTable/CatalogTable.tsx   |  6 +++---
 .../TemplateListPage/TemplateListPage.test.tsx     |  4 ++--
 5 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/.changeset/short-jokes-applaud.md b/.changeset/short-jokes-applaud.md
index 0bb1025f1b..2a833e591d 100644
--- a/.changeset/short-jokes-applaud.md
+++ b/.changeset/short-jokes-applaud.md
@@ -8,6 +8,6 @@ Accessibility updates:
 
 - Added `aria-label` to the `Select` component in `core-components`
 - Changed heading level used in the header of `Table` component in `core-components`
-- Added screenreader elements to describe default table `Action` buttons in `plugin-catalog`
+- Added screen reader elements to describe default table `Action` buttons in `plugin-catalog`
 - Wrapped the `EntityLifecyclePicker`, `EntityOwnerPicker`, `EntityTagPicker`, in `label` elements in `plugin-catalog-react`
 - Changed group name `Typography` component to `span` (from default `h6`), added `aria-label` to the `List` component, and `role` of `menuitem` to the container of the `MenuItem` component in `plugin-catalog-react`
diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx
index e008b1039c..3db2fab0fb 100644
--- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx
+++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx
@@ -167,7 +167,7 @@ describe('<UserListPicker />', () => {
 
     expect(
       getAllByRole('menuitem').map(({ textContent }) => textContent),
-    ).toEqual(['Owned', 'Starred', 'All']);
+    ).toEqual(['Owned 1', 'Starred 1', 'All 4']);
   });
 
   it('includes counts alongside each filter', async () => {
@@ -183,10 +183,8 @@ describe('<UserListPicker />', () => {
     // menuitem itself, so we pick off the next sibling.
     await waitFor(() => {
       expect(
-        getAllByRole('menuitem').map(
-          ({ nextSibling }) => nextSibling?.textContent,
-        ),
-      ).toEqual(['1', '1', '4']);
+        getAllByRole('menuitem').map(({ textContent }) => textContent),
+      ).toEqual(['Owned 1', 'Starred 1', 'All 4']);
     });
   });
 
@@ -206,10 +204,8 @@ describe('<UserListPicker />', () => {
 
     await waitFor(() => {
       expect(
-        getAllByRole('menuitem').map(
-          ({ nextSibling }) => nextSibling?.textContent,
-        ),
-      ).toEqual(['1', '0', '2']);
+        getAllByRole('menuitem').map(({ textContent }) => textContent),
+      ).toEqual(['Owned 1', 'Starred 0', 'All 2']);
     });
   });
 
diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
index f89bc5d227..e7c306e0d0 100644
--- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
+++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
@@ -267,7 +267,7 @@ export const UserListPicker = (props: UserListPickerProps) => {
                     </ListItemIcon>
                   )}
                   <ListItemText>
-                    <Typography variant="body1">{item.label}</Typography>
+                    <Typography variant="body1">{item.label} </Typography>
                   </ListItemText>
                   <ListItemSecondaryAction>
                     {filterCounts[item.id] ?? '-'}
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index ca47d3796a..94ae7c47f4 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -121,7 +121,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
       return {
         icon: () => (
           <>
-            <Typography variant="srOnly" title={title} />
+            <Typography variant="srOnly">{title}</Typography>
             <OpenInNew fontSize="small" />
           </>
         ),
@@ -140,7 +140,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
       return {
         icon: () => (
           <>
-            <Typography variant="srOnly" title={title} />
+            <Typography variant="srOnly">{title}</Typography>
             <Edit fontSize="small" />
           </>
         ),
@@ -160,7 +160,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         cellStyle: { paddingLeft: '1em' },
         icon: () => (
           <>
-            <Typography variant="srOnly" title={title} />
+            <Typography variant="srOnly">{title}</Typography>
             {isStarred ? <YellowStar /> : <StarBorder />}
           </>
         ),
diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx
index e8037e8f98..32c7a50ad3 100644
--- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx
+++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.test.tsx
@@ -88,8 +88,8 @@ describe('TemplateListPage', () => {
       { mountedRoutes: { '/': rootRouteRef } },
     );
 
-    expect(getByRole('menuitem', { name: 'All' })).toBeInTheDocument();
-    expect(getByRole('menuitem', { name: 'Starred' })).toBeInTheDocument();
+    expect(getByRole('menuitem', { name: 'All 0' })).toBeInTheDocument();
+    expect(getByRole('menuitem', { name: 'Starred 0' })).toBeInTheDocument();
   });
 
   it('should render the category picker', async () => {