From 2e3ec677801b92fda7fcd7538ae35195cf19e49e Mon Sep 17 00:00:00 2001
From: Elena Bitire <elena@obytes.com>
Date: Wed, 13 Mar 2024 16:59:26 +0200
Subject: [PATCH] refactor: refactor tests

---
 src/ui/button.test.tsx   | 18 +++++++---------
 src/ui/checkbox.test.tsx | 44 +++++++++++++++++++---------------------
 src/ui/input.test.tsx    | 14 ++++++-------
 src/ui/select.test.tsx   |  4 ++--
 4 files changed, 37 insertions(+), 43 deletions(-)

diff --git a/src/ui/button.test.tsx b/src/ui/button.test.tsx
index 9ca5d43e..875033cd 100644
--- a/src/ui/button.test.tsx
+++ b/src/ui/button.test.tsx
@@ -9,7 +9,7 @@ afterEach(cleanup);
 
 describe('Button component ', () => {
   it('should render correctly ', () => {
-    render(<Button testID="button" />);
+    render(<Button testID="button" disabled={false} />);
     expect(screen.getByTestId('button')).toBeOnTheScreen();
   });
   it('should render the label correctly', () => {
@@ -22,7 +22,7 @@ describe('Button component ', () => {
     expect(screen.getByTestId('button')).toBeOnTheScreen();
     expect(screen.getByTestId('button-activity-indicator')).toBeOnTheScreen();
   });
-  it('should call onClick handler when clicked', async () => {
+  it('should call onClick handler when clicked', () => {
     const onClick = jest.fn();
     render(
       <Button testID="button" label="Click the button" onPress={onClick} />
@@ -43,17 +43,13 @@ describe('Button component ', () => {
     );
     expect(screen.getByTestId('button')).toBeOnTheScreen();
     expect(screen.getByTestId('button-activity-indicator')).toBeOnTheScreen();
-    expect(screen.getByTestId('button').props.accessibilityState.disabled).toBe(
-      true
-    );
+    expect(screen.getByTestId('button')).toBeDisabled();
     fireEvent.press(screen.getByTestId('button'));
     expect(onClick).toHaveBeenCalledTimes(0);
   });
   it('should be disabled when disabled prop is true', () => {
     render(<Button testID="button" disabled={true} />);
-    expect(screen.getByTestId('button').props.accessibilityState.disabled).toBe(
-      true
-    );
+    expect(screen.getByTestId('button')).toBeDisabled();
   });
   it("shouldn't call onClick when disabled", () => {
     const onClick = jest.fn();
@@ -68,9 +64,9 @@ describe('Button component ', () => {
     );
     expect(screen.getByTestId('button')).toBeOnTheScreen();
     fireEvent.press(screen.getByTestId('button'));
-    expect(screen.getByTestId('button').props.accessibilityState.disabled).toBe(
-      true
-    );
+
+    expect(screen.getByTestId('button')).toBeDisabled();
+
     expect(onClick).toHaveBeenCalledTimes(0);
   });
   it('should apply correct styles based on size prop', () => {
diff --git a/src/ui/checkbox.test.tsx b/src/ui/checkbox.test.tsx
index 86cfacb8..64acb4f0 100644
--- a/src/ui/checkbox.test.tsx
+++ b/src/ui/checkbox.test.tsx
@@ -10,7 +10,7 @@ import { Checkbox, Radio, Switch } from './checkbox';
 afterEach(cleanup);
 
 describe('Checkbox, Radio & Switch components ', () => {
-  it('<Checkbox /> renders correctly and call on change on Press', async () => {
+  it('<Checkbox /> renders correctly and call on change on Press', () => {
     const mockOnChange = jest.fn((checked) => checked);
     render(
       <Checkbox
@@ -22,9 +22,9 @@ describe('Checkbox, Radio & Switch components ', () => {
     );
     expect(screen.getByTestId('checkbox')).toBeOnTheScreen();
     expect(screen.queryByTestId('checkbox-label')).not.toBeOnTheScreen();
-    expect(
-      screen.getByTestId('checkbox').props.accessibilityState.checked
-    ).toBe(false);
+    expect(screen.getByTestId('checkbox')).toBeEnabled();
+
+    expect(screen.getByTestId('checkbox')).not.toBeChecked();
     expect(screen.getByTestId('checkbox').props.accessibilityRole).toBe(
       'checkbox'
     );
@@ -37,7 +37,7 @@ describe('Checkbox, Radio & Switch components ', () => {
     expect(mockOnChange).toHaveBeenCalledWith(true);
   });
 
-  it("<CheckBox/> shouldn't change value while disabled", async () => {
+  it("<CheckBox/> shouldn't change value while disabled", () => {
     const mockOnChange = jest.fn((checked) => checked);
     render(
       <Checkbox
@@ -49,11 +49,11 @@ describe('Checkbox, Radio & Switch components ', () => {
       />
     );
     expect(screen.getByTestId('checkbox')).toBeOnTheScreen();
-
+    expect(screen.getByTestId('checkbox')).toBeDisabled();
     fireEvent.press(screen.getByTestId('checkbox'));
     expect(mockOnChange).toHaveBeenCalledTimes(0);
   });
-  it('<CheckBox/> Should render the correct label', async () => {
+  it('<CheckBox/> Should render the correct label', () => {
     const mockOnChange = jest.fn((checked) => checked);
     render(
       <Checkbox
@@ -73,18 +73,18 @@ describe('Checkbox, Radio & Switch components ', () => {
     expect(screen.getByTestId('checkbox').props.accessibilityRole).toBe(
       'checkbox'
     );
+
     expect(screen.getByTestId('checkbox').props.accessibilityLabel).toBe(
       'agree'
     );
-
-    expect(screen.getByTestId('checkbox-label')?.props.children).toBe(
+    expect(screen.getByTestId('checkbox-label')).toHaveTextContent(
       'I agree to terms and conditions'
     );
     fireEvent.press(screen.getByTestId('checkbox'));
     expect(mockOnChange).toHaveBeenCalledTimes(0);
   });
 
-  it('<Radio /> renders correctly and call on change on Press', async () => {
+  it('<Radio /> renders correctly and call on change on Press', () => {
     const mockOnChange = jest.fn((checked) => checked);
     render(
       <Radio
@@ -96,10 +96,8 @@ describe('Checkbox, Radio & Switch components ', () => {
     );
     expect(screen.getByTestId('radio')).toBeOnTheScreen();
     expect(screen.queryByTestId('radio-label')).not.toBeOnTheScreen();
-
-    expect(screen.getByTestId('radio').props.accessibilityState.checked).toBe(
-      false
-    );
+    expect(screen.getByTestId('radio')).toBeEnabled();
+    expect(screen.getByTestId('radio')).not.toBeChecked();
     expect(screen.getByTestId('radio').props.accessibilityRole).toBe('radio');
     expect(screen.getByTestId('radio').props.accessibilityLabel).toBe('agree');
     fireEvent.press(screen.getByTestId('radio'));
@@ -107,7 +105,7 @@ describe('Checkbox, Radio & Switch components ', () => {
     expect(mockOnChange).toHaveBeenCalledWith(true);
   });
 
-  it('<Radio /> should render the correct label', async () => {
+  it('<Radio /> should render the correct label', () => {
     const mockOnChange = jest.fn((checked) => checked);
     render(
       <Radio
@@ -120,7 +118,7 @@ describe('Checkbox, Radio & Switch components ', () => {
     );
     expect(screen.getByTestId('radio')).toBeOnTheScreen();
     expect(screen.getByTestId('radio-label')).toBeOnTheScreen();
-    expect(screen.getByTestId('radio-label')?.props.children).toBe(
+    expect(screen.getByTestId('radio-label')).toHaveTextContent(
       'I agree to terms and conditions'
     );
 
@@ -134,7 +132,7 @@ describe('Checkbox, Radio & Switch components ', () => {
     expect(mockOnChange).toHaveBeenCalledWith(true);
   });
 
-  it("<Radio/> shouldn't change value while disabled", async () => {
+  it("<Radio/> shouldn't change value while disabled", () => {
     const mockOnChange = jest.fn((checked) => checked);
     render(
       <Radio
@@ -146,12 +144,12 @@ describe('Checkbox, Radio & Switch components ', () => {
       />
     );
     expect(screen.getByTestId('radio')).toBeOnTheScreen();
-
+    expect(screen.getByTestId('radio')).toBeDisabled();
     fireEvent.press(screen.getByTestId('radio'));
     expect(mockOnChange).toHaveBeenCalledTimes(0);
   });
 
-  it('<Switch /> renders correctly and call on change on Press', async () => {
+  it('<Switch /> renders correctly and call on change on Press', () => {
     const mockOnChange = jest.fn((checked) => checked);
     render(
       <Switch
@@ -163,7 +161,7 @@ describe('Checkbox, Radio & Switch components ', () => {
     );
     expect(screen.getByTestId('switch')).toBeOnTheScreen();
     expect(screen.queryByTestId('switch-label')).not.toBeOnTheScreen();
-
+    expect(screen.getByTestId('switch')).toBeEnabled();
     expect(screen.getByTestId('switch').props.accessibilityState.checked).toBe(
       false
     );
@@ -174,7 +172,7 @@ describe('Checkbox, Radio & Switch components ', () => {
     expect(mockOnChange).toHaveBeenCalledWith(true);
   });
 
-  it('<Switch /> should render the correct label', async () => {
+  it('<Switch /> should render the correct label', () => {
     const mockOnChange = jest.fn((checked) => checked);
     render(
       <Switch
@@ -187,7 +185,7 @@ describe('Checkbox, Radio & Switch components ', () => {
     );
     expect(screen.getByTestId('switch')).toBeOnTheScreen();
     expect(screen.getByTestId('switch-label')).toBeOnTheScreen();
-    expect(screen.getByTestId('switch-label')?.props.children).toBe(
+    expect(screen.getByTestId('switch-label')).toHaveTextContent(
       'I agree to terms and conditions'
     );
     expect(screen.getByTestId('switch').props.accessibilityState.checked).toBe(
@@ -200,7 +198,7 @@ describe('Checkbox, Radio & Switch components ', () => {
     expect(mockOnChange).toHaveBeenCalledWith(true);
   });
 
-  it("<Switch/> shouldn't change value while disabled", async () => {
+  it("<Switch/> shouldn't change value while disabled", () => {
     const mockOnChange = jest.fn((checked) => checked);
     render(
       <Switch
diff --git a/src/ui/input.test.tsx b/src/ui/input.test.tsx
index d7e5b8d2..565db139 100644
--- a/src/ui/input.test.tsx
+++ b/src/ui/input.test.tsx
@@ -24,15 +24,15 @@ describe('Input component ', () => {
   it('should render the label correctly ', () => {
     render(<Input testID="input" label="Username" />);
     expect(screen.getByTestId('input')).toBeOnTheScreen();
-    expect(screen.getByTestId('input-label')).toBeOnTheScreen();
-    expect(screen.getByTestId('input-label')?.props.children).toBe('Username');
+
+    expect(screen.getByTestId('input-label')).toHaveTextContent('Username');
   });
 
   it('should render the error message correctly ', () => {
     render(<Input testID="input" error="This is an error message" />);
     expect(screen.getByTestId('input')).toBeOnTheScreen();
-    expect(screen.getByTestId('input-error')).toBeOnTheScreen();
-    expect(screen.getByTestId('input-error')?.props.children).toBe(
+
+    expect(screen.getByTestId('input-error')).toHaveTextContent(
       'This is an error message'
     );
   });
@@ -46,10 +46,10 @@ describe('Input component ', () => {
       />
     );
     expect(screen.getByTestId('input')).toBeOnTheScreen();
-    expect(screen.getByTestId('input-label')).toBeOnTheScreen();
-    expect(screen.getByTestId('input-label')?.props.children).toBe('Username');
+
+    expect(screen.getByTestId('input-label')).toHaveTextContent('Username');
     expect(screen.getByTestId('input-error')).toBeOnTheScreen();
-    expect(screen.getByTestId('input-error')?.props.children).toBe(
+    expect(screen.getByTestId('input-error')).toHaveTextContent(
       'This is an error message'
     );
     expect(
diff --git a/src/ui/select.test.tsx b/src/ui/select.test.tsx
index d65c6c44..c2f21130 100644
--- a/src/ui/select.test.tsx
+++ b/src/ui/select.test.tsx
@@ -40,7 +40,7 @@ describe('Select component ', () => {
     );
     expect(screen.getByTestId('select-trigger')).toBeOnTheScreen();
     expect(screen.getByTestId('select-label')).toBeOnTheScreen();
-    expect(screen.getByTestId('select-label')?.props.children).toBe('Select');
+    expect(screen.getByTestId('select-label')).toHaveTextContent('Select');
   });
 
   it('should render the error correctly ', () => {
@@ -56,7 +56,7 @@ describe('Select component ', () => {
     );
     expect(screen.getByTestId('select-trigger')).toBeOnTheScreen();
     expect(screen.getByTestId('select-error')).toBeOnTheScreen();
-    expect(screen.getByTestId('select-error')?.props.children).toBe(
+    expect(screen.getByTestId('select-error')).toHaveTextContent(
       'Please select an option'
     );
   });