[Proposal] Jest multi plat testing

packages/components/Button/src/deprecated/Button.test.tsx → packages/components/Button/__tests__/iOS/ButtonLegacy.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from './Button';
+import { Button } from '../../src/deprecated/Button';
 import * as renderer from 'react-test-renderer';
 
 it('Button default', () => {

packages/components/Button/src/Button.test.tsx → packages/components/Button/__tests__/iOS/ButtonV1.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from './Button';
+import { Button } from '../../src/Button';
 import * as renderer from 'react-test-renderer';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import { Pressable, Text } from 'react-native';

packages/components/Button/src/CompoundButton/CompoundButton.test.tsx → packages/components/Button/__tests__/iOS/CompoundButton.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CompoundButton } from './CompoundButton';
+import { CompoundButton } from '../../src/CompoundButton/CompoundButton';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
 

packages/components/Button/src/FAB/FAB.test.tsx → packages/components/Button/__tests__/iOS/FAB.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FAB } from './FAB';
+import { FAB } from '../../src/FAB/FAB';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
 

packages/components/Button/src/ToggleButton/ToggleButton.test.tsx → packages/components/Button/__tests__/iOS/ToggleButton.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ToggleButton } from './ToggleButton';
+import { ToggleButton } from '../../src/ToggleButton/ToggleButton';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
 

packages/components/Button/__tests__/iOS/jest.config.js

@@ -0,0 +1,2 @@
+const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
+module.exports = configureReactNativeJest('ios', { roots: ['.'], testRegex: '(.*|\\.(test|spec))\\.(ts|tsx)$' });

packages/components/Button/__tests__/win32/ButtonLegacy.test.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Button } from '../../src/deprecated/Button';
+import * as renderer from 'react-test-renderer';
+
+it('Button default', () => {
+  const tree = renderer.create(<Button content="Default Button" />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/components/Button/__tests__/win32/ButtonV1.test.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { Button } from '../../src/Button';
+import * as renderer from 'react-test-renderer';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import { Pressable, Text } from 'react-native';
+import { Icon } from '@fluentui-react-native/icon';
+
+describe('Button component tests', () => {
+  it('Button default', () => {
+    const tree = renderer.create(<Button>Default Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button disabled', () => {
+    const tree = renderer.create(<Button disabled>Disabled Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button primary', () => {
+    const tree = renderer.create(<Button appearance="primary">Primary Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button subtle', () => {
+    const tree = renderer.create(<Button appearance="subtle">Subtle Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button circular', () => {
+    const tree = renderer.create(<Button shape="circular">Circular Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button square', () => {
+    const tree = renderer.create(<Button shape="square">Square Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button small', () => {
+    const tree = renderer.create(<Button size="small">Small Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button large', () => {
+    const tree = renderer.create(<Button size="large">Large Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button customized', () => {
+    const CustomButton = Button.customize({ backgroundColor: 'pink' });
+    const tree = renderer.create(<CustomButton>Custom Button</CustomButton>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button composed', () => {
+    const ComposedButton = Button.compose({
+      slots: {
+        root: Pressable,
+        icon: Icon,
+        content: Text,
+      },
+    });
+    const tree = renderer.create(<ComposedButton>Composed Button with RNText</ComposedButton>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button simple rendering does not invalidate styling', () => {
+    checkRenderConsistency(() => <Button>Default button</Button>, 2);
+  });
+
+  it('Button re-renders correctly', () => {
+    checkReRender(() => <Button>Render twice</Button>, 2);
+  });
+
+  it('Button shares produced styles across multiple renders', () => {
+    const style = { backgroundColor: 'black' };
+    checkRenderConsistency(() => <Button style={style}>Shared styles</Button>, 2);
+  });
+
+  it('Button re-renders correctly with style', () => {
+    const style = { borderColor: 'blue' };
+    checkReRender(() => <Button style={style}>Shared Style Render</Button>, 2);
+  });
+});

packages/components/Button/__tests__/win32/CompoundButton.test.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { CompoundButton } from '../../src/CompoundButton/CompoundButton';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import * as renderer from 'react-test-renderer';
+
+it('CompoundButton default', () => {
+  const tree = renderer.create(<CompoundButton secondaryContent="sublabel">Default Button</CompoundButton>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('Button simple rendering does not invalidate styling', () => {
+  checkRenderConsistency(() => <CompoundButton>Default button</CompoundButton>, 2);
+});
+
+it('Button re-renders correctly', () => {
+  checkReRender(() => <CompoundButton>Render twice</CompoundButton>, 2);
+});
+
+it('Button shares produced styles across multiple renders', () => {
+  const style = { backgroundColor: 'black' };
+  checkRenderConsistency(() => <CompoundButton style={style}>Shared styles</CompoundButton>, 2);
+});
+
+it('Button re-renders correctly with style', () => {
+  const style = { borderColor: 'blue' };
+  checkReRender(() => <CompoundButton style={style}>Shared Style Render</CompoundButton>, 2);
+});

packages/components/Button/__tests__/win32/FAB.test.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { FAB } from '../../src/FAB/FAB';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import * as renderer from 'react-test-renderer';
+
+const fontBuiltInProps = {
+  fontFamily: 'Arial',
+  codepoint: 0x2663,
+  fontSize: 16,
+};
+const iconProps = { fontSource: { ...fontBuiltInProps }, color: '#fff' };
+
+beforeAll(() => {
+  jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+    OS: 'ios',
+    select: () => null,
+  }));
+});
+
+it('Default FAB (iOS)', () => {
+  const tree = renderer.create(<FAB icon={iconProps}>Default FAB (iOS)</FAB>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('Custom FAB with no shadow(iOS)', () => {
+  const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
+  const tree = renderer.create(<CustomFABNoShadow icon={iconProps}>Custom FAB with no shadow(iOS)</CustomFABNoShadow>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('Button simple rendering does not invalidate styling', () => {
+  checkRenderConsistency(() => <FAB icon={iconProps}>Default FAB</FAB>, 2);
+});
+
+it('FAB re-renders correctly', () => {
+  checkReRender(() => <FAB icon={iconProps}>Render twice</FAB>, 2);
+});
+
+it('FAB shares produced styles across multiple renders', () => {
+  const style = { backgroundColor: 'black' };
+  checkRenderConsistency(
+    () => (
+      <FAB icon={iconProps} style={style}>
+        Shared styles
+      </FAB>
+    ),
+    2,
+  );
+});
+
+it('FAB re-renders correctly with style', () => {
+  const style = { borderColor: 'blue' };
+  checkReRender(
+    () => (
+      <FAB icon={iconProps} style={style}>
+        Shared Style Render
+      </FAB>
+    ),
+    2,
+  );
+});
+
+afterAll(() => {
+  jest.unmock('react-native/Libraries/Utilities/Platform');
+});

packages/components/Button/__tests__/win32/ToggleButton.test.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ToggleButton } from '../../src/ToggleButton/ToggleButton';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import * as renderer from 'react-test-renderer';
+
+it('ToggleButton default', () => {
+  const tree = renderer.create(<ToggleButton>Default Button</ToggleButton>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('Button simple rendering does not invalidate styling', () => {
+  checkRenderConsistency(() => <ToggleButton>Default button</ToggleButton>, 2);
+});
+
+it('Button re-renders correctly', () => {
+  checkReRender(() => <ToggleButton>Render twice</ToggleButton>, 2);
+});
+
+it('Button shares produced styles across multiple renders', () => {
+  const style = { backgroundColor: 'black' };
+  checkRenderConsistency(() => <ToggleButton style={style}>Shared styles</ToggleButton>, 2);
+});
+
+it('Button re-renders correctly with style', () => {
+  const style = { borderColor: 'blue' };
+  checkReRender(() => <ToggleButton style={style}>Shared Style Render</ToggleButton>, 2);
+});

packages/components/Button/__tests__/win32/__snapshots__/ButtonLegacy.test.tsx.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button default 1`] = `
+<View
+  accessibilityLabel="Default Button"
+  accessibilityRole="button"
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onPress={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "flex-start",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#f3f2f1",
+      "borderColor": "#8a8886",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "borderColor": "transparent",
+        "borderWidth": 1,
+        "display": "flex",
+        "flexGrow": 1,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "display": "flex",
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "minHeight": 24,
+          "minWidth": 32,
+          "paddingEnd": 6,
+          "paddingStart": 6,
+        }
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#323130",
+            "fontFamily": "Segoe UI",
+            "fontSize": 12,
+            "fontWeight": "400",
+            "margin": 0,
+            "marginEnd": 2,
+            "marginStart": 2,
+          }
+        }
+      >
+        Default Button
+      </Text>
+    </View>
+  </View>
+</View>
+`;