@fluentui-react-native/menu 1.14.42 → 1.15.0

package/src/__tests__/Menu.test.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import * as renderer from 'react-test-renderer';
+import { act } from 'react';
 
 import { Menu } from '../Menu/Menu';
 import { MenuDivider } from '../MenuDivider/MenuDivider';
@@ -16,8 +15,9 @@ import MenuTrigger from '../MenuTrigger/MenuTrigger';
 
 describe('Menu component tests', () => {
   it('Menu default', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu>
           <MenuTrigger>
             <Button>Default</Button>
@@ -28,14 +28,16 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu open', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu open>
           <MenuTrigger>
             <Button>Open</Button>
@@ -46,14 +48,36 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu defaultOpen', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
+        <Menu defaultOpen>
+          <MenuTrigger>
+            <Button>Open</Button>
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <MenuItem>Option 1</MenuItem>
+            </MenuList>
+          </MenuPopover>
+        </Menu>,
+      );
+    });
+    const tree = component!.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Menu defaultOpen with disabled', () => {
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu defaultOpen>
           <MenuTrigger>
             <Button>Open</Button>
@@ -65,14 +89,16 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu open checkbox and divider', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu open>
           <MenuTrigger>
             <Button>Open</Button>
@@ -87,14 +113,16 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu open radio', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu open>
           <MenuTrigger>
             <Button>Open</Button>
@@ -106,14 +134,16 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu open checkbox defaultChecked', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu open defaultChecked={['Option 1']}>
           <MenuTrigger>
             <Button>Open</Button>
@@ -126,14 +156,16 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu open checkbox checked', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu open checked={['Option 1']}>
           <MenuTrigger>
             <Button>Open</Button>
@@ -146,14 +178,16 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Menu submenu', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu open>
           <MenuTrigger>
             <Button>Default</Button>
@@ -174,16 +208,18 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   // Note the capital T the "Tip" (in the snapshot)
   // It is intentional as it matches the same prop in NetUI
   it('Menu alwaysShowToolTip', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         <Menu>
           <MenuTrigger>
             <Button tooltip="A Tooltip">Button</Button>
@@ -201,15 +237,17 @@ describe('Menu component tests', () => {
             </MenuList>
           </MenuPopover>
         </Menu>,
-      )
-      .toJSON();
+      );
+    });
+    const tree = component!.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
 
 it('Menu open menu group and menu header', () => {
-  const tree = renderer
-    .create(
+  let component: renderer.ReactTestRenderer;
+  act(() => {
+    component = renderer.create(
       <Menu open>
         <MenuTrigger>
           <Button>Open</Button>
@@ -228,7 +266,8 @@ it('Menu open menu group and menu header', () => {
           </MenuList>
         </MenuPopover>
       </Menu>,
-    )
-    .toJSON();
+    );
+  });
+  const tree = component!.toJSON();
   expect(tree).toMatchSnapshot();
 });

package/src/__tests__/__snapshots__/Menu.test.tsx.snap

@@ -320,6 +320,112 @@ exports[`Menu component tests Menu defaultOpen 1`] = `
 </View>
 `;
 
+exports[`Menu component tests Menu defaultOpen with disabled 1`] = `
+<View
+  accessibilityActions={
+    [
+      {
+        "name": "Expand",
+      },
+      {
+        "name": "Collapse",
+      },
+    ]
+  }
+  accessibilityLabel="Open"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": true,
+      "multiselectable": undefined,
+      "required": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    [
+      {
+        "key": " ",
+      },
+      {
+        "key": "Enter",
+      },
+    ]
+  }
+  onAccessibilityAction={[Function]}
+  onAccessibilityTap={[Function]}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onLayout={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 24,
+      "minWidth": 64,
+      "overflow": "hidden",
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    accessible={false}
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      {
+        "color": "#242424",
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Open
+  </Text>
+</View>
+`;
+
 exports[`Menu component tests Menu open 1`] = `
 <View
   accessibilityActions={