Skip to content

Commit 51d0ec6

Browse files
dheeraj1429dheeraj1429
committed
[unit-testing] Fixed divider component orientation and spacing issue
1 parent 1ae6923 commit 51d0ec6

File tree

6 files changed

+199
-153
lines changed

6 files changed

+199
-153
lines changed

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -78,16 +78,16 @@ describe('Divider Component', () => {
7878
expect(divider.props.style).not.toHaveProperty('paddingLeft');
7979
});
8080

81-
it('should change the border of the divider component when passed the borderColor prop', () => {
81+
it('should change the border of the divider component when passed the backgroundColor prop', () => {
8282
const { getByTestId } = render(
83-
<Divider startLineTestId={dividerStartLineTestId} endLineTestId={dividerEndLineTestId} borderColor="red" />,
83+
<Divider startLineTestId={dividerStartLineTestId} endLineTestId={dividerEndLineTestId} backgroundColor="red" />,
8484
);
8585
const startLine = getByTestId(dividerStartLineTestId);
8686
const endLine = getByTestId(dividerStartLineTestId);
8787
const startLineFlattenedStyle = StyleSheet.flatten(startLine.props.style);
8888
const endLineFlattenedStyle = StyleSheet.flatten(endLine.props.style);
89-
expect(startLineFlattenedStyle.borderColor).toEqual('red');
90-
expect(endLineFlattenedStyle.borderColor).toEqual('red');
89+
expect(startLineFlattenedStyle.backgroundColor).toEqual('red');
90+
expect(endLineFlattenedStyle.backgroundColor).toEqual('red');
9191
});
9292

9393
it('should change the variant spacing of the divider component when passed the variantSpacing prop', () => {
@@ -176,32 +176,32 @@ describe('Divider Component', () => {
176176
expect(flattenedStyle.borderWidth).toEqual(2);
177177
});
178178

179-
it('should apply the root borderColor correctly', () => {
179+
it('should apply the root backgroundColor correctly', () => {
180180
const { getByTestId } = testRenderer(
181-
<ThemeProvider components={{ dividerProps: { borderColor: 'red' } }}>
181+
<ThemeProvider components={{ dividerProps: { backgroundColor: 'red' } }}>
182182
<Divider startLineTestId={dividerStartLineTestId} endLineTestId={dividerEndLineTestId} />
183183
</ThemeProvider>,
184184
);
185185
const startLine = getByTestId(dividerStartLineTestId);
186186
const endLine = getByTestId(dividerStartLineTestId);
187187
const startLineFlattenedStyle = StyleSheet.flatten(startLine.props.style);
188188
const endLineFlattenedStyle = StyleSheet.flatten(endLine.props.style);
189-
expect(startLineFlattenedStyle.borderColor).toEqual('red');
190-
expect(endLineFlattenedStyle.borderColor).toEqual('red');
189+
expect(startLineFlattenedStyle.backgroundColor).toEqual('red');
190+
expect(endLineFlattenedStyle.backgroundColor).toEqual('red');
191191
});
192192

193-
it('should override the root borderColor correctly', () => {
193+
it('should override the root backgroundColor correctly', () => {
194194
const { getByTestId } = testRenderer(
195-
<ThemeProvider components={{ dividerProps: { borderColor: 'red' } }}>
196-
<Divider startLineTestId={dividerStartLineTestId} endLineTestId={dividerEndLineTestId} borderColor={'green'} />
195+
<ThemeProvider components={{ dividerProps: { backgroundColor: 'red' } }}>
196+
<Divider startLineTestId={dividerStartLineTestId} endLineTestId={dividerEndLineTestId} backgroundColor={'green'} />
197197
</ThemeProvider>,
198198
);
199199
const startLine = getByTestId(dividerStartLineTestId);
200200
const endLine = getByTestId(dividerStartLineTestId);
201201
const startLineFlattenedStyle = StyleSheet.flatten(startLine.props.style);
202202
const endLineFlattenedStyle = StyleSheet.flatten(endLine.props.style);
203-
expect(startLineFlattenedStyle.borderColor).toEqual('green');
204-
expect(endLineFlattenedStyle.borderColor).toEqual('green');
203+
expect(startLineFlattenedStyle.backgroundColor).toEqual('green');
204+
expect(endLineFlattenedStyle.backgroundColor).toEqual('green');
205205
});
206206

207207
it('should apply the root variant spacing of the divider component correctly', () => {
@@ -257,11 +257,11 @@ describe('Divider Component', () => {
257257

258258
const startLine = getByTestId(dividerStartLineTestId);
259259
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
260-
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: gray[700] }));
260+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: gray[700] }));
261261

262262
const endLine = getByTestId(dividerEndLineTestId);
263263
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
264-
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: gray[700] }));
264+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: gray[700] }));
265265
});
266266

267267
it('should show smooth dark background when theme mode is light', () => {
@@ -270,11 +270,11 @@ describe('Divider Component', () => {
270270

271271
const startLine = getByTestId(dividerStartLineTestId);
272272
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
273-
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: gray[400] }));
273+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: gray[400] }));
274274

275275
const endLine = getByTestId(dividerEndLineTestId);
276276
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
277-
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: gray[400] }));
277+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: gray[400] }));
278278
});
279279

280280
it('should render child component', () => {

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

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@ describe('V2ThemeContext', () => {
2121
const mockLightColors = { 400: '#000000', '100': '#be3434', '200': '#2f63be' };
2222
const mockDarkColors = { 400: '#a31a1a', '100': '#3464be', '200': '#76be2f' };
2323

24+
beforeEach(() => {
25+
jest.useFakeTimers();
26+
jest.clearAllMocks();
27+
});
28+
29+
afterEach(() => {
30+
jest.clearAllTimers();
31+
});
32+
2433
describe('createColorShades', () => {
2534
it('should customized the theme color shades', () => {
2635
const colors = createColorShades({
@@ -427,11 +436,11 @@ describe('V2ThemeContext', () => {
427436

428437
const startLine = getByTestId(startLineTestId);
429438
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
430-
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'green' }));
439+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'green' }));
431440

432441
const endLine = getByTestId(endLineTestId);
433442
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
434-
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'green' }));
443+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'green' }));
435444
});
436445

437446
it('should adopted the theme gray color', () => {
@@ -443,11 +452,11 @@ describe('V2ThemeContext', () => {
443452

444453
const startLine = getByTestId(startLineTestId);
445454
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
446-
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'gray' }));
455+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'gray' }));
447456

448457
const endLine = getByTestId(endLineTestId);
449458
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
450-
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'gray' }));
459+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'gray' }));
451460
});
452461

453462
it('should adopted the theme warning color', () => {
@@ -459,11 +468,11 @@ describe('V2ThemeContext', () => {
459468

460469
const startLine = getByTestId(startLineTestId);
461470
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
462-
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'pink' }));
471+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'pink' }));
463472

464473
const endLine = getByTestId(endLineTestId);
465474
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
466-
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'pink' }));
475+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'pink' }));
467476
});
468477

469478
it('should adopted the theme info color', () => {
@@ -475,11 +484,11 @@ describe('V2ThemeContext', () => {
475484

476485
const startLine = getByTestId(startLineTestId);
477486
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
478-
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'white' }));
487+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'white' }));
479488

480489
const endLine = getByTestId(endLineTestId);
481490
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
482-
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'white' }));
491+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'white' }));
483492
});
484493

485494
it('should adopted the theme error color', () => {
@@ -491,11 +500,11 @@ describe('V2ThemeContext', () => {
491500

492501
const startLine = getByTestId(startLineTestId);
493502
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
494-
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'blue' }));
503+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'blue' }));
495504

496505
const endLine = getByTestId(endLineTestId);
497506
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
498-
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'blue' }));
507+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'blue' }));
499508
});
500509

501510
it('should adopted the theme success color', () => {
@@ -507,11 +516,11 @@ describe('V2ThemeContext', () => {
507516

508517
const startLine = getByTestId(startLineTestId);
509518
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
510-
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'pink' }));
519+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'pink' }));
511520

512521
const endLine = getByTestId(endLineTestId);
513522
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
514-
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'pink' }));
523+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'pink' }));
515524
});
516525

517526
it('should adopted the theme primary color', () => {
@@ -523,11 +532,11 @@ describe('V2ThemeContext', () => {
523532

524533
const startLine = getByTestId(startLineTestId);
525534
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
526-
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'green' }));
535+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'green' }));
527536

528537
const endLine = getByTestId(endLineTestId);
529538
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
530-
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'green' }));
539+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'green' }));
531540
});
532541

533542
it('should adopted the theme secondary color', () => {
@@ -539,11 +548,11 @@ describe('V2ThemeContext', () => {
539548

540549
const startLine = getByTestId(startLineTestId);
541550
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
542-
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'red' }));
551+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'red' }));
543552

544553
const endLine = getByTestId(endLineTestId);
545554
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
546-
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'red' }));
555+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'red' }));
547556
});
548557

549558
it('should adopted the theme startLineStyles', () => {
@@ -600,34 +609,34 @@ describe('V2ThemeContext', () => {
600609

601610
it('should adopted the theme borderColor', () => {
602611
const { getByTestId } = themeRender(
603-
<ThemeProvider components={{ dividerProps: { borderColor: 'red' } }}>
612+
<ThemeProvider components={{ dividerProps: { backgroundColor: 'red' } }}>
604613
<Divider startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
605614
</ThemeProvider>,
606615
);
607616

608617
const startLine = getByTestId(startLineTestId);
609618
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
610-
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'red' }));
619+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'red' }));
611620

612621
const endLine = getByTestId(endLineTestId);
613622
const endLineFlattenStyles = StyleSheet.flatten(endLine.props.style);
614-
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'red' }));
623+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'red' }));
615624
});
616625

617626
it('should override the theme borderColor', () => {
618627
const { getByTestId } = themeRender(
619-
<ThemeProvider components={{ dividerProps: { borderColor: 'red' } }}>
620-
<Divider borderColor="green" startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
628+
<ThemeProvider components={{ dividerProps: { backgroundColor: 'red' } }}>
629+
<Divider backgroundColor="green" startLineTestId={startLineTestId} endLineTestId={endLineTestId} />
621630
</ThemeProvider>,
622631
);
623632

624633
const startLine = getByTestId(startLineTestId);
625634
const startLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
626-
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'green' }));
635+
expect(startLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'green' }));
627636

628637
const endLine = getByTestId(endLineTestId);
629638
const endLineFlattenStyles = StyleSheet.flatten(startLine.props.style);
630-
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ borderColor: 'green' }));
639+
expect(endLineFlattenStyles).toEqual(expect.objectContaining({ backgroundColor: 'green' }));
631640
});
632641

633642
it('should adopted the theme styles', () => {

0 commit comments

Comments
 (0)