Skip to content

Commit a7218d1

Browse files
dheeraj1429dheeraj1429
committed
[unit-testing] added theme config text component test cases
1 parent 6c344b8 commit a7218d1

3 files changed

Lines changed: 290 additions & 6 deletions

File tree

‎src/packages/react-native-material-elements/__test__/V2ThemeContext.test.tsx‎

Lines changed: 276 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1-
import React from 'react';
2-
import { renderHook } from '@testing-library/react-native';
1+
import { renderHook, render as themeRender } from '@testing-library/react-native';
2+
import { StyleSheet } from 'react-native';
33
import {
44
createColorShades,
55
createTheme,
66
createThemeDimensions,
77
defaultLightTheme,
8+
Text,
89
themeDimensions,
910
ThemeProvider,
1011
useTheme,
1112
} from '../src';
12-
import { render, ThemeWrapper } from './test-utils';
1313
import { ThemeInterface, ThemeType } from '../src/libraries/types';
14+
import { render, ThemeWrapper } from './test-utils';
15+
import { TextVariationThemeConfig } from '../src/types';
1416

1517
describe('V2ThemeContext', () => {
1618
const mockLightColors = { 400: '#000000', '100': '#be3434', '200': '#2f63be' };
@@ -108,4 +110,275 @@ describe('V2ThemeContext', () => {
108110
consoleSpy.mockRestore();
109111
});
110112
});
113+
114+
describe('ThemeProvider component config', () => {
115+
describe('textProps', () => {
116+
const mockTextThemeConfig: TextVariationThemeConfig = {
117+
body1: { fontSize: 10, fontWeight: '100' },
118+
body2: { fontSize: 15, fontWeight: '200' },
119+
h1: { fontSize: 20, fontWeight: '300' },
120+
h2: { fontSize: 30, fontWeight: '400' },
121+
h3: { fontSize: 40, fontWeight: '500' },
122+
h4: { fontSize: 50, fontWeight: '600' },
123+
h5: { fontSize: 60, fontWeight: '700' },
124+
h6: { fontSize: 70, fontWeight: '800' },
125+
};
126+
127+
it('should adopted theme text (body1) config', () => {
128+
const { getByText } = themeRender(
129+
<ThemeProvider
130+
components={{
131+
textProps: mockTextThemeConfig,
132+
}}>
133+
<Text variation="body1">Hello</Text>
134+
</ThemeProvider>,
135+
);
136+
137+
const text = getByText('Hello');
138+
const fattenStyles = StyleSheet.flatten(text.props.style);
139+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 10, fontWeight: '100' }));
140+
});
141+
142+
it('should should override theme text (body1) config', () => {
143+
const { getByText } = themeRender(
144+
<ThemeProvider
145+
components={{
146+
textProps: mockTextThemeConfig,
147+
}}>
148+
<Text variation="body1" fontWeight={200} fontSize={30}>
149+
Hello
150+
</Text>
151+
</ThemeProvider>,
152+
);
153+
154+
const text = getByText('Hello');
155+
const fattenStyles = StyleSheet.flatten(text.props.style);
156+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 30, fontWeight: 200 }));
157+
});
158+
159+
it('should adopted theme text (body2) config', () => {
160+
const { getByText } = themeRender(
161+
<ThemeProvider
162+
components={{
163+
textProps: mockTextThemeConfig,
164+
}}>
165+
<Text variation="body2">Hello</Text>
166+
</ThemeProvider>,
167+
);
168+
169+
const text = getByText('Hello');
170+
const fattenStyles = StyleSheet.flatten(text.props.style);
171+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 15, fontWeight: '200' }));
172+
});
173+
174+
it('should override theme text (body2) config', () => {
175+
const { getByText } = themeRender(
176+
<ThemeProvider
177+
components={{
178+
textProps: mockTextThemeConfig,
179+
}}>
180+
<Text variation="body2" fontWeight={300} fontSize={29}>
181+
Hello
182+
</Text>
183+
</ThemeProvider>,
184+
);
185+
186+
const text = getByText('Hello');
187+
const fattenStyles = StyleSheet.flatten(text.props.style);
188+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 29, fontWeight: 300 }));
189+
});
190+
191+
it('should adopted theme text (h1) config', () => {
192+
const { getByText } = themeRender(
193+
<ThemeProvider
194+
components={{
195+
textProps: mockTextThemeConfig,
196+
}}>
197+
<Text variation="h1">Hello</Text>
198+
</ThemeProvider>,
199+
);
200+
201+
const text = getByText('Hello');
202+
const fattenStyles = StyleSheet.flatten(text.props.style);
203+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 20, fontWeight: '300' }));
204+
});
205+
206+
it('should override theme text (h1) config', () => {
207+
const { getByText } = themeRender(
208+
<ThemeProvider
209+
components={{
210+
textProps: mockTextThemeConfig,
211+
}}>
212+
<Text variation="h1" fontWeight={100} fontSize={10}>
213+
Hello
214+
</Text>
215+
</ThemeProvider>,
216+
);
217+
218+
const text = getByText('Hello');
219+
const fattenStyles = StyleSheet.flatten(text.props.style);
220+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 10, fontWeight: 100 }));
221+
});
222+
223+
it('should adopted theme text (h2) config', () => {
224+
const { getByText } = themeRender(
225+
<ThemeProvider
226+
components={{
227+
textProps: mockTextThemeConfig,
228+
}}>
229+
<Text variation="h2">Hello</Text>
230+
</ThemeProvider>,
231+
);
232+
233+
const text = getByText('Hello');
234+
const fattenStyles = StyleSheet.flatten(text.props.style);
235+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 30, fontWeight: '400' }));
236+
});
237+
238+
it('should override theme text (h2) config', () => {
239+
const { getByText } = themeRender(
240+
<ThemeProvider
241+
components={{
242+
textProps: mockTextThemeConfig,
243+
}}>
244+
<Text variation="h2" fontSize={10} fontWeight={200}>
245+
Hello
246+
</Text>
247+
</ThemeProvider>,
248+
);
249+
250+
const text = getByText('Hello');
251+
const fattenStyles = StyleSheet.flatten(text.props.style);
252+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 10, fontWeight: 200 }));
253+
});
254+
255+
it('should adopted theme text (h3) config', () => {
256+
const { getByText } = themeRender(
257+
<ThemeProvider
258+
components={{
259+
textProps: mockTextThemeConfig,
260+
}}>
261+
<Text variation="h3">Hello</Text>
262+
</ThemeProvider>,
263+
);
264+
265+
const text = getByText('Hello');
266+
const fattenStyles = StyleSheet.flatten(text.props.style);
267+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 40, fontWeight: '500' }));
268+
});
269+
270+
it('should override theme text (h3) config', () => {
271+
const { getByText } = themeRender(
272+
<ThemeProvider
273+
components={{
274+
textProps: mockTextThemeConfig,
275+
}}>
276+
<Text variation="h3" fontWeight={200} fontSize={10}>
277+
Hello
278+
</Text>
279+
</ThemeProvider>,
280+
);
281+
282+
const text = getByText('Hello');
283+
const fattenStyles = StyleSheet.flatten(text.props.style);
284+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 10, fontWeight: 200 }));
285+
});
286+
287+
it('should adopted theme text (h4) config', () => {
288+
const { getByText } = themeRender(
289+
<ThemeProvider
290+
components={{
291+
textProps: mockTextThemeConfig,
292+
}}>
293+
<Text variation="h4">Hello</Text>
294+
</ThemeProvider>,
295+
);
296+
297+
const text = getByText('Hello');
298+
const fattenStyles = StyleSheet.flatten(text.props.style);
299+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 50, fontWeight: '600' }));
300+
});
301+
302+
it('should override theme text (h4) config', () => {
303+
const { getByText } = themeRender(
304+
<ThemeProvider
305+
components={{
306+
textProps: mockTextThemeConfig,
307+
}}>
308+
<Text variation="h4" fontSize={20} fontWeight={900}>
309+
Hello
310+
</Text>
311+
</ThemeProvider>,
312+
);
313+
314+
const text = getByText('Hello');
315+
const fattenStyles = StyleSheet.flatten(text.props.style);
316+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 20, fontWeight: 900 }));
317+
});
318+
319+
it('should adopted theme text (h5) config', () => {
320+
const { getByText } = themeRender(
321+
<ThemeProvider
322+
components={{
323+
textProps: mockTextThemeConfig,
324+
}}>
325+
<Text variation="h5">Hello</Text>
326+
</ThemeProvider>,
327+
);
328+
329+
const text = getByText('Hello');
330+
const fattenStyles = StyleSheet.flatten(text.props.style);
331+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 60, fontWeight: '700' }));
332+
});
333+
334+
it('should override theme text (h5) config', () => {
335+
const { getByText } = themeRender(
336+
<ThemeProvider
337+
components={{
338+
textProps: mockTextThemeConfig,
339+
}}>
340+
<Text variation="h5" fontSize={10} fontWeight={300}>
341+
Hello
342+
</Text>
343+
</ThemeProvider>,
344+
);
345+
346+
const text = getByText('Hello');
347+
const fattenStyles = StyleSheet.flatten(text.props.style);
348+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 10, fontWeight: 300 }));
349+
});
350+
351+
it('should adopted theme text (h6) config', () => {
352+
const { getByText } = themeRender(
353+
<ThemeProvider
354+
components={{
355+
textProps: mockTextThemeConfig,
356+
}}>
357+
<Text variation="h6">Hello</Text>
358+
</ThemeProvider>,
359+
);
360+
361+
const text = getByText('Hello');
362+
const fattenStyles = StyleSheet.flatten(text.props.style);
363+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 70, fontWeight: '800' }));
364+
});
365+
366+
it('should override theme text (h6) config', () => {
367+
const { getByText } = themeRender(
368+
<ThemeProvider
369+
components={{
370+
textProps: mockTextThemeConfig,
371+
}}>
372+
<Text variation="h6" fontSize={20} fontWeight={200}>
373+
Hello
374+
</Text>
375+
</ThemeProvider>,
376+
);
377+
378+
const text = getByText('Hello');
379+
const fattenStyles = StyleSheet.flatten(text.props.style);
380+
expect(fattenStyles).toEqual(expect.objectContaining({ fontSize: 20, fontWeight: 200 }));
381+
});
382+
});
383+
});
111384
});

‎src/packages/react-native-material-elements/src/components/Typography/Text.styles.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,34 +34,44 @@ export const generateTextStyles = ({
3434
const textColor = color ?? baseColor;
3535

3636
let fontSize: number;
37+
let fontWeight: TextStyle['fontWeight'];
3738

3839
switch (variation) {
3940
case 'body1':
4041
fontSize = themeComponentConfig?.body1?.fontSize ?? themeFonts['text-2xl'];
42+
fontWeight = themeComponentConfig?.body1?.fontWeight;
4143
break;
4244
case 'body2':
4345
fontSize = themeComponentConfig?.body2?.fontSize ?? themeFonts['text-3xl'];
46+
fontWeight = themeComponentConfig?.body2?.fontWeight;
4447
break;
4548
case 'caption':
4649
fontSize = themeComponentConfig?.caption?.fontSize ?? themeFonts['text-sm'];
50+
fontWeight = themeComponentConfig?.caption?.fontWeight;
4751
break;
4852
case 'h1':
4953
fontSize = themeComponentConfig?.h1?.fontSize ?? themeFonts['text-xl'];
54+
fontWeight = themeComponentConfig?.h1?.fontWeight;
5055
break;
5156
case 'h2':
5257
fontSize = themeComponentConfig?.h2?.fontSize ?? themeFonts['text-lg'];
58+
fontWeight = themeComponentConfig?.h2?.fontWeight;
5359
break;
5460
case 'h3':
5561
fontSize = themeComponentConfig?.h3?.fontSize ?? themeFonts['text-md'];
62+
fontWeight = themeComponentConfig?.h3?.fontWeight;
5663
break;
5764
case 'h4':
5865
fontSize = themeComponentConfig?.h4?.fontSize ?? themeFonts['text-sm'];
66+
fontWeight = themeComponentConfig?.h4?.fontWeight;
5967
break;
6068
case 'h5':
6169
fontSize = themeComponentConfig?.h5?.fontSize ?? themeFonts['text-xs'];
70+
fontWeight = themeComponentConfig?.h5?.fontWeight;
6271
break;
6372
case 'h6':
6473
fontSize = themeComponentConfig?.h6?.fontSize ?? themeFonts['text-xxs'];
74+
fontWeight = themeComponentConfig?.h6?.fontWeight;
6575
break;
6676
default:
6777
fontSize = themeFonts['text-sm'];
@@ -86,6 +96,7 @@ export const generateTextStyles = ({
8696
return {
8797
...(textColor && { color: textColor }),
8898
...(variation && { fontSize }),
99+
...(fontWeight && { fontWeight }),
89100
...(gutterBottom && gutter('marginBottom', gutterBottomSpace)),
90101
...(isActive && { color: textActiveColor }),
91102
...(disabled && { opacity: 0.3 }),

‎src/packages/react-native-material-elements/src/components/Typography/Text.types.d.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { ColorSchemeName, ColorValue, Text } from 'react-native';
2+
import { ColorSchemeName, ColorValue, Text, TextStyle } from 'react-native';
33
import { BaseStyles, ElementTextStyleProps, StyledProps } from '../../libraries/style/styleTypes';
44
import { ThemeDimensions, WithThemeComponentConfig } from '../../libraries/themes/theme';
55
/**
@@ -8,8 +8,8 @@ import { ThemeDimensions, WithThemeComponentConfig } from '../../libraries/theme
88
*/
99
export type TextVariation = 'body1' | 'body2' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
1010

11-
type TextFontSize = { fontSize: number };
12-
export type TextVariationThemeConfig = Partial<Record<TextVariation, TextFontSize | undefined>>;
11+
type TextFontConfig = { fontSize: number; fontWeight?: TextStyle['fontWeight'] };
12+
export type TextVariationThemeConfig = Partial<Record<TextVariation, TextFontConfig | undefined>>;
1313

1414
/**
1515
* Interface for the properties that can be passed to a text component.

0 commit comments

Comments
 (0)