Gherkin by Scot3004 · Pull Request #167 · secorto/secorto_web

Scot3004 · 2026-06-01T05:39:37Z

Pull request

Closes #164

Observaciones

Se actualiza el diseño completo de las pruebas a verbos Given When Then
Se introduce un nuevo ADR especificando la nueva forma de hacer las pruebas

work project community details and list view

dado que ya se valida en otro test

bolt-new-by-stackblitz · 2026-06-01T05:39:49Z

Run & review this pull request in StackBlitz Codeflow.

netlify · 2026-06-01T05:39:51Z

✅ Deploy Preview for secorto-astro ready!

Name	Link
🔨 Latest commit	`515db20`
🔍 Latest deploy log	https://app.netlify.com/projects/secorto-astro/deploys/6a214708e1b8c30008f6a6ee
😎 Deploy Preview	https://deploy-preview-167--secorto-astro.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 Accessibility: 100 Best Practices: 100 SEO: 100 PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

Este PR refactoriza la suite E2E de Playwright hacia un estilo “Gherkin” (Given/When/Then) y una arquitectura por capas (Page → User Journey → Spec), además de documentar el enfoque con un ADR y actualizar algunos componentes para facilitar selectores estables en tests.

Changes:

Introduce infraestructura Gherkin (tests/fixtures/*) y migra múltiples specs a Given/When/Then usando factories userIn*.
Reestructura el POM en Pages/Journeys/components reutilizables bajo tests/pages/**.
Añade/ajusta documentación (Testing Strategy + ADR 012) y agrega data-testid en WorkProjectCommunityView.astro para asserts en detalle.

Reviewed changes

Copilot reviewed 73 out of 74 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
tests/pages/SidebarPage.ts	Elimina Page Object antiguo (reemplazado por pages/journeys por capas).
tests/pages/HomePage.ts	Elimina Page Object antiguo (reemplazado por pages/journeys por capas).
tests/pages/ContentListPage.ts	Elimina Page Object antiguo (reemplazado por `tests/pages/content/ContentListPage.ts`).
tests/pages/BlogPage.ts	Elimina Page Object antiguo (reemplazado por journeys/páginas de content).
tests/actions/A11yActions.ts	Elimina helper a11y anterior (reemplazado por `A11yUserJourney`).
tests/pages/sidebar/ThemeToggle.ts	Nuevo componente/page wrapper para toggle de tema con steps.
tests/pages/sidebar/SidebarToggle.ts	Nuevo wrapper para interacción/estado del sidebar/hamburger.
tests/pages/sidebar/SidebarPage.ts	Nuevo Page/aggregate del sidebar (compone toggle, theme toggle, links).
tests/pages/shared/UserJourneyFactory.ts	Factoría común para “visit” con mocks + navegación + preAct.
tests/pages/shared/NavigationPaths.ts	Helpers tipados para construir rutas de navegación en tests.
tests/pages/home/ThemeLocaleUserJourney.ts	Journey para flujos de tema/locale + localStorage.
tests/pages/home/MenuUserJourney.ts	Journey para flujo del menú hamburguesa.
tests/pages/home/HomeUserJourney.ts	Journey principal de home (smoke) + asserts de highlights/título.
tests/pages/home/HomePage.ts	Nuevo Page Object de home basado en `Target` + highlights.
tests/pages/home/HomeLanguageUserJourney.ts	Journey para cambio de idioma desde la UI.
tests/pages/home/HomeHighlights.ts	Componente para highlights (blog/talk/pybaq).
tests/pages/home/Highlight.ts	Wrapper de highlight con asserts y validación de href.
tests/pages/functional/RssUserJourney.ts	Journey para validar RSS vía `request`.
tests/pages/functional/RobotsUserJourney.ts	Journey para validar `robots.txt` vía `request`.
tests/pages/footer/FooterUserJourney.ts	Journey para asserts del footer (i18n + avatar loaded).
tests/pages/footer/FooterPage.ts	Page del footer con locators y asserts encapsulados en steps.
tests/pages/content/WorkUserJourney.ts	Journeys para lista/detalle de work + navegación.
tests/pages/content/TalkUserJourney.ts	Journeys para lista/detalle de talks (tags/comments).
tests/pages/content/TagsPage.ts	Nuevo Page para la pantalla de tags (locators helpers).
tests/pages/content/ProjectUserJourney.ts	Journeys para lista/detalle de projects.
tests/pages/content/ContentUserJourney.ts	Clases base para journeys de list/detail y helpers comunes (título).
tests/pages/content/ContentListPage.ts	Nuevo Page para list/detail: tags, items, comments y campos (role/website).
tests/pages/content/CommunityUserJourney.ts	Journeys para lista/detalle de community.
tests/pages/content/Comments.ts	Wrapper para validación de comments (script + iframe).
tests/pages/content/Callout.ts	Wrapper para asserts del callout PyBAQ con i18n.
tests/pages/content/BlogUserJourney.ts	Journeys blog list/detail + helper de overflow horizontal.
tests/pages/components/Target.ts	Abstracción `Target`/`TargetSelector` para steps atómicos sobre locators.
tests/pages/components/PageHelper.ts	Helper de página: title, localStorage, overflow horizontal.
tests/pages/components/Link.ts	Wrapper para asserts de enlaces (href matches).
tests/pages/a11y/A11yUserJourney.ts	Journey a11y con AxeBuilder + excludes + verificación de violaciones.
tests/fixtures/index.ts	Fixtures Given/When/Then/And/But + exports `step`, `Act`, `Verify`.
tests/fixtures/gherkin.ts	Infraestructura de StepDefinition + createVerb sobre runner de Playwright.
tests/e2e/smoke/work.titles.spec.ts	Migra smoke de work a Given/When/Then + journeys.
tests/e2e/smoke/sidebar.spec.ts	Nuevo smoke para logo del sidebar usando journey de home.
tests/e2e/smoke/project.titles.spec.ts	Migra smoke de projects a Given/When/Then + fixtures.
tests/e2e/smoke/load.sidebar.spec.ts	Elimina smoke antiguo (reemplazado por journeys/specs nuevos).
tests/e2e/smoke/lang.spec.ts	Nuevo smoke para `html[lang]` usando `ThemeLocaleUserJourney`.
tests/e2e/smoke/homepage.spec.ts	Migra homepage smoke a Given/When/Then + journeys.
tests/e2e/smoke/footer.spec.ts	Migra footer translations a journey + agrega check de avatar loaded.
tests/e2e/smoke/community.titles.spec.ts	Migra smoke community a journeys (list/detail).
tests/e2e/smoke/charla.spec.ts	Migra charla tests a journeys (list/detail/tags/comments).
tests/e2e/helpers/mockYouTube.ts	Amplía patrones de mock para youtube/youtube-nocookie/watch.
tests/e2e/functional/theme/theme-persistence.spec.ts	Nuevo spec de persistencia de tema usando journeys.
tests/e2e/functional/theme/color-switch.spec.ts	Nuevo spec de cambio de tema (transform) usando journeys.
tests/e2e/functional/theme-persistence.spec.ts	Elimina spec antiguo de persistencia de tema.
tests/e2e/functional/theme-load.spec.ts	Elimina spec antiguo de carga en dark.
tests/e2e/functional/tags.list.spec.ts	Ajusta import de TagsPage (pero sigue usando estilo clásico).
tests/e2e/functional/rss.spec.ts	Migra RSS tests a Given/When/Then + `RssUserJourney`.
tests/e2e/functional/robots.spec.ts	Migra robots tests a Given/When/Then + `RobotsUserJourney`.
tests/e2e/functional/menu.spec.ts	Migra menú hamburguesa a journeys + Given/When/Then.
tests/e2e/functional/homepage.language.spec.ts	Migra cambio de idioma a journey + fixtures.
tests/e2e/functional/color-switch.spec.ts	Elimina spec antiguo de color switch.
tests/e2e/functional/blog.post.spec.ts	Migra blog post tests a `BlogUserJourney` + overflow helper.
tests/e2e/functional/blog.list.spec.ts	Elimina spec antiguo de blog list.
tests/e2e/flow/work.flow.spec.ts	Nuevo flow list→detail para work.
tests/e2e/flow/project.flow.spec.ts	Nuevo flow list→detail para projects.
tests/e2e/flow/community.flow.spec.ts	Nuevo flow list→detail para community.
tests/e2e/flow/charla.flow.spec.ts	Nuevo flow talks list→tag→detail.
tests/e2e/flow/blog.flow.spec.ts	Nuevo flow blog list→tag→detail.
tests/e2e/a11y/work.a11y.spec.ts	Nuevo a11y spec para work (list/detail).
tests/e2e/a11y/tags.a11y.spec.ts	Elimina spec a11y antiguo de tags.
tests/e2e/a11y/projects.a11y.spec.ts	Nuevo a11y spec para projects (list/detail).
tests/e2e/a11y/home.a11y.spec.ts	Nuevo a11y spec para home.
tests/e2e/a11y/community.a11y.spec.ts	Nuevo a11y spec para community (list/detail).
tests/e2e/a11y/charla.a11y.spec.ts	Migra a11y de talks a journey + agrega tags global a11y.
tests/e2e/a11y/blog.a11y.spec.ts	Nuevo a11y spec para blog (list/tag/detail).
src/components/WorkProjectCommunityView.astro	Añade `data-testid` para role/responsibilities/website en detail.
docs/TESTING_STRATEGY.md	Actualiza estrategia para arquitectura por capas + Gherkin.
docs/adr/012-layered-pom-gherkin.md	Nuevo ADR documentando el enfoque layered POM + Given/When/Then.

+- Ejemplo de Page (locators): `tests/pages/SidebarPage.ts`, `tests/pages/HomePage.ts`
+- Ejemplo de User Journey: `tests/pages/HomeUserJourney` (en `HomePage.ts`), `tests/pages/ThemeLocaleUserJourney.ts`
+- Spec usando User Journey: `tests/e2e/smoke/homepage.spec.ts`, `tests/e2e/functional/theme/color-switch.spec.ts`


+2. `tests/pages/*Page.ts` — POM puro (locators). Ejemplo: `SidebarPage.ts`, `HomePage.ts`.
+3. `tests/pages/*UserJourney.ts` — Journey con factory. Ejemplos:
+   - `HomePage.ts` exporta `HomeUserJourney` + `userInHome`.
+  - `ThemeLocaleUserJourney.ts` exporta `ThemeLocaleUserJourney` + `userInHomeForColorSwitch` + `userInHomeWithStorageTheme`.
+4. `tests/e2e/**/*.spec.ts` — specs con Given/When/Then sobre el Journey.


+- `tests/pages/SidebarPage.ts`
+- `tests/pages/HomePage.ts` — `HomePage` (locators) + `HomeUserJourney`
+- `tests/pages/ThemeLocaleUserJourney.ts`


+---
+title: ADR 012: Implementación de POM por capas con User Journeys (Given/When/Then)
+status: accepted
+date: 2026-05-30
+categories:
+  - Testing
+  - Architecture
+---


+  filterByTag(tag: string) {
+    return step(`filter talks by tag "${tag}"`, async ({ expect }) => {
+      const tagLink = this.tagLinks.get(tag)


+      const href = await el.getAttribute('href')
+      expect(href).toBeTruthy()
+      expect(href).toMatch(new RegExp(`^.*\\/${locale}\\/${route}\\/`))


 import { test, expect } from '@playwright/test'
-import { TagsPage } from '@tests/pages/TagsPage'
+import { TagsPage } from '@tests/pages/content/TagsPage'
 import { languageKeys, type UILanguages, ui } from '@i18n/ui'



-    activa callbacks externos o coordina pasos que no se resuelven con una sola llamada a un locator.
-    En esos casos, las `actions` encapsulan la lógica y mantienen los tests legibles.
+  - Arquitectura de tres capas: **Page → User Journey → Spec**.
+  - **Page** (`*Page.ts`): solo locators y selectores. No contiene lógica de navegación ni assertions.


+POM puro: solo `Locator`s y helpers de acceso al DOM.
+No contiene navegación, assertions ni lógica de setup.
+Ejemplo: `SidebarPage`, `HomePage`.


para evitar correr los test de api en los 3 browsers

Copilot

Pull request overview

Copilot reviewed 82 out of 82 changed files in this pull request and generated 4 comments.

+  }
+
+  filterByTag(tag: string) {
+    return step(`filter talks by tag "${tag}"`, async ({ expect }) => {


+  shouldIncludeLanguageTag: () => ReturnType<typeof step>
+}
+
+export const createRssUserJourney = (request: APIRequestContext, locale: string) => {


+            const localeCountry: Record<string, string> = { es: 'es-co', en: 'en-us' }
+            expect(body).toContain(`<language>${localeCountry[locale]}</language>`)


 - Unit tests: `tests/unit/**` (usar TypeScript)
- E2E tests: `tests/e2e/**` (usar POM para locators en `tests/pages/` y separar las acciones en `tests/actions/`)
+- E2E tests: `tests/e2e/**`; la lógica de acceso y flujo se organiza en tres capas:
+  - **Page** (`tests/pages/**/**Page.ts`): POM de UI con dos subtipos:
+    componentes atómicos (locators/helpers) y páginas compuestas/orquestadoras que agregan componentes.
+    Puede incluir pasos atómicos (`shouldHave*`, `shouldBe*`, `click*`) encapsulados en `step()` o `Target`.


Copilot

Pull request overview

Copilot reviewed 83 out of 83 changed files in this pull request and generated 3 comments.

+export const visit = <T>(
+  title: string,
+  page: Page,
+  url: string,
+  factory: JourneyFactory<T>,
+  preAct?: (page: Page) => Promise<void> | void,
+) =>
+    step(title, async () => {
+      if (preAct) await preAct(page)
+      await mockThirdParty(page)
+      await page.goto(url)
+      return factory(page)
+    })


+  get(value: T) {
+    return target(`${this.parent} "${this.valueLabel(value)}"`, this.resolve(value))
+  }
+}
+
+export function targetSelector<T>(
+  parent: string,
+  resolve: (value: T) => Locator,
+  valueLabel: (value: T) => string = (value: T) => `"${String(value)}"`,
+) {
+  return new TargetSelector(parent, resolve, valueLabel)
+}


 - Unit tests: `tests/unit/**` (usar TypeScript)
- E2E tests: `tests/e2e/**` (usar POM para locators en `tests/pages/` y separar las acciones en `tests/actions/`)
+- E2E tests: `tests/e2e/**`; la lógica de acceso y flujo se organiza en tres capas:
+  - **Page** (`tests/pages/**/**Page.ts`): POM de UI con dos subtipos:
+    componentes atómicos (locators/helpers) y páginas compuestas/orquestadoras que agregan componentes.
+    Puede incluir pasos atómicos (`shouldHave*`, `shouldBe*`, `click*`) encapsulados en `step()` o `Target`.
+  - **User Journey** (`tests/pages/**/**UserJourney.ts`): encapsula un flujo de usuario concreto;
+    compone Pages y `PageHelper`, expone pasos tipados (`shouldHave*`, `toggle*`, etc.) y su propio factory
+    (`userIn*`) que incluye navegación, mocks y estado inicial.
+  - **Spec** (`tests/e2e/**/*.spec.ts`): orquesta únicamente con Given/When/Then sobre el User Journey devuelto
+    por el factory; no contiene lógica de setup ni locators directos.


Scot3004 added 30 commits May 30, 2026 21:14

Gherkin layered design pom

1eddb8e

Split fixtures from gherkin utilities definitions

92d0ae2

expect received as object

8c973f5

Create verb definition default value

c7b79ce

Gherkin Step definition

f8a2f91

User journey concept

9676c98

A11Y user Journey

dda6028

userInHome color switch journey

7311267

UserJourneyFactory

b6c7e4f

Blog user journey

1a24218

Default excludes

4d675e3

Ampliados patrones mock youtube

bd1308b

Refactor tests de talk

92eb8b1

Updated theme local storage to use And

2ab2a19

Smoke test for content

6b11ab6

work project community details and list view

User journey for footer

841505f

Footer user journey

098e417

Content list page refactor

da96106

Implementados test flow content

8358ddc

userInHomeFactory

66f00d5

Menu User Journey

7a694d3

SidebarPage

022cee7

Carpetas para pages

ac73809

Footer covering image loaded

0d861cb

load sidebar dividido en 2 tests

a6a4896

ThemeLocaleUserJourney

24aa805

Test gherkin for robots and rss

4f45631

Flow no valida titulo

d83e6af

dado que ya se valida en otro test

a11y tests para contenido

b988d14

Robots, RSS user journey

ac7cc8a

Scot3004 requested a review from Copilot June 1, 2026 05:40

Copilot started reviewing on behalf of Scot3004 June 1, 2026 05:40 View session

Copilot AI reviewed Jun 1, 2026

View reviewed changes

Scot3004 added 9 commits June 1, 2026 01:33

Verificación tags posts

a67a8e1

Tags page con nueva estructura

5030002

Tags User Journey

c7bedbd

Target debe tener nombre

0047e93

target selector con prefix

5bf2b3e

Tags consistentes

8156ac3

Tags menu y sidebar

55b05f2

Proyecto api

532d6a7

para evitar correr los test de api en los 3 browsers

Corregida documentación

076a71a

Scot3004 requested a review from Copilot June 1, 2026 07:24

Copilot started reviewing on behalf of Scot3004 June 1, 2026 07:25 View session

Copilot AI reviewed Jun 1, 2026

View reviewed changes

Scot3004 added 3 commits June 1, 2026 02:40

Rss type

f7e888a

Content List Page name

0bb9d27

Rss user journey arreglado

a6b2d35

Scot3004 requested a review from Copilot June 1, 2026 07:58

Copilot started reviewing on behalf of Scot3004 June 1, 2026 07:58 View session

Copilot AI reviewed Jun 1, 2026

View reviewed changes

Scot3004 force-pushed the gherkin branch from 442d867 to f8e2b60 Compare June 4, 2026 09:23

User Journey API como clases

515db20

Scot3004 force-pushed the gherkin branch from f8e2b60 to 515db20 Compare June 4, 2026 09:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gherkin#167

Gherkin#167
Scot3004 wants to merge 43 commits into
masterfrom
gherkin

Scot3004 commented Jun 1, 2026

Uh oh!

bolt-new-by-stackblitz Bot commented Jun 1, 2026

Uh oh!

netlify Bot commented Jun 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const localeCountry: Record<string, string> = { es: 'es-co', en: 'en-us' }
		expect(body).toContain(`<language>${localeCountry[locale]}</language>`)

Conversation

Scot3004 commented Jun 1, 2026

Pull request

Observaciones

Uh oh!

bolt-new-by-stackblitz Bot commented Jun 1, 2026

Uh oh!

netlify Bot commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for secorto-astro ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify Bot commented Jun 1, 2026 •

edited

Loading