PCF-314 Add link to the PerfCompare Matrix channel on home page (moz…

…illa#602)
esanuandra · Feb 20, 2024 · e09c728 · e09c728
1 parent e7eaf9b
commit e09c728
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 4 deletions.
diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx
@@ -21,13 +21,26 @@ describe('App', () => {
     render(<App />);
 
     // Title appears
-    expect(screen.getByText(/PerfCompare/i)).toBeInTheDocument();
+    const title = screen.getAllByText(/PerfCompare/i)[1];
+    expect(title).toBeInTheDocument();
 
     act(() => void jest.runAllTimers());
     const homeText = screen.getByText('Compare with a base or over time');
     expect(homeText).toBeInTheDocument();
   });
 
+  test('Should display PerfCompare Matrix channel link', async () => {
+    render(<App />);
+
+    const link = await screen.findByRole('link', {
+      name: '#perfcompare:mozilla.org on Matrix',
+    });
+    expect(link).toHaveAttribute(
+      'href',
+      'https://matrix.to/#/#perfcompare:mozilla.org',
+    );
+  });
+
   test('Should switch between dark mode and light mode on toggle', async () => {
     // set delay to null to prevent test time-out due to useFakeTimers
     const user = userEvent.setup({ delay: null });

diff --git a/src/__tests__/__snapshots__/App.test.tsx.snap b/src/__tests__/__snapshots__/App.test.tsx.snap
@@ -91,6 +91,17 @@ exports[`App CompareResults loader Should render an error page when the treeherd
           >
             File a bug on Bugzilla.
           </a>
+           
+          Find us at
+           
+          <a
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1qhous5-MuiTypography-root-MuiLink-root"
+            href="https://matrix.to/#/#perfcompare:mozilla.org"
+            target="_blank"
+          >
+            #perfcompare:mozilla.org on Matrix
+          </a>
+          .
         </div>
       </div>
     </div>
@@ -233,6 +244,17 @@ exports[`App CompareResults loader Should render an error page when the treeherd
           >
             File a bug on Bugzilla.
           </a>
+           
+          Find us at
+           
+          <a
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1qhous5-MuiTypography-root-MuiLink-root"
+            href="https://matrix.to/#/#perfcompare:mozilla.org"
+            target="_blank"
+          >
+            #perfcompare:mozilla.org on Matrix
+          </a>
+          .
         </div>
       </div>
     </div>

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -22,12 +22,18 @@ import SearchView from './Search/SearchView';
 import { PageError } from './Shared/PageError';
 import SnackbarCloseButton from './Shared/SnackbarCloseButton';
 
-const strings: BannerStrings = {
+const strings: InfoStrings = {
   text: Strings.components.topBanner.text,
   linkText: Strings.components.topBanner.linkText,
   href: Strings.components.topBanner.href,
 };
 
+const contact: InfoStrings = {
+  text: Strings.components.contact.text,
+  linkText: Strings.components.contact.linkText,
+  href: Strings.components.contact.href,
+};
+
 type DivProps = React.HTMLProps<HTMLDivElement>;
 
 const AlertContainer = React.forwardRef<HTMLDivElement, DivProps>(
@@ -95,18 +101,22 @@ function App() {
               {strings.text}{' '}
               <Link href={strings.href} target='_blank'>
                 {strings.linkText}
+              </Link>{' '}
+              {contact.text}{' '}
+              <Link href={contact.href} target='_blank'>
+                {contact.linkText}
               </Link>
+              .
             </div>
           </Alert>
-
           <RouterProvider router={router} />
         </SnackbarProvider>
       ) : null}
     </ThemeProvider>
   );
 }
 
-interface BannerStrings {
+interface InfoStrings {
   text: string;
   linkText: string;
   href: string;

diff --git a/src/resources/Strings.tsx b/src/resources/Strings.tsx
@@ -11,6 +11,11 @@ export const Strings = {
       linkText: 'File a bug on Bugzilla.',
       href: 'https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing&component=PerfCompare&status_whiteboard=[pcf]',
     },
+    contact: {
+      text: 'Find us at',
+      linkText: '#perfcompare:mozilla.org on Matrix',
+      href: 'https://matrix.to/#/#perfcompare:mozilla.org',
+    },
     header: {
       title: 'PerfCompare',
       tagline: