Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix: UX - Error logs in development from Empty state component #466

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 17, 2022
Merged

fix: UX - Error logs in development from Empty state component #466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7ccb432
refactor: Set up jest to fail tests on console errors
bryphe-coder Mar 16, 2022
ce70084
Add test cases; make sure green
bryphe-coder Mar 16, 2022
5c0b07a
Fix up test failure
bryphe-coder Mar 16, 2022
b23e7b3
Merge branch 'main' into bryphe/fix/452/empty-state-error
bryphe-coder Mar 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions site/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ module.exports = {
preset: "ts-jest",

roots: ["<rootDir>"],
setupFilesAfterEnv: ["./jest.setup.ts"],
transform: {
"^.+\\.tsx?$": "ts-jest",
},
Expand Down
22 changes: 22 additions & 0 deletions site/jest.setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, thanks!


// 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) => {
// 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}`)
}
})

// This is needed because we are compiling under `--isolatedModules`
export {}
21 changes: 21 additions & 0 deletions site/src/components/EmptyState/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.findByRole("button")
})
})
12 changes: 4 additions & 8 deletions site/src/components/EmptyState/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -23,20 +23,14 @@ 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 (
<Box className={styles.root} {...boxProps}>
<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>
)
Expand All @@ -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),
Expand Down