Skip to content

Commit 35b6b9f

Browse files
Vu Van DucVu Van Duc
Vu Van Duc
authored and
Vu Van Duc
committed
feat(ui): improve UT
1 parent b5e9edf commit 35b6b9f

File tree

15 files changed

+623
-40
lines changed

15 files changed

+623
-40
lines changed

src/ui/components/CardDetails/CardDetailsBlock/CardBlock.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,13 @@ const CardBlock = ({
2121
});
2222

2323
const buttonTestId = testId ? `${testId}-nav-button` : undefined;
24+
const containerTestId = testId ? `${testId}-card-block` : undefined;
2425

2526
return (
2627
<CardDetailsBlock
2728
onClick={!copyContent ? onClick : undefined}
2829
className={classes}
30+
dataTestId={containerTestId}
2931
>
3032
{title && (
3133
<CardDetailsItem

src/ui/components/CardDetails/CardDetailsBlock/CardDetailsBlock.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,16 @@ const CardDetailsBlock = ({
88
action,
99
children,
1010
className,
11+
dataTestId,
1112
onClick,
1213
}: CardDetailsBlockProps) => {
1314
const classes = combineClassNames("card-details-info-block", className);
1415

1516
return (
16-
<div className={classes}>
17+
<div
18+
data-testid={dataTestId}
19+
className={classes}
20+
>
1721
<div className="card-details-info-block-header">
1822
{title && (
1923
<h4
@@ -29,6 +33,7 @@ const CardDetailsBlock = ({
2933
</div>
3034
<IonCard
3135
onClick={onClick}
36+
data-testid={`${dataTestId}-card`}
3237
className="card-details-info-block-inner"
3338
>
3439
{children}

src/ui/components/CardDetails/CardDetailsBlock/CardDetailsBlock.types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ interface CardDetailsBlockProps {
66
children?: ReactNode;
77
className?: string;
88
onClick?: () => void;
9+
dataTestId?: string;
910
}
1011

1112
enum FlatBorderType {
Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { render } from "@testing-library/react";
2+
import { Provider } from "react-redux";
3+
import Eng_trans from "../../../../locales/en/en.json";
4+
import { store } from "../../../../store";
5+
import { CardDetailsAttribute } from "./CardDetailsAttribute";
6+
7+
describe("CardDetailsAttribute", () => {
8+
test("Render nested value", async () => {
9+
const { getAllByTestId, getByText } = render(
10+
<Provider store={store}>
11+
<CardDetailsAttribute
12+
attributeKey={""}
13+
attributeValue={{
14+
a: {
15+
d: "EJ3HSnEqtSm3WiucWkeBbKspmEAIjf2N6wr5EKOcQ9Vl",
16+
i: "EJWgO4hwKxNMxu2aUpmGFMozKt9Eq2Jz8n-xXR7CYtY_",
17+
dt: "2024-01-22T16:03:44.643000+00:00",
18+
LEI: "5493001KJTIIGC8Y1R17",
19+
},
20+
s: {
21+
title: "Qualified vLEI Issuer Credential",
22+
description:
23+
"A vLEI Credential issued by GLEIF to Qualified vLEI Issuers which allows the Qualified vLEI Issuers to issue, verify and revoke Legal Entity vLEI Credentials and Legal Entity Official Organizational Role vLEI Credentials",
24+
version: "1.0.0",
25+
},
26+
}}
27+
/>
28+
</Provider>
29+
);
30+
31+
expect(getAllByTestId("nested-attributes").length).toBe(3);
32+
expect(
33+
getByText(
34+
Eng_trans.tabs.credentials.details.attributes.issuee.concat(":")
35+
)
36+
).toBeVisible();
37+
expect(
38+
getByText(
39+
Eng_trans.tabs.credentials.details.attributes.issuancedate.concat(":")
40+
)
41+
).toBeVisible();
42+
expect(
43+
getByText(Eng_trans.tabs.credentials.details.status.label)
44+
).toBeVisible();
45+
expect(
46+
getByText("EJ3HSnEqtSm3WiucWkeBbKspmEAIjf2N6wr5EKOcQ9Vl")
47+
).toBeVisible();
48+
expect(
49+
getByText("EJWgO4hwKxNMxu2aUpmGFMozKt9Eq2Jz8n-xXR7CYtY_")
50+
).toBeVisible();
51+
expect(getByText("5493001KJTIIGC8Y1R17")).toBeVisible();
52+
expect(getByText("Qualified vLEI Issuer Credential")).toBeVisible();
53+
expect(
54+
getByText(
55+
"A vLEI Credential issued by GLEIF to Qualified vLEI Issuers which allows the Qualified vLEI Issuers to issue, verify and revoke Legal Entity vLEI Credentials and Legal Entity Official Organizational Role vLEI Credentials"
56+
)
57+
).toBeVisible();
58+
expect(getByText("description:")).toBeVisible();
59+
});
60+
61+
test("Ignore key", async () => {
62+
const { queryAllByTestId } = render(
63+
<Provider store={store}>
64+
<CardDetailsAttribute
65+
attributeKey={"dt"}
66+
attributeValue={{
67+
a: {
68+
d: "EJ3HSnEqtSm3WiucWkeBbKspmEAIjf2N6wr5EKOcQ9Vl",
69+
i: "EJWgO4hwKxNMxu2aUpmGFMozKt9Eq2Jz8n-xXR7CYtY_",
70+
dt: "2024-01-22T16:03:44.643000+00:00",
71+
LEI: "5493001KJTIIGC8Y1R17",
72+
},
73+
s: {
74+
title: "Qualified vLEI Issuer Credential",
75+
description:
76+
"A vLEI Credential issued by GLEIF to Qualified vLEI Issuers which allows the Qualified vLEI Issuers to issue, verify and revoke Legal Entity vLEI Credentials and Legal Entity Official Organizational Role vLEI Credentials",
77+
version: "1.0.0",
78+
},
79+
}}
80+
ignoreKeys={["dt"]}
81+
/>
82+
</Provider>
83+
);
84+
85+
expect(queryAllByTestId("nested-attributes").length).toBe(0);
86+
});
87+
});
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 { ListHeader } from "./ListHeader";
3+
4+
describe("List Header", () => {
5+
test("Render back button", async () => {
6+
const { getByTestId, getByText } = render(
7+
<ListHeader
8+
title="title"
9+
hasAction
10+
/>
11+
);
12+
13+
expect(getByText("title")).toBeVisible();
14+
expect(getByTestId("list-header-first-icon")).toBeVisible();
15+
expect(getByTestId("list-header-second-icon")).toBeVisible();
16+
});
17+
});

src/ui/components/PageFooter/PageFooter.test.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { fireEvent, render } from "@testing-library/react";
2+
import { chevronForwardOutline } from "ionicons/icons";
23
import { PageFooter } from "./PageFooter";
34

45
describe("Page Footer", () => {
@@ -9,17 +10,31 @@ describe("Page Footer", () => {
910
const secondaryButtonAction = jest.fn();
1011
const tertiaryButtonText = "tertiaryButtonText";
1112
const tertiaryButtonAction = jest.fn();
13+
const archiveButtonText = "archiveButtonText";
14+
const archiveButtonAction = jest.fn();
15+
const declineButtonText = "declineButtonText";
16+
const declineButtonAction = jest.fn();
17+
const deleteButtonText = "deleteButtonText";
18+
const deleteButtonAction = jest.fn();
1219

1320
test("Renders all enabled buttons + page id", () => {
1421
const { getByText, getByTestId } = render(
1522
<PageFooter
1623
pageId={pageId}
24+
customClass="footer"
1725
primaryButtonText={primaryButtonText}
1826
primaryButtonAction={primaryButtonAction}
1927
secondaryButtonText={secondaryButtonText}
2028
secondaryButtonAction={secondaryButtonAction}
2129
tertiaryButtonText={tertiaryButtonText}
2230
tertiaryButtonAction={tertiaryButtonAction}
31+
archiveButtonText={archiveButtonText}
32+
archiveButtonAction={archiveButtonAction}
33+
declineButtonText={declineButtonText}
34+
declineButtonAction={declineButtonAction}
35+
declineButtonIcon={chevronForwardOutline}
36+
deleteButtonText={deleteButtonText}
37+
deleteButtonAction={deleteButtonAction}
2338
/>
2439
);
2540

@@ -35,6 +50,15 @@ describe("Page Footer", () => {
3550

3651
fireEvent.click(getByTestId(`tertiary-button${`-${pageId}`}`));
3752
expect(tertiaryButtonAction.mock.calls.length).toEqual(1);
53+
54+
fireEvent.click(getByTestId(`archive-button${`-${pageId}`}`));
55+
expect(archiveButtonAction.mock.calls.length).toEqual(1);
56+
57+
fireEvent.click(getByTestId(`decline-button${`-${pageId}`}`));
58+
expect(declineButtonAction.mock.calls.length).toEqual(1);
59+
60+
fireEvent.click(getByTestId(`delete-button${`-${pageId}`}`));
61+
expect(deleteButtonAction.mock.calls.length).toEqual(1);
3862
});
3963

4064
test("Renders all disabled buttons + no page id", () => {
@@ -43,21 +67,52 @@ describe("Page Footer", () => {
4367
primaryButtonText={primaryButtonText}
4468
primaryButtonAction={primaryButtonAction}
4569
primaryButtonDisabled={true}
70+
primaryButtonIcon={chevronForwardOutline}
4671
secondaryButtonText={secondaryButtonText}
4772
secondaryButtonAction={secondaryButtonAction}
73+
secondaryButtonIcon={chevronForwardOutline}
4874
secondaryButtonDisabled={true}
4975
tertiaryButtonText={tertiaryButtonText}
5076
tertiaryButtonAction={tertiaryButtonAction}
5177
tertiaryButtonDisabled={true}
78+
tertiaryButtonIcon={chevronForwardOutline}
79+
archiveButtonText={archiveButtonText}
80+
archiveButtonAction={archiveButtonAction}
81+
archiveButtonDisabled
82+
declineButtonText={declineButtonText}
83+
declineButtonAction={declineButtonAction}
84+
declineButtonDisabled
85+
declineButtonIcon={chevronForwardOutline}
86+
deleteButtonText={deleteButtonText}
87+
deleteButtonAction={deleteButtonAction}
88+
deleteButtonDisabled
5289
/>
5390
);
5491

5592
expect(getByText(primaryButtonText)).toBeInTheDocument();
5693
expect(getByText(secondaryButtonText)).toBeInTheDocument();
5794
expect(getByText(tertiaryButtonText)).toBeInTheDocument();
95+
expect(getByText(archiveButtonText)).toBeInTheDocument();
96+
expect(getByText(declineButtonText)).toBeInTheDocument();
5897

5998
expect(getByTestId("primary-button")).toHaveAttribute("disabled", "true");
6099
expect(getByTestId("secondary-button")).toHaveAttribute("disabled", "true");
61100
expect(getByTestId("tertiary-button")).toHaveAttribute("disabled", "true");
101+
expect(getByTestId("primary-button")).toHaveAttribute("disabled", "true");
102+
expect(getByTestId("archive-button")).toHaveAttribute("disabled", "true");
103+
expect(getByTestId("decline-button")).toHaveAttribute("disabled", "true");
104+
});
105+
106+
test("Render button with link", () => {
107+
const link = "samplelink";
108+
109+
const { getByText } = render(
110+
<PageFooter
111+
primaryButtonText={primaryButtonText}
112+
primaryButtonAction={link}
113+
/>
114+
);
115+
116+
expect(getByText(primaryButtonText).getAttribute("href")).toBe(link);
62117
});
63118
});

0 commit comments

Comments
 (0)