1import { render } from '@testing-library/react-native';
2import * as React from 'react';
3import { Text, View } from 'react-native';
4
5import { create } from '../create-primitive';
6import { ThemeProvider } from '../useExpoTheme';
7
8test('it renders the given component', async () => {
9  const Heading = create(Text, {});
10  const Box = create(View, {});
11
12  const { toJSON: textJSON } = render(<Heading>Hi</Heading>);
13  let json: any = textJSON();
14
15  expect(json.type).toEqual('Text');
16
17  const { toJSON: viewJSON } = render(<Box />);
18  json = viewJSON();
19
20  expect(json.type).toEqual('View');
21});
22
23test('it passes variant style props', async () => {
24  const Heading = create(Text, {
25    variants: {
26      size: {
27        large: {
28          fontSize: 20,
29        },
30      },
31    },
32  });
33
34  const { toJSON } = render(<Heading size="large">Hi</Heading>);
35
36  const json: any = toJSON();
37
38  expect(json.props.style.fontSize).toEqual(20);
39});
40
41test('it passes base style props', async () => {
42  const Heading = create(Text, {
43    base: {
44      fontFamily: 'Helvetica',
45    },
46  });
47
48  const { toJSON } = render(<Heading>Hi</Heading>);
49  const json: any = toJSON();
50  expect(json.props.style).toEqual({ fontFamily: 'Helvetica' });
51});
52
53test('it passes non-style props', () => {
54  const Heading = create(Text, {
55    props: {
56      accessibilityRole: 'header',
57    },
58  });
59
60  const { toJSON } = render(<Heading>Hi</Heading>);
61  const json: any = toJSON();
62
63  expect(json.props.accessibilityRole).toEqual('header');
64});
65
66test('initial render with the correct style for dark mode', () => {
67  const selectors = {
68    light: {
69      bg: {
70        test: {
71          backgroundColor: 'red',
72        },
73      },
74    },
75    dark: {
76      bg: {
77        test: {
78          backgroundColor: 'blue',
79        },
80      },
81    },
82  };
83
84  const Heading = create(Text, {
85    selectors: {
86      light: {
87        bg: {
88          test: {
89            backgroundColor: 'red',
90          },
91        },
92      },
93      dark: {
94        bg: {
95          test: {
96            backgroundColor: 'blue',
97          },
98        },
99      },
100    },
101  });
102
103  const { toJSON, rerender } = render(
104    <ThemeProvider themePreference="dark">
105      <Heading bg="test">Hi</Heading>
106    </ThemeProvider>
107  );
108
109  const darkThemeRender: any = toJSON();
110
111  expect(darkThemeRender.props.style.backgroundColor).toEqual(
112    selectors.dark.bg.test.backgroundColor
113  );
114
115  rerender(
116    <ThemeProvider themePreference="light">
117      <Heading bg="test">Hi</Heading>
118    </ThemeProvider>
119  );
120
121  const lightThemeRender: any = toJSON();
122
123  expect(lightThemeRender.props.style.backgroundColor).toEqual(
124    selectors.light.bg.test.backgroundColor
125  );
126});
127
128test('it handles ad-hoc selectors as props', () => {
129  const Heading = create(Text, {});
130
131  const selectors = { dark: { backgroundColor: 'red' }, light: { backgroundColor: 'blue' } };
132
133  const { toJSON, rerender } = render(
134    <ThemeProvider themePreference="dark">
135      <Heading selectors={selectors} />
136    </ThemeProvider>
137  );
138
139  const darkThemeRender: any = toJSON();
140  expect(darkThemeRender.props.style).toEqual(selectors.dark);
141
142  rerender(
143    <ThemeProvider themePreference="light">
144      <Heading selectors={selectors} />
145    </ThemeProvider>
146  );
147
148  const lightThemeRender: any = toJSON();
149  expect(lightThemeRender.props.style).toEqual(selectors.light);
150});
151
152test('it does not pass props that have a variant of the same name to components', () => {
153  const Box = create(View, {
154    variants: {
155      width: {
156        test: { width: 24 },
157      },
158    },
159  });
160
161  const { toJSON } = render(<Box width="test" />);
162  const output: any = toJSON();
163  expect(output.props.width).toBeUndefined();
164});
165