@fluentui-react-native/tester 0.102.2 → 0.103.0

package/src/E2E/LinkExperimental/pages/LinkPageObject.ts

@@ -0,0 +1,34 @@
+import {
+  EXPERIMENTAL_LINK_TESTPAGE,
+  EXPERIMENTAL_LINK_TEST_COMPONENT,
+  HOMEPAGE_EXPERIMENTAL_LINK_BUTTON,
+  EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT,
+} from '../../../TestComponents/LinkExperimental/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class ExperimentalLinkPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(EXPERIMENTAL_LINK_TESTPAGE);
+  }
+
+  get _pageName() {
+    return EXPERIMENTAL_LINK_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(EXPERIMENTAL_LINK_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_EXPERIMENTAL_LINK_BUTTON);
+  }
+}
+
+export default new ExperimentalLinkPageObject();

package/src/E2E/LinkExperimental/specs/Link.spec.win.ts

@@ -0,0 +1,49 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import ExperimentalLinkPageObject from '../pages/LinkPageObject';
+import { ComponentSelector, Platform } from '../../common/BasePage';
+import { EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL } from '../../../TestComponents/LinkExperimental/consts';
+import { LINK_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Link Testing Initialization', function () {
+  it('Wait for app load', async () => {
+    await NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    await expect(await NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  });
+
+  it('Click and navigate to Link test page', async () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    await ExperimentalLinkPageObject.scrollToComponentButton(Platform.Win32);
+    await ExperimentalLinkPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    await NavigateAppPage.clickAndGoToLinkExperimentalPage();
+    await ExperimentalLinkPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    await expect(await ExperimentalLinkPageObject.isPageLoaded()).toBeTruthy(ExperimentalLinkPageObject.ERRORMESSAGE_PAGELOAD);
+    await expect(await ExperimentalLinkPageObject.didAssertPopup()).toBeFalsy(ExperimentalLinkPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
+  });
+});
+
+describe('Link Accessibility Testing', () => {
+  it('Link - Validate accessibilityRole is correct', async () => {
+    await ExperimentalLinkPageObject.scrollToTestElement();
+    await ExperimentalLinkPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
+    await expect(await ExperimentalLinkPageObject.getAccessibilityRole()).toEqual(LINK_A11Y_ROLE);
+    await expect(await ExperimentalLinkPageObject.didAssertPopup()).toBeFalsy(ExperimentalLinkPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
+  });
+
+  it('Link - Set accessibilityLabel', async () => {
+    await ExperimentalLinkPageObject.scrollToTestElement();
+    await ExperimentalLinkPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+
+    await expect(await ExperimentalLinkPageObject.getAccessibilityLabel(ComponentSelector.Primary)).toEqual(
+      EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL,
+    );
+    await expect(await ExperimentalLinkPageObject.didAssertPopup()).toBeFalsy(ExperimentalLinkPageObject.ERRORMESSAGE_ASSERT); // Ensure no asserts popped up
+  });
+
+  // No need to test not setting a11y label. The content prop gets passed down to the child Text component. This equates to not setting the a11y label
+  // on a Text component which we have testing for in our Text component spec
+});

package/src/E2E/common/NavigateAppPage.ts

@@ -11,6 +11,7 @@ import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../TestComponents/FocusTrapZon
 import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../TestComponents/FocusZone/consts';
 import { HOMEPAGE_ICON_BUTTON } from '../../TestComponents/Icon/consts';
 import { HOMEPAGE_LINK_BUTTON } from '../../TestComponents/Link/consts';
+import { HOMEPAGE_EXPERIMENTAL_LINK_BUTTON } from '../../TestComponents/LinkExperimental/consts';
 import { HOMEPAGE_MENU_BUTTON } from '../../TestComponents/Menu/consts';
 import { HOMEPAGE_MENUBUTTON_BUTTON } from '../../TestComponents/MenuButton/consts';
 import { HOMEPAGE_EXPERIMENTAL_MENU_BUTTON } from '../../TestComponents/MenuButtonExperimental/consts';
@@ -79,6 +80,10 @@ class NavigateAppPage extends BasePage {
     await this.linkPage.click();
   }
 
+  async clickAndGoToLinkExperimentalPage() {
+    await this.linkExperimentalPage.click();
+  }
+
   async clickAndGoToMenuPage() {
     await this.menuPage.click();
   }
@@ -203,6 +208,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_LINK_BUTTON);
   }
 
+  private get linkExperimentalPage() {
+    return By(HOMEPAGE_EXPERIMENTAL_LINK_BUTTON);
+  }
+
   private get menuPage() {
     return By(HOMEPAGE_MENU_BUTTON);
   }

package/src/TestComponents/LinkExperimental/E2ELinkTest.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Alert } from 'react-native';
+import { Link } from '@fluentui-react-native/experimental-link';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import {
+  EXPERIMENTAL_LINK_TEST_COMPONENT,
+  EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL,
+  EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT,
+  EXPERIMENTAL_LINK_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const LinkE2ETest: React.FunctionComponent = () => {
+  const doPress = (): void => {
+    Alert.alert('Alert.', 'You have been alerted.');
+  };
+
+  return (
+    <Stack style={stackStyle}>
+      <Link
+        url="https://www.bing.com/"
+        testID={EXPERIMENTAL_LINK_TEST_COMPONENT}
+        accessibilityLabel={EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL}
+      >
+        Link with Accessibility Label
+      </Link>
+      <Link onPress={doPress} testID={EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT}>
+        {EXPERIMENTAL_LINK_TEST_COMPONENT_LABEL}
+      </Link>
+    </Stack>
+  );
+};

package/src/TestComponents/LinkExperimental/LinkTest.tsx

@@ -0,0 +1,210 @@
+import * as React from 'react';
+import { Alert, View, StyleSheet, Text, TextInput } from 'react-native';
+import { Link, LinkTokens } from '@fluentui-react-native/experimental-link';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
+import { EXPERIMENTAL_LINK_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { LinkE2ETest } from './E2ELinkTest';
+
+const DefaultLinks: React.FunctionComponent = () => {
+  const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
+  const doAllyTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onAllyTap.'), []);
+
+  return (
+    <Stack style={stackStyle}>
+      <Link tooltip={'https://www.bing.com/'} url="https://www.bing.com/">
+        Click to navigate.
+      </Link>
+      <Link onPress={doPress} onAccessibilityTap={doAllyTap}>
+        Click to alert.
+      </Link>
+      <Link disabled focusable>
+        Disabled focusable Link
+      </Link>
+    </Stack>
+  );
+};
+
+const InlineLinks: React.FunctionComponent = () => {
+  const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
+  const doAllyTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onAllyTap.'), []);
+
+  return (
+    <Stack style={stackStyle}>
+      <Text>
+        Click{' '}
+        <Link inline onPress={doPress} onAccessibilityTap={doAllyTap}>
+          this link
+        </Link>{' '}
+        to alert me.
+      </Text>
+      <Text>
+        This{' '}
+        <Link inline onPress={doPress} disabled focusable>
+          link
+        </Link>{' '}
+        is disabled but focusable.
+      </Text>
+      <Text>
+        Follow this{' '}
+        <Link inline url="https://www.bing.com/">
+          link
+        </Link>{' '}
+        to navigate.
+      </Text>
+    </Stack>
+  );
+};
+
+const SubtleLinks: React.FunctionComponent = () => {
+  const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
+  const doAllyTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onAllyTap.'), []);
+
+  return (
+    <Stack style={stackStyle}>
+      <Link appearance="subtle" url="https://www.bing.com/">
+        Click to navigate.
+      </Link>
+      <Text>
+        This is inline Link.{' '}
+        <Link appearance="subtle" inline onPress={doPress} onAccessibilityTap={doAllyTap}>
+          Click to alert.
+        </Link>
+      </Text>
+      <Link appearance="subtle" onPress={doPress} disabled>
+        Disabled Link
+      </Link>
+    </Stack>
+  );
+};
+
+const styles = StyleSheet.create({
+  tokensRow: {
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  tokensColumn: {
+    flexDirection: 'column',
+    margin: 10,
+  },
+});
+
+const BlueHeaderBold = Link.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4', textAlign: 'right' });
+const CustomLinks: React.FunctionComponent = () => {
+  const [linkColor, setLinkColor] = React.useState<string>('blue');
+  const [linkFont, setLinkFont] = React.useState<string>('Ariel');
+  const [linkFontSize, setLinkFontSize] = React.useState<number>(12);
+  const [linkText, setLinkText] = React.useState<string>('Click to Navigate');
+  const [linkUrl, setLinkUrl] = React.useState<string>('https://www.bing.com/');
+
+  const CustomLink = React.useMemo(() => {
+    const tokens: LinkTokens = {
+      color: linkColor,
+      fontFamily: linkFont,
+      fontSize: linkFontSize,
+    };
+    return Link.customize(tokens);
+  }, [linkColor, linkFont, linkFontSize, linkText, linkUrl]);
+
+  return (
+    <View style={styles.tokensColumn}>
+      <View style={styles.tokensRow}>
+        <View>
+          <Text>Text Tokens</Text>
+          <TextInput
+            accessibilityLabel="Link color"
+            style={commonStyles.textBox}
+            placeholder="Link color"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLinkColor(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Link font"
+            style={commonStyles.textBox}
+            placeholder="Link font"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLinkFont(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Link font size"
+            style={commonStyles.textBox}
+            placeholder="Link font size"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLinkFontSize(parseInt(e.nativeEvent.text));
+            }}
+          />
+        </View>
+        <View>
+          <Text>Content and URL customize</Text>
+          <TextInput
+            accessibilityLabel="Link text"
+            style={commonStyles.textBox}
+            placeholder="Link text"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLinkText(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Link Url"
+            style={commonStyles.textBox}
+            placeholder="Link URL"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLinkUrl(e.nativeEvent.text);
+            }}
+          />
+        </View>
+      </View>
+      <CustomLink align="end" url={linkUrl}>
+        {linkText}
+      </CustomLink>
+      <BlueHeaderBold>BlueHeaderBold</BlueHeaderBold>
+    </View>
+  );
+};
+
+const linkSections: TestSection[] = [
+  {
+    name: 'Default Links',
+    testID: EXPERIMENTAL_LINK_TESTPAGE,
+    component: DefaultLinks,
+  },
+  {
+    name: 'Inline Links',
+    component: InlineLinks,
+  },
+  {
+    name: 'Subtle Links',
+    component: SubtleLinks,
+  },
+  {
+    name: 'Custom Link',
+    component: CustomLinks,
+  },
+  {
+    name: 'Link E2E Test',
+    component: LinkE2ETest,
+  },
+];
+
+export const ExperimentalLinkTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Beta',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Beta',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.\n\nA Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.';
+
+  return <Test name="Link Test" description={description} sections={linkSections} status={status}></Test>;
+};

package/src/TestComponents/LinkExperimental/consts.ts

@@ -0,0 +1,10 @@
+export const HOMEPAGE_EXPERIMENTAL_LINK_BUTTON = 'Homepage_LinkExperimental_Button';
+export const EXPERIMENTAL_LINK_TESTPAGE = 'LinkExperimental_TestPage';
+
+/* E2E Testing Link 1 */
+export const EXPERIMENTAL_LINK_TEST_COMPONENT = 'Experimental_Link_Test_Component'; // A component on each specific test page
+export const EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL = 'E2E testing Experimental Link accessibility label';
+
+/* E2E Testing Link 2 */
+export const EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT = 'Experimental Link_No_A11y_label_Component';
+export const EXPERIMENTAL_LINK_TEST_COMPONENT_LABEL = 'Test Experimental Link2 - No Accessibility Label'; // A component on each specific test page

package/src/TestComponents/LinkExperimental/index.ts

@@ -0,0 +1,2 @@
+export * from './LinkTest';
+export * from './consts';

package/src/testPages.ts

@@ -36,6 +36,7 @@ import { TextTest, HOMEPAGE_TEXT_BUTTON } from './TestComponents/Text';
 import { TextExperimentalTest, HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from './TestComponents/TextExperimental';
 import { ThemeTest, HOMEPAGE_THEME_BUTTON } from './TestComponents/Theme';
 import { TokenTest, HOMEPAGE_TOKEN_BUTTON } from './TestComponents/Tokens';
+import { ExperimentalLinkTest, HOMEPAGE_EXPERIMENTAL_LINK_BUTTON } from './TestComponents/LinkExperimental';
 
 export const tests: TestDescription[] = [
   {
@@ -141,6 +142,12 @@ export const tests: TestDescription[] = [
     testPage: HOMEPAGE_LINK_BUTTON,
     platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
   },
+  {
+    name: 'Link (Experimental)',
+    component: ExperimentalLinkTest,
+    testPage: HOMEPAGE_EXPERIMENTAL_LINK_BUTTON,
+    platforms: ['win32'],
+  },
   {
     name: 'Menu',
     component: MenuTest,