Data handling for settings in editor left menu react migration (#10470)

- Importing SettingsController from the angular code, which enables post requests for every select menu and socket handler for compiler, texlive version, and main document select option - New context for the data handling infrastructure between react and angular. The data is still located in the angular version, and I use the context only as a proxy to fetch/post new data. GitOrigin-RevId: 59009bceb128d82969a2318e90036aacf79f9887
2022-11-30 09:04:32 +00:00
parent 079a0dcae4
commit f27562eb12
34 changed files with 753 additions and 83 deletions
@@ -0,0 +1,23 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import SettingsAutoCloseBrackets from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-auto-close-brackets'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+
+describe('<SettingsAutoCloseBrackets />', function () {
+  afterEach(function () {
+    fetchMock.reset()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsAutoCloseBrackets />)
+
+    const select = screen.getByLabelText('Auto-close Brackets')
+
+    const optionOn = within(select).getByText('On')
+    expect(optionOn.getAttribute('value')).to.equal('true')
+
+    const optionOff = within(select).getByText('Off')
+    expect(optionOff.getAttribute('value')).to.equal('false')
+  })
+})
@@ -0,0 +1,23 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import SettingsAutoComplete from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-auto-complete'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+
+describe('<SettingsAutoComplete />', function () {
+  afterEach(function () {
+    fetchMock.reset()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsAutoComplete />)
+
+    const select = screen.getByLabelText('Auto-complete')
+
+    const optionOn = within(select).getByText('On')
+    expect(optionOn.getAttribute('value')).to.equal('true')
+
+    const optionOff = within(select).getByText('Off')
+    expect(optionOff.getAttribute('value')).to.equal('false')
+  })
+})
@@ -0,0 +1,47 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import sinon from 'sinon'
+import fetchMock from 'fetch-mock'
+import SettingsDocument from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-document'
+import * as isValidTeXFileModule from '../../../../../../frontend/js/main/is-valid-tex-file'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+import type { MainDocument } from '../../../../../../types/project-settings'
+
+describe('<SettingsDocument />', function () {
+  let isValidTeXFileStub: sinon.SinonStub
+  const docs: MainDocument[] = [
+    {
+      path: 'main.tex',
+      doc: {
+        name: 'main.tex',
+        id: '123abc',
+        type: 'doc',
+        selected: false,
+      },
+    },
+  ]
+
+  beforeEach(function () {
+    isValidTeXFileStub = sinon
+      .stub(isValidTeXFileModule, 'default')
+      .returns(true)
+  })
+
+  afterEach(function () {
+    fetchMock.reset()
+    isValidTeXFileStub.restore()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsDocument />, {
+      scope: {
+        docs,
+      },
+    })
+
+    const select = screen.getByLabelText('Main document')
+
+    const optionOn = within(select).getByText('main.tex')
+    expect(optionOn.getAttribute('value')).to.equal('123abc')
+  })
+})
@@ -0,0 +1,37 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import SettingsEditorTheme from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-editor-theme'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+
+describe('<SettingsEditorTheme />', function () {
+  const editorThemes = ['editortheme-1', 'editortheme-2', 'editortheme-3']
+
+  const legacyEditorThemes = ['legacytheme-1', 'legacytheme-2', 'legacytheme-3']
+
+  beforeEach(function () {
+    window.metaAttributesCache.set('ol-editorThemes', editorThemes)
+    window.metaAttributesCache.set('ol-legacyEditorThemes', legacyEditorThemes)
+  })
+
+  afterEach(function () {
+    fetchMock.reset()
+    window.metaAttributesCache = new Map()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsEditorTheme />)
+
+    const select = screen.getByLabelText('Editor theme')
+
+    for (const theme of editorThemes) {
+      const option = within(select).getByText(theme.replace(/_/g, ' '))
+      expect(option.getAttribute('value')).to.equal(theme)
+    }
+
+    for (const theme of legacyEditorThemes) {
+      const option = within(select).getByText(theme.replace(/_/g, ' '))
+      expect(option.getAttribute('value')).to.equal(theme)
+    }
+  })
+})
@@ -0,0 +1,23 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import SettingsFontFamily from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-font-family'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+
+describe('<SettingsFontFamily />', function () {
+  afterEach(function () {
+    fetchMock.reset()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsFontFamily />)
+
+    const select = screen.getByLabelText('Font Family')
+
+    const optionMonaco = within(select).getByText('Monaco / Menlo / Consolas')
+    expect(optionMonaco.getAttribute('value')).to.equal('monaco')
+
+    const optionLucida = within(select).getByText('Lucida / Source Code Pro')
+    expect(optionLucida.getAttribute('value')).to.equal('lucida')
+  })
+})
@@ -0,0 +1,24 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import SettingsFontSize from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-font-size'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+
+describe('<SettingsFontSize />', function () {
+  const sizes = ['10', '11', '12', '13', '14', '16', '18', '20', '22', '24']
+
+  afterEach(function () {
+    fetchMock.reset()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsFontSize />)
+
+    const select = screen.getByLabelText('Font Size')
+
+    for (const size of sizes) {
+      const option = within(select).getByText(`${size}px`)
+      expect(option.getAttribute('value')).to.equal(size)
+    }
+  })
+})
@@ -0,0 +1,39 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import SettingsImageName from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-image-name'
+import type { AllowedImageName } from '../../../../../../types/project-settings'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+
+describe('<SettingsImageName />', function () {
+  const allowedImageNames: AllowedImageName[] = [
+    {
+      imageDesc: 'Image 1',
+      imageName: 'img-1',
+    },
+    {
+      imageDesc: 'Image 2',
+      imageName: 'img-2',
+    },
+  ]
+
+  beforeEach(function () {
+    window.metaAttributesCache.set('ol-allowedImageNames', allowedImageNames)
+  })
+
+  afterEach(function () {
+    fetchMock.reset()
+    window.metaAttributesCache = new Map()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsImageName />)
+
+    const select = screen.getByLabelText('TeX Live version')
+
+    for (const { imageName, imageDesc } of allowedImageNames) {
+      const option = within(select).getByText(imageDesc)
+      expect(option.getAttribute('value')).to.equal(imageName)
+    }
+  })
+})
@@ -0,0 +1,26 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import SettingsKeybindings from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-keybindings'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+
+describe('<SettingsKeybindings />', function () {
+  afterEach(function () {
+    fetchMock.reset()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsKeybindings />)
+
+    const select = screen.getByLabelText('Keybindings')
+
+    const optionNone = within(select).getByText('None')
+    expect(optionNone.getAttribute('value')).to.equal('default')
+
+    const optionVim = within(select).getByText('Vim')
+    expect(optionVim.getAttribute('value')).to.equal('vim')
+
+    const optionEmacs = within(select).getByText('Emacs')
+    expect(optionEmacs.getAttribute('value')).to.equal('emacs')
+  })
+})
@@ -0,0 +1,26 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import SettingsLineHeight from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-line-height'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+
+describe('<SettingsLineHeight />', function () {
+  afterEach(function () {
+    fetchMock.reset()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsLineHeight />)
+
+    const select = screen.getByLabelText('Line Height')
+
+    const optionCompact = within(select).getByText('Compact')
+    expect(optionCompact.getAttribute('value')).to.equal('compact')
+
+    const optionNormal = within(select).getByText('Normal')
+    expect(optionNormal.getAttribute('value')).to.equal('normal')
+
+    const optionWide = within(select).getByText('Wide')
+    expect(optionWide.getAttribute('value')).to.equal('wide')
+  })
+})
@@ -0,0 +1,41 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import SettingsOverallTheme from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-overall-theme'
+import type { OverallThemeMeta } from '../../../../../../types/project-settings'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+
+describe('<SettingsOverallTheme />', function () {
+  const overallThemes: OverallThemeMeta[] = [
+    {
+      name: 'Overall Theme 1',
+      val: '',
+      path: 'https://overleaf.com/overalltheme-1.css',
+    },
+    {
+      name: 'Overall Theme 2',
+      val: 'light-',
+      path: 'https://overleaf.com/overalltheme-2.css',
+    },
+  ]
+
+  beforeEach(function () {
+    window.metaAttributesCache.set('ol-overallThemes', overallThemes)
+  })
+
+  afterEach(function () {
+    fetchMock.reset()
+    window.metaAttributesCache = new Map()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsOverallTheme />)
+
+    const select = screen.getByLabelText('Overall theme')
+
+    for (const theme of overallThemes) {
+      const option = within(select).getByText(theme.name)
+      expect(option.getAttribute('value')).to.equal(theme.val)
+    }
+  })
+})
@@ -0,0 +1,23 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import SettingsPdfViewer from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-pdf-viewer'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+
+describe('<SettingsPdfViewer />', function () {
+  afterEach(function () {
+    fetchMock.reset()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsPdfViewer />)
+
+    const select = screen.getByLabelText('PDF Viewer')
+
+    const optionOverleaf = within(select).getByText('Overleaf')
+    expect(optionOverleaf.getAttribute('value')).to.equal('pdfjs')
+
+    const optionBrowser = within(select).getByText('Browser')
+    expect(optionBrowser.getAttribute('value')).to.equal('native')
+  })
+})
@@ -0,0 +1,42 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import SettingsSpellCheckLanguage from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-spell-check-language'
+import type { SpellCheckLanguage } from '../../../../../../types/project-settings'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+
+describe('<SettingsSpellCheckLanguage />', function () {
+  const languages: SpellCheckLanguage[] = [
+    {
+      name: 'Lang 1',
+      code: 'lang-1',
+    },
+    {
+      name: 'Lang 2',
+      code: 'lang-2',
+    },
+  ]
+
+  beforeEach(function () {
+    window.metaAttributesCache.set('ol-languages', languages)
+  })
+
+  afterEach(function () {
+    fetchMock.reset()
+    window.metaAttributesCache = new Map()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsSpellCheckLanguage />)
+
+    const select = screen.getByLabelText('Spell check')
+
+    const optionEmpty = within(select).getByText('Off')
+    expect(optionEmpty.getAttribute('value')).to.equal('')
+
+    for (const language of languages) {
+      const option = within(select).getByText(language.name)
+      expect(option.getAttribute('value')).to.equal(language.code)
+    }
+  })
+})
@@ -0,0 +1,23 @@
+import { screen, within } from '@testing-library/dom'
+import { expect } from 'chai'
+import fetchMock from 'fetch-mock'
+import SettingsSyntaxValidation from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-syntax-validation'
+import { renderWithEditorContext } from '../../../../helpers/render-with-context'
+
+describe('<SettingsSyntaxValidation />', function () {
+  afterEach(function () {
+    fetchMock.reset()
+  })
+
+  it('shows correct menu', async function () {
+    renderWithEditorContext(<SettingsSyntaxValidation />)
+
+    const select = screen.getByLabelText('Code check')
+
+    const optionOn = within(select).getByText('On')
+    expect(optionOn.getAttribute('value')).to.equal('true')
+
+    const optionOff = within(select).getByText('Off')
+    expect(optionOff.getAttribute('value')).to.equal('false')
+  })
+})
@@ -12,6 +12,7 @@ import { DetachProvider } from '../../../frontend/js/shared/context/detach-conte
 import { LayoutProvider } from '../../../frontend/js/shared/context/layout-context'
 import { LocalCompileProvider } from '../../../frontend/js/shared/context/local-compile-context'
 import { DetachCompileProvider } from '../../../frontend/js/shared/context/detach-compile-context'
+import { ProjectSettingsProvider } from '../../../frontend/js/features/editor-left-menu/context/project-settings-context'

 // these constants can be imported in tests instead of
 // using magic strings
@@ -112,11 +113,15 @@ export function EditorProviders({
            <FileTreeDataProvider>
              <DetachProvider>
                <EditorProvider settings={{}}>
-                  <LayoutProvider>
-                    <LocalCompileProvider>
-                      <DetachCompileProvider>{children}</DetachCompileProvider>
-                    </LocalCompileProvider>
-                  </LayoutProvider>
+                  <ProjectSettingsProvider>
+                    <LayoutProvider>
+                      <LocalCompileProvider>
+                        <DetachCompileProvider>
+                          {children}
+                        </DetachCompileProvider>
+                      </LocalCompileProvider>
+                    </LayoutProvider>
+                  </ProjectSettingsProvider>
                </EditorProvider>
              </DetachProvider>
            </FileTreeDataProvider>