add data-testid attributes for toggle state for improved testability

PalisadoesFoundation · Dec 16, 2024 · b9f0830 · b9f0830
1 parent 326226b
commit b9f0830
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/components/OrganizationScreen/OrganizationScreen.test.tsx b/src/components/OrganizationScreen/OrganizationScreen.test.tsx
@@ -81,17 +81,19 @@ describe('Testing OrganizationScreen', () => {
     fireEvent.click(closeButton);
 
     // Check for contract class after closing
-    expect(
-      screen.getByTestId('mainpageright').className.includes('expand'),
-    ).toBeTruthy();
+    expect(screen.getByTestId('mainpageright')).toHaveAttribute(
+      'data-expanded',
+      'true',
+    );
 
     const openButton = screen.getByTestId('openMenu');
     fireEvent.click(openButton);
 
     // Check for expand class after opening
-    expect(
-      screen.getByTestId('mainpageright').className.includes('contract'),
-    ).toBeTruthy();
+    expect(screen.getByTestId('mainpageright')).toHaveAttribute(
+      'data-expanded',
+      'false',
+    );
   });
 
   test('handles window resize', () => {

diff --git a/src/components/OrganizationScreen/OrganizationScreen.tsx b/src/components/OrganizationScreen/OrganizationScreen.tsx
@@ -146,6 +146,7 @@ const OrganizationScreen = (): JSX.Element => {
               : styles.contract
         } `}
         data-testid="mainpageright"
+        data-expanded={hideDrawer === null ? '' : hideDrawer ? 'true' : 'false'}
       >
         <div className="d-flex justify-content-between align-items-center">
           <div style={{ flex: 1 }}>