Skip to content

Commit 7bec589

Browse files
rurikoarakirurikoaraki
authored
Split checkbox tests into their own files (#3833)
* Split up checkbox tests into their own files * Change files
1 parent f4469e4 commit 7bec589

File tree

7 files changed

+208
-172
lines changed

7 files changed

+208
-172
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { View } from 'react-native';
3+
4+
import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
5+
import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
6+
7+
function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
8+
console.log(isChecked);
9+
}
10+
11+
export const BasicCheckbox: React.FunctionComponent = () => {
12+
return (
13+
<View>
14+
<Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
15+
<Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
16+
<Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
17+
<Checkbox label="Disabled checkbox" disabled />
18+
<Checkbox label="Disabled checked checkbox" defaultChecked disabled />
19+
<Checkbox label="A required checkbox" required />
20+
</View>
21+
);
22+
};

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

Lines changed: 6 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -1,181 +1,15 @@
11
import * as React from 'react';
2-
import { View, TextInput, Platform } from 'react-native';
3-
4-
import { ButtonV1 as Button } from '@fluentui-react-native/button';
5-
import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
6-
import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
7-
import type { Theme } from '@fluentui-react-native/theme-types';
8-
import { useTheme } from '@fluentui-react-native/theme-types';
9-
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
2+
import { Platform } from 'react-native';
103

114
import { E2ECheckboxV1Test } from './E2ECheckboxV1Test';
125
import { CHECKBOXV1_TESTPAGE } from '../../../../E2E/src/CheckboxV1/consts';
13-
import { commonTestStyles as commonStyles, mobileStyles } from '../Common/styles';
146
import type { TestSection, PlatformStatus } from '../Test';
157
import { Test } from '../Test';
16-
17-
function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
18-
console.log(isChecked);
19-
}
20-
21-
const BasicCheckbox: React.FunctionComponent = () => {
22-
return (
23-
<View>
24-
<Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
25-
<Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
26-
<Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
27-
<Checkbox label="Disabled checkbox" disabled />
28-
<Checkbox label="Disabled checked checkbox" defaultChecked disabled />
29-
<Checkbox label="A required checkbox" required />
30-
</View>
31-
);
32-
};
33-
34-
const DesktopSpecificCheckbox: React.FunctionComponent = () => {
35-
return (
36-
<>
37-
<Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
38-
<Checkbox label="A circular checkbox" shape="circular" />
39-
<Checkbox label="A checkbox with label placed before" labelPosition="before" />
40-
</>
41-
);
42-
};
43-
44-
const SizeCheckbox: React.FunctionComponent = () => {
45-
return (
46-
<View>
47-
<Checkbox tooltip="Medium checkbox" size="medium" />
48-
<Checkbox tooltip="Large checkbox" size="large" />
49-
<Checkbox label="Medium checkbox" size="medium" />
50-
<Checkbox label="Large checkbox" size="large" />
51-
</View>
52-
);
53-
};
54-
55-
const OtherCheckbox: React.FunctionComponent = () => {
56-
const [isChecked, setisChecked] = React.useState(false);
57-
58-
const setCheckedTrue = React.useCallback(() => {
59-
setisChecked(true);
60-
}, []);
61-
62-
const setCheckedFalse = React.useCallback(() => {
63-
setisChecked(false);
64-
}, []);
65-
66-
const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []);
67-
68-
return (
69-
<View style={memoizedStyles}>
70-
<Button onClick={setCheckedTrue} size="small">
71-
Check controlled checkboxes below
72-
</Button>
73-
<Button onClick={setCheckedFalse} size="small">
74-
Uncheck controlled checkboxes below
75-
</Button>
76-
77-
<Checkbox label="This is a controlled Checkbox" checked={isChecked} />
78-
{Platform.OS !== 'android' && (
79-
<>
80-
<Checkbox label="Checkbox rendered with labelPosition 'before' (controlled)" labelPosition="before" checked={isChecked} />
81-
<Checkbox label="A required checkbox with other required text" required="**" />
82-
</>
83-
)}
84-
</View>
85-
);
86-
};
87-
88-
const CircleColorCheckbox = Checkbox.customize({
89-
checked: {
90-
checkboxBackgroundColor: 'green',
91-
checkboxBorderColor: 'green',
92-
checkmarkColor: 'white',
93-
},
94-
});
95-
96-
const HoverCheckbox = Checkbox.customize({
97-
hovered: {
98-
checkmarkOpacity: 1,
99-
},
100-
});
101-
102-
const BigLabelCheckbox = Checkbox.customize({
103-
label: {
104-
fontSize: 24,
105-
fontWeight: 'bold',
106-
},
107-
});
108-
109-
const ComposedCheckbox = Checkbox.compose({
110-
slotProps: {
111-
label: { style: { color: 'hotpink' } },
112-
},
113-
});
114-
115-
const getThemedStyles = themedStyleSheet((t: Theme) => {
116-
return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
117-
});
118-
119-
const TokenCheckbox: React.FunctionComponent = () => {
120-
const [checkboxColor, setCheckboxColor] = React.useState('blue');
121-
const [checkmarkColor, setCheckmarkColor] = React.useState('white');
122-
123-
const BlueCheckbox = Checkbox.customize({
124-
checked: {
125-
checkboxBackgroundColor: checkboxColor,
126-
checkboxBorderColor: checkboxColor,
127-
checkmarkColor: checkmarkColor,
128-
},
129-
});
130-
131-
const theme = useTheme();
132-
const textBoxBorderStyle = getThemedStyles(theme);
133-
134-
return (
135-
<View>
136-
{Platform.OS !== 'android' && (
137-
<>
138-
<HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} />
139-
<CircleColorCheckbox
140-
label="A circular token-customized checkbox"
141-
shape="circular"
142-
onChange={onChangeUncontrolled}
143-
defaultChecked
144-
/>
145-
</>
146-
)}
147-
148-
<BigLabelCheckbox label="A checkbox with a bold large font label" />
149-
<ComposedCheckbox label="A checkbox with a hot pink label and no padding" />
150-
151-
<BlueCheckbox
152-
label="Token-customized checkbox. Customizable below."
153-
onChange={onChangeUncontrolled}
154-
labelPosition="before"
155-
defaultChecked={false}
156-
/>
157-
<TextInput
158-
accessibilityLabel="Background color"
159-
style={textBoxBorderStyle.textbox}
160-
placeholder="Background color"
161-
blurOnSubmit={true}
162-
onSubmitEditing={(e) => {
163-
setCheckboxColor(e.nativeEvent.text);
164-
}}
165-
/>
166-
167-
<TextInput
168-
accessibilityLabel="Checkmark color"
169-
style={textBoxBorderStyle.textbox}
170-
placeholder="Checkmark color"
171-
blurOnSubmit={true}
172-
onSubmitEditing={(e) => {
173-
setCheckmarkColor(e.nativeEvent.text);
174-
}}
175-
/>
176-
</View>
177-
);
178-
};
8+
import { BasicCheckbox } from './BasicCheckboxTest';
9+
import { DesktopSpecificCheckbox } from './DesktopSpecificCheckboxTest';
10+
import { OtherCheckbox } from './OtherCheckboxPropsTest';
11+
import { SizeCheckbox } from './SizeCheckboxTest';
12+
import { TokenCheckbox } from './TokenCheckboxTest';
17913

18014
const checkboxSections: TestSection[] = [
18115
{

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
3+
import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
4+
5+
export const DesktopSpecificCheckbox: React.FunctionComponent = () => {
6+
return (
7+
<>
8+
<Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
9+
<Checkbox label="A circular checkbox" shape="circular" />
10+
<Checkbox label="A checkbox with label placed before" labelPosition="before" />
11+
</>
12+
);
13+
};

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import { Platform, View } from 'react-native';
3+
4+
import { ButtonV1 as Button } from '@fluentui-react-native/button';
5+
import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
6+
7+
import { mobileStyles } from '../Common/styles';
8+
9+
export const OtherCheckbox: React.FunctionComponent = () => {
10+
const [isChecked, setisChecked] = React.useState(false);
11+
12+
const setCheckedTrue = React.useCallback(() => {
13+
setisChecked(true);
14+
}, []);
15+
16+
const setCheckedFalse = React.useCallback(() => {
17+
setisChecked(false);
18+
}, []);
19+
20+
const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []);
21+
22+
return (
23+
<View style={memoizedStyles}>
24+
<Button onClick={setCheckedTrue} size="small">
25+
Check controlled checkboxes below
26+
</Button>
27+
<Button onClick={setCheckedFalse} size="small">
28+
Uncheck controlled checkboxes below
29+
</Button>
30+
31+
<Checkbox label="This is a controlled Checkbox" checked={isChecked} />
32+
{Platform.OS !== 'android' && (
33+
<>
34+
<Checkbox label="Checkbox rendered with labelPosition 'before' (controlled)" labelPosition="before" checked={isChecked} />
35+
<Checkbox label="A required checkbox with other required text" required="**" />
36+
</>
37+
)}
38+
</View>
39+
);
40+
};

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
3+
import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
4+
5+
export const SizeCheckbox: React.FunctionComponent = () => {
6+
return (
7+
<>
8+
<Checkbox tooltip="Medium checkbox" size="medium" />
9+
<Checkbox tooltip="Large checkbox" size="large" />
10+
<Checkbox label="Medium checkbox" size="medium" />
11+
<Checkbox label="Large checkbox" size="large" />
12+
</>
13+
);
14+
};

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React from 'react';
2+
import { View, TextInput, Platform } from 'react-native';
3+
4+
import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
5+
import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
6+
import type { Theme } from '@fluentui-react-native/theme-types';
7+
import { useTheme } from '@fluentui-react-native/theme-types';
8+
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
9+
10+
import { commonTestStyles as commonStyles } from '../Common/styles';
11+
12+
function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
13+
console.log(isChecked);
14+
}
15+
16+
const CircleColorCheckbox = Checkbox.customize({
17+
checked: {
18+
checkboxBackgroundColor: 'green',
19+
checkboxBorderColor: 'green',
20+
checkmarkColor: 'white',
21+
},
22+
});
23+
24+
const HoverCheckbox = Checkbox.customize({
25+
hovered: {
26+
checkmarkOpacity: 1,
27+
},
28+
});
29+
30+
const BigLabelCheckbox = Checkbox.customize({
31+
label: {
32+
fontSize: 24,
33+
fontWeight: 'bold',
34+
},
35+
});
36+
37+
const ComposedCheckbox = Checkbox.compose({
38+
slotProps: {
39+
label: { style: { color: 'hotpink' } },
40+
},
41+
});
42+
43+
const getThemedStyles = themedStyleSheet((t: Theme) => {
44+
return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
45+
});
46+
47+
export const TokenCheckbox: React.FunctionComponent = () => {
48+
const [checkboxColor, setCheckboxColor] = React.useState('blue');
49+
const [checkmarkColor, setCheckmarkColor] = React.useState('white');
50+
51+
const BlueCheckbox = Checkbox.customize({
52+
checked: {
53+
checkboxBackgroundColor: checkboxColor,
54+
checkboxBorderColor: checkboxColor,
55+
checkmarkColor: checkmarkColor,
56+
},
57+
});
58+
59+
const theme = useTheme();
60+
const textBoxBorderStyle = getThemedStyles(theme);
61+
62+
return (
63+
<View>
64+
{Platform.OS !== 'android' && (
65+
<>
66+
<HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} />
67+
<CircleColorCheckbox
68+
label="A circular token-customized checkbox"
69+
shape="circular"
70+
onChange={onChangeUncontrolled}
71+
defaultChecked
72+
/>
73+
</>
74+
)}
75+
76+
<BigLabelCheckbox label="A checkbox with a bold large font label" />
77+
<ComposedCheckbox label="A checkbox with a hot pink label and no padding" />
78+
79+
<BlueCheckbox
80+
label="Token-customized checkbox. Customizable below."
81+
onChange={onChangeUncontrolled}
82+
labelPosition="before"
83+
defaultChecked={false}
84+
/>
85+
<TextInput
86+
accessibilityLabel="Background color"
87+
style={textBoxBorderStyle.textbox}
88+
placeholder="Background color"
89+
blurOnSubmit={true}
90+
onSubmitEditing={(e) => {
91+
setCheckboxColor(e.nativeEvent.text);
92+
}}
93+
/>
94+
95+
<TextInput
96+
accessibilityLabel="Checkmark color"
97+
style={textBoxBorderStyle.textbox}
98+
placeholder="Checkmark color"
99+
blurOnSubmit={true}
100+
onSubmitEditing={(e) => {
101+
setCheckmarkColor(e.nativeEvent.text);
102+
}}
103+
/>
104+
</View>
105+
);
106+
};

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Split up checkbox tests into their own files",
4+
"packageName": "@fluentui-react-native/tester",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

0 commit comments

Comments
 (0)