From 090919acb98cfb32e021786ca17156d001ef909d Mon Sep 17 00:00:00 2001 From: M Fahru Date: Mon, 24 Oct 2022 14:21:14 -0700 Subject: [PATCH] Add unit tests and storybook components for help menu GitOrigin-RevId: d6f17a97d559d698461c77af3273d7d9255cdcc8 --- .../editor-left-menu/help-menu.stories.tsx | 33 +++++++++++++++ .../components/help-contact-us.test.js | 31 ++++++++++++++ .../components/help-documentation.test.js | 12 ++++++ .../components/help-menu.test.js | 41 +++++++++++++++++++ .../components/help-show-hotkeys.test.js | 21 ++++++++++ 5 files changed, 138 insertions(+) create mode 100644 services/web/frontend/stories/editor-left-menu/help-menu.stories.tsx create mode 100644 services/web/test/frontend/features/editor-left-menu/components/help-contact-us.test.js create mode 100644 services/web/test/frontend/features/editor-left-menu/components/help-documentation.test.js create mode 100644 services/web/test/frontend/features/editor-left-menu/components/help-menu.test.js create mode 100644 services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js diff --git a/services/web/frontend/stories/editor-left-menu/help-menu.stories.tsx b/services/web/frontend/stories/editor-left-menu/help-menu.stories.tsx new file mode 100644 index 0000000000..9c8cfda98d --- /dev/null +++ b/services/web/frontend/stories/editor-left-menu/help-menu.stories.tsx @@ -0,0 +1,33 @@ +import HelpMenu from '../../js/features/editor-left-menu/components/help-menu' +import { ScopeDecorator } from '../decorators/scope' + +export default { + title: 'Editor / Left Menu / Help Menu', + component: HelpMenu, + decorators: [ScopeDecorator], +} + +export const ShowSupport = () => { + window.metaAttributesCache.set('ol-showSupport', true) + window.metaAttributesCache.set('ol-user', { + email: 'sherlock@holmes.co.uk', + first_name: 'Sherlock', + last_name: 'Holmes', + }) + + return ( +
+ +
+ ) +} + +export const HideSupport = () => { + window.metaAttributesCache.set('ol-showSupport', false) + + return ( +
+ +
+ ) +} diff --git a/services/web/test/frontend/features/editor-left-menu/components/help-contact-us.test.js b/services/web/test/frontend/features/editor-left-menu/components/help-contact-us.test.js new file mode 100644 index 0000000000..67a7c0508e --- /dev/null +++ b/services/web/test/frontend/features/editor-left-menu/components/help-contact-us.test.js @@ -0,0 +1,31 @@ +import { expect } from 'chai' +import { screen, fireEvent, within } from '@testing-library/react' +import HelpContactUs from '../../../../../frontend/js/features/editor-left-menu/components/help-contact-us' +import { renderWithEditorContext } from '../../../helpers/render-with-context' +import fetchMock from 'fetch-mock' + +describe('', function () { + beforeEach(function () { + window.metaAttributesCache = new Map() + window.metaAttributesCache.set('ol-user', { + email: 'sherlock@holmes.co.uk', + first_name: 'Sherlock', + last_name: 'Holmes', + }) + }) + + afterEach(function () { + window.metaAttributesCache = new Map() + fetchMock.reset() + }) + + it('open contact us modal when clicked', function () { + renderWithEditorContext() + + expect(screen.queryByRole('dialog')).to.equal(null) + fireEvent.click(screen.getByRole('button', { name: 'Contact Us' })) + const modal = screen.getAllByRole('dialog')[0] + within(modal).getAllByText('Contact Us') + within(modal).getByText('Subject') + }) +}) diff --git a/services/web/test/frontend/features/editor-left-menu/components/help-documentation.test.js b/services/web/test/frontend/features/editor-left-menu/components/help-documentation.test.js new file mode 100644 index 0000000000..c423c47a49 --- /dev/null +++ b/services/web/test/frontend/features/editor-left-menu/components/help-documentation.test.js @@ -0,0 +1,12 @@ +import { expect } from 'chai' +import { screen, render } from '@testing-library/react' +import HelpDocumentation from '../../../../../frontend/js/features/editor-left-menu/components/help-documentation' + +describe('', function () { + it('has correct href attribute', function () { + render() + + const link = screen.getByRole('link', { name: 'Documentation' }) + expect(link.getAttribute('href')).to.equal('/learn') + }) +}) diff --git a/services/web/test/frontend/features/editor-left-menu/components/help-menu.test.js b/services/web/test/frontend/features/editor-left-menu/components/help-menu.test.js new file mode 100644 index 0000000000..810068837c --- /dev/null +++ b/services/web/test/frontend/features/editor-left-menu/components/help-menu.test.js @@ -0,0 +1,41 @@ +import { screen } from '@testing-library/dom' +import { expect } from 'chai' +import fetchMock from 'fetch-mock' +import HelpMenu from '../../../../../frontend/js/features/editor-left-menu/components/help-menu' +import { renderWithEditorContext } from '../../../helpers/render-with-context' + +describe('', function () { + beforeEach(function () { + window.metaAttributesCache = new Map() + window.metaAttributesCache.set('ol-user', { + email: 'sherlock@holmes.co.uk', + first_name: 'Sherlock', + last_name: 'Holmes', + }) + }) + + afterEach(function () { + window.metaAttributesCache = new Map() + fetchMock.reset() + }) + + it('shows correct menu if `showSupport` is `true`', function () { + window.metaAttributesCache.set('ol-showSupport', true) + + renderWithEditorContext() + + screen.getByRole('button', { name: 'Show Hotkeys' }) + screen.getByRole('button', { name: 'Contact Us' }) + screen.getByRole('link', { name: 'Documentation' }) + }) + + it('shows correct menu if `showSupport` is `false`', function () { + window.metaAttributesCache.set('ol-showSupport', false) + + renderWithEditorContext() + + screen.getByRole('button', { name: 'Show Hotkeys' }) + expect(screen.queryByRole('button', { name: 'Contact Us' })).to.equal(null) + expect(screen.queryByRole('link', { name: 'Documentation' })).to.equal(null) + }) +}) diff --git a/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js b/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js new file mode 100644 index 0000000000..12dd4bcfb7 --- /dev/null +++ b/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js @@ -0,0 +1,21 @@ +import { expect } from 'chai' +import { screen, fireEvent, within } from '@testing-library/react' +import HelpShowHotkeys from '../../../../../frontend/js/features/editor-left-menu/components/help-show-hotkeys' +import { renderWithEditorContext } from '../../../helpers/render-with-context' +import fetchMock from 'fetch-mock' + +describe('', function () { + afterEach(function () { + fetchMock.reset() + }) + + it('open hotkeys modal when clicked', function () { + renderWithEditorContext() + + expect(screen.queryByRole('dialog')).to.equal(null) + fireEvent.click(screen.getByRole('button', { name: 'Show Hotkeys' })) + const modal = screen.getAllByRole('dialog')[0] + within(modal).getByText('Hotkeys') + within(modal).getByText('Common') + }) +})