@fluentui-react-native/tester 0.106.2 → 0.107.0

package/src/E2E/Callout/specs/Callout.spec.win.ts

@@ -1,6 +1,8 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import CalloutPageObject from '../pages/CalloutPageObject.win';
-import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+import { CALLOUT_ACCESSIBILITY_LABEL } from '../../../TestComponents/Callout/consts';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT, CALLOUT_A11Y_ROLE } from '../../common/consts';
+import { ComponentSelector } from '../../common/BasePage';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Callout Testing Initialization', function () {
@@ -19,26 +21,40 @@ describe('Callout Testing Initialization', function () {
   });
 });
 
-/* This will be re-enabled after the Callout's ViewManager integrates the testID prop. This is used to select UI components */
-// describe('Callout Functional Testing', () => {
-//   it('Open the callout and validate it loaded correctly (visible)', () => {
-//     CalloutPageObject.scrollToTestElement();
-//     CalloutPageObject.openCallout();
-//     CalloutPageObject.waitForCalloutComponentInView(PAGE_TIMEOUT);
-//     expect(CalloutPageObject.didCalloutLoad()).toBeTruthy();
-//   });
-// });
-
-// describe('Callout Accessibility Testing', () => {
-//   it('Validate accessibilityRole is correct', () => {
-//     CalloutPageObject.scrollToTestElement();
-//     CalloutPageObject.waitForCalloutComponentInView(PAGE_TIMEOUT);
-//     expect(CalloutPageObject.getAccessibilityRole()).toEqual(CALLOUT_A11Y_ROLE);
-//   });
-
-//   it('Set accessibilityLabel', () => {
-//     CalloutPageObject.scrollToTestElement();
-//     CalloutPageObject.waitForCalloutComponentInView(PAGE_TIMEOUT);
-//     expect(CalloutPageObject.getAccessibilityLabel(CalloutSelector.Primary)).toEqual(CALLOUT_ACCESSIBILITY_LABEL);
-//   });
-// });
+describe('Callout Accessibility Testing', () => {
+  beforeAll(async () => {
+    await CalloutPageObject.scrollToTestElement();
+    await CalloutPageObject.openCallout();
+    await CalloutPageObject.waitForCalloutComponentInView(PAGE_TIMEOUT);
+  });
+
+  it('Validate accessibilityRole is correct', async () => {
+    await expect(await CalloutPageObject.getAccessibilityRole()).toEqual(CALLOUT_A11Y_ROLE);
+    await expect(await CalloutPageObject.didAssertPopup()).toBeFalsy(CalloutPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
+  });
+
+  it('Set accessibilityLabel', async () => {
+    await expect(await CalloutPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(CALLOUT_ACCESSIBILITY_LABEL);
+    await expect(await CalloutPageObject.didAssertPopup()).toBeFalsy(CalloutPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
+  });
+
+  afterAll(async () => {
+    await CalloutPageObject.closeCallout();
+  });
+});
+
+describe('Callout Functional Testing', () => {
+  beforeEach(async () => {
+    await CalloutPageObject.scrollToTestElement();
+    await CalloutPageObject.openCallout();
+    await CalloutPageObject.waitForCalloutComponentInView(PAGE_TIMEOUT);
+  });
+
+  it('Open the callout and validate it loaded correctly (visible)', async () => {
+    await expect(await CalloutPageObject.didCalloutLoad()).toBeTruthy();
+  });
+
+  afterEach(async () => {
+    await CalloutPageObject.closeCallout();
+  });
+});

package/src/TestComponents/Avatar/consts.ts

@@ -1,7 +1,7 @@
 export const HOMEPAGE_AVATAR_BUTTON = 'Homepage_Avatar_Button';
 export const HOMEPAGE_NATIVE_AVATAR_BUTTON = 'Homepage_Native_Avatar_Button';
 export const NATIVE_AVATAR_TESTPAGE = 'NativeAvatar_TestPage';
-export const AVATAR_TESTPAGE = 'Avatar_Win32_TestPage';
+export const AVATAR_TESTPAGE = 'Avatar_TestPage';
 
 export const AVATAR_ACCESSIBILITY_LABEL = 'E2E Avatar Accessibility label';
 export const AVATAR_ACCESSIBILITY_LABEL_BY_NAME = 'Richard, available';

package/src/TestComponents/Callout/CalloutE2ETest.tsx

@@ -1,46 +1,66 @@
 import * as React from 'react';
-import { ScreenRect, Text, View } from 'react-native';
-import { Button, Callout } from '@fluentui/react-native';
-import { BUTTON_TO_OPEN_CALLOUT, CALLOUT_ACCESSIBILITY_LABEL } from './consts';
+import { ScreenRect, View } from 'react-native';
+import { ButtonV1 as Button, Callout, Text, DismissBehaviors } from '@fluentui/react-native';
+import { Switch } from '@fluentui-react-native/switch';
+import { BUTTON_TO_OPEN_CALLOUT, CALLOUT_ACCESSIBILITY_LABEL, CALLOUT_TEST_COMPONENT } from './consts';
 
 export const E2ECalloutTest: React.FunctionComponent = () => {
-  const [showCustomizedCallout, setShowCustomizedCallout] = React.useState(false);
-  const [isCustomizedCalloutVisible, setIsCustomizedCalloutVisible] = React.useState(false);
+  const [showCallout, setShowCallout] = React.useState(false);
+  const [isCalloutVisible, setIsCalloutVisible] = React.useState(false);
+  const [dismissBehaviors, setDismissBehaviors] = React.useState({
+    preventDismissOnKeyDown: false,
+    preventDismissOnClickOutside: false,
+  });
 
-  const toggleShowCustomizedCallout = React.useCallback(() => {
-    setShowCustomizedCallout(!showCustomizedCallout);
-    setIsCustomizedCalloutVisible(false);
-  }, [showCustomizedCallout, setIsCustomizedCalloutVisible, setShowCustomizedCallout]);
+  const toggleShowCallout = React.useCallback(() => {
+    setShowCallout(!showCallout);
+    setIsCalloutVisible(false);
+  }, [showCallout, setIsCalloutVisible, setShowCallout]);
 
-  const onShowCustomizedCallout = React.useCallback(() => {
-    setIsCustomizedCalloutVisible(true);
-  }, [setIsCustomizedCalloutVisible]);
+  const onShowCallout = React.useCallback(() => {
+    setIsCalloutVisible(true);
+  }, [setIsCalloutVisible]);
 
-  const onDismissCustomizedCallout = React.useCallback(() => {
-    setIsCustomizedCalloutVisible(false);
-    setShowCustomizedCallout(false);
-  }, [setIsCustomizedCalloutVisible, setShowCustomizedCallout]);
+  const onDismissCallout = React.useCallback(() => {
+    setIsCalloutVisible(false);
+    setShowCallout(false);
+  }, [setIsCalloutVisible, setShowCallout]);
 
   const myRect: ScreenRect = { screenX: 10, screenY: 10, width: 100, height: 100 };
 
   return (
     <View>
       <View style={{ flexDirection: 'column', paddingVertical: 5 }}>
-        <Button content="Press for Callout" onClick={toggleShowCustomizedCallout} testID={BUTTON_TO_OPEN_CALLOUT} />
+        <Text variant="subheaderSemibold">Dismiss Behaviors</Text>
+        <View style={{ flexDirection: 'row', paddingVertical: 5 }}>
+          {Object.entries(dismissBehaviors).map(([behavior, checked], i) => (
+            <Switch
+              label={behavior}
+              checked={checked}
+              onChange={(_, isChecked) => setDismissBehaviors({ ...dismissBehaviors, [behavior]: isChecked })}
+              key={i}
+            />
+          ))}
+        </View>
+        <Button onClick={toggleShowCallout} testID={BUTTON_TO_OPEN_CALLOUT}>
+          Press for Callout
+        </Button>
         <Text selectable={true}>
           <Text>Visibility: </Text>
-          {isCustomizedCalloutVisible ? <Text style={{ color: 'green' }}>Visible</Text> : <Text style={{ color: 'red' }}>Not Visible</Text>}
+          {isCalloutVisible ? <Text style={{ color: 'green' }}>Visible</Text> : <Text style={{ color: 'red' }}>Not Visible</Text>}
         </Text>
       </View>
 
-      {showCustomizedCallout && (
+      {showCallout && (
         <Callout
+          testID={CALLOUT_TEST_COMPONENT}
           anchorRect={myRect}
-          onDismiss={onDismissCustomizedCallout}
-          onShow={onShowCustomizedCallout}
+          onDismiss={onDismissCallout}
+          onShow={onShowCallout}
           accessibilityLabel={CALLOUT_ACCESSIBILITY_LABEL}
           accessibilityRole="alert"
           accessibilityOnShowAnnouncement="Be informed that a customized callout has been opened."
+          dismissBehaviors={Object.keys(dismissBehaviors).filter((behavior) => dismissBehaviors[behavior]) as DismissBehaviors[]}
         >
           <View style={{ padding: 20, borderWidth: 2, borderColor: 'black' }}>
             <Text>just some text so it does not take focus and is not empty.</Text>

package/src/TestComponents/Persona/StandardUsage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Persona, PersonaSize } from '@fluentui/react-native';
-import { rajeshImageUrl } from './styles';
+import { satyaImageUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { View, Text, Switch } from 'react-native';
 import { undefinedText } from '../PersonaCoin/styles';
@@ -71,14 +71,14 @@ export const StandardUsage: React.FunctionComponent = () => {
       </View>
 
       <Persona
-        text={showPrimary ? 'Rajesh Jha' : undefined}
-        secondaryText={showSecondary ? 'Executive Vice President' : undefined}
-        tertiaryText={showTertiary ? 'E & D' : undefined}
-        optionalText={showOptional ? 'Building 36/5600' : undefined}
+        text={showPrimary ? 'Satya Nadella' : undefined}
+        secondaryText={showSecondary ? 'CEO' : undefined}
+        tertiaryText={showTertiary ? 'Microsoft' : undefined}
+        optionalText={showOptional ? 'Office of the CEO' : undefined}
         size={imageSize}
-        initials="RJ"
-        imageUrl={showImage ? rajeshImageUrl : undefined}
-        imageDescription="Profile photo of Rajesh Jha"
+        initials="SN"
+        imageUrl={showImage ? satyaImageUrl : undefined}
+        imageDescription="Profile photo of Satya Nadella"
         presence={'away'}
       />
     </View>

package/src/TestComponents/Persona/styles.ts

@@ -1,6 +1,6 @@
 export * from '../PersonaCoin/styles';
 
-export const rajeshImageUrl =
-  'https://3er1viui9wo30pkxh1v2nh4w-wpengine.netdna-ssl.com/wp-content/uploads/prod/2016/09/Rajesh-BW-Square.jpg';
+export const satyaImageUrl =
+  'https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/MS-Exec-Nadella-Satya-2017-08-31-22_%28cropped%29.jpg/330px-MS-Exec-Nadella-Satya-2017-08-31-22_%28cropped%29.jpg';
 
-export const michaelImageUrl = 'https://www.rap-up.com/app/uploads/2014/12/michael-jackson.jpg';
+export const michaelImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/3/31/Michael_Jackson_in_1988.jpg';

package/src/testPages.ts

@@ -73,7 +73,7 @@ export const tests: TestDescription[] = [
     name: 'Callout',
     component: CalloutTest,
     testPage: HOMEPAGE_CALLOUT_BUTTON,
-    platforms: ['android', 'macos', 'win32', 'windows'],
+    platforms: ['android', 'macos', 'win32'],
   },
   {
     name: 'Checkbox',

package/wdio.conf.windows.js

@@ -11,7 +11,6 @@ exports.config = {
   specs: [
     'src/E2E/ActivityIndicator/specs/*.win.ts',
     'src/E2E/Button/specs/*.win.ts',
-    'src/E2E/Callout/specs/*.win.ts',
     'src/E2E/Checkbox/specs/*.windows.ts', // See spec file for more information
     'src/E2E/Link/specs/*.win.ts',
     'src/E2E/PersonaCoin/specs/*.win.ts',