test: Deprecate Dialog layout snapshot tests (#1897)

Author: Luke Bowerman

packages/components/src/Dialog/Layout/DialogContent.test.tsx

@@ -24,21 +24,23 @@
 
  */
 
-import 'jest-styled-components'
 import React from 'react'
-import { assertSnapshot } from '@looker/components-test-utils'
+import { renderWithTheme } from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
 import { DialogContent } from './DialogContent'
 
 describe('DialogContent', () => {
-  test('Snapshot', () => {
-    assertSnapshot(<DialogContent>Stuff</DialogContent>)
+  test('basic', () => {
+    renderWithTheme(<DialogContent>Stuff</DialogContent>)
+    expect(screen.getByText('Stuff')).toBeInTheDocument()
   })
 
-  test('Snapshot - No overflow', () => {
-    assertSnapshot(
-      <DialogContent>
-        <div style={{ height: '4rem' }}>Stuff</div>
+  test('hasHeader & hasFooter', () => {
+    renderWithTheme(
+      <DialogContent hasHeader hasFooter>
+        Stuff
       </DialogContent>
     )
+    expect(screen.getByText('Stuff')).toBeInTheDocument()
   })
 })

packages/components/src/Dialog/Layout/DialogFooter.test.tsx

@@ -24,36 +24,27 @@
 
  */
 
-import 'jest-styled-components'
 import React from 'react'
-import { assertSnapshot } from '@looker/components-test-utils'
-import { DialogContext } from '../DialogContext'
+import { renderWithTheme } from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
 import { DialogFooter } from './DialogFooter'
 
-test('DialogFooter with Button', () => {
-  assertSnapshot(
-    <DialogFooter>
-      <button>Cancel</button>
-    </DialogFooter>
-  )
-})
-
-test('DialogFooter with DialogContext', () => {
-  assertSnapshot(
-    <DialogContext.Consumer>
-      {({ closeModal }) => (
-        <DialogFooter>
-          <button onClick={closeModal}>Cancel</button>
-          <button
-            onClick={() => {
-              alert('Doing things...')
-              closeModal()
-            }}
-          >
-            Yes, Delete "Stuff"
-          </button>
-        </DialogFooter>
-      )}
-    </DialogContext.Consumer>
-  )
+describe('DialogFooter', () => {
+  test('basic', () => {
+    renderWithTheme(
+      <DialogFooter>
+        <button>Cancel</button>
+      </DialogFooter>
+    )
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  test('secondary', () => {
+    renderWithTheme(
+      <DialogFooter secondary={<button>Nevermind</button>}>
+        <button>Cancel</button>
+      </DialogFooter>
+    )
+    expect(screen.getByText('Nevermind')).toBeInTheDocument()
+  })
 })

packages/components/src/Dialog/Layout/DialogHeader.test.tsx

@@ -26,19 +26,11 @@
 
 import 'jest-styled-components'
 import React from 'react'
-import { assertSnapshot, renderWithTheme } from '@looker/components-test-utils'
+import { renderWithTheme } from '@looker/components-test-utils'
 import { screen } from '@testing-library/react'
 import { DialogHeader } from './DialogHeader'
 
 describe('DialogHeader', () => {
-  test('Snapshot', () => {
-    assertSnapshot(
-      <DialogHeader id="test-DialogHeader">
-        The Heading for a Dialog
-      </DialogHeader>
-    )
-  })
-
   test('Passes through DOM props', async () => {
     renderWithTheme(
       <DialogHeader aria-label="ARIA label">Heading</DialogHeader>