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 <david@dmarby.se>

* fix redux for testing

* Update packages/insomnia/src/ui/index.tsx

* fix lint

* fix lint

Co-authored-by: kristofer <kristofer@khuff.co>
Co-authored-by: kreosus <59621250+kreosus@users.noreply.github.com>
Co-authored-by: David Marby <david@dmarby.se>
Co-authored-by: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>

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)({
   '&&': {

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<DropdownProps, State> {
             </div>
           </div>,
           // @ts-expect-error -- TSCONVERSION
-          dropdownsContainer,
+          document.getElementById(dropdownsContainerId),
         ),
       ];
     }

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<MockStoreEnhanced<unknown, {}>> => {
+  const settings = createSettings(disablePaidFeatureAds);
+  return mockStore({
+    global: {},
+    entities: {
+      settings: [settings],
+    },
+  });
+};
+
+describe('<AccountDropdownButton />', () => {
+  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(
+      <Provider store={store}>
+        <AccountDropdownButton />
+      </Provider>, { 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(
+      <Provider store={store}>
+        <AccountDropdownButton />
+      </Provider>, { 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(
+      <Provider store={store}>
+        <AccountDropdownButton />
+      </Provider>, { 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(
+      <Provider store={store}>
+        <AccountDropdownButton />
+        <LoginModal ref={registerModal} />
+      </Provider>, { 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(
+      <Provider store={store}>
+        <AccountDropdownButton />
+      </Provider>, { container }
+    );
+    expect(screen.getByText('Logout')).toBeDefined();
+    global.localStorage.clear();
+  });
+});

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',

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 (
-      <form onSubmit={this._handleLogin}>
+      <form onSubmit={this._handleLogin} data-testid="LoginModal__form">
         <Modal ref={this._setModalRef} {...this.props}>
           <ModalHeader>{title || 'Log Into Your Account'}</ModalHeader>
           <ModalBody className="pad">