Skip to content

Commit b23ad18

Browse files
minkyngkmminkyngkm
committed
Add tests
1 parent 1867723 commit b23ad18

File tree

3 files changed

+202
-6
lines changed

3 files changed

+202
-6
lines changed

‎static/js/src/advantage/subscribe/checkout/components/Taxes/Taxes.test.tsx

+100-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
22
import { Formik } from "formik";
33
import { Elements } from "@stripe/react-stripe-js";
44
import { loadStripe } from "@stripe/stripe-js";
5-
import { fireEvent, render, screen } from "@testing-library/react";
6-
import { UAProduct } from "../../utils/test/Mocks";
5+
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
6+
import { DistributorProduct, UAProduct } from "../../utils/test/Mocks";
77
import Taxes from "./Taxes";
8+
import userEvent from "@testing-library/user-event";
9+
import { UserSubscriptionMarketplace } from "advantage/api/enum";
810

911
describe("TaxesTests", () => {
1012
let queryClient: QueryClient;
@@ -14,6 +16,10 @@ describe("TaxesTests", () => {
1416
queryClient = new QueryClient();
1517
});
1618

19+
afterEach(() => {
20+
jest.clearAllMocks();
21+
});
22+
1723
it("renders country select correctly", () => {
1824
const products = [
1925
{
@@ -212,4 +218,96 @@ describe("TaxesTests", () => {
212218
expect(screen.getByTestId("country")).toHaveTextContent("United Kingdom");
213219
expect(screen.getByTestId("vat-number")).toHaveTextContent("GB123123123");
214220
});
221+
222+
it("Edit should be available for pro users", async () => {
223+
global.window = Object.create(window);
224+
Object.defineProperty(window, "accountId", { value: "ABCDEF" });
225+
226+
const initialValues = {
227+
country: "GB",
228+
VATNumber: "GB123123123",
229+
marketPlace: "canonical-ua",
230+
};
231+
232+
const products = [
233+
{
234+
product: UAProduct,
235+
quantity: 1,
236+
},
237+
];
238+
render(
239+
<QueryClientProvider client={queryClient}>
240+
<Formik initialValues={initialValues} onSubmit={jest.fn()}>
241+
<Elements stripe={stripePromise}>
242+
<Taxes products={products} setError={jest.fn()} />
243+
</Elements>
244+
</Formik>
245+
</QueryClientProvider>,
246+
);
247+
248+
expect(screen.queryByRole("button", { name: "Edit" })).toBeInTheDocument();
249+
userEvent.click(screen.getByRole("button", { name: "Edit" }));
250+
await waitFor(() => {
251+
expect(screen.getByTestId("select-country")).toBeInTheDocument();
252+
expect(screen.getByTestId("field-vat-number")).toBeInTheDocument();
253+
expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
254+
});
255+
});
256+
257+
it("Edit button should not be displayed for channel users", () => {
258+
global.window = Object.create(window);
259+
Object.defineProperty(window, "accountId", { value: "ABCDEF" });
260+
const initialValues = {
261+
country: "GB",
262+
VATNumber: "GB123123123",
263+
marketPlace: UserSubscriptionMarketplace.CanonicalProChannel,
264+
};
265+
const products = [
266+
{
267+
product: DistributorProduct,
268+
quantity: 1,
269+
},
270+
];
271+
render(
272+
<QueryClientProvider client={queryClient}>
273+
<Formik initialValues={initialValues} onSubmit={jest.fn()}>
274+
<Elements stripe={stripePromise}>
275+
<Taxes products={products} setError={jest.fn()} />
276+
</Elements>
277+
</Formik>
278+
</QueryClientProvider>,
279+
);
280+
281+
expect(screen.queryByTestId("tax-edit-button")).toBeInTheDocument();
282+
});
283+
284+
it("New channel users should be able to add their tax info", async () => {
285+
global.window = Object.create(window);
286+
Object.defineProperty(window, "accountId", { value: "ABCDEF" });
287+
288+
const initialValues = {
289+
country: "",
290+
VATNumber: "",
291+
marketPlace: UserSubscriptionMarketplace.CanonicalProChannel,
292+
};
293+
294+
const products = [
295+
{
296+
product: DistributorProduct,
297+
quantity: 1,
298+
},
299+
];
300+
render(
301+
<QueryClientProvider client={queryClient}>
302+
<Formik initialValues={initialValues} onSubmit={jest.fn()}>
303+
<Elements stripe={stripePromise}>
304+
<Taxes products={products} setError={jest.fn()} />
305+
</Elements>
306+
</Formik>
307+
</QueryClientProvider>,
308+
);
309+
310+
expect(screen.queryByTestId("tax-edit-button")).not.toBeInTheDocument();
311+
expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
312+
});
215313
});

‎static/js/src/advantage/subscribe/checkout/components/UserInfoForm/UserInfoForm.test.tsx

+97
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Elements } from "@stripe/react-stripe-js";
44
import { loadStripe } from "@stripe/stripe-js";
55
import { fireEvent, render, screen } from "@testing-library/react";
66
import UserInfoForm from "./UserInfoForm";
7+
import { UserSubscriptionMarketplace } from "advantage/api/enum";
78

89
describe("UserInfoFormTests", () => {
910
let queryClient: QueryClient;
@@ -75,4 +76,100 @@ describe("UserInfoFormTests", () => {
7576
"AB12 3CD",
7677
);
7778
});
79+
80+
it("Channel user should be able to edit only card number", () => {
81+
global.window = Object.create(window);
82+
Object.defineProperty(window, "accountId", { value: "ABCDEF" });
83+
84+
const initialValues = {
85+
name: "Min",
86+
marketplace: UserSubscriptionMarketplace.CanonicalProChannel,
87+
buyingFor: "organisation",
88+
organisationName: "Canonical",
89+
address: "ABC Street",
90+
city: "DEF City",
91+
postalCode: "AB12 3CD",
92+
defaultPaymentMethod: {
93+
brand: "visa",
94+
country: "US",
95+
expMonth: 4,
96+
expYear: 2024,
97+
id: "pm_ABCDEF",
98+
last4: "4242",
99+
},
100+
};
101+
102+
render(
103+
<QueryClientProvider client={queryClient}>
104+
<Formik initialValues={initialValues} onSubmit={jest.fn()}>
105+
<Elements stripe={stripePromise}>
106+
<UserInfoForm setError={jest.fn()} />
107+
</Elements>
108+
</Formik>
109+
</QueryClientProvider>,
110+
);
111+
112+
fireEvent.click(screen.getByRole("button", { name: "Edit" }));
113+
fireEvent.change(screen.getByTestId("field-card-number"), {
114+
target: { value: "1234 5678 1234 5678" },
115+
});
116+
117+
expect(screen.getByTestId("customer-name")).toHaveTextContent("Min");
118+
expect(screen.getByTestId("organisation-name")).toHaveTextContent(
119+
"Canonical",
120+
);
121+
expect(screen.getByTestId("customer-address")).toHaveTextContent(
122+
"ABC Street",
123+
);
124+
expect(screen.getByTestId("customer-city")).toHaveTextContent("DEF City");
125+
expect(screen.getByTestId("customer-postal-code")).toHaveTextContent(
126+
"AB12 3CD",
127+
);
128+
});
129+
130+
it("New channel users should be able to add their user info", () => {
131+
global.window = Object.create(window);
132+
Object.defineProperty(window, "accountId", { value: "ABCDEF" });
133+
134+
const initialValues = {
135+
name: "Min",
136+
marketplace: UserSubscriptionMarketplace.CanonicalProChannel,
137+
buyingFor: "organisation",
138+
organisationName: "",
139+
address: "",
140+
city: "",
141+
postalCode: "",
142+
defaultPaymentMethod: null,
143+
};
144+
145+
render(
146+
<QueryClientProvider client={queryClient}>
147+
<Formik initialValues={initialValues} onSubmit={jest.fn()}>
148+
<Elements stripe={stripePromise}>
149+
<UserInfoForm setError={jest.fn()} />
150+
</Elements>
151+
</Formik>
152+
</QueryClientProvider>,
153+
);
154+
expect(
155+
screen.queryByRole("button", { name: "Edit" }),
156+
).not.toBeInTheDocument();
157+
expect(screen.queryByTestId("customer-name")).not.toBeInTheDocument();
158+
expect(screen.queryByTestId("organisation-name")).not.toBeInTheDocument();
159+
expect(screen.queryByTestId("customer-address")).not.toBeInTheDocument();
160+
expect(screen.queryByTestId("customer-city")).not.toBeInTheDocument();
161+
expect(
162+
screen.queryByTestId("customer-postal-code"),
163+
).not.toBeInTheDocument();
164+
expect(
165+
screen.queryByTestId("user-info-save-button"),
166+
).not.toBeInTheDocument();
167+
168+
expect(screen.getByTestId("field-card-number")).toBeInTheDocument();
169+
expect(screen.getByTestId("field-customer-name")).toBeInTheDocument();
170+
expect(screen.getByTestId("field-org-name")).toBeInTheDocument();
171+
expect(screen.getByTestId("field-address")).toBeInTheDocument();
172+
expect(screen.getByTestId("field-city")).toBeInTheDocument();
173+
expect(screen.getByTestId("field-post-code")).toBeInTheDocument();
174+
});
78175
});

‎static/js/src/advantage/subscribe/checkout/components/UserInfoForm/UserInfoForm.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -404,7 +404,7 @@ const UserInfoForm = ({ setError }: Props) => {
404404
return (
405405
<Row>
406406
{isEditing ? editMode : displayMode}
407-
{window.accountId && initialValues.defaultPaymentMethod ? (
407+
{window.accountId && initialValues.defaultPaymentMethod && (
408408
<>
409409
<Col size={4}></Col>
410410
<Col size={8}>
@@ -428,7 +428,7 @@ const UserInfoForm = ({ setError }: Props) => {
428428
className="u-align--right"
429429
style={{ marginTop: "calc(.5rem - 1.5px)" }}
430430
>
431-
{isEditing ? (
431+
{isEditing && (
432432
<ActionButton
433433
onClick={() => {
434434
setFieldValue("buyingFor", initialValues.buyingFor);
@@ -447,17 +447,18 @@ const UserInfoForm = ({ setError }: Props) => {
447447
>
448448
Cancel
449449
</ActionButton>
450-
) : null}
450+
)}
451451
<ActionButton
452452
onClick={toggleEditing}
453453
loading={isSubmitting}
454454
disabled={isButtonDisabled}
455+
data-testid="user-info-save-button"
455456
>
456457
{isEditing ? "Save" : "Edit"}
457458
</ActionButton>
458459
</div>
459460
</>
460-
) : null}
461+
)}
461462
</Row>
462463
);
463464
};

0 commit comments

Comments
 (0)