refactor(pages): refine Article pages

* use rehype to update code blocks class names
* fix widget heading level (after a level 1 it should always be a level
2 and not 3)
* replace Spinner with LoadingPage and LoadingPageComments components to
keep layout coherent
* refactor useArticle and useComments hooks
* fix URLs in JSON LD schema
* add Cypress tests

1 files changed, 49 insertions, 0 deletions

diff --git a/tests/cypress/e2e/pages/article.cy.ts b/tests/cypress/e2e/pages/article.cy.ts
new file mode 100644
index 0000000..cf64015
--- /dev/null
+++ b/tests/cypress/e2e/pages/article.cy.ts
@@ -0,0 +1,49 @@
+import { ROUTES } from '../../../../src/utils/constants';
+
+describe('Article', () => {
+  beforeEach(() => {
+    cy.visit(ROUTES.HOME);
+    cy.findAllByRole('link', { name: /^Consulter/i }).then(($articles) =>
+      $articles[0].click()
+    );
+  });
+
+  it('successfully loads', () => {
+    cy.findByRole('heading', { level: 1 }).should('exist');
+  });
+
+  it('contains the article meta', () => {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    cy.findAllByRole('term').should('have.length.at.least', 3);
+
+    /* The accessible name is not recognized while it should be the `dt` text
+     * content */
+    /* cy.findByRole('term', { name: 'Écrit par :' }).should('exist');
+    cy.findByRole('term', { name: 'Publié le :' }).should('exist');
+    cy.findByRole('term', { name: 'Temps de lecture :' }).should('exist'); */
+  });
+
+  it('contains a breadcrumbs', () => {
+    cy.findByRole('navigation', { name: 'Fil d’Ariane' }).should('exist');
+  });
+
+  it('contains a table of contents', () => {
+    cy.findByRole('heading', { level: 2, name: 'Table des matières' }).should(
+      'exist'
+    );
+  });
+
+  it('contains a sharing widget', () => {
+    cy.findByRole('heading', { level: 2, name: 'Partager' }).should('exist');
+  });
+
+  it('contains a comments section', () => {
+    cy.findByRole('heading', {
+      level: 2,
+      name: 'Laisser un commentaire',
+    }).should('exist');
+    cy.findByRole('form', { name: 'Formulaire des commentaires' }).should(
+      'exist'
+    );
+  });
+});