Skip to content

Commit 11d29a5

Browse files
author
Hector Arce De Las Heras
committed
Include and improve new tests
1 parent b9a1613 commit 11d29a5

File tree

4 files changed

+192
-1
lines changed

4 files changed

+192
-1
lines changed

‎src/components/avatar/__tests__/avatar.test.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,20 @@ describe('Avatar component', () => {
6262
expect(container).toHTMLValidate();
6363
expect(results).toHaveNoViolations();
6464
});
65+
66+
test('Should render Avatar like link', async () => {
67+
const { container } = renderProvider(
68+
<Avatar
69+
image="url"
70+
{...mockProps}
71+
link={{ content: 'content', variant: 'PRIMARY', url: '/' }}
72+
/>
73+
);
74+
75+
const linkElement = screen.getByRole(ROLES.LINK);
76+
expect(linkElement).toBeInTheDocument();
77+
const results = await axe(container);
78+
expect(container).toHTMLValidate();
79+
expect(results).toHaveNoViolations();
80+
});
6581
});

‎src/components/button/__tests__/button.test.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,3 +137,16 @@ test('Button without children and icon', async () => {
137137
expect(container).toHTMLValidate();
138138
expect(results).toHaveNoViolations();
139139
});
140+
141+
test('should render an SVG if icon prop is provided', async () => {
142+
const { container } = renderProvider(
143+
<Button icon={{ icon: 'icon', altText: 'altIcon' }} size="LARGE" variant="PRIMARY" />
144+
);
145+
146+
const svg = screen.getByRole('img', { name: /altIcon/i });
147+
148+
expect(svg).toBeInTheDocument();
149+
const results = await axe(container);
150+
expect(container).toHTMLValidate();
151+
expect(results).toHaveNoViolations();
152+
});

‎src/components/carousel/__tests__/carousel.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -425,7 +425,7 @@ describe('Carousel component', () => {
425425
icon: { icon: 'ARROW_RIGHT', altText: 'alt text right arrow' },
426426
},
427427
mediaProgressBar: {
428-
barsAriaLabels: ['aria-label-0', 'aria-label-1', 'aria-label-2', 'aria-label-3'],
428+
barAriaLabel: 'Bar {{currentBar}} of {{barsNum}}',
429429
barProgressDuration: 2000,
430430
},
431431
};

‎src/components/cssAnimation/__tests__/transitionMixin.test.ts

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import { CSSProp } from 'styled-components';
2+
3+
import {
4+
transitionMixin,
5+
transitionMixinEnter,
6+
transitionMixinExit,
7+
} from '../animations/transitionMixin';
8+
import { CssAnimationTimingFunction, CssAnimationVariants, ICssAnimationStyled } from '../types';
9+
10+
describe('transitionMixin', () => {
11+
it('should return the correct CSSProp with duration in seconds', () => {
12+
const props: ICssAnimationStyled = {
13+
variant: {
14+
type: Object.values(CssAnimationVariants || {})[0],
15+
},
16+
options: {
17+
duration: 0.5,
18+
timingFunction: CssAnimationTimingFunction.EASE_IN,
19+
delay: 0.2,
20+
iterationCount: 1,
21+
},
22+
};
23+
const result: CSSProp = transitionMixin(props);
24+
const formatResult = result?.toString().replace(/\s/g, '');
25+
const expectedResult =
26+
'transition:opacity,0.5s,,transform,0.5s,;transition-timing-function:,ease-in,;transition-delay:,0.2s,;';
27+
expect(formatResult).toBe(expectedResult);
28+
});
29+
it('should return the correct CSSProp with duration in milliseconds', () => {
30+
const props: ICssAnimationStyled = {
31+
variant: {
32+
type: Object.values(CssAnimationVariants || {})[0],
33+
},
34+
options: {
35+
duration: '500ms',
36+
timingFunction: CssAnimationTimingFunction.EASE_IN,
37+
delay: '200ms',
38+
iterationCount: 1,
39+
},
40+
};
41+
const result: CSSProp = transitionMixin(props);
42+
const formatResult = result?.toString().replace(/\s/g, '');
43+
const expectedResult =
44+
'transition:opacity,500ms,,transform,500ms,;transition-timing-function:,ease-in,;transition-delay:,200ms,;';
45+
expect(formatResult).toBe(expectedResult);
46+
});
47+
it('should return the correct CSSProp with undefined options', () => {
48+
const props: ICssAnimationStyled = {
49+
variant: {
50+
type: Object.values(CssAnimationVariants || {})[0],
51+
},
52+
options: undefined,
53+
};
54+
const result: CSSProp = transitionMixin(props);
55+
const formatResult = result?.toString().replace(/\s/g, '');
56+
const expectedResult =
57+
'transition:opacity,,transform,;transition-timing-function:,;transition-delay:,;';
58+
expect(formatResult).toBe(expectedResult);
59+
});
60+
});
61+
describe('transitionMixinEnter', () => {
62+
it('should return the correct CSSProp with enterDuration in seconds', () => {
63+
const props: ICssAnimationStyled = {
64+
variant: {
65+
type: Object.values(CssAnimationVariants || {})[0],
66+
},
67+
options: {
68+
enterDuration: 0.5,
69+
timingFunction: CssAnimationTimingFunction.EASE_IN,
70+
delay: 0.2,
71+
iterationCount: 1,
72+
},
73+
};
74+
const result: CSSProp = transitionMixinEnter(props);
75+
const formatResult = result?.toString().replace(/\s/g, '');
76+
const expectedResult =
77+
'transition:opacity,0.5s,,transform,0.5s,;transition-timing-function:,ease-in,;transition-delay:,0.2s,;';
78+
expect(formatResult).toBe(expectedResult);
79+
});
80+
it('should return the correct CSSProp with enterDuration in milliseconds', () => {
81+
const props: ICssAnimationStyled = {
82+
variant: {
83+
type: Object.values(CssAnimationVariants || {})[0],
84+
},
85+
options: {
86+
enterDuration: '500ms',
87+
timingFunction: CssAnimationTimingFunction.EASE_IN,
88+
delay: '200ms',
89+
iterationCount: 1,
90+
},
91+
};
92+
const result: CSSProp = transitionMixinEnter(props);
93+
const formatResult = result?.toString().replace(/\s/g, '');
94+
const expectedResult =
95+
'transition:opacity,500ms,,transform,500ms,;transition-timing-function:,ease-in,;transition-delay:,200ms,;';
96+
expect(formatResult).toBe(expectedResult);
97+
});
98+
it('should return the correct CSSProp with undefined options', () => {
99+
const props: ICssAnimationStyled = {
100+
variant: {
101+
type: Object.values(CssAnimationVariants || {})[0],
102+
},
103+
options: undefined,
104+
};
105+
const result: CSSProp = transitionMixinEnter(props);
106+
const formatResult = result?.toString().replace(/\s/g, '');
107+
const expectedResult =
108+
'transition:opacity,,transform,;transition-timing-function:,;transition-delay:,;';
109+
expect(formatResult).toBe(expectedResult);
110+
});
111+
});
112+
describe('transitionMixinExit', () => {
113+
it('should return the correct CSSProp with exitDuration in seconds', () => {
114+
const props: ICssAnimationStyled = {
115+
variant: {
116+
type: Object.values(CssAnimationVariants || {})[0],
117+
},
118+
options: {
119+
exitDuration: 0.5,
120+
timingFunction: CssAnimationTimingFunction.EASE_IN,
121+
delay: 0.2,
122+
iterationCount: 1,
123+
},
124+
};
125+
const result: CSSProp = transitionMixinExit(props);
126+
const formatResult = result?.toString().replace(/\s/g, '');
127+
const expectedResult =
128+
'transition:opacity,0.5s,,transform,0.5s,;transition-timing-function:,ease-in,;transition-delay:,0.2s,;';
129+
expect(formatResult).toBe(expectedResult);
130+
});
131+
it('should return the correct CSSProp with exitDuration in milliseconds', () => {
132+
const props: ICssAnimationStyled = {
133+
variant: {
134+
type: Object.values(CssAnimationVariants || {})[0],
135+
},
136+
options: {
137+
exitDuration: '500ms',
138+
timingFunction: CssAnimationTimingFunction.EASE_IN,
139+
delay: '200ms',
140+
iterationCount: 1,
141+
},
142+
};
143+
const result: CSSProp = transitionMixinExit(props);
144+
const formatResult = result?.toString().replace(/\s/g, '');
145+
const expectedResult =
146+
'transition:opacity,500ms,,transform,500ms,;transition-timing-function:,ease-in,;transition-delay:,200ms,;';
147+
expect(formatResult).toBe(expectedResult);
148+
});
149+
it('should return the correct CSSProp with undefined options', () => {
150+
const props: ICssAnimationStyled = {
151+
variant: {
152+
type: Object.values(CssAnimationVariants || {})[0],
153+
},
154+
options: undefined,
155+
};
156+
const result: CSSProp = transitionMixinExit(props);
157+
const formatResult = result?.toString().replace(/\s/g, '');
158+
const expectedResult =
159+
'transition:opacity,,transform,;transition-timing-function:,;transition-delay:,;';
160+
expect(formatResult).toBe(expectedResult);
161+
});
162+
});

0 commit comments

Comments
 (0)