From 7ccb4321a9ac1556de811490dc612805de997a3a Mon Sep 17 00:00:00 2001
From: Bryan Phelps <bryan@coder.com>
Date: Wed, 16 Mar 2022 20:45:27 +0000
Subject: [PATCH 1/3] refactor: Set up jest to fail tests on console errors

---
 site/jest.config.js |  1 +
 site/jest.setup.ts  | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 site/jest.setup.ts

diff --git a/site/jest.config.js b/site/jest.config.js
index 17e6e73fd154d..d72d368ab8efa 100644
--- a/site/jest.config.js
+++ b/site/jest.config.js
@@ -11,6 +11,7 @@ module.exports = {
       preset: "ts-jest",
 
       roots: ["<rootDir>"],
+      setupFilesAfterEnv: ["./jest.setup.ts"],
       transform: {
         "^.+\\.tsx?$": "ts-jest",
       },
diff --git a/site/jest.setup.ts b/site/jest.setup.ts
new file mode 100644
index 0000000000000..14aff6d0e1d55
--- /dev/null
+++ b/site/jest.setup.ts
@@ -0,0 +1,22 @@
+// Helper utility to fail jest tests if a console.error is logged
+// Pulled from this blog post:
+// https://www.benmvp.com/blog/catch-warnings-jest-tests/
+
+// For now, I limited this to just 'error' - but failing on warnings
+// would be a nice next step! We may need to filter out some noise
+// from material-ui though.
+const CONSOLE_FAIL_TYPES = ['error', /* 'warn' */]
+
+// Throw errors when a `console.error` or `console.warn` happens
+// by overriding the functions
+CONSOLE_FAIL_TYPES.forEach((logType: string) => {
+  const consoleAsAny = global.console as any
+  consoleAsAny[logType] = (message: string): void => {
+    throw new Error(
+      `Failing due to console.${logType} while running test!\n\n${message}`,
+    )
+  }
+})
+
+// This is needed because we are compiling under `--isolatedModules`
+export { }
\ No newline at end of file

From ce7008437900ee3bc066079e4f5a1ba3d5a9e052 Mon Sep 17 00:00:00 2001
From: Bryan Phelps <bryan@coder.com>
Date: Wed, 16 Mar 2022 21:44:41 +0000
Subject: [PATCH 2/3] Add test cases; make sure green

---
 site/jest.setup.ts                            | 10 ++++-----
 site/src/components/EmptyState/index.test.tsx | 21 +++++++++++++++++++
 site/src/components/EmptyState/index.tsx      | 12 ++++-------
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/site/jest.setup.ts b/site/jest.setup.ts
index 14aff6d0e1d55..71ac0a695c1da 100644
--- a/site/jest.setup.ts
+++ b/site/jest.setup.ts
@@ -5,18 +5,18 @@
 // For now, I limited this to just 'error' - but failing on warnings
 // would be a nice next step! We may need to filter out some noise
 // from material-ui though.
-const CONSOLE_FAIL_TYPES = ['error', /* 'warn' */]
+const CONSOLE_FAIL_TYPES = ["error" /* 'warn' */]
 
 // Throw errors when a `console.error` or `console.warn` happens
 // by overriding the functions
 CONSOLE_FAIL_TYPES.forEach((logType: string) => {
+  // Suppressing the no-explicit-any to override certain console functions for testing
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const consoleAsAny = global.console as any
   consoleAsAny[logType] = (message: string): void => {
-    throw new Error(
-      `Failing due to console.${logType} while running test!\n\n${message}`,
-    )
+    throw new Error(`Failing due to console.${logType} while running test!\n\n${message}`)
   }
 })
 
 // This is needed because we are compiling under `--isolatedModules`
-export { }
\ No newline at end of file
+export {}
diff --git a/site/src/components/EmptyState/index.test.tsx b/site/src/components/EmptyState/index.test.tsx
index ff75a28b08365..bd3b7775aed8d 100644
--- a/site/src/components/EmptyState/index.test.tsx
+++ b/site/src/components/EmptyState/index.test.tsx
@@ -11,4 +11,25 @@ describe("EmptyState", () => {
     // Then
     await screen.findByText("Hello, world")
   })
+
+  it("renders description text", async () => {
+    // When
+    render(<EmptyState message="Hello, world" description="Friendly greeting" />)
+
+    // Then
+    await screen.findByText("Hello, world")
+    await screen.findByText("Friendly greeting")
+  })
+
+  it("renders description component", async () => {
+    // Given
+    const description = <button title="Click me" />
+
+    // When
+    render(<EmptyState message="Hello, world" description={description} />)
+
+    // Then
+    await screen.findByText("Hello, world")
+    await screen.findByText("Click me")
+  })
 })
diff --git a/site/src/components/EmptyState/index.tsx b/site/src/components/EmptyState/index.tsx
index 9ede15116a2f3..5fab2e04dae00 100644
--- a/site/src/components/EmptyState/index.tsx
+++ b/site/src/components/EmptyState/index.tsx
@@ -6,7 +6,7 @@ import Typography from "@material-ui/core/Typography"
 
 export interface EmptyStateProps {
   /** Text Message to display, placed inside Typography component */
-  message: React.ReactNode
+  message: string
   /** Longer optional description to display below the message */
   description?: React.ReactNode
   button?: ButtonProps
@@ -23,8 +23,6 @@ export interface EmptyStateProps {
 export const EmptyState: React.FC<EmptyStateProps> = (props) => {
   const { message, description, button, ...boxProps } = props
   const styles = useStyles()
-
-  const descClassName = `${styles.description}`
   const buttonClassName = `${styles.button} ${button && button.className ? button.className : ""}`
 
   return (
@@ -32,11 +30,7 @@ export const EmptyState: React.FC<EmptyStateProps> = (props) => {
       <Typography variant="h5" color="textSecondary" className={styles.header}>
         {message}
       </Typography>
-      {description && (
-        <Typography variant="body2" color="textSecondary" className={descClassName}>
-          {description}
-        </Typography>
-      )}
+      {description && <div className={styles.description}>{description}</div>}
       {button && <Button variant="contained" color="primary" {...button} className={buttonClassName} />}
     </Box>
   )
@@ -59,6 +53,8 @@ const useStyles = makeStyles(
     description: {
       marginTop: theme.spacing(2),
       marginBottom: theme.spacing(1),
+      color: theme.palette.text.secondary,
+      fontSize: theme.typography.body2.fontSize,
     },
     button: {
       marginTop: theme.spacing(2),

From 5c0b07a08cd14398cbcdac69d202a327ac6b2e64 Mon Sep 17 00:00:00 2001
From: Bryan Phelps <bryan@coder.com>
Date: Wed, 16 Mar 2022 23:03:44 +0000
Subject: [PATCH 3/3] Fix up test failure

---
 site/src/components/EmptyState/index.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/EmptyState/index.test.tsx b/site/src/components/EmptyState/index.test.tsx
index bd3b7775aed8d..f7c16ee3d4674 100644
--- a/site/src/components/EmptyState/index.test.tsx
+++ b/site/src/components/EmptyState/index.test.tsx
@@ -30,6 +30,6 @@ describe("EmptyState", () => {
 
     // Then
     await screen.findByText("Hello, world")
-    await screen.findByText("Click me")
+    await screen.findByRole("button")
   })
 })