Skip to content

Commit 8276bc5

Browse files
EehMauroEehMauro
committed
Added Landing page unit and integration tests
1 parent 9b4b206 commit 8276bc5

File tree

10 files changed

+412
-23
lines changed

10 files changed

+412
-23
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
| Statements | Branches | Functions | Lines |
44
| --------------------------- | ----------------------- | ------------------------- | ----------------- |
5-
| ![Statements](https://img.shields.io/badge/statements-4.92%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-1.12%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-3.23%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-4.47%25-red.svg?style=flat) |
5+
| ![Statements](https://img.shields.io/badge/statements-10.07%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-10.31%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-7.28%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-9.15%25-red.svg?style=flat) |
66

77
Front-end repository for Certification Service integration
88

‎src/pages/landing/components/ConnectSection.test.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@ import { renderWithProviders } from 'utils/test-utils';
77
import ConnectSection from './ConnectSection';
88

99

10-
describe('Landing page', () => {
10+
describe('Landing page > Connection section', () => {
11+
1112
test('should render wallet connect button on landing page', () => {
1213

1314
renderWithProviders(<ConnectSection />);
1415

1516
const buttonElement = screen.getByRole('button', { name: /Connect your wallet/i });
1617

1718
expect(buttonElement).toBeVisible();
19+
1820
});
19-
});
2021

21-
describe('Landing page modal', () => {
2222
test('open modal when connect button is pressed and show 3 active wallets', async () => {
2323

2424
window.cardano = {
@@ -48,4 +48,5 @@ describe('Landing page modal', () => {
4848
expect(screen.getByText('No wallet extensions installed yet!')).toBeVisible();
4949

5050
});
51+
5152
});

‎src/pages/landing/components/RegisterModal.test.tsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import React from 'react';
2+
import { screen } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
4+
import '@testing-library/jest-dom';
5+
6+
import { renderWithProviders } from 'utils/test-utils';
7+
import RegisterModal from './RegisterModal';
8+
9+
10+
describe('Landing page > Register modal', () => {
11+
12+
test('should not render register modal if show property is false', () => {
13+
14+
const props = {
15+
show: false,
16+
success: false,
17+
transactionId: null,
18+
onClose: () => {}
19+
};
20+
21+
renderWithProviders(<RegisterModal {...props} />);
22+
23+
const dialogElement = screen.queryByRole('dialog');
24+
25+
expect(dialogElement).not.toBeInTheDocument();
26+
27+
});
28+
29+
test('should render register modal if show property is true', () => {
30+
31+
const props = {
32+
show: true,
33+
success: false,
34+
transactionId: null,
35+
onClose: () => {}
36+
};
37+
38+
renderWithProviders(<RegisterModal {...props} />);
39+
40+
const dialogElement = screen.getAllByRole('dialog')[0];
41+
42+
expect(dialogElement).toBeVisible();
43+
44+
});
45+
46+
test('should render register modal with success message if show and success properties are true', () => {
47+
48+
const props = {
49+
show: true,
50+
success: true,
51+
transactionId: null,
52+
onClose: () => {}
53+
};
54+
55+
renderWithProviders(<RegisterModal {...props} />);
56+
57+
const successTitleElement = screen.queryByText('Successfully initiated subscription');
58+
59+
expect(successTitleElement).toBeVisible();
60+
61+
const loadingTitleElement = screen.queryByText('Setting up your subscription...');
62+
63+
expect(loadingTitleElement).not.toBeInTheDocument();
64+
65+
});
66+
67+
test('should render register modal with loading message if show property is true and success property is false', () => {
68+
69+
const props = {
70+
show: true,
71+
success: false,
72+
transactionId: null,
73+
onClose: () => {}
74+
};
75+
76+
renderWithProviders(<RegisterModal {...props} />);
77+
78+
const loadingTitleElement = screen.queryByText('Setting up your subscription...');
79+
80+
expect(loadingTitleElement).toBeVisible();
81+
82+
const successTitleElement = screen.queryByText('Successfully initiated subscription');
83+
84+
expect(successTitleElement).not.toBeInTheDocument();
85+
86+
});
87+
88+
test('should render register modal with transaction link if show and success properties are true and transactionId is not null', () => {
89+
90+
const props = {
91+
show: true,
92+
success: true,
93+
transactionId: '1234',
94+
onClose: () => {}
95+
};
96+
97+
renderWithProviders(<RegisterModal {...props} />);
98+
99+
const transactionElement = screen.queryByText('View your performed payment transaction');
100+
101+
expect(transactionElement).toBeVisible();
102+
103+
});
104+
105+
test('should render register modal and close after a click event on continue button', async () => {
106+
107+
const props = {
108+
show: true,
109+
success: true,
110+
transactionId: null,
111+
onClose: jest.fn()
112+
};
113+
114+
renderWithProviders(<RegisterModal {...props} />);
115+
116+
await userEvent.click(screen.getByRole('button', { name: /Continue/i }));
117+
118+
expect(props.onClose.mock.calls).toHaveLength(1);
119+
120+
});
121+
122+
});

‎src/pages/landing/components/RegisterModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface Props {
1313

1414
const RegisterModal = (props: Props) => {
1515
return (
16-
<Dialog open={props.show} onClose={props.onClose}>
16+
<Dialog open={props.show} onClose={props.onClose} role="dialog">
1717
<DialogTitle>
1818
{props.success ? 'Successfully initiated subscription' : 'Setting up your subscription...'}
1919
</DialogTitle>

‎src/pages/landing/components/RegisterSection.test.tsx‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from 'react';
2+
import { http, HttpResponse, delay } from 'msw';
3+
import { setupServer } from 'msw/node';
4+
import { screen, fireEvent } from '@testing-library/react';
5+
import userEvent from '@testing-library/user-event';
6+
import '@testing-library/jest-dom';
7+
8+
import { renderWithProviders } from 'utils/test-utils';
9+
import RegisterSection from './RegisterSection';
10+
11+
import type { Tier } from "store/slices/tiers.slice";
12+
13+
const server = setupServer(
14+
http.get('/ada-usd-price', async () => {
15+
await delay(150);
16+
return HttpResponse.json(10.0);
17+
}),
18+
);
19+
20+
const tier: Tier = {
21+
id: '1',
22+
name: 'Sample Tier',
23+
subtitle: 'Sample Tier',
24+
features: [],
25+
usdPrice: 100,
26+
enabled: true
27+
};
28+
29+
beforeAll(() => server.listen());
30+
afterEach(() => server.resetHandlers());
31+
afterAll(() => server.close());
32+
33+
describe('Landing page > Register section', () => {
34+
35+
test('should render the register section', async () => {
36+
37+
renderWithProviders(<RegisterSection tier={tier} onSubmit={() => {}} />);
38+
39+
expect(screen.queryByText('Auditor profile')).toBeInTheDocument();
40+
41+
});
42+
43+
test('should render the subscription price correctly', async () => {
44+
45+
renderWithProviders(<RegisterSection tier={tier} onSubmit={() => {}} />);
46+
47+
const submitButton = await screen.findByText(/10.00/i);
48+
49+
expect(submitButton).toBeInTheDocument();
50+
51+
});
52+
53+
test('should render disabled form if the fetched price is zero', async () => {
54+
55+
setupServer(
56+
http.get('/ada-usd-price', async () => {
57+
await delay(150);
58+
return HttpResponse.json(0.0);
59+
}),
60+
);
61+
62+
renderWithProviders(<RegisterSection tier={tier} onSubmit={() => {}} />);
63+
64+
const submitButton = await screen.findByText(/0.00/i);
65+
66+
expect(submitButton).toBeDisabled();
67+
68+
});
69+
70+
test('should submit the form successfully', async () => {
71+
72+
const onSubmit = jest.fn();
73+
74+
renderWithProviders(<RegisterSection tier={tier} onSubmit={onSubmit} />);
75+
76+
const submitButton = await screen.findByText(/10.00/i);
77+
78+
const companyNameInput = screen.getByRole('textbox', { name: 'Company name *' });
79+
const contactEmailInput = screen.getByRole('textbox', { name: 'Contact email *' });
80+
const companyEmailInput = screen.getByRole('textbox', { name: 'Company Email *' });
81+
const fullNameInput = screen.getByRole('textbox', { name: 'Full name *' });
82+
const twitterInput = screen.getByRole('textbox', { name: 'Twitter' });
83+
const linkedinInput = screen.getByRole('textbox', { name: 'LinkedIn' });
84+
const websiteInput = screen.getByRole('textbox', { name: 'Website' });
85+
86+
fireEvent.change(companyNameInput, { target: { value: 'Test company' } });
87+
fireEvent.change(contactEmailInput, { target: { value: 'contact@test.com' } });
88+
fireEvent.change(companyEmailInput, { target: { value: 'company@test.com' } });
89+
fireEvent.change(fullNameInput, { target: { value: 'Full Name' } });
90+
fireEvent.change(twitterInput, { target: { value: 'test' } });
91+
fireEvent.change(linkedinInput, { target: { value: 'https://www.linkedin.com/profile/test' } });
92+
fireEvent.change(websiteInput, { target: { value: 'https://www.test.com' } });
93+
94+
await userEvent.click(submitButton);
95+
96+
expect(onSubmit.mock.calls).toHaveLength(1);
97+
expect(onSubmit.mock.calls[0][0].companyName).toBe('Test company');
98+
expect(onSubmit.mock.calls[0][0].contactEmail).toBe('contact@test.com');
99+
expect(onSubmit.mock.calls[0][0].email).toBe('company@test.com');
100+
expect(onSubmit.mock.calls[0][0].fullName).toBe('Full Name');
101+
expect(onSubmit.mock.calls[0][0].twitter).toBe('test');
102+
expect(onSubmit.mock.calls[0][0].linkedin).toBe('https://www.linkedin.com/profile/test');
103+
expect(onSubmit.mock.calls[0][0].website).toBe('https://www.test.com');
104+
105+
});
106+
107+
});

‎src/pages/landing/components/RegisterSection.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ const RegisterSection = (props: Props) => {
4141
setCount(REFRESH_TIME);
4242
dispatch(fetchPrice({}));
4343
}
44-
// eslint-disable-next-line react-hooks/exhaustive-deps
4544
}, [props.tier]);
4645

4746
useEffect(() => {

‎src/pages/landing/components/SubscriptionSection.test.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -39,26 +39,30 @@ beforeAll(() => server.listen());
3939
afterEach(() => server.resetHandlers());
4040
afterAll(() => server.close());
4141

42-
test('fetches and render the subcriptions tiers', async () => {
42+
describe('Landing page > Subscription section', () => {
4343

44-
renderWithProviders(<SubscriptionSection onSelectTier={() => {}} />);
44+
test('fetches and render the subcriptions tiers', async () => {
4545

46-
expect(await screen.findByText(/Tier 1/i)).toBeInTheDocument();
47-
expect(await screen.findByText(/Tier 2/i)).toBeInTheDocument();
46+
renderWithProviders(<SubscriptionSection onSelectTier={() => {}} />);
4847

49-
});
48+
expect(await screen.findByText(/Tier 1/i)).toBeInTheDocument();
49+
expect(await screen.findByText(/Tier 2/i)).toBeInTheDocument();
5050

51-
test('render the subcriptions tiers and select one', async () => {
51+
});
5252

53-
const onSelectTier = jest.fn();
53+
test('render the subcriptions tiers and select one', async () => {
5454

55-
renderWithProviders(<SubscriptionSection onSelectTier={onSelectTier} />);
55+
const onSelectTier = jest.fn();
5656

57-
await screen.findByText(/Tier 1/i);
57+
renderWithProviders(<SubscriptionSection onSelectTier={onSelectTier} />);
5858

59-
await userEvent.click(screen.getAllByRole('button')[0]);
59+
await screen.findByText(/Tier 1/i);
6060

61-
expect(onSelectTier.mock.calls).toHaveLength(1);
62-
expect(onSelectTier.mock.calls[0][0].name).toBe('Tier 1');
61+
await userEvent.click(screen.getAllByRole('button')[0]);
62+
63+
expect(onSelectTier.mock.calls).toHaveLength(1);
64+
expect(onSelectTier.mock.calls[0][0].name).toBe('Tier 1');
65+
66+
});
6367

6468
});

0 commit comments

Comments
 (0)