Add page titles

cypress/e2e/home/homepage.cy.js

@@ -7,6 +7,7 @@ describe('home page', () => {
           .should('exist')
           .should('be.visible')
           .contains('build every thing together')
+      cy.title().should('eq', 'About — BLDRS')
     })
   })
 

package.json

@@ -51,6 +51,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feature-flags": "^1.0.0",
+    "react-helmet-async": "^1.3.0",
     "react-markdown": "^8.0.3",
     "react-router-dom": "^6.3.0",
     "remark-gfm": "^3.0.1",

src/Components/About/AboutControl.jsx

@@ -8,6 +8,7 @@ import AboutGuide from './AboutGuide'
 import PrivacyControl from './PrivacyControl'
 import AboutIcon from '../../assets/icons/Information.svg'
 import LogoB from '../../assets/LogoB.svg'
+import {Helmet} from 'react-helmet-async'
 
 
 /**
@@ -55,7 +56,7 @@ export default function AboutControl() {
  *
  * @param {boolean} isDialogDisplayed
  * @param {Function} setIsDialogDisplayed
- * @return {React.Component} React component
+ * @return {React.ReactElement} React component
  */
 function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
   return (
@@ -72,7 +73,8 @@ function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
       content={<AboutContent/>}
       actionTitle='OK'
       actionCb={() => setIsDialogDisplayed(false)}
-    />)
+    />
+  )
 }
 
 
@@ -84,6 +86,9 @@ function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
 function AboutContent() {
   return (
     <Box sx={{'& a': {textDecoration: 'none'}}}>
+      <Helmet>
+        <title>About — BLDRS</title>
+      </Helmet>
       <Typography variant='h2' gutterBottom={true}>build every thing together</Typography>
       <a href='https://github.com/bldrs-ai/Share' target='_new'>
         github.com/bldrs-ai/Share

src/Components/About/AboutControl.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {render, fireEvent} from '@testing-library/react'
+import {render, fireEvent, waitFor} from '@testing-library/react'
 import {MockComponent} from '../../__mocks__/MockComponent'
 import AboutControl from './AboutControl'
 
@@ -18,4 +18,12 @@ describe('About control tests', () => {
     const dialogTitle = getByText('build every thing together')
     expect(dialogTitle).toBeInTheDocument()
   })
+
+  it('updates the title when the dialog is open', async () => {
+    render(<AboutControl/>, {
+      wrapper: MockComponent,
+    })
+
+    await(waitFor(() => expect(document.title).toBe('About — BLDRS')))
+  })
 })

src/Components/ShareControl.jsx

@@ -14,6 +14,7 @@ import {ControlButton} from './Buttons'
 import Toggle from './Toggle'
 import CopyIcon from '../assets/icons/Copy.svg'
 import ShareIcon from '../assets/icons/Share.svg'
+import {Helmet} from 'react-helmet-async'
 
 
 /**
@@ -142,6 +143,9 @@ function ShareDialog({isDialogDisplayed, setIsDialogDisplayed}) {
           marginTop: '10px',
         }}
         >
+          <Helmet>
+            <title>Share IFC Model — BLDRS</title>
+          </Helmet>
           <TextField
             value={String(window.location)}
             inputRef={urlTextFieldRef}

src/Components/ShareControl.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import {fireEvent, render, renderHook, waitFor} from '@testing-library/react'
+import ShareControl from './ShareControl'
+import {MockComponent} from '../__mocks__/MockComponent'
+import useStore from '../store/useStore'
+
+
+describe('ShareControl', () => {
+  it('renders the dialog in the document', () => {
+    const {getByTitle} = render(<ShareControl/>, {
+      wrapper: MockComponent,
+    })
+    const component = getByTitle('Share')
+    expect(component).toBeInTheDocument()
+  })
+
+  it('updates the title when the dialog is open', async () => {
+    const {result} = renderHook(() => useStore((state) => state.setViewerStore))
+    result.current({
+      clipper: {
+        planes: [],
+      },
+    })
+
+    const {getByTitle} = render(<ShareControl/>, {
+      wrapper: MockComponent,
+    })
+
+    const button = getByTitle('Share')
+    fireEvent.click(button)
+
+    await(waitFor(() => expect(document.title).toBe('Share IFC Model — BLDRS')))
+  })
+})

src/ShareMock.jsx

@@ -3,6 +3,7 @@ import {ThemeProvider} from '@mui/material/styles'
 import useStore from './store/useStore'
 import useShareTheme from './theme/Theme'
 import BaseRoutesMock from './BaseRoutesMock.test'
+import {HelmetProvider} from 'react-helmet-async'
 
 
 /**
@@ -19,13 +20,15 @@ export default function ShareMock({initialEntries, children} = {}) {
   }, [setRepository])
 
   return (
-    <BaseRoutesMock
-      initialEntries={initialEntries}
-      contentElt={
-        <ThemeProvider theme={useShareTheme()}>
-          {children}
-        </ThemeProvider>
-      }
-    />
+    <HelmetProvider>
+      <BaseRoutesMock
+        initialEntries={initialEntries}
+        contentElt={
+          <ThemeProvider theme={useShareTheme()}>
+            {children}
+          </ThemeProvider>
+        }
+      />
+    </HelmetProvider>
   )
 }

src/__mocks__/MockComponent.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {ThemeProvider} from '@mui/material/styles'
 import useShareTheme from '../theme/Theme'
+import {HelmetProvider} from 'react-helmet-async'
 
 
 /**
@@ -9,9 +10,11 @@ import useShareTheme from '../theme/Theme'
  */
 export const MockComponent = ({children}) => {
   return (
-    <ThemeProvider theme={useShareTheme()}>
-      {children}
-    </ThemeProvider>
+    <HelmetProvider>
+      <ThemeProvider theme={useShareTheme()}>
+        {children}
+      </ThemeProvider>
+    </HelmetProvider>
   )
 }
 

src/index.jsx

@@ -14,6 +14,7 @@ import {Auth0ProviderWithHistory} from './Components/Auth0ProviderWithHistory'
 import * as Sentry from '@sentry/react'
 import {BrowserTracing} from '@sentry/tracing'
 import ApplicationError from './Components/ApplicationError'
+import {Helmet, HelmetProvider} from 'react-helmet-async'
 
 
 Sentry.init({
@@ -49,11 +50,16 @@ const root = createRoot(document.getElementById('root'))
 root.render(
     <Sentry.ErrorBoundary fallback={<ApplicationError/>}>
       <FlagsProvider value={flags}>
-        <BrowserRouter>
-          <Auth0ProviderWithHistory>
-            <BaseRoutes/>
-          </Auth0ProviderWithHistory>
-        </BrowserRouter>
+        <HelmetProvider>
+          <Helmet>
+            <title>BLDRS</title>
+          </Helmet>
+          <BrowserRouter>
+            <Auth0ProviderWithHistory>
+              <BaseRoutes/>
+            </Auth0ProviderWithHistory>
+          </BrowserRouter>
+        </HelmetProvider>
       </FlagsProvider>
     </Sentry.ErrorBoundary>,
 )

yarn.lock

@@ -8896,6 +8896,13 @@ interpret@^2.2.0:
   resolved "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ip@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz"
@@ -10485,7 +10492,7 @@ longest-streak@^3.0.0:
   resolved "https://registry.npmjs.org/longest-streak/-/longest-streak-3.0.1.tgz"
   integrity sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -12606,11 +12613,27 @@ react-error-boundary@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+react-fast-compare@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-feature-flags@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/react-feature-flags/-/react-feature-flags-1.0.0.tgz"
   integrity sha512-KBFUkXjF7ifGWEQr2Ida4LdAtKGDOwFdTRlXipWxGP9a43vUBxP6IscpYQofGjlzlBcgmFKuzubcVheB6NliEg==
 
+react-helmet-async@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.3.0.tgz#7bd5bf8c5c69ea9f02f6083f14ce33ef545c222e"
+  integrity sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    invariant "^2.2.4"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.2.0"
+    shallowequal "^1.1.0"
+
 react-inspector@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/react-inspector/-/react-inspector-2.3.1.tgz"
@@ -13406,6 +13429,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz"