Add unit tests and storybook components for help menu

GitOrigin-RevId: d6f17a97d559d698461c77af3273d7d9255cdcc8

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 (
+    <div id="left-menu" className="shown">
+      <HelpMenu />
+    </div>
+  )
+}
+
+export const HideSupport = () => {
+  window.metaAttributesCache.set('ol-showSupport', false)
+
+  return (
+    <div id="left-menu" className="shown">
+      <HelpMenu />
+    </div>
+  )
+}

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('<HelpContactUs />', 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(<HelpContactUs />)
+
+    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')
+  })
+})

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('<HelpDocumentation />', function () {
+  it('has correct href attribute', function () {
+    render(<HelpDocumentation />)
+
+    const link = screen.getByRole('link', { name: 'Documentation' })
+    expect(link.getAttribute('href')).to.equal('/learn')
+  })
+})

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('<HelpMenu />', 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(<HelpMenu />)
+
+    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(<HelpMenu />)
+
+    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)
+  })
+})

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('<HelpShowHotkeys />', function () {
+  afterEach(function () {
+    fetchMock.reset()
+  })
+
+  it('open hotkeys modal when clicked', function () {
+    renderWithEditorContext(<HelpShowHotkeys />)
+
+    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')
+  })
+})