Adding some snapshot tests

test/Avatar.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from './test-utils'
+import { Avatar } from '../src'
+
+describe('Avatar', () => {
+  it('renders without crashing', () => {
+    const { asFragment } = render(<Avatar />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

test/Backdrop.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from './test-utils'
+import { Backdrop } from '../src'
+
+describe('Backdrop', () => {
+  it('renders without crashing', () => {
+    const { asFragment } = render(<Backdrop open={true} />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

test/Box.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from './test-utils'
+import { Box } from '../src'
+
+describe('Box', () => {
+  it('renders without crashing', () => {
+    const { asFragment } = render(<Box />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

test/Button.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { render } from './test-utils'
+import { Box, Button } from '../src'
+
+describe('Button', () => {
+  it('renders without crashing', () => {
+    const { asFragment } = render(
+      <>
+        <Box>
+          <Button m={1} disabled={false} color="default">
+            Default
+          </Button>
+          <Button m={1} disabled={true} color="default">
+            Default
+          </Button>
+        </Box>
+        <Box>
+          <Button m={1} disabled={false} color="primary">
+            Primary
+          </Button>
+          <Button m={1} disabled={true} color="primary">
+            Primary
+          </Button>
+        </Box>
+        <Box>
+          <Button m={1} disabled={false} color="secondary">
+            Secondary
+          </Button>
+          <Button m={1} disabled={true} color="secondary">
+            Secondary
+          </Button>
+        </Box>
+        <Box>
+          <Button m={1} disabled={false} variant="outlined" color="default">
+            Default
+          </Button>
+          <Button m={1} disabled={true} variant="outlined" color="default">
+            Default
+          </Button>
+        </Box>
+        <Box>
+          <Button m={1} disabled={false} variant="outlined" color="primary">
+            Primary
+          </Button>
+          <Button m={1} disabled={true} variant="outlined" color="primary">
+            Primary
+          </Button>
+        </Box>
+        <Box>
+          <Button m={1} disabled={false} variant="outlined" color="secondary">
+            Secondary
+          </Button>
+          <Button m={1} disabled={true} variant="outlined" color="secondary">
+            Secondary
+          </Button>
+        </Box>
+        <Box>
+          <Button m={1} disabled={false} variant="text" color="default">
+            Default
+          </Button>
+          <Button m={1} disabled={true} variant="text" color="default">
+            Default
+          </Button>
+        </Box>
+        <Box>
+          <Button m={1} disabled={false} variant="text" color="primary">
+            Primary
+          </Button>
+          <Button m={1} disabled={true} variant="text" color="primary">
+            Primary
+          </Button>
+        </Box>
+        <Box>
+          <Button m={1} disabled={false} variant="text" color="secondary">
+            Secondary
+          </Button>
+          <Button m={1} disabled={true} variant="text" color="secondary">
+            Secondary
+          </Button>
+        </Box>
+      </>
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

test/Card.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { render } from './test-utils'
+import {
+  Card,
+  CardActionArea,
+  CardMedia,
+  CardHeader,
+  CardContent,
+} from '../src'
+
+describe('Box', () => {
+  it('renders without crashing', () => {
+    const { asFragment } = render(
+      <Card>
+        <CardActionArea>
+          <CardMedia
+            height="120px"
+            image="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"
+            title="Committed image"
+          />
+          <CardHeader>Full Card Action</CardHeader>
+          <CardContent>
+            <p>The whole card can be an action area</p>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

test/Checkbox.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { render } from './test-utils'
+import { Checkbox, colors } from '../src'
+import { Icons } from '../stories/util/Icons'
+
+describe('Checkbox', () => {
+  it('renders without crashing', () => {
+    const { asFragment } = render(
+      <>
+        <Checkbox color="default" />
+        <Checkbox
+          checked={true}
+          color="default"
+          value="checkedA"
+          inputProps={{
+            'aria-label': 'checkbox',
+          }}
+        />
+        <Checkbox
+          checked={false}
+          color="primary"
+          inputProps={{
+            'aria-label': 'primary checkbox',
+          }}
+        />
+        <Checkbox
+          inputProps={{
+            'aria-label': 'uncontrolled-checkbox',
+          }}
+        />
+        <Checkbox
+          disabled={true}
+          inputProps={{
+            'aria-label': 'disabled checkbox',
+          }}
+        />
+        <Checkbox
+          disabled={true}
+          checked={true}
+          inputProps={{
+            'aria-label': 'disabled checked checkbox',
+          }}
+        />
+        <Checkbox
+          indeterminate={true}
+          inputProps={{
+            'aria-label': 'indeterminate checkbox',
+          }}
+        />
+        <Checkbox
+          defaultChecked={true}
+          color="default"
+          inputProps={{
+            'aria-label': 'checkbox with default color',
+          }}
+        />
+        <Checkbox
+          style={{ color: 'red' }}
+          icon={<Icons.FavoriteBorder />}
+          checkedIcon={<Icons.Favorite />}
+        />
+        <Checkbox
+          icon={<Icons.BookmarkBorder style={{ color: colors.grey[600] }} />}
+          checkedIcon={
+            <Icons.Bookmark style={{ color: colors.lightBlue[400] }} />
+          }
+        />
+      </>
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

test/__snapshots__/AppBar.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppBar renders without crashing 1`] = `
+<DocumentFragment>
+  <header
+    class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary WithStyles(ForwardRef(AppBar))-root-1 WithStyles(ForwardRef(AppBar))-root-2 mui-fixed MuiPaper-elevation4"
+  />
+</DocumentFragment>
+`;

test/__snapshots__/Avatar.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar renders without crashing 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiAvatar-root MuiAvatar-circle WithStyles(ForwardRef(Avatar))-root-1 WithStyles(ForwardRef(Avatar))-root-2 MuiAvatar-colorDefault"
+  >
+    <svg
+      aria-hidden="true"
+      class="MuiSvgIcon-root MuiAvatar-fallback"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;

test/__snapshots__/Backdrop.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Backdrop renders without crashing 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="MuiBackdrop-root WithStyles(ForwardRef(Backdrop))-root-1 WithStyles(ForwardRef(Backdrop))-root-2"
+    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+  />
+</DocumentFragment>
+`;

test/__snapshots__/Box.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Box renders without crashing 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiBox-root MuiBox-root-3 Styled(MuiBox)-root-1 Styled(MuiBox)-root-2"
+  />
+</DocumentFragment>
+`;