Merge pull request #1445 from cozy/am-null-child

Support ActionMenu having null children
cozy · Apr 28, 2020 · 63e20d2 · 63e20d2
2 parents 214b0e0 + 65dbde2
commit 63e20d2
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 2 deletions.
diff --git a/react/ActionMenu/Readme.md b/react/ActionMenu/Readme.md
@@ -18,7 +18,7 @@ const hideMenu = () => setState({ menuDisplayed: false });
   {state.menuDisplayed &&
     <ActionMenu
       onClose={hideMenu}>
-      <ActionMenuItem left={<Icon icon='file' />}>Item 1</ActionMenuItem>
+      <ActionMenuItem left={<Icon icon='file' />} right={<Icon icon='warning' />}>Item 1</ActionMenuItem>
       <ActionMenuItem left={<Icon icon='right' />}>Item 2</ActionMenuItem>
       <ActionMenuItem left={<Icon icon='file' />}>
         <div>

diff --git a/react/ActionMenu/__snapshots__/index.spec.jsx.snap b/react/ActionMenu/__snapshots__/index.spec.jsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionMenu should support null children 1`] = `
+<div
+  className="styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa"
+>
+  <ActionMenuItem>
+    Item 1
+  </ActionMenuItem>
+</div>
+`;
diff --git a/react/ActionMenu/index.jsx b/react/ActionMenu/index.jsx
@@ -80,7 +80,7 @@ const ActionMenu = ({
           })}
         >
           {React.Children.map(children, child =>
-            child.type === ActionMenuHeader && isDesktop ? null : child
+            child && child.type === ActionMenuHeader && isDesktop ? null : child
           )}
         </div>
       </ActionMenuWrapper>

diff --git a/react/ActionMenu/index.spec.jsx b/react/ActionMenu/index.spec.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { mount } from 'enzyme'
+
+import ActionMenu, { ActionMenuItem } from './'
+import { fixPopperTesting } from '../Popper/testing'
+
+describe('ActionMenu', () => {
+  fixPopperTesting()
+
+  it('should support null children', () => {
+    const comp = mount(
+      <ActionMenu onClose={jest.fn()}>
+        <ActionMenuItem>Item 1</ActionMenuItem>
+        {null}
+      </ActionMenu>
+    )
+    expect(
+      comp
+        .find(ActionMenuItem)
+        .parent()
+        .getElement()
+    ).toMatchSnapshot()
+  })
+})
diff --git a/react/Popper/testing.js b/react/Popper/testing.js
@@ -0,0 +1,21 @@
+// Fixes the error "TypeError: document.createRange is not a function" in jest,
+// see https://github.com/mui-org/material-ui/issues/15726#issuecomment-493124813
+export const fixPopperTesting = () => {
+  let createRangeBackup
+
+  beforeAll(() => {
+    createRangeBackup = global.document.createRange
+    global.document.createRange = jest.fn(() => ({
+      setStart: () => {},
+      setEnd: () => {},
+      commonAncestorContainer: {
+        nodeName: 'BODY',
+        ownerDocument: document
+      }
+    }))
+  })
+
+  afterAll(() => {
+    global.document.createRange = createRangeBackup
+  })
+}
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -12,6 +12,9 @@ exports[`ActionMenu should render examples: ActionMenu 1`] = `
               <use xlink:href=\\"#file\\"></use>
             </svg></div>
           <div class=\\"styles__bd___1Uv-F u-mr-1\\">Item 1</div>
+          <div class=\\"styles__img___3SHpG u-mr-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+              <use xlink:href=\\"#warning\\"></use>
+            </svg></div>
         </div>
         <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
           <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">