From 4e4d2eb25365be861e19f9756cf334ba2faa6911 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 14 Dec 2023 18:55:21 +0100 Subject: test(e2e): fix broken Cypress tests Since #93db24b MSW is used in Cypress tests to intercept requests. Some tests relied on WordPress data so it becames broken. Tests are now successful but there are still some issues with hydration because all GraphQL requests are not intercepted and data are mixed between WordPress and fixtures. --- tests/cypress/e2e/pages/404.cy.ts | 5 ++- tests/cypress/e2e/pages/blog.cy.ts | 72 +++++++++++++++++--------------------- tests/cypress/e2e/search.cy.ts | 24 +++++-------- 3 files changed, 45 insertions(+), 56 deletions(-) (limited to 'tests/cypress') diff --git a/tests/cypress/e2e/pages/404.cy.ts b/tests/cypress/e2e/pages/404.cy.ts index 7899275..77f3085 100644 --- a/tests/cypress/e2e/pages/404.cy.ts +++ b/tests/cypress/e2e/pages/404.cy.ts @@ -25,7 +25,10 @@ describe('404 Page', () => { const keywords = 'coldark'; cy.findByRole('searchbox').type(keywords); - cy.findByRole('button', { name: /Rechercher/ }).click(); + cy.findByRole('button', { name: /Rechercher/ }) + .click() + // eslint-disable-next-line @typescript-eslint/no-magic-numbers + .wait(500); cy.findByRole('heading', { level: 1 }).should('contain.text', keywords); }); }); diff --git a/tests/cypress/e2e/pages/blog.cy.ts b/tests/cypress/e2e/pages/blog.cy.ts index 0350e39..a83caa0 100644 --- a/tests/cypress/e2e/pages/blog.cy.ts +++ b/tests/cypress/e2e/pages/blog.cy.ts @@ -1,10 +1,6 @@ import { CONFIG } from '../../../../src/utils/config'; import { ROUTES } from '../../../../src/utils/constants'; - -type ArticlesGroup = { - first: string; - total: string; -}; +import { wpPostsFixture } from '../../../fixtures'; describe('Blog Page', () => { beforeEach(() => { @@ -19,43 +15,39 @@ describe('Blog Page', () => { cy.findByRole('navigation', { name: 'Fil d’Ariane' }).should('exist'); }); - it('loads the correct number of pages', () => { + it('loads the correct number of posts', () => { cy.findByText( /(?\d+) articles chargés sur un total de (?\d+)/i - ) - .then(($div) => { - const firstLastNumbers = /(?\d+).*[\D](?\d+)/; - const result = RegExp(firstLastNumbers).exec($div.text()); - - // eslint-disable-next-line @typescript-eslint/no-unused-expressions - expect(result).to.not.be.null; - - const { first, total } = result - ? (result.groups as ArticlesGroup) - : { first: '0', total: '0' }; - const totalArticles = parseInt(total, 10); - - expect(parseInt(first, 10)).to.be.within(1, CONFIG.postsPerPage); - expect(totalArticles).to.be.at.least(1); - - const totalPages = Math.ceil(totalArticles / CONFIG.postsPerPage); - const remainingPages = totalPages - 1; - - return Array.from({ length: remainingPages }, (_, i) => i + 1); - }) - .then((remainingPages) => { - if (remainingPages.length >= 1) { - cy.wrap(remainingPages).each(() => { - cy.findByRole('button', { - name: /Charger plus d’articles/i, - }).click(); - }); - } - - cy.findByRole('button', { name: /Charger plus d’articles/i }).should( - 'not.exist' - ); - }); + ).should('exist'); + cy.findAllByRole('link', { name: /En lire plus/ }).should( + 'have.length.at.most', + CONFIG.postsPerPage + ); + + const loadMorePosts = () => { + cy.findByRole('button', { name: /Charger plus/ }) + .should((_) => { + /* do nothing */ + }) + .then(($loadMoreBtn) => { + if (!$loadMoreBtn.length) { + cy.log('No more posts'); + return; + } + + cy.log('Loading more posts'); + // eslint-disable-next-line @typescript-eslint/no-magic-numbers + cy.wrap($loadMoreBtn).click().wait(500); + loadMorePosts(); + }); + }; + + loadMorePosts(); + + cy.findAllByRole('link', { name: /En lire plus/ }).should( + 'have.length', + wpPostsFixture.length + ); }); it('contains a thematics list widget and a topics list widget', () => { diff --git a/tests/cypress/e2e/search.cy.ts b/tests/cypress/e2e/search.cy.ts index be9aa9f..f4f80f2 100644 --- a/tests/cypress/e2e/search.cy.ts +++ b/tests/cypress/e2e/search.cy.ts @@ -1,31 +1,32 @@ import { ROUTES } from '../../../src/utils/constants'; -const queryWithArticles = 'Coldark'; const queryWithoutArticles = 'etEtRerum'; describe('Search', () => { it('should open and close search form by clicking on search button', () => { cy.visit('/'); // findByLabelText does not return the input but the label... - cy.findByLabelText(/Ouvrir la recherche/i) + cy.findByLabelText(/Ouvrir le formulaire de recherche/i) .prev() .should('not.be.checked'); cy.findByRole('searchbox', { name: /Rechercher/i }).should('not.exist'); - cy.findByLabelText(/Ouvrir la recherche/i).click(); - cy.findByLabelText(/Ouvrir la recherche/i) + cy.findByLabelText(/Ouvrir le formulaire de recherche/i).click(); + cy.findByLabelText(/Ouvrir le formulaire de recherche/i) .prev() .should('be.checked'); cy.findByRole('searchbox', { name: /Rechercher/i }).should('exist'); - cy.findByLabelText(/Ouvrir la recherche/i).click(); - cy.findByLabelText(/Ouvrir la recherche/i).should('not.be.checked'); + cy.findByLabelText(/Ouvrir le formulaire de recherche/i).click(); + cy.findByLabelText(/Ouvrir le formulaire de recherche/i).should( + 'not.be.checked' + ); cy.findByRole('searchbox', { name: /Rechercher/i }).should('not.exist'); }); it('should navigate the search page', () => { cy.visit('/'); - cy.findByLabelText(/Ouvrir la recherche/i).click(); + cy.findByLabelText(/Ouvrir le formulaire de recherche/i).click(); cy.findByRole('searchbox', { name: /Rechercher/i }).type( - `${queryWithArticles}{enter}` + `${'coldark'}{enter}` ); cy.url().should('include', ROUTES.SEARCH); cy.findByRole('heading', { level: 1 }).contains( @@ -33,13 +34,6 @@ describe('Search', () => { ); }); - it('should display the total of articles if successful', () => { - cy.visit(`${ROUTES.SEARCH}?s=${encodeURIComponent(queryWithArticles)}`); - const metaList = cy.findByRole('heading', { level: 1 }).next(); - metaList.findByRole('term').contains(/Total/i); - metaList.findByRole('definition').contains(/article/i); - }); - it('should display a search form if unsuccessful', () => { cy.visit(`${ROUTES.SEARCH}?s=${encodeURIComponent(queryWithoutArticles)}`); cy.findByRole('searchbox', { name: /Rechercher/i }).should('exist'); -- cgit v1.2.3