Extract language

presleyp · presleyp · commit 1dda810ba138 · 2022-04-13T20:12:02.000Z
diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -1,13 +1,14 @@
 import { screen } from "@testing-library/react"
 import React from "react"
-import { render } from "../../test_helpers"
+import { MockPager, render } from "../../test_helpers"
 import { UsersPage } from "./UsersPage"
+import { Language } from "./UsersPageView"
 
 describe("Users Page", () => {
   it("has a header with the total number of users", async () => {
     render(<UsersPage />)
     const total = await screen.findByText(/\d+ total/)
-    expect(total.innerHTML).toEqual("2 total")
+    expect(total.innerHTML).toEqual(Language.pageSubtitle(MockPager))
   })
   it("shows users", async () => {
     render(<UsersPage />)
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -4,8 +4,9 @@ import { Pager, UserResponse } from "../../api/types"
 import { Header } from "../../components/Header"
 import { UsersTable } from "../../components/UsersTable/UsersTable"
 
-const Language = {
+export const Language = {
   pageTitle: "Users",
+  pageSubtitle: (pager: Pager | undefined) => (pager ? `{pager.total} total` : ""),
 }
 
 export interface UsersPageViewProps {
@@ -17,7 +18,7 @@ export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, pager }) =>
   const styles = useStyles()
   return (
     <div className={styles.flexColumn}>
-      <Header title={Language.pageTitle} subTitle={pager ? `${pager.total} total` : ""} />
+      <Header title={Language.pageTitle} subTitle={Language.pageSubtitle(pager)} />
       <UsersTable users={users} />
     </div>
   )
