feat(SPA): "<page> · RenewCMS" as pages titles, instead of being stuck on whatever lands on first loading

features/document_title.feature

@@ -0,0 +1,109 @@
+Feature: Browser tab title names the current page
+
+  Background:
+    Given the SPA is mounted with its router
+    And the tab title format is "<page> · RenewCMS" for a page that has a name
+    And the tab title is just "RenewCMS" when the current page has no name at all
+    And page names are translated to the interface language
+    And the title is set in one place for the whole SPA, not by each screen
+    And no /v1 call is made only to set the title
+
+  Scenario Outline: Back-office pages show their name
+    Given a signed-in verified user
+    When the user navigates to <path>
+    Then the tab title is "<title>"
+
+    Examples:
+      | path                     | title                  |
+      | /home                    | Home · RenewCMS        |
+      | /article                 | Articles · RenewCMS    |
+      | /article/new             | Articles · RenewCMS    |
+      | /media                   | Media · RenewCMS       |
+      | /users                   | Users · RenewCMS       |
+      | /activity                | Activity · RenewCMS    |
+      | /profile                 | Profile · RenewCMS     |
+      | /integration             | Integration · RenewCMS |
+      | /integration/api-keys    | Integration · RenewCMS |
+      | /settings                | Settings · RenewCMS    |
+      | /settings/media/variants | Settings · RenewCMS    |
+      | /settings/media/cache    | Settings · RenewCMS    |
+
+  Scenario Outline: Auth pages show the card heading they display
+    Given a signed-out visitor
+    When the visitor navigates to <path>
+    Then the tab title is "<title>"
+
+    Examples:
+      | path                                             | title                              |
+      | /login                                           | Log in · RenewCMS                  |
+      | /register                                        | Create the owner account · RenewCMS |
+      | /register/pending                                | Check your email · RenewCMS        |
+      | /register/reset/request                          | Reset your password · RenewCMS     |
+      | /register/reset/validate?c=CODE&email=EMAIL      | Choose a new password · RenewCMS   |
+      | /invite/accept?c=CODE                            | Accept your invite · RenewCMS      |
+      | /register/validate?c=CODE without a session      | Log in to finish verifying · RenewCMS |
+
+  Scenario: An auth card with no heading uses the product name
+    Given the verify screen is verifying a code and its card shows no heading
+    Then the tab title is "RenewCMS"
+
+  Scenario: Auth card heading changes inside one route
+    Given an auth screen whose card heading changes between states
+    When the card heading changes
+    Then the tab title follows the new card heading
+
+  Scenario: Title updates when the page changes
+    Given a signed-in verified user on /home with the tab title "Home · RenewCMS"
+    When the user navigates to /media
+    Then the tab title is "Media · RenewCMS"
+    When the user navigates back to /home
+    Then the tab title is "Home · RenewCMS"
+
+  Scenario: Leaving the login screen does not leave "Log in" stuck
+    Given a signed-out visitor on /login with the tab title "Log in · RenewCMS"
+    When the visitor logs in successfully and is redirected to /home
+    Then the tab title is "Home · RenewCMS"
+
+  Scenario: Logging out does not keep the back-office title
+    Given a signed-in verified user on /settings
+    When the user logs out and is sent to /login
+    Then the tab title is "Log in · RenewCMS"
+
+  Scenario: Editor tab shows the article's own title once loaded
+    Given a signed-in verified user
+    When the user opens /article/42/edit and the article is still loading
+    Then the tab title is "Editor · RenewCMS"
+    When the article "Hello world" has loaded
+    Then the tab title is "Hello world · RenewCMS"
+
+  Scenario: Editor tab follows the saved article title
+    Given the user is editing the article "Hello world" at /article/42/edit
+    When the article title is saved as "Hello again"
+    Then the tab title is "Hello again · RenewCMS"
+
+  Scenario Outline: Editor tab falls back to "Editor"
+    Given a signed-in verified user
+    When the user opens /article/42/edit and <situation>
+    Then the tab title is "Editor · RenewCMS"
+
+    Examples:
+      | situation                            |
+      | the article fails to load            |
+      | the article has an empty title       |
+
+  Scenario: Leaving the editor drops the article title
+    Given the user is on /article/42/edit with the tab title "Hello world · RenewCMS"
+    When the user navigates to /article
+    Then the tab title is "Articles · RenewCMS"
+
+  Scenario: Not-found page
+    Given any user
+    When the user navigates to an unknown path
+    Then the tab title is "404 · RenewCMS"
+
+  Scenario: Title follows the interface language
+    Given the interface language is Français
+    When the user navigates to /media
+    Then the tab title is the French "Media" name followed by " · RenewCMS"
+    When the user switches the interface language to English
+    Then the tab title is "Media · RenewCMS" without a navigation

features/document_title.qa.md

@@ -0,0 +1,23 @@
+# QA: document title (SPA, Vitest only)
+
+## Automated (Vitest + Vue Test Utils, real route table, memory history, mocked /v1)
+Each test resets `document.title` to "" in `beforeEach`.
+
+1. Back-office rows: with `/v1` user mocked as signed in and verified, push each path from the first Examples table, await `router.isReady()`, assert `document.title`.
+2. Auth rows: with the session mocked as signed out (401), push each path of the auth Examples table and assert the title equals the card heading plus " · RenewCMS". For the verify noSession row, mock a verify attempt with no session.
+3. Verify with a code and no heading: assert `document.title === 'RenewCMS'`.
+4. Auth heading change: drive an auth screen through two states with different headings (e.g. reset request default to the incomplete/expired variant) and assert the title follows.
+5. Navigation sequence: /home, /media, /home, asserting after each push.
+6. Login redirect: from /login simulate a successful login so the guard redirects to /home; assert "Home · RenewCMS".
+7. Logout: from /settings trigger logout; assert "Log in · RenewCMS".
+8. Editor: mock GET article 42 with a pending promise, assert "Editor · RenewCMS"; resolve with title "Hello world", assert "Hello world · RenewCMS". Save with title "Hello again" and assert the update. Repeat with a failing GET and with an empty title, expecting "Editor · RenewCMS". Navigate to /article and assert "Articles · RenewCMS".
+9. Not found: push an unknown path, assert "404 · RenewCMS".
+10. Locale: set `fr`, push /media, assert the French name plus " · RenewCMS"; switch to `en` and assert "Media · RenewCMS" without a navigation.
+11. Update `web/src/components/__tests__/AuthShell.spec.ts` if its title expectations no longer hold once the title is set in one place.
+
+## Visual
+None. The tab title is not drawn on any board (skip: not-visual).
+
+## Manual
+- In a real browser, log in from /login and confirm the tab reads "Home · RenewCMS", then use the sidebar and the browser Back and Forward buttons and confirm the tab follows.
+- Open an article in the editor, edit its title, and confirm the tab and the history entry follow.