fix: add fallback page title when first name is missing (#1573)

* fix: add fallback page title when first name is missing

* fix: correctly pass external param to <ToolIconAndLink>

* test: add home page title tests

* fix: add parameter to setup; fix default title test

src/home/components/Home.js

@@ -93,7 +93,13 @@ const Home = () => {
 
   return (
     <PageContainer>
-      <PageHeader header={t('home.page_title', { name: user.firstName })} />
+      <PageHeader
+        header={
+          user.firstName
+            ? t('home.page_title', { name: user.firstName })
+            : t('home.document_title')
+        }
+      />
       <Grid container spacing={3}>
         <Grid item xs={12} md={6}>
           <Stack spacing={3}>

src/home/components/Home.test.js

@@ -29,16 +29,15 @@ jest.mock('home/homeService', () => ({
   fetchHomeData: jest.fn(),
 }));
 
-const setup = async () => {
+const setup = async (
+  currentUserData = { firstName: 'First', lastName: 'Last' }
+) => {
   await render(<Home />, {
     account: {
       hasToken: true,
       currentUser: {
         fetching: false,
-        data: {
-          firstName: 'First',
-          lastName: 'Last',
-        },
+        data: currentUserData,
       },
     },
   });
@@ -249,3 +248,25 @@ test('Home: Display defaults', async () => {
     )
   ).toBeInTheDocument();
 });
+
+test('Home: Display title', async () => {
+  fetchHomeData.mockReturnValue(
+    Promise.resolve({
+      groups: [],
+      landscapes: [],
+    })
+  );
+  await setup();
+  expect(screen.getByText(/First’s Terraso/i)).toBeInTheDocument();
+});
+
+test('Home: Display title (default)', async () => {
+  fetchHomeData.mockReturnValue(
+    Promise.resolve({
+      groups: [],
+      landscapes: [],
+    })
+  );
+  await setup({ firstName: undefined, lastName: undefined });
+  expect(screen.getByText(/Terraso Home/i)).toBeInTheDocument();
+});

src/tool/components/ToolCard.js

@@ -153,7 +153,11 @@ const ToolCard = ({ tool }) => {
           </section>
 
           <section>
-            <ToolIconAndLink tool={tool} title={toolTitle} external />
+            <ToolIconAndLink
+              tool={tool}
+              title={toolTitle}
+              external={external}
+            />
           </section>
         </Stack>
       </Card>