feat(Dropdown): update Dropdown for bs v4 beta

TheSharpieOne · TheSharpieOne · commit 53687fa55cd7 · 2017-08-16T13:53:40.000-04:00
Add .show to DropdownMenu base on context.isOpen
Remove .active from DropdownToggle to match bootstrap
Update tests
diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
@@ -24,7 +24,10 @@ const DropdownMenu = (props, context) => {
   const classes = mapToCssModules(classNames(
     className,
     'dropdown-menu',
-    { 'dropdown-menu-right': right }
+    {
+      'dropdown-menu-right': right,
+      show: context.isOpen,
+    }
   ), cssModule);
 
   return (
diff --git a/src/DropdownToggle.js b/src/DropdownToggle.js
@@ -62,7 +62,6 @@ class DropdownToggle extends React.Component {
       {
         'dropdown-toggle': caret || split,
         'dropdown-toggle-split': split,
-        active: this.context.isOpen,
         'nav-link': nav
       }
     ), cssModule);
diff --git a/src/__tests__/DropdownMenu.spec.js b/src/__tests__/DropdownMenu.spec.js
@@ -26,6 +26,40 @@ describe('DropdownMenu', () => {
     expect(wrapper.find('.dropdown-menu').length).toBe(1);
   });
 
+  it('should not have the class "show" when isOpen context is false', () => {
+    isOpen = false;
+    const wrapper = mount(
+      <DropdownMenu>
+        <p>Content</p>
+      </DropdownMenu>,
+      {
+        context: {
+          isOpen: isOpen
+        }
+      }
+    );
+
+    expect(wrapper.find('.dropdown-menu').hasClass('show')).toBe(false);
+    expect(wrapper.find('.show').length).toBe(0);
+  });
+
+  it('should have the class "show" when isOpen context is true', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <DropdownMenu>
+        <p>Content</p>
+      </DropdownMenu>,
+      {
+        context: {
+          isOpen: isOpen
+        }
+      }
+    );
+
+    expect(wrapper.find('.dropdown-menu').hasClass('show')).toBe(true);
+    expect(wrapper.find('.show').length).toBe(1);
+  });
+
   it('should render right aligned menus', () => {
     isOpen = true;
     const wrapper = mount(

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,6 @@ class DropdownToggle extends React.Component {`
`62`	`62`	`{`
`63`	`63`	`'dropdown-toggle': caret \|\| split,`
`64`	`64`	`'dropdown-toggle-split': split,`
`65`		`- active: this.context.isOpen,`
`66`	`65`	`'nav-link': nav`
`67`	`66`	`}`
`68`	`67`	`), cssModule);`