PLT-9674: Added Landing page unit and integration tests

README.md

@@ -2,7 +2,7 @@
 
 | Statements                  | Branches                | Functions                 | Lines             |
 | --------------------------- | ----------------------- | ------------------------- | ----------------- |
-| ![Statements](https://img.shields.io/badge/statements-6.38%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-1.42%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-4.45%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-6.07%25-red.svg?style=flat) |
+| ![Statements](https://img.shields.io/badge/statements-11.53%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-10.61%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-8.5%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-10.75%25-red.svg?style=flat) |
 
 Front-end repository for Certification Service integration
 

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

@@ -7,18 +7,18 @@ import { renderWithProviders } from 'utils/test-utils';
 import ConnectSection from './ConnectSection';
 
 
-describe('Landing page', () => {
+describe('Landing page > Connection section', () => {
+
   test('should render wallet connect button on landing page', () => {
 
     renderWithProviders(<ConnectSection />);
 
     const buttonElement = screen.getByRole('button', { name: /Connect your wallet/i });
 
     expect(buttonElement).toBeVisible();
+
   });
-});
 
-describe('Landing page modal', () => {
   test('open modal when connect button is pressed and show 3 active wallets', async () => {
 
     window.cardano = {
@@ -48,4 +48,5 @@ describe('Landing page modal', () => {
     expect(screen.getByText('No wallet extensions installed yet!')).toBeVisible();
 
   });
+
 });

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import { renderWithProviders } from 'utils/test-utils';
+import RegisterModal from './RegisterModal';
+
+
+describe('Landing page > Register modal', () => {
+
+  test('should not render register modal if show property is false', () => {
+
+    const props = {
+      show: false,
+      success: false,
+      transactionId: null,
+      onClose: () => {}
+    };
+
+    renderWithProviders(<RegisterModal {...props} />);
+
+    const dialogElement = screen.queryByTestId('register-modal');
+
+    expect(dialogElement).not.toBeInTheDocument();
+
+  });
+
+  test('should render register modal if show property is true', () => {
+
+    const props = {
+      show: true,
+      success: false,
+      transactionId: null,
+      onClose: () => {}
+    };
+
+    renderWithProviders(<RegisterModal {...props} />);
+
+    const dialogElement = screen.getByTestId('register-modal');
+
+    expect(dialogElement).toBeVisible();
+
+  });
+
+  test('should render register modal with success message if show and success properties are true', () => {
+
+    const props = {
+      show: true,
+      success: true,
+      transactionId: null,
+      onClose: () => {}
+    };
+
+    renderWithProviders(<RegisterModal {...props} />);
+
+    const successTitleElement = screen.queryByText('Successfully initiated subscription');
+
+    expect(successTitleElement).toBeVisible();
+
+    const loadingTitleElement = screen.queryByText('Setting up your subscription...');
+
+    expect(loadingTitleElement).not.toBeInTheDocument();
+
+  });
+
+  test('should render register modal with loading message if show property is true and success property is false', () => {
+
+    const props = {
+      show: true,
+      success: false,
+      transactionId: null,
+      onClose: () => {}
+    };
+
+    renderWithProviders(<RegisterModal {...props} />);
+
+    const loadingTitleElement = screen.queryByText('Setting up your subscription...');
+
+    expect(loadingTitleElement).toBeVisible();
+
+    const successTitleElement = screen.queryByText('Successfully initiated subscription');
+
+    expect(successTitleElement).not.toBeInTheDocument();
+
+  });
+
+  test('should render register modal with transaction link if show and success properties are true and transactionId is not null', () => {
+
+    const props = {
+      show: true,
+      success: true,
+      transactionId: '1234',
+      onClose: () => {}
+    };
+
+    renderWithProviders(<RegisterModal {...props} />);
+
+    const transactionElement = screen.queryByText('View your performed payment transaction');
+
+    expect(transactionElement).toBeVisible();
+
+  });
+
+  test('should render register modal and close after a click event on continue button', async () => {
+
+    const props = {
+      show: true,
+      success: true,
+      transactionId: null,
+      onClose: jest.fn()
+    };
+
+    renderWithProviders(<RegisterModal {...props} />);
+
+    await userEvent.click(screen.getByRole('button', { name: /Continue/i }));
+
+    expect(props.onClose.mock.calls).toHaveLength(1);
+
+  });
+
+});

src/pages/landing/components/RegisterModal.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 const RegisterModal = (props: Props) => {
   return (
-    <Dialog open={props.show} onClose={props.onClose}>
+    <Dialog open={props.show} onClose={props.onClose} data-testid="register-modal">
       <DialogTitle>
         {props.success ? 'Successfully initiated subscription' : 'Setting up your subscription...'}
       </DialogTitle>

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { http, HttpResponse, delay } from 'msw';
+import { setupServer } from 'msw/node';
+import { screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import { renderWithProviders } from 'utils/test-utils';
+import RegisterSection from './RegisterSection';
+
+import type { Tier } from "store/slices/tiers.slice";
+
+const server = setupServer(
+  http.get('/ada-usd-price', async () => {
+    await delay(150);
+    return HttpResponse.json(10.0);
+  }),
+);
+
+const tier: Tier = {
+  id: '1',
+  name: 'Sample Tier',
+  subtitle: 'Sample Tier',
+  features: [],
+  usdPrice: 100,
+  enabled: true
+};
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+describe('Landing page > Register section', () => {
+
+  test('should render the register section', async () => {
+
+    renderWithProviders(<RegisterSection tier={tier} onSubmit={() => {}} />);
+
+    expect(screen.queryByText('Auditor profile')).toBeInTheDocument();
+
+  });
+
+  test('should render the subscription price correctly', async () => {
+
+    renderWithProviders(<RegisterSection tier={tier} onSubmit={() => {}} />);
+
+    const submitButton = await screen.findByText(/10.00/i);
+
+    expect(submitButton).toBeInTheDocument();
+
+  });
+
+  test('should render disabled form if the fetched price is zero', async () => {
+
+    setupServer(
+      http.get('/ada-usd-price', async () => {
+        await delay(150);
+        return HttpResponse.json(0.0);
+      }),
+    );
+
+    renderWithProviders(<RegisterSection tier={tier} onSubmit={() => {}} />);
+
+    const submitButton = await screen.findByText(/0.00/i);
+
+    expect(submitButton).toBeDisabled();
+
+  });
+
+  test('should submit the form successfully', async () => {
+
+    const onSubmit = jest.fn();
+
+    renderWithProviders(<RegisterSection tier={tier} onSubmit={onSubmit} />);
+
+    const submitButton = await screen.findByText(/10.00/i);
+
+    const companyNameInput = screen.getByRole('textbox', { name: 'Company name *' });
+    const contactEmailInput = screen.getByRole('textbox', { name: 'Contact email *' });
+    const companyEmailInput = screen.getByRole('textbox', { name: 'Company Email *' });
+    const fullNameInput = screen.getByRole('textbox', { name: 'Full name *' });
+    const twitterInput = screen.getByRole('textbox', { name: 'Twitter' });
+    const linkedinInput = screen.getByRole('textbox', { name: 'LinkedIn' });
+    const websiteInput = screen.getByRole('textbox', { name: 'Website' });
+
+    fireEvent.change(companyNameInput, { target: { value: 'Test company' } });
+    fireEvent.change(contactEmailInput, { target: { value: 'contact@test.com' } });
+    fireEvent.change(companyEmailInput, { target: { value: 'company@test.com' } });
+    fireEvent.change(fullNameInput, { target: { value: 'Full Name' } });
+    fireEvent.change(twitterInput, { target: { value: 'test' } });
+    fireEvent.change(linkedinInput, { target: { value: 'https://www.linkedin.com/profile/test' } });
+    fireEvent.change(websiteInput, { target: { value: 'https://www.test.com' } });
+
+    await userEvent.click(submitButton);
+
+    expect(onSubmit.mock.calls).toHaveLength(1);
+    expect(onSubmit.mock.calls[0][0].companyName).toBe('Test company');
+    expect(onSubmit.mock.calls[0][0].contactEmail).toBe('contact@test.com');
+    expect(onSubmit.mock.calls[0][0].email).toBe('company@test.com');
+    expect(onSubmit.mock.calls[0][0].fullName).toBe('Full Name');
+    expect(onSubmit.mock.calls[0][0].twitter).toBe('test');
+    expect(onSubmit.mock.calls[0][0].linkedin).toBe('https://www.linkedin.com/profile/test');
+    expect(onSubmit.mock.calls[0][0].website).toBe('https://www.test.com');
+
+  });
+
+});

src/pages/landing/components/RegisterSection.tsx

@@ -41,7 +41,6 @@ const RegisterSection = (props: Props) => {
       setCount(REFRESH_TIME);
       dispatch(fetchPrice({}));
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.tier]);
 
   useEffect(() => {

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

@@ -39,26 +39,30 @@ beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
-test('fetches and render the subcriptions tiers', async () => {
+describe('Landing page > Subscription section', () => {
 
-  renderWithProviders(<SubscriptionSection onSelectTier={() => {}} />);
+  test('fetches and render the subcriptions tiers', async () => {
 
-  expect(await screen.findByText(/Tier 1/i)).toBeInTheDocument();
-  expect(await screen.findByText(/Tier 2/i)).toBeInTheDocument();
+    renderWithProviders(<SubscriptionSection onSelectTier={() => {}} />);
 
-});
+    expect(await screen.findByText(/Tier 1/i)).toBeInTheDocument();
+    expect(await screen.findByText(/Tier 2/i)).toBeInTheDocument();
 
-test('render the subcriptions tiers and select one', async () => {
+  });
 
-  const onSelectTier = jest.fn();
+  test('render the subcriptions tiers and select one', async () => {
 
-  renderWithProviders(<SubscriptionSection onSelectTier={onSelectTier} />);
+    const onSelectTier = jest.fn();
 
-  await screen.findByText(/Tier 1/i);
+    renderWithProviders(<SubscriptionSection onSelectTier={onSelectTier} />);
 
-  await userEvent.click(screen.getAllByRole('button')[0]);
+    await screen.findByText(/Tier 1/i);
 
-  expect(onSelectTier.mock.calls).toHaveLength(1);
-  expect(onSelectTier.mock.calls[0][0].name).toBe('Tier 1');
+    await userEvent.click(screen.getAllByRole('button')[0]);
+
+    expect(onSelectTier.mock.calls).toHaveLength(1);
+    expect(onSelectTier.mock.calls[0][0].name).toBe('Tier 1');
+
+  });
 
 });

src/pages/landing/index.tsx

@@ -6,6 +6,7 @@ import ConnectSection from "./components/ConnectSection";
 import SubscriptionSection from "./components/SubscriptionSection";
 import RegisterSection from "./components/RegisterSection";
 import RegisterModal from "./components/RegisterModal";
+import PaymentDetailsVerification from "components/PaymentConfirmation/PaymentDetailsVerification";
 
 import { useAppDispatch, useAppSelector } from "store/store";
 import { fetchActiveSubscription } from "store/slices/auth.slice";
@@ -14,8 +15,6 @@ import type { Tier } from "store/slices/tiers.slice";
 import type { RegisterForm } from "store/slices/register.slice";
 
 import "./index.css";
-import { BigNum } from "@emurgo/cardano-serialization-lib-browser";
-import PaymentDetailsVerification from "components/PaymentConfirmation/PaymentDetailsVerification";
 
 export interface ISubscription {
   adaUsdPrice: number;

src/store/slices/walletConnection.slice.ts

@@ -41,9 +41,6 @@ const initialState: WalletConnectionState = {
 // Add this export to your walletConnectionSlice file
 export { initialState as walletConnectionInitialState };
 
-
-const CardanoNS = window.cardano;
-
 type StakeAddressHex = string;
 type StakeAddressBech32 = `stake${string}`;
 type ChangeAddressBech32 = `addr${string}`;
@@ -69,6 +66,8 @@ const getAddresses = async (wallet: any): Promise<[StakeAddressHex, StakeAddress
 }
 
 export const connectWallet = createAsyncThunk('connectWallet', async (payload: { walletName: string }, thunkApi) => {
+  const CardanoNS = window.cardano;
+
   try {
     const { walletName } = payload;
     const wallet = await CardanoNS[walletName].enable();
@@ -115,6 +114,7 @@ export const connectWallet = createAsyncThunk('connectWallet', async (payload: {
 });
 
 export const startListenWalletChanges = createAsyncThunk('listenWalletChanges', async (payload: any, { dispatch, getState }) => {
+  const CardanoNS = window.cardano;
   const { authToken, networkId } = (getState() as RootState).session;
   const { wallet, walletName, stakeAddress } = (getState() as RootState).walletConnection;
 
@@ -151,7 +151,6 @@ export const startListenWalletChanges = createAsyncThunk('listenWalletChanges',
           }
         }
       } catch (error) {
-        console.log(error);
         await new Promise(resolve => setTimeout(resolve, 1000));
       }
     }