Fix DialogContent borderBottom + test coverage (#1151)

Author: Luke Bowerman

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [UNRELEASED]
+
+### Fixed
+
+- `DialogContent` with `borderBottom` prop CSS output error (no border, no flex: 8)
+
 ## [0.9.4] - 2020-06-29
 
 ### Added

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

@@ -26,17 +26,34 @@
 
 import 'jest-styled-components'
 import React from 'react'
-import { assertSnapshot } from '@looker/components-test-utils'
+import { assertSnapshot, renderWithTheme } from '@looker/components-test-utils'
 import { DialogContent } from './DialogContent'
 
-test('DialogContent - no overflow', () => {
-  assertSnapshot(<DialogContent>Stuff</DialogContent>)
-})
-
-test('DialogContent - no overflow', () => {
-  assertSnapshot(
-    <DialogContent>
-      <div style={{ height: '4rem' }}>Stuff</div>
-    </DialogContent>
-  )
+describe('DialogContent', () => {
+  test('Snapshot', () => {
+    assertSnapshot(<DialogContent>Stuff</DialogContent>)
+  })
+
+  test('Snapshot - No overflow', () => {
+    assertSnapshot(
+      <DialogContent>
+        <div style={{ height: '4rem' }}>Stuff</div>
+      </DialogContent>
+    )
+  })
+
+  test('borderBottom', () => {
+    const { getByText } = renderWithTheme(
+      <>
+        <DialogContent>No border</DialogContent>
+        <DialogContent borderBottom>Has border</DialogContent>
+      </>
+    )
+
+    const noBorder = getByText('No border')
+    expect(noBorder.parentNode).toHaveStyle('border-bottom: none')
+
+    const hasBorder = getByText('Has border')
+    expect(hasBorder.parentNode).toHaveStyle('border-bottom: 1px solid #DEE1E5')
+  })
 })

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

@@ -117,7 +117,7 @@ const Outer = styled.div<{ borderBottom?: boolean }>`
   ${layout}
 
   ${({ borderBottom, theme: { colors } }) =>
-    borderBottom && `border-bottom: 1px solid ${colors.ui2}`}
+    borderBottom && `border-bottom: 1px solid ${colors.ui2};`}
 
   flex: 8;
   overflow: auto;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DialogContent - no overflow 1`] = `
+exports[`DialogContent Snapshot - No overflow 1`] = `
 .c0 {
   -webkit-flex: 8;
   -ms-flex: 8;
@@ -27,12 +27,20 @@ exports[`DialogContent - no overflow 1`] = `
   <div
     className="c1"
   >
-    Stuff
+    <div
+      style={
+        Object {
+          "height": "4rem",
+        }
+      }
+    >
+      Stuff
+    </div>
   </div>
 </div>
 `;
 
-exports[`DialogContent - no overflow 2`] = `
+exports[`DialogContent Snapshot 1`] = `
 .c0 {
   -webkit-flex: 8;
   -ms-flex: 8;
@@ -59,15 +67,7 @@ exports[`DialogContent - no overflow 2`] = `
   <div
     className="c1"
   >
-    <div
-      style={
-        Object {
-          "height": "4rem",
-        }
-      }
-    >
-      Stuff
-    </div>
+    Stuff
   </div>
 </div>
 `;