Skip to content

Commit d9e314d

Browse files
committed
fix: snapshots, add more tests for negative amount
1 parent e2bdb49 commit d9e314d

File tree

5 files changed

+364
-1
lines changed

5 files changed

+364
-1
lines changed

packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ describe('<Amount />', () => {
2020
expect(toJSON()).toMatchSnapshot();
2121
});
2222

23+
it('should render Amount with negative sign', () => {
24+
const { toJSON } = renderWithTheme(<Amount value={-10000} />);
25+
expect(toJSON()).toMatchSnapshot();
26+
});
27+
2328
it('should throw an error when a string is passed', () => {
2429
// @ts-expect-error testing failure case when value is passed as a string
2530
expect(() => renderWithTheme(<Amount value="10000" />)).toThrow(

packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ describe('<Amount />', () => {
2020
expect(container).toMatchSnapshot();
2121
});
2222

23+
it('should render Amount with negative value', () => {
24+
const { container } = renderWithTheme(<Amount value={-10000} />);
25+
expect(container).toMatchSnapshot();
26+
});
27+
2328
it('should accept testID', () => {
2429
const { getByTestId } = renderWithTheme(<Amount value={1000} testID="amount-test" />);
2530

@@ -217,7 +222,7 @@ describe('<Amount />', () => {
217222
});
218223
});
219224

220-
it.each(AMOUNT_SUFFIX_TEST_SET.filter((item) => item.output.includes('Mio')))(
225+
it.each(AMOUNT_SUFFIX_TEST_SET)(
221226
`should render different outputs in Amount for different suffix values`,
222227
(item) => {
223228
const { getByTestId } = renderWithTheme(

packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -356,6 +356,217 @@ exports[`<Amount /> should render Amount with default props 1`] = `
356356
</View>
357357
`;
358358

359+
exports[`<Amount /> should render Amount with negative sign 1`] = `
360+
<View
361+
style={
362+
{
363+
"flex": 1,
364+
}
365+
}
366+
>
367+
<View
368+
data-blade-component="amount"
369+
display="flex"
370+
flexDirection="row"
371+
style={
372+
[
373+
{
374+
"display": "flex",
375+
"flexDirection": "row",
376+
},
377+
]
378+
}
379+
>
380+
<View
381+
alignItems="baseline"
382+
data-blade-component="base-box"
383+
display="flex"
384+
flexDirection="row"
385+
position="relative"
386+
style={
387+
[
388+
{
389+
"alignItems": "baseline",
390+
"display": "flex",
391+
"flexDirection": "row",
392+
"position": "relative",
393+
},
394+
]
395+
}
396+
>
397+
<Text
398+
accessible={true}
399+
color="surface.text.gray.normal"
400+
data-blade-component="base-text"
401+
fontSize={100}
402+
fontWeight="regular"
403+
lineHeight={100}
404+
marginX="spacing.2"
405+
style={
406+
[
407+
{
408+
"color": "hsla(212, 39%, 16%, 1)",
409+
"fontFamily": "Inter",
410+
"fontSize": 14,
411+
"fontStyle": "normal",
412+
"fontWeight": "400",
413+
"letterSpacing": 0,
414+
"lineHeight": 20,
415+
"marginBottom": 0,
416+
"marginLeft": 4,
417+
"marginRight": 4,
418+
"marginTop": 0,
419+
"paddingBottom": 0,
420+
"paddingLeft": 0,
421+
"paddingRight": 0,
422+
"paddingTop": 0,
423+
"textDecorationLine": "none",
424+
},
425+
]
426+
}
427+
>
428+
-
429+
</Text>
430+
<Text
431+
accessible={true}
432+
color="surface.text.gray.normal"
433+
data-blade-component="base-text"
434+
fontSize={25}
435+
fontWeight="regular"
436+
marginRight="spacing.1"
437+
opacity={0.64}
438+
style={
439+
[
440+
{
441+
"color": "hsla(212, 39%, 16%, 1)",
442+
"fontFamily": "Inter",
443+
"fontSize": 10,
444+
"fontStyle": "normal",
445+
"fontWeight": "400",
446+
"letterSpacing": 0,
447+
"lineHeight": 20,
448+
"marginBottom": 0,
449+
"marginLeft": 0,
450+
"marginRight": 2,
451+
"marginTop": 0,
452+
"opacity": 0.64,
453+
"paddingBottom": 0,
454+
"paddingLeft": 0,
455+
"paddingRight": 0,
456+
"paddingTop": 0,
457+
"textDecorationLine": "none",
458+
},
459+
]
460+
}
461+
>
462+
463+
</Text>
464+
<Text
465+
accessible={true}
466+
color="surface.text.gray.normal"
467+
data-blade-component="text"
468+
fontFamily="text"
469+
fontSize={100}
470+
fontStyle="normal"
471+
fontWeight="regular"
472+
lineHeight={100}
473+
style={
474+
[
475+
{
476+
"color": "hsla(212, 39%, 16%, 1)",
477+
"fontFamily": "Inter",
478+
"fontSize": 14,
479+
"fontStyle": "normal",
480+
"fontWeight": "400",
481+
"letterSpacing": 0,
482+
"lineHeight": 20,
483+
"marginBottom": 0,
484+
"marginLeft": 0,
485+
"marginRight": 0,
486+
"marginTop": 0,
487+
"paddingBottom": 0,
488+
"paddingLeft": 0,
489+
"paddingRight": 0,
490+
"paddingTop": 0,
491+
"textDecorationLine": "none",
492+
},
493+
]
494+
}
495+
>
496+
<Text
497+
accessible={true}
498+
color="surface.text.gray.normal"
499+
data-blade-component="base-text"
500+
fontFamily="text"
501+
fontSize={100}
502+
fontWeight="regular"
503+
lineHeight={100}
504+
style={
505+
[
506+
{
507+
"color": "hsla(212, 39%, 16%, 1)",
508+
"fontFamily": "Inter",
509+
"fontSize": 14,
510+
"fontStyle": "normal",
511+
"fontWeight": "400",
512+
"letterSpacing": 0,
513+
"lineHeight": 20,
514+
"marginBottom": 0,
515+
"marginLeft": 0,
516+
"marginRight": 0,
517+
"marginTop": 0,
518+
"paddingBottom": 0,
519+
"paddingLeft": 0,
520+
"paddingRight": 0,
521+
"paddingTop": 0,
522+
"textDecorationLine": "none",
523+
},
524+
]
525+
}
526+
>
527+
10,000
528+
</Text>
529+
<Text
530+
accessible={true}
531+
color="surface.text.gray.normal"
532+
data-blade-component="base-text"
533+
fontFamily="text"
534+
fontSize={25}
535+
fontWeight="regular"
536+
opacity={0.64}
537+
style={
538+
[
539+
{
540+
"color": "hsla(212, 39%, 16%, 1)",
541+
"fontFamily": "Inter",
542+
"fontSize": 10,
543+
"fontStyle": "normal",
544+
"fontWeight": "400",
545+
"letterSpacing": 0,
546+
"lineHeight": 20,
547+
"marginBottom": 0,
548+
"marginLeft": 0,
549+
"marginRight": 0,
550+
"marginTop": 0,
551+
"opacity": 0.64,
552+
"paddingBottom": 0,
553+
"paddingLeft": 0,
554+
"paddingRight": 0,
555+
"paddingTop": 0,
556+
"textDecorationLine": "none",
557+
},
558+
]
559+
}
560+
>
561+
.
562+
00
563+
</Text>
564+
</Text>
565+
</View>
566+
</View>
567+
</View>
568+
`;
569+
359570
exports[`<Amount /> should render MYR currency Amount 1`] = `
360571
<View
361572
style={

packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,146 @@ exports[`<Amount /> should render Amount with default props 1`] = `
230230
</div>
231231
`;
232232

233+
exports[`<Amount /> should render Amount with negative value 1`] = `
234+
.c0.c0.c0.c0.c0 {
235+
display: -webkit-inline-box;
236+
display: -webkit-inline-flex;
237+
display: -ms-inline-flexbox;
238+
display: inline-flex;
239+
-webkit-flex-direction: row;
240+
-ms-flex-direction: row;
241+
flex-direction: row;
242+
}
243+
244+
.c1.c1.c1.c1.c1 {
245+
display: -webkit-inline-box;
246+
display: -webkit-inline-flex;
247+
display: -ms-inline-flexbox;
248+
display: inline-flex;
249+
-webkit-flex-direction: row;
250+
-ms-flex-direction: row;
251+
flex-direction: row;
252+
-webkit-align-items: baseline;
253+
-webkit-box-align: baseline;
254+
-ms-flex-align: baseline;
255+
align-items: baseline;
256+
position: relative;
257+
}
258+
259+
.c2.c2.c2.c2.c2 {
260+
color: hsla(212,39%,16%,1);
261+
font-family: "Inter","Inter Fallback Arial",Arial;
262+
font-size: 0.875rem;
263+
font-weight: 400;
264+
font-style: normal;
265+
-webkit-text-decoration-line: none;
266+
text-decoration-line: none;
267+
line-height: 1.25rem;
268+
-webkit-letter-spacing: 0px;
269+
-moz-letter-spacing: 0px;
270+
-ms-letter-spacing: 0px;
271+
letter-spacing: 0px;
272+
margin: 0;
273+
padding: 0;
274+
margin-right: 4px;
275+
margin-left: 4px;
276+
}
277+
278+
.c3.c3.c3.c3.c3 {
279+
color: hsla(212,39%,16%,1);
280+
font-family: "Inter","Inter Fallback Arial",Arial;
281+
font-size: 0.625rem;
282+
font-weight: 400;
283+
font-style: normal;
284+
-webkit-text-decoration-line: none;
285+
text-decoration-line: none;
286+
line-height: 1.25rem;
287+
-webkit-letter-spacing: 0px;
288+
-moz-letter-spacing: 0px;
289+
-ms-letter-spacing: 0px;
290+
letter-spacing: 0px;
291+
margin: 0;
292+
padding: 0;
293+
opacity: 0.64;
294+
margin-right: 2px;
295+
}
296+
297+
.c4.c4.c4.c4.c4 {
298+
color: hsla(212,39%,16%,1);
299+
font-family: "Inter","Inter Fallback Arial",Arial;
300+
font-size: 0.875rem;
301+
font-weight: 400;
302+
font-style: normal;
303+
-webkit-text-decoration-line: none;
304+
text-decoration-line: none;
305+
line-height: 1.25rem;
306+
-webkit-letter-spacing: 0px;
307+
-moz-letter-spacing: 0px;
308+
-ms-letter-spacing: 0px;
309+
letter-spacing: 0px;
310+
margin: 0;
311+
padding: 0;
312+
}
313+
314+
.c5.c5.c5.c5.c5 {
315+
color: hsla(212,39%,16%,1);
316+
font-family: "Inter","Inter Fallback Arial",Arial;
317+
font-size: 0.625rem;
318+
font-weight: 400;
319+
font-style: normal;
320+
-webkit-text-decoration-line: none;
321+
text-decoration-line: none;
322+
line-height: 1.25rem;
323+
-webkit-letter-spacing: 0px;
324+
-moz-letter-spacing: 0px;
325+
-ms-letter-spacing: 0px;
326+
letter-spacing: 0px;
327+
margin: 0;
328+
padding: 0;
329+
opacity: 0.64;
330+
}
331+
332+
<div>
333+
<div
334+
class="c0"
335+
data-blade-component="amount"
336+
>
337+
<div
338+
class="c1"
339+
data-blade-component="base-box"
340+
>
341+
<span
342+
class="c2"
343+
data-blade-component="base-text"
344+
>
345+
-
346+
</span>
347+
<span
348+
class="c3"
349+
data-blade-component="base-text"
350+
opacity="0.64"
351+
>
352+
353+
</span>
354+
<span
355+
class="c4"
356+
data-blade-component="base-text"
357+
>
358+
10,000
359+
</span>
360+
<span
361+
class="c5"
362+
data-blade-component="base-text"
363+
opacity="0.64"
364+
>
365+
.
366+
00
367+
</span>
368+
</div>
369+
</div>
370+
</div>
371+
`;
372+
233373
exports[`<Amount /> should render MYR currency Amount 1`] = `
234374
.c0.c0.c0.c0.c0 {
235375
display: -webkit-inline-box;

0 commit comments

Comments
 (0)