From 5f2f67d49a98b33dec32127395980eceaebebbc0 Mon Sep 17 00:00:00 2001 From: Mark Kim <103070941+marckong@users.noreply.github.com> Date: Thu, 7 Jul 2022 07:28:26 -0400 Subject: [PATCH] test: adding unit tests to AccountDropdown (#4845) * add text label change * add unit tests * tests created * add testing * clean up * remove test.todo * Update packages/insomnia/src/ui/components/dropdowns/account-dropdown/account-dropdown.test.tsx Co-authored-by: David Marby * fix redux for testing * Update packages/insomnia/src/ui/index.tsx * fix lint * fix lint Co-authored-by: kristofer Co-authored-by: kreosus <59621250+kreosus@users.noreply.github.com> Co-authored-by: David Marby Co-authored-by: Dimitri Mitropoulos --- .../insomnia/src/ui/components/app-header.tsx | 2 +- .../ui/components/base/dropdown/dropdown.tsx | 4 +- .../account-dropdown.test.tsx | 108 ++++++++++++++++++ .../account-dropdown.tsx | 16 +-- .../src/ui/components/modals/login-modal.tsx | 2 +- 5 files changed, 120 insertions(+), 12 deletions(-) create mode 100644 packages/insomnia/src/ui/components/dropdowns/account-dropdown/account-dropdown.test.tsx rename packages/insomnia/src/ui/components/dropdowns/{ => account-dropdown}/account-dropdown.tsx (82%) diff --git a/packages/insomnia/src/ui/components/app-header.tsx b/packages/insomnia/src/ui/components/app-header.tsx index 877d4048fb..a0a977c2ce 100644 --- a/packages/insomnia/src/ui/components/app-header.tsx +++ b/packages/insomnia/src/ui/components/app-header.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components'; import coreLogo from '../images/insomnia-logo.svg'; import { SettingsButton } from './buttons/settings-button'; -import { AccountDropdownButton } from './dropdowns/account-dropdown'; +import { AccountDropdownButton } from './dropdowns/account-dropdown/account-dropdown'; const Header = styled(_Header)({ '&&': { diff --git a/packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx b/packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx index b665638383..2d995b601f 100644 --- a/packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx +++ b/packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx @@ -12,7 +12,7 @@ import { KeydownBinder } from '../../keydown-binder'; import { DropdownButton } from './dropdown-button'; import { DropdownDivider } from './dropdown-divider'; import { DropdownItem } from './dropdown-item'; -const dropdownsContainer = document.querySelector('#dropdowns-container'); +export const dropdownsContainerId = 'dropdowns-container'; export interface DropdownProps { children: ReactNode; @@ -452,7 +452,7 @@ export class Dropdown extends PureComponent { , // @ts-expect-error -- TSCONVERSION - dropdownsContainer, + document.getElementById(dropdownsContainerId), ), ]; } diff --git a/packages/insomnia/src/ui/components/dropdowns/account-dropdown/account-dropdown.test.tsx b/packages/insomnia/src/ui/components/dropdowns/account-dropdown/account-dropdown.test.tsx new file mode 100644 index 0000000000..b7f4911b6c --- /dev/null +++ b/packages/insomnia/src/ui/components/dropdowns/account-dropdown/account-dropdown.test.tsx @@ -0,0 +1,108 @@ +import { describe, expect, test } from '@jest/globals'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import React from 'react'; +import { Provider } from 'react-redux'; +import configureMockStore, { MockStoreEnhanced } from 'redux-mock-store'; +import thunk from 'redux-thunk'; + +import * as models from '../../../../models'; +import { dropdownsContainerId } from '../../base/dropdown/dropdown'; +import { registerModal } from '../../modals'; +import { LoginModal } from '../../modals/login-modal'; +import { AccountDropdownButton } from './account-dropdown'; + +const middlewares = [thunk]; +const mockStore = configureMockStore(middlewares); + +const createSettings = (disablePaidFeatureAds: boolean) => { + const settings = models.settings.init(); + settings.disablePaidFeatureAds = disablePaidFeatureAds; + return settings; +}; + +export const createMockStoreWithoutPaidFeatureAd = async (disablePaidFeatureAds: boolean): Promise> => { + const settings = createSettings(disablePaidFeatureAds); + return mockStore({ + global: {}, + entities: { + settings: [settings], + }, + }); +}; + +describe('', () => { + const getDropdownContainer = () => { + const container = document.createElement('div'); + container.setAttribute('id', dropdownsContainerId); + document.body.appendChild(container); + + return container; + }; + + test('renders without exploding', async () => { + const container = getDropdownContainer(); + const store = await createMockStoreWithoutPaidFeatureAd(true); + render( + + + , { container } + ); + expect(screen.getByText('Log In')).toBeDefined(); + }); + + test('renders "Log In" label without paid feature ads', async () => { + const container = getDropdownContainer(); + const store = await createMockStoreWithoutPaidFeatureAd(true); + render( + + + , { container } + ); + expect(screen.getByText('Log In')).toBeDefined(); + expect(screen.queryByText('Upgrade Now')).toBeNull(); + }); + + test('renders "Log In" label with paid feature ads', async () => { + const container = getDropdownContainer(); + const store = await createMockStoreWithoutPaidFeatureAd(false); + render( + + + , { container } + ); + expect(screen.getByText('Log In')).toBeDefined(); + expect(screen.getByText('Upgrade Now')).toBeDefined(); + }); + + test('opens a Login modal when "Log In" button is clicked', async () => { + const user = userEvent.setup(); + const container = getDropdownContainer(); + const store = await createMockStoreWithoutPaidFeatureAd(true); + render( + + + + , { container } + ); + const loginBtn = screen.getByText('Log In'); + expect(loginBtn).toBeDefined(); + await user.click(loginBtn); + expect(await screen.findByTestId('LoginModal__form')).toBeDefined(); + expect(await screen.getByText('Email')).toBeDefined(); + expect(await screen.getByText('Password')).toBeDefined(); + }); + + test('renders "Logout" label when session is logged in', async () => { + global.localStorage.setItem('currentSessionId', 'sessionIdForTesting'); + const container = getDropdownContainer(); + const store = await createMockStoreWithoutPaidFeatureAd(true); + render( + + + , { container } + ); + expect(screen.getByText('Logout')).toBeDefined(); + global.localStorage.clear(); + }); +}); diff --git a/packages/insomnia/src/ui/components/dropdowns/account-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/account-dropdown/account-dropdown.tsx similarity index 82% rename from packages/insomnia/src/ui/components/dropdowns/account-dropdown.tsx rename to packages/insomnia/src/ui/components/dropdowns/account-dropdown/account-dropdown.tsx index 5243cc152f..ecd52d3aad 100644 --- a/packages/insomnia/src/ui/components/dropdowns/account-dropdown.tsx +++ b/packages/insomnia/src/ui/components/dropdowns/account-dropdown/account-dropdown.tsx @@ -4,14 +4,14 @@ import React, { Fragment, FunctionComponent } from 'react'; import { useSelector } from 'react-redux'; import styled from 'styled-components'; -import * as session from '../../../account/session'; -import { selectSettings } from '../../redux/selectors'; -import { Dropdown } from '../base/dropdown/dropdown'; -import { DropdownButton } from '../base/dropdown/dropdown-button'; -import { DropdownItem } from '../base/dropdown/dropdown-item'; -import { Link } from '../base/link'; -import { PromptButton } from '../base/prompt-button'; -import { showLoginModal } from '../modals/login-modal'; +import * as session from '../../../../account/session'; +import { selectSettings } from '../../../redux/selectors'; +import { Dropdown } from '../../base/dropdown/dropdown'; +import { DropdownButton } from '../../base/dropdown/dropdown-button'; +import { DropdownItem } from '../../base/dropdown/dropdown-item'; +import { Link } from '../../base/link'; +import { PromptButton } from '../../base/prompt-button'; +import { showLoginModal } from '../../modals/login-modal'; const Wrapper = styled.div({ display: 'flex', diff --git a/packages/insomnia/src/ui/components/modals/login-modal.tsx b/packages/insomnia/src/ui/components/modals/login-modal.tsx index 8ba16acec2..ddc4978d6d 100644 --- a/packages/insomnia/src/ui/components/modals/login-modal.tsx +++ b/packages/insomnia/src/ui/components/modals/login-modal.tsx @@ -83,7 +83,7 @@ export class LoginModal extends PureComponent<{}, State> { render() { const { title, message, loading, error } = this.state; return ( -
+ {title || 'Log Into Your Account'}