diff --git a/src/features/dashboard/components/AppDashboardContainer/__tests__/app-dashboard-container.test.tsx b/src/features/dashboard/components/AppDashboardContainer/__tests__/app-dashboard-container.test.tsx new file mode 100644 index 00000000..fd2504c5 --- /dev/null +++ b/src/features/dashboard/components/AppDashboardContainer/__tests__/app-dashboard-container.test.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { cleanup, render, screen } from '@site/src/test-utils'; +import AppDashboardContainer from '..'; + +describe('AppDashboardContainer', () => { + afterEach(() => { + cleanup(); + jest.clearAllMocks(); + }); + + it('Should render the page heading', () => { + render(); + + const label = screen.getByText(/App dashboard/i); + expect(label).toBeInTheDocument(); + }); + + it('Should render children component in the screen', () => { + render( + +
Test Component
+
, + ); + const label = screen.getByText(/Test Component/i); + expect(label).toBeInTheDocument(); + }); +}); diff --git a/src/features/dashboard/components/AppRegister/__tests__/app-register.test.tsx b/src/features/dashboard/components/AppRegister/__tests__/app-register.test.tsx new file mode 100644 index 00000000..c40144d8 --- /dev/null +++ b/src/features/dashboard/components/AppRegister/__tests__/app-register.test.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { cleanup, render, screen } from '@site/src/test-utils'; +import AppRegister from '..'; + +const mock_submit = jest.fn(); + +describe('AppRegister', () => { + afterEach(() => { + cleanup(); + jest.clearAllMocks(); + }); + + it('Should render the register form with register button', () => { + render(); + + const button = screen.getByText(/Register now/i); + expect(button).toBeInTheDocument(); + }); +}); diff --git a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/__tests__/app-register-success-modal.test.tsx b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/__tests__/app-register-success-modal.test.tsx new file mode 100644 index 00000000..94e101ca --- /dev/null +++ b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/__tests__/app-register-success-modal.test.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { cleanup, render, screen } from '@site/src/test-utils'; +import { AppRegisterSuccessModal } from '..'; +import useAppManager from '@site/src/hooks/useAppManager'; + +const mock_cancel = jest.fn(); +const mock_configure = jest.fn(); + +jest.mock('@site/src/hooks/useAppManager'); +const mockUseAppManager = useAppManager as jest.MockedFunction< + () => Partial> +>; +mockUseAppManager.mockImplementation(() => ({ + app_register_modal_open: true, +})); + +describe('AppRegisterSuccessModal', () => { + afterEach(() => { + cleanup(); + jest.clearAllMocks(); + }); + + it('Should render the success modal in desktop', () => { + render( + , + ); + + const label = screen.getByText(/Application registered successfully!/i); + expect(label).toBeInTheDocument(); + const imgElement = screen.getByAltText('check icon'); + expect(imgElement).toBeInTheDocument(); + }); + + it('Should render the success modal in mobile', () => { + render( + , + ); + + const label = screen.getByText(/Application registered successfully!/i); + expect(label).toBeInTheDocument(); + const imgElement = screen.queryByAltText('check icon'); + expect(imgElement).not.toBeInTheDocument(); + }); + + it('Should handle click events properly', () => { + render( + , + ); + const configure_btn = screen.getByText(/Configure now/i); + const maybe_later_btn = screen.getByText(/Maybe later/i); + configure_btn.click(); + expect(mock_configure).toBeCalled(); + maybe_later_btn.click(); + expect(mock_cancel).toBeCalled(); + }); +}); diff --git a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx index 83ff7648..989fdaed 100644 --- a/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx +++ b/src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx @@ -23,11 +23,11 @@ export const AppRegisterSuccessModal = ({ action_sheet_open={app_register_modal_open} primary_action={{ label: 'Configure now', - onClick: onCancel, + onClick: onConfigure, }} secondary_action={{ label: 'Maybe later', - onClick: onConfigure, + onClick: onCancel, }} is_desktop={is_desktop} disable_drag @@ -36,7 +36,7 @@ export const AppRegisterSuccessModal = ({
{is_desktop && (
- + check icon
)} diff --git a/src/features/dashboard/manage-dashboard/__tests__/manage-dashboard.test.tsx b/src/features/dashboard/manage-dashboard/__tests__/manage-dashboard.test.tsx new file mode 100644 index 00000000..0d4d23ec --- /dev/null +++ b/src/features/dashboard/manage-dashboard/__tests__/manage-dashboard.test.tsx @@ -0,0 +1,157 @@ +import React from 'react'; +import { cleanup, render, screen } from '@site/src/test-utils'; +import MemoizedManageDashboard from '..'; +import useAppManager from '@site/src/hooks/useAppManager'; +import useDeviceType from '@site/src/hooks/useDeviceType'; +import userEvent from '@testing-library/user-event'; +import apiManager from '@site/src/configs/websocket'; + +jest.mock('@site/src/hooks/useAppManager'); +const mockUseAppManager = useAppManager as jest.MockedFunction< + () => Partial> +>; +mockUseAppManager.mockImplementation(() => ({ + getApps: jest.fn(), + apps: undefined, + tokens: undefined, +})); + +jest.mock('@site/src/hooks/useDeviceType'); +const mockDeviceType = useDeviceType as jest.MockedFunction< + () => Partial> +>; +mockDeviceType.mockImplementation(() => ({ + deviceType: 'desktop', +})); + +jest.mock('@site/src/configs/websocket'); +const mockApiManager = apiManager as jest.Mocked; + +describe('ManageDashboard', () => { + afterEach(() => { + cleanup(); + jest.clearAllMocks(); + }); + + it('Should render the initial compoent with loader', () => { + const { container } = render(); + expect(container).toBeInTheDocument(); + const loader = screen.getByTestId('dt_spinner'); + expect(loader).toBeInTheDocument(); + }); + + it('Should render the content App Register page in mobile device - if no token or app is available', () => { + mockUseAppManager.mockImplementation(() => ({ + apps: [], + tokens: [], + getApps: jest.fn(), + })); + mockDeviceType.mockImplementation(() => ({ + deviceType: 'mobile', + })); + render(); + const register_button = screen.getByText(/Register now/i); + expect(register_button).toBeInTheDocument(); + }); + + it('Should call getApps on submit button press if all the fields are filled up', async () => { + const mockGetApps = jest.fn(); + mockUseAppManager.mockImplementation(() => ({ + apps: [], + tokens: [], + getApps: mockGetApps, + })); + render(); + + const name_input = screen.getByRole('textbox'); + await userEvent.type(name_input, 'test create token'); + const tnc_input = screen.getByRole('checkbox'); + await userEvent.click(tnc_input); + const register_button = screen.getByText(/Register now/i); + await userEvent.click(register_button); + + expect(mockGetApps).toHaveBeenCalled(); + }); + + it('Should trigger the success modal in desktop', async () => { + const mockModalOpenSetter = jest.fn(); + mockApiManager.augmentedSend.mockResolvedValue({ + app_register: { + active: 1, + app_id: 1234, + app_markup_percentage: 0, + appstore: '', + github: '', + googleplay: '', + homepage: '', + name: 'TestApp1', + redirect_uri: '', + scopes: [], + verification_uri: '', + }, + echo_req: { + app_markup_percentage: 0, + app_register: 1, + name: 'TestApp1', + req_id: 4, + scopes: [], + }, + msg_type: 'app_register', + req_id: 4, + }); + + mockUseAppManager.mockImplementation(() => ({ + getApps: jest.fn(), + apps: [], + tokens: [], + setAppRegisterModalOpen: mockModalOpenSetter, + })); + + render(); + + const name_input = screen.getByRole('textbox'); + await userEvent.type(name_input, 'test create token'); + const tnc_input = screen.getByRole('checkbox'); + await userEvent.click(tnc_input); + const register_button = screen.getByText(/Register now/i); + await userEvent.click(register_button); + + expect(mockModalOpenSetter).toBeCalledWith(true); + }); + + it('Should close the modal on config button click', async () => { + const mockModalOpenSetter = jest.fn(); + mockUseAppManager.mockImplementation(() => ({ + getApps: jest.fn(), + apps: [], + tokens: [], + setAppRegisterModalOpen: mockModalOpenSetter, + app_register_modal_open: true, + })); + + render(); + + const config_button = screen.getByText(/Config/i); + await userEvent.click(config_button); + + expect(mockModalOpenSetter).toBeCalledWith(false); + }); + + it('Should close the modal on cancel button click', async () => { + const mockModalOpenSetter = jest.fn(); + mockUseAppManager.mockImplementation(() => ({ + getApps: jest.fn(), + apps: [], + tokens: [], + setAppRegisterModalOpen: mockModalOpenSetter, + app_register_modal_open: true, + })); + + render(); + + const cancel_button = screen.getByText(/Maybe Later/i); + await userEvent.click(cancel_button); + + expect(mockModalOpenSetter).toBeCalledWith(false); + }); +});