@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/Common/Slider.tsx

@@ -0,0 +1,170 @@
+import * as React from 'react';
+import type { ViewProps, ViewStyle } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Separator, Pressable } from '@fluentui/react-native';
+import type { IPressableState } from '@fluentui-react-native/interactive-hooks';
+
+const thumbSize = 20;
+const defaultMaximumValue = 100;
+const defaultMinimumValue = 1;
+
+interface ISliderProps extends ViewProps {
+  minimum?: number;
+  maximum?: number;
+  initialValue?: number;
+  onChange?: (value: number) => void;
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  slider: {
+    minWidth: thumbSize * 2,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignContent: 'stretch',
+    height: thumbSize,
+    width: 200,
+  },
+  track: {
+    flexGrow: 1,
+  },
+  thumb: {
+    width: thumbSize,
+    height: thumbSize,
+    borderRadius: thumbSize,
+    borderWidth: 2,
+    borderColor: '#7A7574',
+    backgroundColor: '#FFFFFF',
+    position: 'absolute',
+  },
+  label: {
+    margin: 8,
+    fontSize: 12,
+  },
+});
+
+const Track = Separator.customize({ separatorWidth: 4 });
+
+function onThumbRenderStyle(state: IPressableState, thumbLocation: number): ViewStyle {
+  return {
+    ...styles.thumb,
+    borderColor: state.pressed ? 'black' : state.hovered ? 'red' : '#7A7574',
+    marginLeft: thumbLocation,
+  };
+}
+
+function calculateThumbLocationAndValue(
+  startTouchThumbLocation: number,
+  startTouchPosition: number,
+  currentTouchPosition: number,
+  trackLength: number,
+  minimum: number,
+  maximum: number,
+): [number, number] {
+  let newThumbLocation = startTouchThumbLocation + currentTouchPosition - startTouchPosition;
+  newThumbLocation = Math.max(0, newThumbLocation);
+  newThumbLocation = Math.min(newThumbLocation, trackLength);
+
+  const newValue = minimum + (newThumbLocation / trackLength) * (maximum - minimum);
+  const intValue = Math.min(maximum, Math.floor(newValue + 0.3)); // snap to nearest integer value
+  newThumbLocation = (trackLength * (intValue - minimum)) / (maximum - minimum);
+
+  return [newThumbLocation, intValue];
+}
+
+function verifyProps(initialValue: number, minimum: number, maximum: number) {
+  if (minimum >= maximum) {
+    throw new Error(`'minimum' must not be greater than or equal 'maximum'.`);
+  }
+
+  if (initialValue < minimum) {
+    throw new Error(`'initialValue' must not be less than 'minimum'.`);
+  }
+
+  if (initialValue > maximum) {
+    throw new Error(`'initialValue' must not be greater than 'maximum'.`);
+  }
+}
+
+export const Slider: React.FunctionComponent<ISliderProps> = (props: ISliderProps) => {
+  let { minimum, maximum, initialValue } = props;
+  minimum = minimum || defaultMinimumValue;
+  maximum = maximum || defaultMaximumValue;
+  initialValue = initialValue || minimum;
+  verifyProps(initialValue, minimum, maximum);
+
+  const { style: userStyle, onChange } = props;
+
+  const [thumbLocation, setThumbLocation] = React.useState<number>(0);
+
+  const startTouchPosition = React.useRef<number>(-1);
+  const startTouchThumbLocation = React.useRef<number>(-1);
+  const trackLength = React.useRef<number>(-1);
+  const sliderValue = React.useRef<number>(initialValue);
+
+  const ref = React.useRef<View>(null);
+
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.measure((_x, _y, width) => {
+        if (width <= 0) {
+          return;
+        }
+
+        // track length is the entire view width subtracted by the thumb size.
+        trackLength.current = Math.max(0, width - thumbSize);
+
+        const initialThumbLocation = (trackLength.current * (initialValue! - minimum!)) / (maximum! - minimum!);
+        setThumbLocation(initialThumbLocation);
+      });
+    }
+  }, [ref, initialValue, maximum, minimum]);
+
+  return (
+    <View style={[userStyle, styles.root]}>
+      <View ref={ref} {...props} style={styles.slider}>
+        <Track style={styles.track} />
+        {trackLength.current > 0 && (
+          <Pressable
+            renderStyle={(state) => onThumbRenderStyle(state, thumbLocation)}
+            onStartShouldSetResponder={() => trackLength.current > 0}
+            onResponderStart={(e) => {
+              startTouchPosition.current = e.nativeEvent.pageX;
+              startTouchThumbLocation.current = thumbLocation;
+            }}
+            onResponderMove={(e) => {
+              if (startTouchPosition.current !== -1 && trackLength.current > 0) {
+                const [newThumbLocation, newValue] = calculateThumbLocationAndValue(
+                  startTouchThumbLocation.current,
+                  startTouchPosition.current,
+                  e.nativeEvent.pageX,
+                  trackLength.current,
+                  minimum || defaultMinimumValue,
+                  maximum || defaultMaximumValue,
+                );
+
+                sliderValue.current = newValue;
+                setThumbLocation(newThumbLocation);
+              }
+            }}
+            onResponderEnd={() => {
+              startTouchPosition.current = -1;
+              startTouchThumbLocation.current = -1;
+            }}
+            onResponderRelease={() => {
+              if (onChange) {
+                onChange(sliderValue.current);
+              }
+            }}
+          />
+        )}
+      </View>
+
+      <Text style={styles.label}>{sliderValue.current}</Text>
+    </View>
+  );
+};

package/src/TestComponents/Common/Square.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { ViewProps, StyleProp, ViewStyle, ColorValue } from 'react-native';
+import { View } from 'react-native';
+
+export interface ISquareProps extends ViewProps {
+  color?: ColorValue;
+}
+
+export const Square: React.FunctionComponent<ISquareProps> = (props: ISquareProps) => {
+  const newStyle: ViewStyle = {
+    backgroundColor: props.color || '#ff0000',
+    borderColor: '#c3c3c3',
+    borderWidth: 1,
+    height: 40,
+    width: 40,
+  };
+
+  const style: StyleProp<ViewStyle> = props.style ? [props.style, newStyle] : newStyle;
+
+  return <View {...props} style={style} />;
+};

package/src/TestComponents/Common/StyledPicker.tsx

@@ -0,0 +1,25 @@
+import { Platform } from 'react-native';
+import type { ColorValue } from 'react-native';
+
+import { useTheme } from '@fluentui-react-native/theme-types';
+
+import { MenuPicker } from './MenuPicker';
+import { commonTestStyles as commonStyles } from './styles';
+
+export const StyledPicker = (props) => {
+  const { prompt, selected, onChange, collection, style } = props;
+  const theme = useTheme();
+  const pickerStyles = {
+    color: theme.colors.inputText as ColorValue,
+    alignSelf: Platform.OS === 'ios' ? 'flex-start' : 'auto',
+    ...commonStyles.header,
+    ...style,
+  };
+  const styleCollection = collection.map((value) => {
+    return {
+      label: value,
+      value: value,
+    };
+  });
+  return <MenuPicker prompt={prompt} style={pickerStyles} selected={selected} onChange={onChange} collection={styleCollection} />;
+};

package/src/TestComponents/Common/TestProps.tsx

@@ -0,0 +1,28 @@
+import { Platform } from 'react-native';
+// Please read http://93days.me/testing-react-native-application/ to understand why we set accessibilityLabel here.
+
+/**
+ * The underlying Android test drivers use accessibilityLabel to find elements. However, all other platforms use testID.
+ * Because of this, we're adding the testProps function that takes in a unique identifier and returns the correct prop based on the platform
+ * (testID for Win32, Windows, macOS, iOS; accessibilityId for Android).
+ *
+ * If explicit accessibilityLabel is being used for other platforms, apply testProps after it to override it for Android.
+ * @param id The string to be used as the test identifier
+ * @returns an object with the correct test identifier prop based on platform
+ */
+export function testProps(id) {
+  return Platform.select({
+    android: {
+      accessible: true,
+      accessibilityLabel: id,
+    },
+    macos: {
+      accessible: true,
+      accessibilityLabel: id,
+      testID: id,
+    },
+    default: {
+      testID: id,
+    },
+  });
+}

package/src/TestComponents/Common/iconExamples.tsx

@@ -0,0 +1,30 @@
+import { Platform } from 'react-native';
+
+import type { SvgIconProps, FontIconProps, IconProps } from '@fluentui-react-native/icon';
+
+import TestSvg from '../../../assets/test.svg';
+
+export const svgProps: SvgIconProps = {
+  src: TestSvg,
+  viewBox: '0 0 500 500',
+};
+
+export const iconProps: IconProps = { svgSource: svgProps };
+
+export const testTtf = require('../../../assets/Font_Awesome_900.otf');
+
+export const fontProps: FontIconProps = Platform.select({
+  macos: {
+    fontFamily: 'Arial',
+    codepoint: 0x2663,
+    fontSize: 12,
+  },
+  default: {
+    fontFamily: `Font Awesome 5 Free`,
+    fontSrcFile: testTtf,
+    codepoint: 0xf083,
+    fontSize: 12,
+  },
+});
+
+export const testImage = require('../../../assets/icon_24x24.png');

package/src/TestComponents/Common/styles.ts

@@ -0,0 +1,188 @@
+import { Platform, StyleSheet } from 'react-native';
+
+import type { IStackProps } from '@fluentui-react-native/stack';
+
+export const commonTestStyles = StyleSheet.create({
+  root: {
+    marginTop: 16,
+    marginRight: 32,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  },
+  flex: { flex: 1 },
+  header: {
+    marginVertical: 6,
+    fontSize: 16,
+  },
+  section: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#0B6A0B',
+    marginTop: 12,
+  },
+  separatorStack: {
+    height: 200,
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+  settings: {
+    flexGrow: 1,
+  },
+  settingsPicker: {
+    flexDirection: 'column',
+    flex: 1,
+  },
+  pickerControlled: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  vmargin: {
+    marginVertical: 6,
+  },
+  stack: {
+    borderWidth: 2,
+    borderColor: '#bdbdbd',
+    padding: 12,
+    margin: 8,
+  },
+  switch: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  textBox: {
+    borderWidth: 1,
+    height: 25,
+    fontSize: 12,
+    width: 150,
+    marginBottom: 8,
+    paddingVertical: 0,
+  },
+  view: {
+    minHeight: 200,
+    justifyContent: 'space-between',
+  },
+  androidContainer: {
+    marginTop: 20,
+    justifyContent: 'space-between',
+  },
+});
+
+export const fluentTesterStyles = StyleSheet.create({
+  testRoot: {
+    flex: 1,
+    flexGrow: 1,
+    flexDirection: 'row',
+    minHeight: 550,
+    minWidth: 300,
+    justifyContent: 'flex-start',
+    alignItems: 'stretch',
+    padding: 4,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  headerWithBackButton: {
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  backButton: {
+    alignSelf: 'flex-start',
+    display: 'flex',
+  },
+  testHeader: {
+    marginBottom: 8,
+    marginTop: 4,
+  },
+  testList: {
+    minWidth: 160,
+    flexShrink: 0,
+    flexGrow: 0,
+    flexDirection: 'row',
+  },
+  testListContainerStyle: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+  },
+  scrollViewStyle: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+  },
+  scrollViewContainer: {
+    height: 250,
+    width: 150,
+    flexShrink: 0,
+    flexGrow: 0,
+    flexDirection: 'column',
+  },
+  testListItem: {
+    width: '100%',
+    borderRadius: 0,
+    ...(Platform.OS === 'macos' && {
+      borderColor: 'transparent',
+      borderRadius: 5,
+    }),
+    justifyContent: 'flex-start',
+  },
+  testListSeparator: { marginHorizontal: 8 },
+  testSection: {
+    width: '100%',
+    padding: 8,
+  },
+  noTest: {
+    alignSelf: 'center',
+    fontSize: 18,
+  },
+});
+
+export const stackStyle: IStackProps['style'] = {
+  borderWidth: 1,
+  borderColor: '#bdbdbd',
+  paddingVertical: 8,
+  paddingHorizontal: 12,
+  margin: 8,
+};
+
+export const separatorStackStyle: IStackProps['style'] = {
+  height: 200,
+  flexDirection: 'row',
+  justifyContent: 'space-evenly',
+};
+
+export const mobileStyles = StyleSheet.create({
+  header: {
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  testVariants: {
+    flexDirection: 'row',
+    marginHorizontal: 5,
+    paddingTop: 10,
+    paddingBottom: 5,
+    flex: 1,
+    justifyContent: 'space-evenly',
+  },
+  pageStyle: {
+    padding: 5,
+  },
+  testList: {
+    width: '100%',
+  },
+  testListItem: {
+    width: '100%',
+    height: 'auto',
+    fontSize: 18,
+    paddingVertical: 8,
+  },
+  testSection: {
+    width: '100%',
+    marginVertical: 15,
+  },
+  containerSpacedEvenly: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-evenly',
+  },
+});
+
+export const testContentRootViewStyle = [stackStyle, commonTestStyles.view];