test: add end to end tests (#19)

In addition to Jest tests, I configure Cypress to test some pages and features.
I also fix some Jest errors due to images import.

1 files changed, 41 insertions, 0 deletions

diff --git a/tests/cypress/e2e/search.cy.ts b/tests/cypress/e2e/search.cy.ts
new file mode 100644
index 0000000..f105a5c
--- /dev/null
+++ b/tests/cypress/e2e/search.cy.ts
@@ -0,0 +1,41 @@
+const queryWithArticles = 'Coldark';
+const queryWithoutArticles = 'etEtRerum';
+
+describe('Search', () => {
+  it('should open and close search form by clicking on search button', () => {
+    cy.visit('/');
+    cy.findByLabelText(/Fermer la recherche/i).should('not.exist');
+    cy.findByRole('searchbox', { name: /Rechercher/i }).should('not.exist');
+    cy.findByLabelText(/Ouvrir la recherche/i).click();
+    cy.findByLabelText(/Ouvrir la recherche/i).should('not.exist');
+    cy.findByLabelText(/Fermer la recherche/i).should('exist');
+    cy.findByRole('searchbox', { name: /Rechercher/i }).should('exist');
+    cy.findByLabelText(/Fermer la recherche/i).click();
+    cy.findByLabelText(/Fermer la recherche/i).should('not.exist');
+    cy.findByRole('searchbox', { name: /Rechercher/i }).should('not.exist');
+    cy.findByLabelText(/Ouvrir la recherche/i).should('exist');
+  });
+
+  it('should navigate the search page', async () => {
+    cy.visit('/');
+    cy.findByLabelText(/Ouvrir la recherche/i).click();
+    cy.findByRole('searchbox', { name: /Rechercher/i }).type(
+      `${queryWithArticles}{enter}`
+    );
+    cy.url().should('include', '/blog');
+    cy.findByRole('heading', { level: 1 }).contains(
+      /Résultats de la recherche pour/i
+    );
+  });
+
+  it('should display the total of articles if successful', async () => {
+    cy.visit(`/recherche?s=${encodeURIComponent(queryWithArticles)}`);
+    const dtSiblings = cy.findByRole('term', { name: /Total/i }).siblings();
+    dtSiblings.findByRole('definition').contains(/article/i);
+  });
+
+  it('should display a search form if unsuccessful', () => {
+    cy.visit(`/recherche?s=${encodeURIComponent(queryWithoutArticles)}`);
+    cy.findByRole('searchbox', { name: /Rechercher/i }).should('exist');
+  });
+});