test(sonar): add sample test for colors

Author: fernandatoledo

src/components/colors.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen, within } from '@testing-library/react-native';
+import React from 'react';
+
+import { colors } from '@/ui';
+
+import { Colors } from './colors';
+
+describe('Colors component', () => {
+  it('should render the Title component', () => {
+    render(<Colors />);
+    expect(screen.getByText('Colors')).toBeTruthy();
+  });
+
+  it('should render Color components for each color group', () => {
+    render(<Colors />);
+    const colorNames = Object.keys(colors) as (keyof typeof colors)[];
+
+    colorNames.forEach((name: keyof typeof colors) => {
+      if (typeof colors[name] !== 'string') {
+        const colorTextLabel = screen.getByText(name.toUpperCase());
+        expect(colorTextLabel).toBeTruthy();
+        const list = screen.getByTestId(`color-list-${name}`);
+
+        Object.entries(colors[name]).forEach(([color]) => {
+          within(list).getByText(color);
+        });
+      }
+    });
+  });
+});

src/components/colors.tsx

@@ -22,7 +22,7 @@ const Color = ({ name }: { name: ColorName }) => {
     return null;
   }
   return (
-    <View className="pt-2">
+    <View className="pt-2" testID={`color-list-${name}`}>
       <Text className="font-medium">{name.toUpperCase()}</Text>
       <View className="flex-row flex-wrap content-between justify-around ">
         {Object.entries(colors[name]).map(([key, value]) => {

src/core/use-theme-config.tsx

@@ -7,7 +7,7 @@ import { useColorScheme } from 'nativewind';
 
 import colors from '@/ui/colors';
 
-const DarkTheme: Theme = {
+export const DarkTheme: Theme = {
   ..._DarkTheme,
   colors: {
     ..._DarkTheme.colors,
@@ -19,7 +19,7 @@ const DarkTheme: Theme = {
   },
 };
 
-const LightTheme: Theme = {
+export const LightTheme: Theme = {
   ...DefaultTheme,
   colors: {
     ...DefaultTheme.colors,