refactor(pages): refine Project pages

* refactor ProjectOverview component to let consumers handle the value
* extract project overview depending on Github to avoid fetching
Github API if the project is not on Github
* wrap dynamic import in a useMemo hook to avoid infinite rerender
* fix table of contents by adding a useMutationObserver hook to refresh
headings tree (without it useHeadingsTree is not retriggered once the
dynamic import is done)
* add Cypress tests

1 files changed, 33 insertions, 0 deletions

diff --git a/tests/cypress/e2e/pages/project.cy.ts b/tests/cypress/e2e/pages/project.cy.ts
new file mode 100644
index 0000000..0fce7fd
--- /dev/null
+++ b/tests/cypress/e2e/pages/project.cy.ts
@@ -0,0 +1,33 @@
+import { ROUTES } from '../../../../src/utils/constants';
+
+describe('Project Pages', () => {
+  beforeEach(() => {
+    cy.visit(`${ROUTES.PROJECTS}/coldark`);
+  });
+
+  it('successfully loads', () => {
+    cy.findByRole('heading', { level: 1 }).should('exist');
+  });
+
+  it('contains a breadcrumbs', () => {
+    cy.findByRole('navigation', { name: 'Fil d’Ariane' }).should('exist');
+  });
+
+  it('contains the project meta', () => {
+    cy.findAllByRole('term').should('have.length.at.least', 1);
+
+    /* The accessible name is not recognized while it should be the `dt` text
+     * content */
+    // cy.findByRole('term', { name: 'Publié le :' }).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');
+  });
+});