Split checkbox tests into their own files

apps/fluent-tester/src/TestComponents/CheckboxV1/BasicCheckboxTest.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+
+function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
+  console.log(isChecked);
+}
+
+export const BasicCheckbox: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
+      <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
+      <Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
+      <Checkbox label="Disabled checkbox" disabled />
+      <Checkbox label="Disabled checked checkbox" defaultChecked disabled />
+      <Checkbox label="A required checkbox" required />
+    </View>
+  );
+};

apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx

@@ -1,181 +1,15 @@
 import * as React from 'react';
-import { View, TextInput, Platform } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
-import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import type { Theme } from '@fluentui-react-native/theme-types';
-import { useTheme } from '@fluentui-react-native/theme-types';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { Platform } from 'react-native';
 
 import { E2ECheckboxV1Test } from './E2ECheckboxV1Test';
 import { CHECKBOXV1_TESTPAGE } from '../../../../E2E/src/CheckboxV1/consts';
-import { commonTestStyles as commonStyles, mobileStyles } from '../Common/styles';
 import type { TestSection, PlatformStatus } from '../Test';
 import { Test } from '../Test';
-
-function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
-  console.log(isChecked);
-}
-
-const BasicCheckbox: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
-      <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
-      <Checkbox label="Disabled checkbox" disabled />
-      <Checkbox label="Disabled checked checkbox" defaultChecked disabled />
-      <Checkbox label="A required checkbox" required />
-    </View>
-  );
-};
-
-const DesktopSpecificCheckbox: React.FunctionComponent = () => {
-  return (
-    <>
-      <Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
-      <Checkbox label="A circular checkbox" shape="circular" />
-      <Checkbox label="A checkbox with label placed before" labelPosition="before" />
-    </>
-  );
-};
-
-const SizeCheckbox: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Checkbox tooltip="Medium checkbox" size="medium" />
-      <Checkbox tooltip="Large checkbox" size="large" />
-      <Checkbox label="Medium checkbox" size="medium" />
-      <Checkbox label="Large checkbox" size="large" />
-    </View>
-  );
-};
-
-const OtherCheckbox: React.FunctionComponent = () => {
-  const [isChecked, setisChecked] = React.useState(false);
-
-  const setCheckedTrue = React.useCallback(() => {
-    setisChecked(true);
-  }, []);
-
-  const setCheckedFalse = React.useCallback(() => {
-    setisChecked(false);
-  }, []);
-
-  const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []);
-
-  return (
-    <View style={memoizedStyles}>
-      <Button onClick={setCheckedTrue} size="small">
-        Check controlled checkboxes below
-      </Button>
-      <Button onClick={setCheckedFalse} size="small">
-        Uncheck controlled checkboxes below
-      </Button>
-
-      <Checkbox label="This is a controlled Checkbox" checked={isChecked} />
-      {Platform.OS !== 'android' && (
-        <>
-          <Checkbox label="Checkbox rendered with labelPosition 'before' (controlled)" labelPosition="before" checked={isChecked} />
-          <Checkbox label="A required checkbox with other required text" required="**" />
-        </>
-      )}
-    </View>
-  );
-};
-
-const CircleColorCheckbox = Checkbox.customize({
-  checked: {
-    checkboxBackgroundColor: 'green',
-    checkboxBorderColor: 'green',
-    checkmarkColor: 'white',
-  },
-});
-
-const HoverCheckbox = Checkbox.customize({
-  hovered: {
-    checkmarkOpacity: 1,
-  },
-});
-
-const BigLabelCheckbox = Checkbox.customize({
-  label: {
-    fontSize: 24,
-    fontWeight: 'bold',
-  },
-});
-
-const ComposedCheckbox = Checkbox.compose({
-  slotProps: {
-    label: { style: { color: 'hotpink' } },
-  },
-});
-
-const getThemedStyles = themedStyleSheet((t: Theme) => {
-  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
-});
-
-const TokenCheckbox: React.FunctionComponent = () => {
-  const [checkboxColor, setCheckboxColor] = React.useState('blue');
-  const [checkmarkColor, setCheckmarkColor] = React.useState('white');
-
-  const BlueCheckbox = Checkbox.customize({
-    checked: {
-      checkboxBackgroundColor: checkboxColor,
-      checkboxBorderColor: checkboxColor,
-      checkmarkColor: checkmarkColor,
-    },
-  });
-
-  const theme = useTheme();
-  const textBoxBorderStyle = getThemedStyles(theme);
-
-  return (
-    <View>
-      {Platform.OS !== 'android' && (
-        <>
-          <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} />
-          <CircleColorCheckbox
-            label="A circular token-customized checkbox"
-            shape="circular"
-            onChange={onChangeUncontrolled}
-            defaultChecked
-          />
-        </>
-      )}
-
-      <BigLabelCheckbox label="A checkbox with a bold large font label" />
-      <ComposedCheckbox label="A checkbox with a hot pink label and no padding" />
-
-      <BlueCheckbox
-        label="Token-customized checkbox. Customizable below."
-        onChange={onChangeUncontrolled}
-        labelPosition="before"
-        defaultChecked={false}
-      />
-      <TextInput
-        accessibilityLabel="Background color"
-        style={textBoxBorderStyle.textbox}
-        placeholder="Background color"
-        blurOnSubmit={true}
-        onSubmitEditing={(e) => {
-          setCheckboxColor(e.nativeEvent.text);
-        }}
-      />
-
-      <TextInput
-        accessibilityLabel="Checkmark color"
-        style={textBoxBorderStyle.textbox}
-        placeholder="Checkmark color"
-        blurOnSubmit={true}
-        onSubmitEditing={(e) => {
-          setCheckmarkColor(e.nativeEvent.text);
-        }}
-      />
-    </View>
-  );
-};
+import { BasicCheckbox } from './BasicCheckboxTest';
+import { DesktopSpecificCheckbox } from './DesktopSpecificCheckboxTest';
+import { OtherCheckbox } from './OtherCheckboxPropsTest';
+import { SizeCheckbox } from './SizeCheckboxTest';
+import { TokenCheckbox } from './TokenCheckboxTest';
 
 const checkboxSections: TestSection[] = [
   {

apps/fluent-tester/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+
+export const DesktopSpecificCheckbox: React.FunctionComponent = () => {
+  return (
+    <>
+      <Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
+      <Checkbox label="A circular checkbox" shape="circular" />
+      <Checkbox label="A checkbox with label placed before" labelPosition="before" />
+    </>
+  );
+};

apps/fluent-tester/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Platform, View } from 'react-native';
+
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+
+import { mobileStyles } from '../Common/styles';
+
+export const OtherCheckbox: React.FunctionComponent = () => {
+  const [isChecked, setisChecked] = React.useState(false);
+
+  const setCheckedTrue = React.useCallback(() => {
+    setisChecked(true);
+  }, []);
+
+  const setCheckedFalse = React.useCallback(() => {
+    setisChecked(false);
+  }, []);
+
+  const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []);
+
+  return (
+    <View style={memoizedStyles}>
+      <Button onClick={setCheckedTrue} size="small">
+        Check controlled checkboxes below
+      </Button>
+      <Button onClick={setCheckedFalse} size="small">
+        Uncheck controlled checkboxes below
+      </Button>
+
+      <Checkbox label="This is a controlled Checkbox" checked={isChecked} />
+      {Platform.OS !== 'android' && (
+        <>
+          <Checkbox label="Checkbox rendered with labelPosition 'before' (controlled)" labelPosition="before" checked={isChecked} />
+          <Checkbox label="A required checkbox with other required text" required="**" />
+        </>
+      )}
+    </View>
+  );
+};

apps/fluent-tester/src/TestComponents/CheckboxV1/SizeCheckboxTest.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+
+export const SizeCheckbox: React.FunctionComponent = () => {
+  return (
+    <>
+      <Checkbox tooltip="Medium checkbox" size="medium" />
+      <Checkbox tooltip="Large checkbox" size="large" />
+      <Checkbox label="Medium checkbox" size="medium" />
+      <Checkbox label="Large checkbox" size="large" />
+    </>
+  );
+};

apps/fluent-tester/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { View, TextInput, Platform } from 'react-native';
+
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import type { Theme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+import { commonTestStyles as commonStyles } from '../Common/styles';
+
+function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
+  console.log(isChecked);
+}
+
+const CircleColorCheckbox = Checkbox.customize({
+  checked: {
+    checkboxBackgroundColor: 'green',
+    checkboxBorderColor: 'green',
+    checkmarkColor: 'white',
+  },
+});
+
+const HoverCheckbox = Checkbox.customize({
+  hovered: {
+    checkmarkOpacity: 1,
+  },
+});
+
+const BigLabelCheckbox = Checkbox.customize({
+  label: {
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+});
+
+const ComposedCheckbox = Checkbox.compose({
+  slotProps: {
+    label: { style: { color: 'hotpink' } },
+  },
+});
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+
+export const TokenCheckbox: React.FunctionComponent = () => {
+  const [checkboxColor, setCheckboxColor] = React.useState('blue');
+  const [checkmarkColor, setCheckmarkColor] = React.useState('white');
+
+  const BlueCheckbox = Checkbox.customize({
+    checked: {
+      checkboxBackgroundColor: checkboxColor,
+      checkboxBorderColor: checkboxColor,
+      checkmarkColor: checkmarkColor,
+    },
+  });
+
+  const theme = useTheme();
+  const textBoxBorderStyle = getThemedStyles(theme);
+
+  return (
+    <View>
+      {Platform.OS !== 'android' && (
+        <>
+          <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} />
+          <CircleColorCheckbox
+            label="A circular token-customized checkbox"
+            shape="circular"
+            onChange={onChangeUncontrolled}
+            defaultChecked
+          />
+        </>
+      )}
+
+      <BigLabelCheckbox label="A checkbox with a bold large font label" />
+      <ComposedCheckbox label="A checkbox with a hot pink label and no padding" />
+
+      <BlueCheckbox
+        label="Token-customized checkbox. Customizable below."
+        onChange={onChangeUncontrolled}
+        labelPosition="before"
+        defaultChecked={false}
+      />
+      <TextInput
+        accessibilityLabel="Background color"
+        style={textBoxBorderStyle.textbox}
+        placeholder="Background color"
+        blurOnSubmit={true}
+        onSubmitEditing={(e) => {
+          setCheckboxColor(e.nativeEvent.text);
+        }}
+      />
+
+      <TextInput
+        accessibilityLabel="Checkmark color"
+        style={textBoxBorderStyle.textbox}
+        placeholder="Checkmark color"
+        blurOnSubmit={true}
+        onSubmitEditing={(e) => {
+          setCheckmarkColor(e.nativeEvent.text);
+        }}
+      />
+    </View>
+  );
+};

change/@fluentui-react-native-tester-bee09dc9-b280-4a47-98c5-6a1690461be4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Split up checkbox tests into their own files",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}