Merge pull request #23940 from overleaf/td-react-18

Upgrade to React 18

GitOrigin-RevId: 9b81936e6eea2bccd97fe5c2c5841f0b946371b8

services/web/test/frontend/features/editor-navigation-toolbar/components/layout-dropdown-button.test.jsx

@@ -1,7 +1,7 @@
 import sinon from 'sinon'
 import fetchMock from 'fetch-mock'
 import { expect } from 'chai'
-import { screen } from '@testing-library/react'
+import { screen, waitFor } from '@testing-library/react'
 import LayoutDropdownButton from '../../../../../frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button'
 import { renderWithEditorContext } from '../../../helpers/render-with-context'
 import * as eventTracking from '@/infrastructure/event-tracking'
@@ -31,13 +31,15 @@ describe('<LayoutDropdownButton />', function () {
 
     screen.getByRole('button', { name: 'Layout' }).click()
 
-    expect(
-      screen
-        .getByRole('menuitem', {
-          name: 'Editor & PDF',
-        })
-        .getAttribute('aria-selected')
-    ).to.equal('false')
+    await waitFor(() =>
+      expect(
+        screen
+          .getByRole('menuitem', {
+            name: 'Editor & PDF',
+          })
+          .getAttribute('aria-selected')
+      ).to.equal('false')
+    )
 
     expect(
       screen
@@ -64,7 +66,7 @@ describe('<LayoutDropdownButton />', function () {
     ).to.equal('false')
   })
 
-  it('should not select any option in history view', function () {
+  it('should not select any option in history view', async function () {
     // Selected is aria-label, visually we show a checkmark
     renderWithEditorContext(<LayoutDropdownButton />, {
       ui: { ...defaultUi, view: 'history' },
@@ -72,13 +74,15 @@ describe('<LayoutDropdownButton />', function () {
 
     screen.getByRole('button', { name: 'Layout' }).click()
 
-    expect(
-      screen
-        .getByRole('menuitem', {
-          name: 'Editor & PDF',
-        })
-        .getAttribute('aria-selected')
-    ).to.equal('false')
+    await waitFor(() =>
+      expect(
+        screen
+          .getByRole('menuitem', {
+            name: 'Editor & PDF',
+          })
+          .getAttribute('aria-selected')
+      ).to.equal('false')
+    )
 
     expect(
       screen
@@ -105,7 +109,7 @@ describe('<LayoutDropdownButton />', function () {
     ).to.equal('false')
   })
 
-  it('should treat file and editor views the same way', function () {
+  it('should treat file and editor views the same way', async function () {
     // Selected is aria-label, visually we show a checkmark
     renderWithEditorContext(<LayoutDropdownButton />, {
       ui: {
@@ -116,13 +120,15 @@ describe('<LayoutDropdownButton />', function () {
 
     screen.getByRole('button', { name: 'Layout' }).click()
 
-    expect(
-      screen
-        .getByRole('menuitem', {
-          name: 'Editor & PDF',
-        })
-        .getAttribute('aria-selected')
-    ).to.equal('false')
+    await waitFor(() =>
+      expect(
+        screen
+          .getByRole('menuitem', {
+            name: 'Editor & PDF',
+          })
+          .getAttribute('aria-selected')
+      ).to.equal('false')
+    )
 
     expect(
       screen
@@ -149,9 +155,9 @@ describe('<LayoutDropdownButton />', function () {
     ).to.equal('false')
   })
 
-  describe('on detach', function () {
+  describe('on detach', async function () {
     let originalBroadcastChannel
-    beforeEach(function () {
+    beforeEach(async function () {
       window.BroadcastChannel = originalBroadcastChannel || true // ensure that window.BroadcastChannel is truthy
 
       renderWithEditorContext(<LayoutDropdownButton />, {
@@ -160,19 +166,21 @@ describe('<LayoutDropdownButton />', function () {
 
       screen.getByRole('button', { name: 'Layout' }).click()
 
-      screen
-        .getByRole('menuitem', {
-          name: 'PDF in separate tab',
-        })
-        .click()
+      await waitFor(() =>
+        screen
+          .getByRole('menuitem', {
+            name: 'PDF in separate tab',
+          })
+          .click()
+      )
     })
 
     afterEach(function () {
       window.BroadcastChannel = originalBroadcastChannel
     })
 
-    it('should show processing', function () {
-      screen.getByText('Layout processing')
+    it('should show processing', async function () {
+      await screen.findByText('Layout processing')
     })
 
     it('should record event', function () {
@@ -180,8 +188,8 @@ describe('<LayoutDropdownButton />', function () {
     })
   })
 
-  describe('on layout change / reattach', function () {
-    beforeEach(function () {
+  describe('on layout change / reattach', async function () {
+    beforeEach(async function () {
       window.metaAttributesCache.set('ol-detachRole', 'detacher')
       renderWithEditorContext(<LayoutDropdownButton />, {
         ui: { ...defaultUi, view: 'editor' },
@@ -189,11 +197,13 @@ describe('<LayoutDropdownButton />', function () {
 
       screen.getByRole('button', { name: 'Layout' }).click()
 
-      screen
-        .getByRole('menuitem', {
-          name: 'Editor only (hide PDF)',
-        })
-        .click()
+      await waitFor(() =>
+        screen
+          .getByRole('menuitem', {
+            name: 'Editor only (hide PDF)',
+          })
+          .click()
+      )
     })
 
     it('should not show processing', function () {

services/web/test/frontend/features/editor-navigation-toolbar/components/toolbar-header.test.jsx

@@ -28,6 +28,7 @@ describe('<ToolbarHeader />', function () {
 
   beforeEach(function () {
     window.metaAttributesCache.set('ol-chatEnabled', true)
+    window.metaAttributesCache.set('ol-preventCompileOnLoad', true)
   })
 
   describe('cobranding logo', function () {