Merge pull request #29899 from overleaf/mj-dark-mode-file-flash

[web] Avoid background color flash when switching files

GitOrigin-RevId: e5d2fbb631fd54d195b9cb51b2a9db584d205138

services/web/test/frontend/components/editor-left-menu/editor-left-menu.spec.tsx

@@ -571,12 +571,16 @@ describe('<EditorLeftMenu />', function () {
       })
 
       it('shows editor theme menu correctly', function () {
-        const editorThemes = ['editortheme-1', 'editortheme-2', 'editortheme-3']
+        const editorThemes = [
+          { name: 'editortheme-1', dark: false },
+          { name: 'editortheme-2', dark: false },
+          { name: 'editortheme-3', dark: false },
+        ]
 
         const legacyEditorThemes = [
-          'legacytheme-1',
-          'legacytheme-2',
-          'legacytheme-3',
+          { name: 'legacytheme-1', dark: false },
+          { name: 'legacytheme-2', dark: false },
+          { name: 'legacytheme-3', dark: false },
         ]
 
         window.metaAttributesCache.set('ol-editorThemes', editorThemes)

services/web/test/frontend/features/editor-left-menu/components/settings/settings-editor-theme.test.tsx

@@ -6,9 +6,17 @@ import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/e
 import { EditorProviders } from '../../../../helpers/editor-providers'
 
 describe('<SettingsEditorTheme />', function () {
-  const editorThemes = ['editortheme-1', 'editortheme-2', 'editortheme-3']
+  const editorThemes = [
+    { name: 'editortheme-1', dark: false },
+    { name: 'editortheme-2', dark: false },
+    { name: 'editortheme-3', dark: false },
+  ]
 
-  const legacyEditorThemes = ['legacytheme-1', 'legacytheme-2', 'legacytheme-3']
+  const legacyEditorThemes = [
+    { name: 'legacytheme-1', dark: false },
+    { name: 'legacytheme-2', dark: false },
+    { name: 'legacytheme-3', dark: false },
+  ]
 
   beforeEach(function () {
     window.metaAttributesCache.set('ol-editorThemes', editorThemes)
@@ -31,15 +39,15 @@ describe('<SettingsEditorTheme />', function () {
     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)
+      const option = within(select).getByText(theme.name.replace(/_/g, ' '))
+      expect(option.getAttribute('value')).to.equal(theme.name)
     }
 
     for (const theme of legacyEditorThemes) {
       const option = within(select).getByText(
-        theme.replace(/_/g, ' ') + ' (Legacy)'
+        theme.name.replace(/_/g, ' ') + ' (Legacy)'
       )
-      expect(option.getAttribute('value')).to.equal(theme)
+      expect(option.getAttribute('value')).to.equal(theme.name)
     }
   })
 })

services/web/test/frontend/features/settings-modal/settings-modal.test.tsx

@@ -60,8 +60,16 @@ describe('<SettingsModal />', function () {
     },
   ]
 
-  const editorThemes = ['editortheme-1', 'editortheme-2', 'editortheme-3']
-  const legacyEditorThemes = ['legacytheme-1', 'legacytheme-2', 'legacytheme-3']
+  const editorThemes = [
+    { name: 'editortheme-1', dark: false },
+    { name: 'editortheme-2', dark: false },
+    { name: 'editortheme-3', dark: false },
+  ]
+  const legacyEditorThemes = [
+    { name: 'legacytheme-1', dark: false },
+    { name: 'legacytheme-2', dark: false },
+    { name: 'legacytheme-3', dark: false },
+  ]
 
   const imageNames: ImageName[] = [
     {

services/web/test/frontend/features/settings-modal/settings/editor-theme-setting.test.tsx

@@ -7,8 +7,16 @@ import EditorThemeSetting from '@/features/ide-redesign/components/settings/appe
 import userEvent from '@testing-library/user-event'
 
 describe('<EditorThemeSetting />', function () {
-  const editorThemes = ['editortheme-1', 'editortheme-2', 'editortheme-3']
-  const legacyEditorThemes = ['legacytheme-1', 'legacytheme-2', 'legacytheme-3']
+  const editorThemes = [
+    { name: 'editortheme-1', dark: false },
+    { name: 'editortheme-2', dark: false },
+    { name: 'editortheme-3', dark: false },
+  ]
+  const legacyEditorThemes = [
+    { name: 'legacytheme-1', dark: false },
+    { name: 'legacytheme-2', dark: false },
+    { name: 'legacytheme-3', dark: false },
+  ]
 
   beforeEach(function () {
     window.metaAttributesCache.set('ol-editorThemes', editorThemes)
@@ -39,25 +47,25 @@ describe('<EditorThemeSetting />', function () {
     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)
+      const option = within(select).getByText(theme.name.replace(/_/g, ' '))
+      expect(option.getAttribute('value')).to.equal(theme.name)
       await userEvent.selectOptions(select, [option])
       expect(
         saveSettingsMock.callHistory.called(`/user/settings`, {
-          body: { editorTheme: theme },
+          body: { editorTheme: theme.name },
         })
       ).to.be.true
     }
 
     for (const theme of legacyEditorThemes) {
       const option = within(select).getByText(
-        theme.replace(/_/g, ' ') + ' (Legacy)'
+        theme.name.replace(/_/g, ' ') + ' (Legacy)'
       )
-      expect(option.getAttribute('value')).to.equal(theme)
+      expect(option.getAttribute('value')).to.equal(theme.name)
       await userEvent.selectOptions(select, [option])
       expect(
         saveSettingsMock.callHistory.called(`/user/settings`, {
-          body: { editorTheme: theme },
+          body: { editorTheme: theme.name },
         })
       ).to.be.true
     }