refactor(pages): refine Topic pages

* add useTopic and useTopicsList hooks to refresh data
* add a table of contents
* add Cypress tests

1 files changed, 38 insertions, 0 deletions

diff --git a/tests/cypress/e2e/pages/topic.cy.ts b/tests/cypress/e2e/pages/topic.cy.ts
new file mode 100644
index 0000000..3b30893
--- /dev/null
+++ b/tests/cypress/e2e/pages/topic.cy.ts
@@ -0,0 +1,38 @@
+describe('Topic', () => {
+  beforeEach(() => {
+    cy.visit('/sujet/docker');
+  });
+
+  it('successfully loads', () => {
+    cy.findByRole('heading', { level: 1 }).should('exist');
+  });
+
+  it('contains the topic meta', () => {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    cy.findAllByRole('term').should('have.length.at.least', 2);
+
+    /* The accessible name is not recognized while it should be the `dt` text
+     * content */
+    /* cy.findByRole('term', { name: 'Publié le :' }).should('exist');
+    cy.findByRole('term', { name: 'Total :' }).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 thematics list widget and a topics list widget', () => {
+    cy.findByRole('heading', { level: 2, name: 'Thématiques connexes' }).should(
+      'exist'
+    );
+    cy.findByRole('heading', { level: 2, name: 'Autres sujets' }).should(
+      'exist'
+    );
+  });
+});