refactor: refactor button tests

Author: yjose

src/ui/button.test.tsx

@@ -1,91 +1,90 @@
 /* eslint-disable max-lines-per-function */
 import React from 'react';
 
-import { cleanup, fireEvent, render, screen, waitFor } from '@/core/test-utils';
+import { cleanup, fireEvent, render, screen } from '@/core/test-utils';
 
 import { Button } from './button';
 
 afterEach(cleanup);
 
 describe('Button component ', () => {
   it('should render correctly ', () => {
-    render(<Button testID="test-button" />);
-    expect(screen.queryByTestId('test-button')).not.toBeNull();
+    render(<Button testID="button" />);
+    expect(screen.getByTestId('button')).toBeOnTheScreen();
   });
   it('should render the label correctly', () => {
-    render(<Button testID="test-button" label="Submit" />);
-    expect(screen.queryByTestId('test-button')).not.toBeNull();
-    expect(screen.queryByTestId('test-button-label')).not.toBeNull();
-    expect(screen.queryByText('Submit')).toBeTruthy();
+    render(<Button testID="button" label="Submit" />);
+    expect(screen.getByTestId('button')).toBeOnTheScreen();
+    expect(screen.getByText('Submit')).toBeOnTheScreen();
   });
   it('should render the loading indicator correctly', () => {
-    render(<Button testID="test-button" loading={true} />);
-    expect(screen.queryByTestId('test-button')).not.toBeNull();
-    expect(screen.getByTestId('test-button-activity-indicator')).not.toBeNull();
+    render(<Button testID="button" loading={true} />);
+    expect(screen.getByTestId('button')).toBeOnTheScreen();
+    expect(screen.getByTestId('button-activity-indicator')).toBeOnTheScreen();
   });
   it('should call onClick handler when clicked', async () => {
     const onClick = jest.fn();
     render(
-      <Button testID="test-button" label="Click the button" onPress={onClick} />
+      <Button testID="button" label="Click the button" onPress={onClick} />
     );
-    expect(screen.queryByTestId('test-button')).not.toBeNull();
-    fireEvent.press(screen.getByTestId('test-button'));
-    await waitFor(() => expect(onClick).toHaveBeenCalledTimes(1));
+    expect(screen.getByTestId('button')).toBeOnTheScreen();
+    fireEvent.press(screen.getByTestId('button'));
+    expect(onClick).toHaveBeenCalledTimes(1);
   });
   it('should be disabled when loading', () => {
     const onClick = jest.fn();
     render(
       <Button
-        testID="test-button"
+        testID="button"
         loading={true}
         label="Click the button"
         onPress={onClick}
       />
     );
-    expect(screen.queryByTestId('test-button')).not.toBeNull();
-    expect(screen.getByTestId('test-button-activity-indicator')).not.toBeNull();
-    expect(
-      screen.getByTestId('test-button').props.accessibilityState.disabled
-    ).toBe(true);
-    fireEvent.press(screen.getByTestId('test-button'));
+    expect(screen.getByTestId('button')).toBeOnTheScreen();
+    expect(screen.getByTestId('button-activity-indicator')).toBeOnTheScreen();
+    expect(screen.getByTestId('button').props.accessibilityState.disabled).toBe(
+      true
+    );
+    fireEvent.press(screen.getByTestId('button'));
     expect(onClick).toHaveBeenCalledTimes(0);
   });
   it('should be disabled when disabled prop is true', () => {
-    render(<Button testID="test-button" disabled={true} />);
-    expect(
-      screen.getByTestId('test-button').props.accessibilityState.disabled
-    ).toBe(true);
+    render(<Button testID="button" disabled={true} />);
+    expect(screen.getByTestId('button').props.accessibilityState.disabled).toBe(
+      true
+    );
   });
   it("shouldn't call onClick when disabled", () => {
     const onClick = jest.fn();
     render(
       <Button
-        testID="test-button"
+        testID="button"
         label="Click the button"
         disabled={true}
         onPress={onClick}
         variant="secondary"
       />
     );
-    expect(screen.queryByTestId('test-button')).not.toBeNull();
-    fireEvent.press(screen.getByTestId('test-button'));
-    expect(
-      screen.getByTestId('test-button').props.accessibilityState.disabled
-    ).toBe(true);
+    expect(screen.getByTestId('button')).not.toBeNull();
+    fireEvent.press(screen.getByTestId('button'));
+    expect(screen.getByTestId('button').props.accessibilityState.disabled).toBe(
+      true
+    );
     expect(onClick).toHaveBeenCalledTimes(0);
   });
   it('should apply correct styles based on size prop', () => {
-    render(<Button testID="test-button" size="lg" />);
-    const button = screen.getByTestId('test-button');
-
+    render(<Button testID="button" size="lg" />);
+    const button = screen.getByTestId('button');
+    // TODO: should be fixed to use haveStyle instead of comparing the class name
     const expectedStyle = 'font-[600] font-jakarta text-white text-xl';
     const receivedStyle =
       button.props.children[0].props.children.props.className;
     expect(receivedStyle).toContain(expectedStyle);
   });
   it('should apply correct styles for label when variant is secondary', () => {
-    render(<Button testID="test-button" variant="secondary" label="Submit" />);
-    const button = screen.getByTestId('test-button');
+    render(<Button testID="button" variant="secondary" label="Submit" />);
+    const button = screen.getByTestId('button');
 
     const expectedStyle =
       'font-[600] font-jakarta text-secondary-600 text-base';
@@ -94,8 +93,8 @@ describe('Button component ', () => {
     expect(receivedStyle).toContain(expectedStyle);
   });
   it('should apply correct styles for label when is disabled', () => {
-    render(<Button testID="test-button" label="Submit" disabled />);
-    const button = screen.getByTestId('test-button');
+    render(<Button testID="button" label="Submit" disabled />);
+    const button = screen.getByTestId('button');
 
     const expectedStyle = 'font-[600] font-jakarta text-base text-neutral-600';
     const receivedStyle =

src/ui/button.tsx

@@ -100,8 +100,8 @@ export const Button = React.forwardRef<View, Props>(
       disabled = false,
       size = 'default',
       className = '',
+      testID,
       textClassName = '',
-      testID = 'button',
       ...props
     },
     ref
@@ -110,6 +110,7 @@ export const Button = React.forwardRef<View, Props>(
       () => button({ variant, disabled, size }),
       [variant, disabled, size]
     );
+
     return (
       <Pressable
         disabled={disabled || loading}
@@ -126,11 +127,11 @@ export const Button = React.forwardRef<View, Props>(
               <ActivityIndicator
                 size="small"
                 className={styles.indicator()}
-                testID={`${testID}-activity-indicator`}
+                testID={testID ? `${testID}-activity-indicator` : undefined}
               />
             ) : (
               <Text
-                testID={`${testID}-label`}
+                testID={testID ? `${testID}-label` : undefined}
                 className={styles.label({ className: textClassName })}
               >
                 {text}