[Proposal] Jest multi plat testing

change/@fluentui-react-native-button-4f7a77ca-3caa-43b1-a837-9c6b29b1e4ed.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Multi-plat jest setup",
+  "packageName": "@fluentui-react-native/button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/components/Button/.npmignore

@@ -0,0 +1,2 @@
+# Don't include test files in package
+__tests__/

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

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

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

@@ -0,0 +1,86 @@
+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';
+
+export const buttonV1Tests = () => {
+  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__/CompoundButton.test.tsx

@@ -0,0 +1,29 @@
+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';
+
+export const compountButtonTests = () => {
+  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__/FAB.test.tsx

@@ -0,0 +1,67 @@
+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' };
+
+export const fabTests = () => {
+  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__/ToggleButton.test.tsx

@@ -0,0 +1,29 @@
+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';
+
+export const toggleButtonTests = () => {
+  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__/iOS/Button.test.tsx

@@ -0,0 +1,9 @@
+import { buttonLegacyTest } from '../ButtonLegacy.test';
+import { buttonV1Tests } from '../ButtonV1.test';
+import { fabTests } from '../FAB.test';
+import { toggleButtonTests } from '../ToggleButton.test';
+
+buttonLegacyTest();
+buttonV1Tests();
+fabTests();
+toggleButtonTests();