Skip to content

Commit e2fae80

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #2127 from dxc-technology/gomezivann/coverage
Improving the coverage
2 parents 2552d78 + 3a5c9aa commit e2fae80

File tree

9 files changed

+217
-78
lines changed

9 files changed

+217
-78
lines changed

‎packages/lib/src/bulleted-list/BulletedList.test.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { render } from "@testing-library/react";
2+
import DxcBulletedList from "./BulletedList";
3+
4+
describe("Bulleted list component tests", () => {
5+
test("The component renders properly", () => {
6+
const { getByText } = render(
7+
<DxcBulletedList>
8+
<DxcBulletedList.Item>Code</DxcBulletedList.Item>
9+
<DxcBulletedList.Item>Usage</DxcBulletedList.Item>
10+
<DxcBulletedList.Item>Specifications</DxcBulletedList.Item>
11+
</DxcBulletedList>
12+
);
13+
expect(getByText("Code")).toBeTruthy();
14+
expect(getByText("Usage")).toBeTruthy();
15+
expect(getByText("Specifications")).toBeTruthy();
16+
});
17+
});

‎packages/lib/src/button/Button.test.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,30 @@ import { render, fireEvent } from "@testing-library/react";
22
import DxcButton from "./Button";
33

44
describe("Button component tests", () => {
5-
test("Button renders with correct text", () => {
6-
// const { getByText } = render(<DxcButton label="Button" />);
7-
expect("Hola").toBeTruthy();
8-
});
9-
105
test("Calls correct function on click", () => {
116
const onClick = jest.fn();
12-
const { getByText } = render(<DxcButton label="Button" onClick={onClick} />);
13-
7+
const { getByText } = render(<DxcButton label="Button" onClick={onClick} size={{ height: "medium" }} semantic="success" />);
148
const button = getByText("Button");
159
fireEvent.click(button);
1610
expect(onClick).toHaveBeenCalled();
1711
});
1812

1913
test("Renders with correct accessibility attributes", () => {
20-
const { getByRole } = render(<DxcButton label="Home" title="Go home" tabIndex={1} />);
21-
14+
const { getByRole } = render(<DxcButton label="Home" title="Go home" tabIndex={1} semantic="error" />);
2215
const button = getByRole("button");
2316
expect(button.getAttribute("aria-label")).toBe("Go home");
2417
expect(button.getAttribute("tabindex")).toBe("1");
2518
});
19+
20+
test("Triggers form submit event on button click", () => {
21+
const handleSubmit = jest.fn();
22+
const { getByRole } = render(
23+
<form onSubmit={handleSubmit}>
24+
<DxcButton label="Submit" type="submit" />
25+
</form>
26+
);
27+
const button = getByRole("button", { name: "Submit" });
28+
fireEvent.click(button);
29+
expect(handleSubmit).toHaveBeenCalledTimes(1);
30+
});
2631
});

‎packages/lib/src/button/Button.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const DxcButton = ({
3333
}}
3434
tabIndex={disabled ? -1 : tabIndex}
3535
type={type}
36-
$mode={mode === "primary" || mode === "secondary" || mode === "tertiary" ? mode : "primary"}
36+
$mode={mode}
3737
hasLabel={label ? true : false}
3838
hasIcon={icon ? true : false}
3939
iconPosition={iconPosition}
@@ -64,7 +64,7 @@ const calculateWidth = (margin: ButtonPropsType["margin"], size: ButtonPropsType
6464
? `calc(${widths[size?.width]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`
6565
: widths[size?.width];
6666

67-
const getHeight = (height) => {
67+
const getHeight = (height: ButtonPropsType["size"]["height"]) => {
6868
switch (height) {
6969
case "small":
7070
return 1.5;
@@ -403,7 +403,7 @@ const Button = styled.button<{
403403
gap: 0.5rem;
404404
align-items: center;
405405
justify-content: center;
406-
height: ${(props) => getHeight(props.size?.height && props.size?.height) + "rem"};
406+
height: ${(props) => getHeight(props.size?.height) + "rem"};
407407
width: ${(props) => calculateWidth(props.margin, props.size)};
408408
margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
409409
margin-top: ${(props) =>

‎packages/lib/src/container/Container.test.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { render } from "@testing-library/react";
2+
import DxcContainer from "./Container";
3+
4+
describe("Container component tests", () => {
5+
test("The component renders properly", () => {
6+
const { getByText } = render(
7+
<DxcContainer
8+
boxSizing="border-box"
9+
width="200px"
10+
height="200px"
11+
background={{ color: "color_purple_400" }}
12+
border={{
13+
top: {
14+
width: "2px",
15+
color: "color_blue_600",
16+
style: "solid",
17+
},
18+
bottom: {
19+
width: "thick",
20+
color: "color_purple_600",
21+
style: "solid",
22+
},
23+
}}
24+
borderRadius="0 0 0.25rem 0.25rem"
25+
padding="medium"
26+
margin="large"
27+
>
28+
<b>Example text</b>
29+
</DxcContainer>
30+
);
31+
expect(getByText("Example text")).toBeTruthy();
32+
});
33+
});

‎packages/lib/src/container/Container.tsx‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,7 @@
11
import styled from "styled-components";
22
import { getCoreColorToken } from "../common/coreTokens";
33
import ContainerPropsType, { BorderProperties, StyledProps } from "./types";
4-
5-
/**
6-
* This values correspond to the spaces defined in the design system
7-
* https://developer.dxc.com/halstack/next/principles/spacing/#component-spacing-tokens
8-
*/
9-
const spaces = {
10-
xxsmall: "4px",
11-
xsmall: "8px",
12-
small: "12px",
13-
medium: "16px",
14-
large: "24px",
15-
xlarge: "32px",
16-
xxlarge: "48px",
17-
};
18-
19-
const DxcContainer = ({ display, width, height, overflow, ...props }: ContainerPropsType) => (
20-
<Container $display={display} $width={width} $height={height} $overflow={overflow} {...props} />
21-
);
4+
import { spaces } from "../common/variables";
225

236
const getBorderStyles = (direction: "top" | "bottom" | "left" | "right", borderProperties: BorderProperties) =>
247
`border-${direction}: ${borderProperties?.width ?? ""} ${borderProperties?.style ?? ""} ${
@@ -95,4 +78,6 @@ const Container = styled.div<StyledProps>`
9578
padding-left: ${({ padding }) => (typeof padding === "object" ? spaces[padding.left] : "")};
9679
`;
9780

98-
export default DxcContainer;
81+
export default function DxcContainer({ display, width, height, overflow, ...props }: ContainerPropsType) {
82+
return <Container $display={display} $width={width} $height={height} $overflow={overflow} {...props} />;
83+
}

‎packages/lib/src/grid/Grid.tsx‎

Lines changed: 83 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,58 +3,94 @@ import GridPropsType, { GridItemProps } from "./types";
33

44
const Grid = styled.div<GridPropsType>`
55
display: grid;
6-
${({ templateColumns }) => templateColumns && `grid-template-columns: ${templateColumns.join(" ")};`}
7-
${({ templateRows }) => templateRows && `grid-template-rows: ${templateRows.join(" ")};`}
8-
${({ templateAreas }) => templateAreas && `grid-template-areas: ${templateAreas.map((row) => `"${row}"`).join(" ")};`}
9-
${({ autoColumns }) => autoColumns && `grid-auto-columns: ${autoColumns};`}
10-
${({ autoRows }) => autoRows && `grid-auto-rows: ${autoRows};`}
11-
${({ autoFlow }) => autoFlow && `grid-auto-flow: ${autoFlow};`}
12-
${({ gap }) =>
13-
gap != null &&
14-
(typeof gap === "string" ? `gap: ${gap};` : `row-gap: ${gap.rowGap ?? ""}; column-gap: ${gap.columnGap ?? ""};`)}
15-
${({ placeItems }) =>
16-
placeItems &&
17-
(typeof placeItems === "string"
18-
? `place-items: ${placeItems}`
19-
: `align-items: ${placeItems.alignItems ?? ""}; justify-items: ${placeItems.justifyItems ?? ""};`)}
20-
${({ placeContent }) =>
21-
placeContent &&
22-
(typeof placeContent === "string"
23-
? `place-content: ${placeContent}`
24-
: `align-content: ${placeContent.alignContent ?? ""}; justify-content: ${placeContent.justifyContent ?? ""};`)}
25-
26-
${({ areaName }) => areaName && `grid-area: ${areaName};`}
27-
${({ column }) =>
28-
column &&
29-
`grid-column: ${
30-
typeof column === "string" || typeof column === "number" ? column : `${column.start} / ${column.end};`
31-
};`}
32-
${({ row }) =>
33-
row && `grid-row: ${typeof row === "string" || typeof row === "number" ? row : `${row.start} / ${row.end};`};`}
34-
${({ placeSelf }) =>
35-
placeSelf &&
36-
(typeof placeSelf === "string"
37-
? `place-self: ${placeSelf}`
38-
: `align-self: ${placeSelf.alignSelf ?? ""}; justify-self: ${placeSelf.justifySelf ?? ""};`)}
6+
${(props) => `
7+
${props.templateColumns ? `grid-template-columns: ${props.templateColumns.join(" ")};` : ""}
8+
${props.templateRows ? `grid-template-rows: ${props.templateRows.join(" ")};` : ""}
9+
${props.templateAreas ? `grid-template-areas: ${props.templateAreas.map((row) => `"${row}"`).join(" ")};` : ""}
10+
${props.autoColumns ? `grid-auto-columns: ${props.autoColumns};` : ""}
11+
${props.autoRows ? `grid-auto-rows: ${props.autoRows};` : ""}
12+
${props.autoFlow ? `grid-auto-flow: ${props.autoFlow};` : ""}
13+
${props.areaName ? `grid-area: ${props.areaName};` : ""}
14+
${
15+
props.gap != null
16+
? typeof props.gap === "string"
17+
? `gap: ${props.gap};`
18+
: `row-gap: ${props.gap.rowGap ?? ""}; column-gap: ${props.gap.columnGap ?? ""};`
19+
: ""
20+
}
21+
${
22+
props.placeItems
23+
? typeof props.placeItems === "string"
24+
? `place-items: ${props.placeItems};`
25+
: `align-items: ${props.placeItems.alignItems ?? ""}; justify-items: ${props.placeItems.justifyItems ?? ""};`
26+
: ""
27+
}
28+
${
29+
props.placeContent
30+
? typeof props.placeContent === "string"
31+
? `place-content: ${props.placeContent};`
32+
: `align-content: ${props.placeContent.alignContent ?? ""}; justify-content: ${props.placeContent.justifyContent ?? ""};`
33+
: ""
34+
}
35+
${
36+
props.column
37+
? `grid-column: ${
38+
typeof props.column === "string" || typeof props.column === "number"
39+
? props.column
40+
: `${props.column.start} / ${props.column.end};`
41+
};`
42+
: ""
43+
}
44+
${
45+
props.row
46+
? `grid-row: ${
47+
typeof props.row === "string" || typeof props.row === "number"
48+
? props.row
49+
: `${props.row.start} / ${props.row.end};`
50+
};`
51+
: ""
52+
}
53+
${
54+
props.placeSelf
55+
? typeof props.placeSelf === "string"
56+
? `place-self: ${props.placeSelf};`
57+
: `align-self: ${props.placeSelf.alignSelf ?? ""}; justify-self: ${props.placeSelf.justifySelf ?? ""};`
58+
: ""
59+
}
60+
`}
3961
`;
4062

4163
const GridItem = styled.div<GridItemProps>`
42-
${({ areaName }) => areaName && `grid-area: ${areaName};`}
43-
${({ column }) =>
44-
column &&
45-
`grid-column: ${
46-
typeof column === "string" || typeof column === "number" ? column : `${column.start} / ${column.end};`
47-
};`}
48-
${({ row }) =>
49-
row && `grid-row: ${typeof row === "string" || typeof row === "number" ? row : `${row.start} / ${row.end};`};`}
50-
${({ placeSelf }) =>
51-
placeSelf &&
52-
(typeof placeSelf === "string"
53-
? `place-self: ${placeSelf}`
54-
: `align-self: ${placeSelf.alignSelf ?? ""}; justify-self: ${placeSelf.justifySelf ?? ""};`)}
64+
${(props) => `
65+
${props.areaName ? `grid-area: ${props.areaName};` : ""}
66+
${
67+
props.column
68+
? `grid-column: ${
69+
typeof props.column === "string" || typeof props.column === "number"
70+
? props.column
71+
: `${props.column.start} / ${props.column.end};`
72+
};`
73+
: ""
74+
}
75+
${
76+
props.row
77+
? `grid-row: ${
78+
typeof props.row === "string" || typeof props.row === "number"
79+
? props.row
80+
: `${props.row.start} / ${props.row.end};`
81+
};`
82+
: ""
83+
}
84+
${
85+
props.placeSelf
86+
? typeof props.placeSelf === "string"
87+
? `place-self: ${props.placeSelf};`
88+
: `align-self: ${props.placeSelf.alignSelf ?? ""}; justify-self: ${props.placeSelf.justifySelf ?? ""};`
89+
: ""
90+
}
91+
`}
5592
`;
5693

5794
const DxcGrid = (props: GridPropsType) => <Grid {...props} />;
58-
5995
DxcGrid.Item = GridItem;
6096
export default DxcGrid;

‎packages/lib/src/image/Image.test.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { render } from "@testing-library/react";
2+
import DxcImage from "./Image";
3+
4+
describe("Image component tests", () => {
5+
test("The component renders properly", () => {
6+
const { getByText } = render(
7+
<DxcImage
8+
alt="Example image"
9+
caption="Example caption"
10+
width="100%"
11+
src="https://images.ctfassets.net/hrltx12pl8hq/5596z2BCR9KmT1KeRBrOQa/4070fd4e2f1a13f71c2c46afeb18e41c/shutterstock_451077043-hero1.jpg"
12+
/>
13+
);
14+
expect(getByText("Example caption")).toBeTruthy();
15+
});
16+
});

‎packages/lib/src/paragraph/Paragraph.test.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { render } from "@testing-library/react";
2+
import DxcParagraph from "./Paragraph";
3+
4+
describe("Paragraph component tests", () => {
5+
test("The component renders properly", () => {
6+
const { getByText } = render(
7+
<DxcParagraph>
8+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tortor sit amet velit auctor cursus id eget
9+
nisl. Vivamus luctus egestas eros, at mattis libero eleifend ac. Integer vel urna rutrum, pretium arcu
10+
dignissim, fringilla turpis.
11+
</DxcParagraph>
12+
);
13+
expect(getByText(/Lorem ipsum/i)).toBeTruthy();
14+
});
15+
});

‎packages/lib/src/quick-nav/QuickNav.test.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { render } from "@testing-library/react";
2+
import DxcQuickNav from "./QuickNav";
3+
4+
const links = [
5+
{
6+
label: "Overview",
7+
},
8+
{
9+
label: "Principles",
10+
links: [{ label: "Color" }, { label: "Spacing" }, { label: "Typography" }],
11+
},
12+
{
13+
label: "Components",
14+
links: [
15+
{
16+
label: "Accordion",
17+
},
18+
{
19+
label: "Button",
20+
},
21+
],
22+
},
23+
];
24+
25+
describe("QuickNav component tests", () => {
26+
test("The component renders properly", () => {
27+
const { getByText } = render(<DxcQuickNav links={links} />);
28+
expect(getByText("Overview")).toBeTruthy();
29+
expect(getByText("Spacing")).toBeTruthy();
30+
expect(getByText("Button")).toBeTruthy();
31+
});
32+
});

0 commit comments

Comments
 (0)