chore: add sonarjs plugin for eslint

Author: fernandatoledo

.eslintrc.js

@@ -2,8 +2,12 @@ const path = require('path');
 
 module.exports = {
   // Configuration for JavaScript files
-  extends: ['@react-native-community', 'plugin:prettier/recommended'],
-  plugins: ['unicorn'],
+  extends: [
+    '@react-native-community',
+    'plugin:prettier/recommended',
+    'plugin:sonarjs/recommended-legacy',
+  ],
+  plugins: ['unicorn', 'sonarjs'],
   rules: {
     'prettier/prettier': [
       'error',

package.json

@@ -114,6 +114,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-i18n-json": "^4.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-sonarjs": "^1.0.4",
     "eslint-plugin-tailwindcss": "^3.15.2",
     "eslint-plugin-testing-library": "^6.2.2",
     "eslint-plugin-unicorn": "^46.0.1",

pnpm-lock.yaml

@@ -8,6 +8,7 @@ afterEach(cleanup);
 const onSubmitMock: jest.Mock<LoginFormProps['onSubmit']> = jest.fn();
 
 describe('LoginForm Form ', () => {
+  const LOGIN_BUTTON = 'login-button';
   it('renders correctly', async () => {
     render(<LoginForm />);
     expect(await screen.findByText(/Sign in/i)).toBeOnTheScreen();
@@ -16,7 +17,7 @@ describe('LoginForm Form ', () => {
   it('should display required error when values are empty', async () => {
     render(<LoginForm />);
 
-    const button = screen.getByTestId('login-button');
+    const button = screen.getByTestId(LOGIN_BUTTON);
     expect(screen.queryByText(/Email is required/i)).not.toBeOnTheScreen();
     fireEvent.press(button);
     expect(await screen.findByText(/Email is required/i)).toBeOnTheScreen();
@@ -26,7 +27,7 @@ describe('LoginForm Form ', () => {
   it('should display matching error when email is invalid', async () => {
     render(<LoginForm />);
 
-    const button = screen.getByTestId('login-button');
+    const button = screen.getByTestId(LOGIN_BUTTON);
     const emailInput = screen.getByTestId('email-input');
     const passwordInput = screen.getByTestId('password-input');
 
@@ -41,7 +42,7 @@ describe('LoginForm Form ', () => {
   it('Should call LoginForm with correct values when values are valid', async () => {
     render(<LoginForm onSubmit={onSubmitMock} />);
 
-    const button = screen.getByTestId('login-button');
+    const button = screen.getByTestId(LOGIN_BUTTON);
     const emailInput = screen.getByTestId('email-input');
     const passwordInput = screen.getByTestId('password-input');
 

src/components/login-form.test.tsx

@@ -4,6 +4,7 @@ import { ActivityIndicator, Pressable, Text } from 'react-native';
 import type { VariantProps } from 'tailwind-variants';
 import { tv } from 'tailwind-variants';
 
+const TEXT_WHITE = 'text-white';
 const button = tv({
   slots: {
     container: 'my-2 flex flex-row items-center justify-center rounded-md px-4',
@@ -21,7 +22,7 @@ const button = tv({
       secondary: {
         container: 'bg-primary-600',
         label: 'text-secondary-600',
-        indicator: 'text-white',
+        indicator: TEXT_WHITE,
       },
       outline: {
         container: 'border border-neutral-400',
@@ -30,8 +31,8 @@ const button = tv({
       },
       destructive: {
         container: 'bg-red-600',
-        label: 'text-white',
-        indicator: 'text-white',
+        label: TEXT_WHITE,
+        indicator: TEXT_WHITE,
       },
       ghost: {
         container: 'bg-transparent',

src/ui/button.tsx

@@ -8,6 +8,10 @@ import { Checkbox, Radio, Switch } from './checkbox';
 afterEach(cleanup);
 
 describe('Checkbox, Radio & Switch components ', () => {
+  const CHECKBOX_LABEL = 'checkbox-label';
+  const AGREE_TERMS = 'I agree to terms and conditions';
+  const RADIO_LABEL = 'radio-label';
+  const SWITCH_LABEL = 'switch-label';
   it('<Checkbox /> renders correctly and call on change on Press', () => {
     const mockOnChange = jest.fn((checked) => checked);
     render(
@@ -19,7 +23,7 @@ describe('Checkbox, Radio & Switch components ', () => {
       />
     );
     expect(screen.getByTestId('checkbox')).toBeOnTheScreen();
-    expect(screen.queryByTestId('checkbox-label')).not.toBeOnTheScreen();
+    expect(screen.queryByTestId(CHECKBOX_LABEL)).not.toBeOnTheScreen();
     expect(screen.getByTestId('checkbox')).toBeEnabled();
 
     expect(screen.getByTestId('checkbox')).not.toBeChecked();
@@ -64,7 +68,7 @@ describe('Checkbox, Radio & Switch components ', () => {
       />
     );
     expect(screen.getByTestId('checkbox')).toBeOnTheScreen();
-    expect(screen.getByTestId('checkbox-label')).toBeOnTheScreen();
+    expect(screen.getByTestId(CHECKBOX_LABEL)).toBeOnTheScreen();
     expect(
       screen.getByTestId('checkbox').props.accessibilityState.checked
     ).toBe(false);
@@ -75,9 +79,7 @@ describe('Checkbox, Radio & Switch components ', () => {
     expect(screen.getByTestId('checkbox').props.accessibilityLabel).toBe(
       'agree'
     );
-    expect(screen.getByTestId('checkbox-label')).toHaveTextContent(
-      'I agree to terms and conditions'
-    );
+    expect(screen.getByTestId(CHECKBOX_LABEL)).toHaveTextContent(AGREE_TERMS);
     fireEvent.press(screen.getByTestId('checkbox'));
     expect(mockOnChange).toHaveBeenCalledTimes(0);
   });
@@ -93,7 +95,7 @@ describe('Checkbox, Radio & Switch components ', () => {
       />
     );
     expect(screen.getByTestId('radio')).toBeOnTheScreen();
-    expect(screen.queryByTestId('radio-label')).not.toBeOnTheScreen();
+    expect(screen.queryByTestId(RADIO_LABEL)).not.toBeOnTheScreen();
     expect(screen.getByTestId('radio')).toBeEnabled();
     expect(screen.getByTestId('radio')).not.toBeChecked();
     expect(screen.getByTestId('radio').props.accessibilityRole).toBe('radio');
@@ -115,17 +117,15 @@ describe('Checkbox, Radio & Switch components ', () => {
       />
     );
     expect(screen.getByTestId('radio')).toBeOnTheScreen();
-    expect(screen.getByTestId('radio-label')).toBeOnTheScreen();
-    expect(screen.getByTestId('radio-label')).toHaveTextContent(
-      'I agree to terms and conditions'
-    );
+    expect(screen.getByTestId(RADIO_LABEL)).toBeOnTheScreen();
+    expect(screen.getByTestId(RADIO_LABEL)).toHaveTextContent(AGREE_TERMS);
 
     expect(screen.getByTestId('radio').props.accessibilityState.checked).toBe(
       false
     );
     expect(screen.getByTestId('radio').props.accessibilityRole).toBe('radio');
     expect(screen.getByTestId('radio').props.accessibilityLabel).toBe('agree');
-    fireEvent.press(screen.getByTestId('radio-label'));
+    fireEvent.press(screen.getByTestId(RADIO_LABEL));
     expect(mockOnChange).toHaveBeenCalledTimes(1);
     expect(mockOnChange).toHaveBeenCalledWith(true);
   });
@@ -158,7 +158,7 @@ describe('Checkbox, Radio & Switch components ', () => {
       />
     );
     expect(screen.getByTestId('switch')).toBeOnTheScreen();
-    expect(screen.queryByTestId('switch-label')).not.toBeOnTheScreen();
+    expect(screen.queryByTestId(SWITCH_LABEL)).not.toBeOnTheScreen();
     expect(screen.getByTestId('switch')).toBeEnabled();
     expect(screen.getByTestId('switch').props.accessibilityState.checked).toBe(
       false
@@ -182,16 +182,14 @@ describe('Checkbox, Radio & Switch components ', () => {
       />
     );
     expect(screen.getByTestId('switch')).toBeOnTheScreen();
-    expect(screen.getByTestId('switch-label')).toBeOnTheScreen();
-    expect(screen.getByTestId('switch-label')).toHaveTextContent(
-      'I agree to terms and conditions'
-    );
+    expect(screen.getByTestId(SWITCH_LABEL)).toBeOnTheScreen();
+    expect(screen.getByTestId(SWITCH_LABEL)).toHaveTextContent(AGREE_TERMS);
     expect(screen.getByTestId('switch').props.accessibilityState.checked).toBe(
       false
     );
     expect(screen.getByTestId('switch').props.accessibilityRole).toBe('switch');
     expect(screen.getByTestId('switch').props.accessibilityLabel).toBe('agree');
-    fireEvent.press(screen.getByTestId('switch-label'));
+    fireEvent.press(screen.getByTestId(SWITCH_LABEL));
     expect(mockOnChange).toHaveBeenCalledTimes(1);
     expect(mockOnChange).toHaveBeenCalledWith(true);
   });

src/ui/checkbox.test.tsx

@@ -8,6 +8,7 @@ import { Input } from './input';
 afterEach(cleanup);
 
 describe('Input component ', () => {
+  const INPUT_ERROR = 'input-error';
   it('renders correctly ', () => {
     render(<Input testID="input" />);
     expect(screen.getByTestId('input')).toBeOnTheScreen();
@@ -47,7 +48,7 @@ describe('Input component ', () => {
     render(<Input testID="input" error="This is an error message" />);
     expect(screen.getByTestId('input')).toBeOnTheScreen();
 
-    expect(screen.getByTestId('input-error')).toHaveTextContent(
+    expect(screen.getByTestId(INPUT_ERROR)).toHaveTextContent(
       'This is an error message'
     );
   });
@@ -63,8 +64,8 @@ describe('Input component ', () => {
     expect(screen.getByTestId('input')).toBeOnTheScreen();
 
     expect(screen.getByTestId('input-label')).toHaveTextContent('Username');
-    expect(screen.getByTestId('input-error')).toBeOnTheScreen();
-    expect(screen.getByTestId('input-error')).toHaveTextContent(
+    expect(screen.getByTestId(INPUT_ERROR)).toBeOnTheScreen();
+    expect(screen.getByTestId(INPUT_ERROR)).toHaveTextContent(
       'This is an error message'
     );
     expect(

src/ui/input.test.tsx

@@ -6,14 +6,15 @@ import type { ProgressBarRef } from './progress-bar';
 import { ProgressBar } from './progress-bar';
 
 describe('ProgressBar component', () => {
+  const PROGRESS_BAR = 'progress-bar';
   it('renders correctly', () => {
     render(<ProgressBar className="custom-class" />);
     expect(screen.getByTestId('progress-bar-container')).toBeTruthy();
   });
 
   it('sets initial progress correctly', () => {
     render(<ProgressBar initialProgress={50} />);
-    const progressBar = screen.getByTestId('progress-bar');
+    const progressBar = screen.getByTestId(PROGRESS_BAR);
     expect(progressBar.props.style).toEqual(
       expect.objectContaining({ width: '50%' })
     );
@@ -24,15 +25,15 @@ describe('ProgressBar component', () => {
     const progressAnimationDuration = 250;
     const ref = createRef<ProgressBarRef>();
     render(<ProgressBar ref={ref} initialProgress={0} />);
-    const progressBar = screen.getByTestId('progress-bar');
+    const progressBar = screen.getByTestId(PROGRESS_BAR);
 
     // Call setProgress and check the updated value
     if (ref.current) {
       expect(getAnimatedStyle(progressBar)).toMatchObject({ width: '0%' });
       jest.useFakeTimers();
       ref.current.setProgress(finalValue);
       jest.advanceTimersByTime(progressAnimationDuration); // Duration of the animation
-      const updatedProgressBar = await screen.findByTestId('progress-bar');
+      const updatedProgressBar = await screen.findByTestId(PROGRESS_BAR);
       expect(getAnimatedStyle(updatedProgressBar)).toMatchObject({
         width: `${finalValue}%`,
       });