Test frontend

ammario · ammario · commit d0085c5d9d5a · 2022-09-01T02:12:16.000Z
diff --git a/site/src/pages/UsersPage/DAUCharts.test.tsx b/site/src/pages/UsersPage/DAUCharts.test.tsx
@@ -0,0 +1,34 @@
+import { render } from "testHelpers/renderHelpers"
+import { DAUChart, Language } from "./DAUCharts"
+
+import { screen } from "@testing-library/react"
+import { ResizeObserver } from "resize-observer"
+
+Object.defineProperty(window, "ResizeObserver", {
+  value: ResizeObserver,
+})
+
+describe("DAUChart", () => {
+  it("renders a helpful paragraph on empty state", async () => {
+    render(
+      <DAUChart
+        userMetricsData={{
+          entries: [],
+        }}
+      />,
+    )
+
+    await screen.findAllByText(Language.loadingText)
+  })
+  it("renders a graph", async () => {
+    render(
+      <DAUChart
+        userMetricsData={{
+          entries: [{ date: "2020-01-01", daus: 1 }],
+        }}
+      />,
+    )
+
+    await screen.findAllByText(Language.chartTitle)
+  })
+})
diff --git a/site/src/pages/UsersPage/DAUCharts.tsx b/site/src/pages/UsersPage/DAUCharts.tsx
@@ -26,14 +26,18 @@ ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, T
 export interface DAUChartProps {
   userMetricsData: TypesGen.DAUsResponse
 }
+export const Language = {
+  loadingText: "DAU stats are loading. Check back later.",
+  chartTitle: "Daily Active Users",
+}
 
 export const DAUChart: FC<DAUChartProps> = ({ userMetricsData }) => {
   const theme: Theme = useTheme()
 
   if (userMetricsData.entries.length === 0) {
     return (
       <div style={{ marginTop: "-20px" }}>
-        <p>DAU stats are loading. Check back later.</p>
+        <p>{Language.loadingText}</p>
       </div>
     )
   }
@@ -73,12 +77,10 @@ export const DAUChart: FC<DAUChartProps> = ({ userMetricsData }) => {
     <>
       <WorkspaceSection>
         <Stack direction="row" spacing={1} alignItems="center">
-          <h3>Daily Active Users</h3>
+          <h3>{Language.chartTitle}</h3>
           <HelpTooltip size="small">
             <HelpTooltipTitle>How do we calculate DAUs?</HelpTooltipTitle>
-            <HelpTooltipText>
-              We use daily, unique workspace connection traffic to compute DAUs.
-            </HelpTooltipText>
+            <HelpTooltipText>We use workspace connection traffic to compute DAUs.</HelpTooltipText>
           </HelpTooltip>
         </Stack>
         <Line
