WIP

web/src/pages/Patterns/details/pattern-details.tsx

@@ -16,15 +16,15 @@ export const PatternDetails: React.FC = () => {
     <VStack w="full" px="4" aria-label="hey" alignItems="flex-start">
       <Heading as="h2">{pattern.title}</Heading>
       <Text>{pattern.description}</Text>
-      <VStack w="full" justifyContent="center" spacing="2">
+      <VStack w="full" justifyContent="center" spacing="8">
         <VStack alignItems="flex-start">
-          <Text pl="8" mb="-4" fontWeight="bold">
+          <Text pl="8" fontWeight="bold">
             Implementaciones
           </Text>
           <Implementations patternId={pattern.id} />
         </VStack>
         <VStack alignItems="flex-start">
-          <Text pl="8" mb="-4" fontWeight="bold">
+          <Text pl="8" fontWeight="bold">
             Animaciones
           </Text>
           <Animations patternId={pattern.id} />

web/src/pages/Patterns/patterns.spec.tsx

 import * as RTL from '@redwoodjs/testing/web'
-
-import { Patterns } from '.'
+import { Patterns } from './patterns'
 
 describe('Patterns page', () => {
-  it('renders successfully', () => {
+  it('renders successfully', async () => {
     RTL.render(<Patterns />)
 
     RTL.screen.getByText('Patrones')
-    RTL.screen.getByText(/contenido de patrones/i)
+    // columns
+    RTL.screen.getByText(/titulo/i)
+    RTL.screen.getByText(/descripcion/i)
+    RTL.screen.getByText(/#implementaciones/i)
+
+    // rows
+    RTL.screen.getByText('API Gateway')
+    RTL.screen.getByText(/el patrón de gateway api/i)
+    RTL.screen.getByText('Orquestación de Microservicios')
+    RTL.screen.getByText(/este patrón implica la coordinación/i)
+    RTL.screen.getByText('Service Discovery')
+    RTL.screen.getByText(/en una arquitectura de microservicios/i)
+
+    // caption
+    RTL.screen.getByText('Patrones disponibles')
   })
 })

web/src/pages/Patterns/patterns.stories.tsx

 import type { StoryObj } from '@storybook/react'
-
-import { Patterns } from '.'
+import { Patterns } from './patterns'
 
 export default {
   component: Patterns,

web/src/pages/Patterns/patterns.tsx

@@ -43,9 +43,11 @@ export const Patterns = () => {
           <Tbody>
             {patterns.map((pattern, index) => (
               <Tr key={`pattern-${pattern.title}-${index}`}>
-                <Link to={routes.pattern({ id: pattern.id })}>
-                  <Td>{pattern.title}</Td>
-                </Link>
+                <Td>
+                  <Link to={routes.pattern({ id: pattern.id })}>
+                    {pattern.title}
+                  </Link>
+                </Td>
                 <Td>
                   <Tooltip label={pattern.description} hasArrow>
                     <Text isTruncated maxW="sm">

web/src/pages/home/home.spec.tsx

@@ -6,9 +6,9 @@ describe('Home page', () => {
   it('renders successfully', () => {
     RTL.render(<Home />)
 
-    RTL.screen.getByText(/welcome to my app/i)
+    RTL.screen.getByText(/Testing de Microservicios/i)
     RTL.screen.getByText(
-      /This is a simple example of how to add content to your app./i
+      /En este lugar se describe lo que hace la aplicacion, el objetivo del proyect, etc.../i
     )
   })
 })