feat(navbar.test.tsx): add tests for navLinkList dividers and icons

Added new tests for the optional NavLinkList props: dividerAbove? and icon? fix #456
HospitalRun · Jun 20, 2020 · 7bae6c4 · 7bae6c4
1 parent 361aa2b
commit 7bae6c4
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 1 deletion.
diff --git a/stories/navbar.stories.tsx b/stories/navbar.stories.tsx
@@ -221,7 +221,7 @@ storiesOf('Navbar', module)
       ]}
     />
   ))
-  .add('Mobile Navbar w/ link list dividers & icons)', () => (
+  .add('Mobile Navbar w/ link list dividers & icons', () => (
     <Navbar
       bg="dark"
       variant="dark"

diff --git a/test/navbar.test.tsx b/test/navbar.test.tsx
@@ -144,6 +144,89 @@ describe('Navbar', () => {
     expect(bootstrapNavDropdown.text()).toEqual('A1')
   })
 
+  it('should render link list item with divider when dividerAbove prop is passed as true', () => {
+    const onClickButton = sinon.spy()
+    const onChangeInput = sinon.spy()
+    const NavbarWrapper = shallow(
+      <Navbar
+        navItems={[
+          {
+            type: 'header',
+            label: 'test',
+          },
+          {
+            type: 'search',
+            placeholderText: 'Custom',
+            buttonText: 'Text',
+            buttonColor: 'secondary',
+            onClickButton,
+            onChangeInput,
+          },
+          {
+            type: 'link-list',
+            label: 'Link',
+            children: [
+              {
+                type: 'link',
+                label: 'A1',
+              },
+              {
+                type: 'link',
+                label: 'A2',
+                dividerAbove: true,
+              },
+            ],
+          },
+        ]}
+      />,
+    )
+    const items = NavbarWrapper.find(NavDropdown.Item)
+    expect(items.at(0).hasClass('border-top mt-1 pt-2')).toEqual(false)
+    expect(items.at(1).hasClass('border-top mt-1 pt-2')).toEqual(true)
+  })
+
+  it('should render link list item with an icon only when the icon prop is passed', () => {
+    const onClickButton = sinon.spy()
+    const onChangeInput = sinon.spy()
+    const NavbarWrapper = shallow(
+      <Navbar
+        navItems={[
+          {
+            type: 'header',
+            label: 'test',
+          },
+          {
+            type: 'search',
+            placeholderText: 'Custom',
+            buttonText: 'Text',
+            buttonColor: 'secondary',
+            onClickButton,
+            onChangeInput,
+          },
+          {
+            type: 'link-list',
+            label: 'Link',
+            children: [
+              {
+                type: 'link',
+                label: 'A1',
+              },
+              {
+                type: 'link',
+                label: 'A2',
+                icon: 'patient-add',
+              },
+            ],
+          },
+        ]}
+      />,
+    )
+    const items = NavbarWrapper.find(NavDropdown.Item)
+    expect(items.at(0).children()).toHaveLength(1) // link without icon prop only has one child (label)
+    expect(items.at(1).children()).toHaveLength(2) // link with icon prop has two children (icon, label)
+    expect(items.at(1).childAt(0).prop('icon')).toEqual('patient-add') // link with icon prop has passed the prop value to the child icon
+  })
+
   it('should render header label as passed in label prop', () => {
     const onClickButton = sinon.spy()
     const onChangeInput = sinon.spy()