diff --git a/packages/insomnia/jest.config.js b/packages/insomnia/jest.config.js index 2e1bd0dd4b..90bd5a5488 100644 --- a/packages/insomnia/jest.config.js +++ b/packages/insomnia/jest.config.js @@ -14,7 +14,7 @@ module.exports = { testEnvironment: 'jsdom', verbose: true, moduleNameMapper: { - '\\.(css|less|png)$': '/src/__mocks__/dummy.ts', + '\\.(css|less|png|svg)$': '/src/__mocks__/dummy.ts', 'styled-components': '/node_modules/styled-components', 'jsonpath-plus': '/node_modules/jsonpath-plus/dist/index-node-cjs.cjs', }, diff --git a/packages/insomnia/src/__jest__/dropdown-container.ts b/packages/insomnia/src/__jest__/dropdown-container.ts new file mode 100644 index 0000000000..93363412b3 --- /dev/null +++ b/packages/insomnia/src/__jest__/dropdown-container.ts @@ -0,0 +1,9 @@ +import { dropdownsContainerId } from '../ui/components/base/dropdown/dropdown'; + +export const getDropdownContainer = () => { + const container = document.createElement('div'); + container.setAttribute('id', dropdownsContainerId); + document.body.appendChild(container); + + return container; +}; diff --git a/packages/insomnia/src/ui/components/app-header.test.tsx b/packages/insomnia/src/ui/components/app-header.test.tsx new file mode 100644 index 0000000000..b0864c65bc --- /dev/null +++ b/packages/insomnia/src/ui/components/app-header.test.tsx @@ -0,0 +1,71 @@ +import { describe, expect, test } from '@jest/globals'; +import { render, screen } from '@testing-library/react'; +import React from 'react'; +import { Provider } from 'react-redux'; +import configureMockStore from 'redux-mock-store'; +import { MockStoreEnhanced } from 'redux-mock-store'; +import thunk from 'redux-thunk'; + +import { globalBeforeEach } from '../../__jest__/before-each'; +import { getDropdownContainer } from '../../__jest__/dropdown-container'; +import * as models from '../../models'; +import { AppHeader } from './app-header'; + +const middlewares = [thunk]; +const mockStore = configureMockStore(middlewares); + +const createSettings = () => { + const settings = models.settings.init(); + settings.incognitoMode = true; + return settings; +}; + +export const createMockStore = async (): Promise> => { + const settings = createSettings(); + return mockStore({ + global: { + isLoggedIn: false, + }, + entities: { + settings: [settings], + }, + }); +}; + +describe('', () => { + beforeEach(globalBeforeEach); + + test('shows the github stars button when not logged in', async () => { + const store = await createMockStore(); + const container = getDropdownContainer(); + + render( + + + , { container }, + ); + + expect(screen.getByText('Star')).toBeDefined(); + }); + + test('hides the github stars button when logged in', async () => { + const store = await createMockStore(); + const container = getDropdownContainer(); + + render( + + + , { container }, + ); + + expect(screen.getByText('Star')).toBeDefined(); + }); +}); diff --git a/packages/insomnia/src/ui/components/app-header.tsx b/packages/insomnia/src/ui/components/app-header.tsx index f38ed783be..1bcc4b11cf 100644 --- a/packages/insomnia/src/ui/components/app-header.tsx +++ b/packages/insomnia/src/ui/components/app-header.tsx @@ -1,8 +1,10 @@ import { Breadcrumb, BreadcrumbProps, Header as _Header } from 'insomnia-components'; import React, { FC, Fragment, ReactNode } from 'react'; +import { useSelector } from 'react-redux'; import styled from 'styled-components'; import coreLogo from '../images/insomnia-logo.svg'; +import { selectIsLoggedIn } from '../redux/selectors'; import { SettingsButton } from './buttons/settings-button'; import { AccountDropdownButton } from './dropdowns/account-dropdown/account-dropdown'; import { GitHubStarsButton } from './github-stars-button'; @@ -40,13 +42,15 @@ export const AppHeader: FC = ({ gridCenter, gridRight, }) => { + const isLoggedIn = useSelector(selectIsLoggedIn); + return (
Insomnia - + { !isLoggedIn ? : null } 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 index 45b3ff6dbc..de33ae35fe 100644 --- 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 @@ -6,8 +6,8 @@ import { Provider } from 'react-redux'; import configureMockStore, { MockStoreEnhanced } from 'redux-mock-store'; import thunk from 'redux-thunk'; +import { getDropdownContainer } from '../../../../__jest__/dropdown-container'; 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'; @@ -32,14 +32,6 @@ export const createMockStoreWithoutPaidFeatureAd = async (disablePaidFeatureAds: }; 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);