[FE][BUG] Check Button.test in stroybook not passing tests, button wh…

…en render is active? (#1100) * test changes * Changelog and packages.json * ButtonTest * spaced-comment * change test * DeleteFrontMetadata
IT-Academy-BCN · Apr 4, 2024 · ca6f7f8 · ca6f7f8
1 parent e8ca51a
commit ca6f7f8
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 17 deletions.
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.31.1] - 2024-04-03
+
+### Fixed
+
+- Fix test Button
+
 ## [0.31.0] - 2024-03-22
 
 ### Added

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@itacademy/ui",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "description": "React FE components for ITAcademy projects.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.es.js",

diff --git a/packages/ui/src/__tests__/atoms/Button.test.tsx b/packages/ui/src/__tests__/atoms/Button.test.tsx
@@ -1,27 +1,30 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
 import { dimensions, colors } from '../../styles'
 import {Button} from '../../components/atoms/Button'
 
 const mockClick = vi.fn()
 
 describe('Button', () => {
-    it('renders correctly',async () => {
+    it('renders correctly', async () => {
         render(
             <Button data-testid="button" onClick={mockClick}>
                 Test text
             </Button>
         )
+
         const button = screen.getByTestId('button')
-        // TODO
-        //  comprobar errores en los estilos que se renderiza con el btn active
         expect(button).toBeInTheDocument()
-        expect(screen.getByText('Test text')).toBeInTheDocument()
-        expect(button).toHaveStyle(`border-radius: ${dimensions.borderRadius.base}`)
-        expect(button).toHaveStyle(`padding: ${dimensions.spacing.base}`)
-        // expect(button).toHaveStyle(`background-color: ${colors.primary}`)
-        expect(button).toHaveStyle(`color: ${colors.white}`)
-        expect(button).toHaveStyle('cursor: pointer')
+
+        // NOTE: WaitFor is needed to wait for the styles to be applied
+        waitFor(() => {
+            expect(screen.getByText('Test text')).toBeInTheDocument()
+            expect(button).toHaveStyle(`border-radius: ${dimensions.borderRadius.base}`)
+            expect(button).toHaveStyle(`padding: ${dimensions.spacing.base}`)
+            expect(button).toHaveStyle(`background-color: ${colors.primary}`)
+            expect(button).toHaveStyle(`color: ${colors.white}`)
+            expect(button).toHaveStyle('cursor: pointer')
+        })
 
         fireEvent.click(button)
         expect(mockClick).toHaveBeenCalled()
@@ -35,9 +38,12 @@ describe('Button', () => {
         )
         const button = screen.getByTestId('button')
 
-        // expect(button).toHaveStyle(`background-color: ${colors.secondary}`)
-        // expect(button).toHaveStyle(`border: 2px solid ${colors.secondary}`)
-        expect(button).toHaveStyle(`color: ${colors.white}`)
+        // NOTE: WaitFor is needed to wait for the styles to be applied
+        waitFor(() =>{
+            expect(button).toHaveStyle(`background-color: ${colors.secondary}`)
+            expect(button).toHaveStyle(`border: 2px solid ${colors.secondary}`)
+            expect(button).toHaveStyle(`color: ${colors.white}`)
+        })
     })
 
     it('renders correctly with outline', () => {
@@ -48,8 +54,11 @@ describe('Button', () => {
         )
         const button = screen.getByTestId('button')
 
-        // expect(button).toHaveStyle(`background-color: ${colors.white}`)
-        // expect(button).toHaveStyle(`border: 2px solid ${colors.gray.gray4}`)
-        expect(button).toHaveStyle(`color: ${colors.gray.gray2}`)
+        // NOTE: WaitFor is needed to wait for the styles to be applied
+        waitFor(() =>{
+            expect(button).toHaveStyle(`background-color: ${colors.white}`)
+            expect(button).toHaveStyle(`border: 2px solid ${colors.gray.gray4}`)
+            expect(button).toHaveStyle(`color: ${colors.gray.gray2}`)
+        })
     })
 })
diff --git a/packages/ui/src/components/atoms/Button.tsx b/packages/ui/src/components/atoms/Button.tsx
@@ -45,6 +45,7 @@ const StyledButton = styled('button').withConfig<TButton>({
     `
         background-color: ${colors.secondary};
         border: 2px solid ${colors.secondary};
+        
         &:hover {
             background-color: ${colors.secondaryDark};
             border: 2px solid ${colors.secondaryDark};
@@ -66,6 +67,7 @@ const StyledButton = styled('button').withConfig<TButton>({
         background-color: ${colors.white};
         color: ${colors.gray.gray2};
         border: 2px solid ${colors.gray.gray4};
+
         &:hover {
             background-color: ${colors.outlineHover};
         }