test: refactor test to render component inside

.github/workflows/test.yaml

@@ -35,7 +35,8 @@ jobs:
       - name: setup yarn
         run: |
           yarn install --frozen-lockfile --check-files
-          yarn bootstrap
+          npx lerna bootstrap
+          find . -name ".env.example" | sed "p;s/\.example//" | xargs -n2 cp -f
       - name: Start test env
         timeout-minutes: 1
         run: |

packages/features/package.json

@@ -7,6 +7,7 @@
   "author": "Diego Barahona <diestrin@gmail.com>",
   "license": "ISC",
   "dependencies": {
+    "@pact-foundation/pact": "^10.1.2",
     "jest-cucumber": "^3.0.1"
   }
 }

packages/features/src/index.js

@@ -1,5 +1,5 @@
 import { join, resolve } from 'path'
-// import { PactV3 } from '@pact-foundation/pact/v3';
+import { Pact } from '@pact-foundation/pact'
 import { loadFeature as _loadFeature, defineFeature } from 'jest-cucumber'
 
 export const storyRegex = /(A\d+)\/(T\d+)\/(S\d+)/
@@ -11,29 +11,26 @@ export const userStoryId =
   ).match(storyRegex) || [])[0] || ''
 console.log('USER_STORY_ID', userStoryId)
 
-// const consumer = process.env.PACT_CONSUMER || '';
-// console.log('PACT_CONSUMER', consumer);
+const consumer = process.env.PACT_CONSUMER || 'consumer'
+console.log('PACT_CONSUMER', consumer)
 
-// const provider = process.env.PACT_PROVIDER || '';
-// console.log('PACT_PROVIDER', provider);
+const provider = process.env.PACT_PROVIDER || 'provider'
+console.log('PACT_PROVIDER', provider)
 
-// const pactFolder =
-//   process.env.PACT_FOLDER ||
-//   resolve(
-//     __dirname,
-//     '../../../pacts',
-//     userStoryId ? `features/${userStoryId}` : ''
-//   );
-// console.log('PACT_FOLDER', pactFolder);
+const pactFolder =
+  process.env.PACT_FOLDER ||
+  resolve(__dirname, '../pacts', userStoryId ? `features/${userStoryId}` : '')
+console.log('PACT_FOLDER', pactFolder)
 
-// export const pact = new PactV3({
-//   dir: pactFolder,
-//   consumer,
-//   provider,
-// });
+export const pact = new Pact({
+  port: 1337,
+  dir: pactFolder,
+  consumer,
+  provider,
+})
 
 export { defineFeature, DefineStepFunction } from 'jest-cucumber'
-// export { MatchersV3 } from '@pact-foundation/pact/v3';
+export { Matchers, GraphQLInteraction } from '@pact-foundation/pact'
 
 export const loadFeature = (feature, options) => {
   return _loadFeature(
@@ -84,18 +81,27 @@ export const define = (story, options) => {
           // Get a new context for each test
           let testContext = {
             $id: `${story.id.replace(/\//g, '.')}.${ruleId}.${exampleId}`,
-            // $pact: pact,
+            $pact: pact,
             $operators: operators,
           }
 
           if (example.context) {
             testContext = example.context(testContext)
           }
 
-          example.beforeAll && beforeAll(example.beforeAll)
+          beforeAll(async () => {
+            example.beforeAll && (await example.beforeAll())
+            await pact.setup()
+          })
           example.beforeEach && beforeEach(example.beforeEach)
-          example.afterEach && afterEach(example.afterEach)
-          example.afterAll && afterAll(example.afterAll)
+          afterEach(async () => {
+            example.afterEach && (await example.afterEach())
+            await pact.finalize()
+          })
+          afterAll(async () => {
+            example.afterAll && (await example.afterAll())
+            await pact.verify()
+          })
 
           for (let step of example.steps) {
             step(testContext)

packages/web/src/lib/api.js

@@ -1,13 +1,16 @@
-const strapiApiUrl = process.env.STRAPI_API_URL || 'http://localhost:1337'
+let strapiApiUrl = process.env.STRAPI_API_URL || 'http://localhost:1337'
 const strapiApiToken =
   process.env.STRAPI_API_TOKEN ||
   'a5d383194f6a3b685c684a5eb9acd43617b0635cd3003c07fffe4d93d2486e1cf6c9cb9d31c1a74384ff04c9c7527fbd2319828b816f03e74bc3a38ad8e7b981cda5a3fe8472619e0375ce5bc0a48e3b6f005d25cc01c9a9d5772844be1df60de9ab609dcbcd03d185a39e233ceff6f4a5fe8c1deb8abc97d83eb303445076ca'
 
+export const mockApiUrl = (url) => (strapiApiUrl = url)
+
 export const fetchApi = async (query, { variables = {} } = {}) => {
   const rawRes = await fetch(`${strapiApiUrl}/graphql`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
+      'Http-Origin': 'localhost',
       ...(strapiApiToken ? { Authorization: `Bearer ${strapiApiToken}` } : {}),
     },
     body: JSON.stringify({

packages/web/src/tests/A02/T01/S01.spec.js

@@ -1,4 +1,3 @@
-import { render } from '@testing-library/react'
 import { runSuite } from 'features'
 
 import {
@@ -7,7 +6,6 @@ import {
   thenUserCanSeeTask,
   whenUserEntersTaskName,
 } from '../../steps'
-import App from '../../../App'
 
 runSuite([
   {
@@ -19,14 +17,11 @@ runSuite([
             title: `Usuario ingresa al sitio, navega al formulario de creación de tareas, e ingresa el nombre de la tarea`,
             steps: [
               givenUserNavigates,
+
               whenUserEntersTaskName,
               andUserSubmitsForm,
               thenUserCanSeeTask,
             ],
-            context: (ctx) => ({
-              ...ctx,
-              component: render(<App />, {}),
-            }),
           },
         },
       },

packages/web/src/tests/steps/given-user-navigates.js

@@ -1,13 +1,44 @@
-import { screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 
-const caseRegex = /a user navigates to the "([^"]+)" (form)/
+import { Matchers, GraphQLInteraction } from 'features'
+import App from '../../App'
+// import { mockApiUrl } from '../../lib/api'
+import { QUERY_ALL_TASKS } from '../../data/queries'
 
-const caseHandler = async (itemName, itemType) => {
-  expect(
-    await screen.getByRole(itemType, { name: itemName })
-  ).toBeInTheDocument()
-}
+const { eachLike } = Matchers
+
+const caseRegex = /a user navigates to the "([^"]+)" (form)/
 
 export const givenUserNavigates = (ctx) => {
+  const caseHandler = async (itemName, itemType) => {
+    ctx.$pact.addInteraction(
+      new GraphQLInteraction()
+        // .given('a new user')
+        .uponReceiving(`a requests for tasks (id:${ctx.id})`)
+        .withRequest({
+          method: 'POST',
+          path: '/graphql',
+        })
+        .withQuery(QUERY_ALL_TASKS)
+        .willRespondWith({
+          body: {
+            data: {
+              tasks: eachLike({}),
+            },
+          },
+          status: 200,
+          headers: {
+            'Content-Type': 'application/json; charset=utf-8',
+          },
+        })
+    )
+
+    ctx.component = render(<App />, {})
+
+    expect(
+      await screen.getByRole(itemType, { name: itemName })
+    ).toBeInTheDocument()
+  }
+
   ctx.$operators.given(caseRegex, caseHandler)
 }