[web] hide all toasts when offline (#35400)

GitOrigin-RevId: cf179bf7a761ddaae56f3e5bab6327b0f3625fb5

services/web/test/frontend/features/ide-react/components/alerts/alerts.spec.tsx

@@ -0,0 +1,67 @@
+import { Alerts } from '@/features/ide-react/components/alerts/alerts'
+import { ConnectionContext } from '@/features/ide-react/context/connection-context'
+import { GlobalAlertsProvider } from '@/features/ide-react/context/global-alerts-context'
+import { ProjectContext } from '@/shared/context/project-context'
+import { SplitTestProvider } from '@/shared/context/split-test-context'
+import { makeTutorialProvider } from '../../../../helpers/make-tutorial-provider'
+
+const TutorialProvider = makeTutorialProvider()
+
+const disconnectedConnectionContextValue = {
+  socket: { socket: {} },
+  connectionState: {
+    forceDisconnected: true,
+    readyState: WebSocket.CLOSED,
+    error: '',
+  },
+  isConnected: false,
+  isStillReconnecting: false,
+  secondsUntilReconnect: () => 0,
+  tryReconnectNow: () => {},
+  registerUserActivity: () => {},
+  closeConnection: () => {},
+  getSocketDebuggingInfo: () => ({ id: '' }),
+} as any
+
+const projectContextValue = {
+  project: { imageName: 'texlive-full:2023.1' },
+} as any
+
+const mount = () => {
+  cy.mount(
+    <SplitTestProvider>
+      <TutorialProvider>
+        <ProjectContext.Provider value={projectContextValue}>
+          <GlobalAlertsProvider>
+            <ConnectionContext.Provider
+              value={disconnectedConnectionContextValue}
+            >
+              <Alerts />
+            </ConnectionContext.Provider>
+          </GlobalAlertsProvider>
+        </ProjectContext.Provider>
+      </TutorialProvider>
+    </SplitTestProvider>
+  )
+}
+
+const enableFlag = () => {
+  cy.window().then(win => {
+    win.metaAttributesCache.set('ol-splitTestVariants', {
+      'intermittent-connection-improvements': 'enabled',
+    })
+  })
+}
+
+describe('<Alerts />', function () {
+  it('shows the connection alert when flag is disabled', function () {
+    mount()
+    cy.findByRole('alert').should('exist')
+  })
+
+  it('suppresses the connection alert when flag is enabled', function () {
+    enableFlag()
+    mount()
+    cy.findByRole('alert').should('not.exist')
+  })
+})

services/web/test/frontend/features/ide-react/components/unsaved-docs/unsaved-docs.spec.tsx

@@ -4,6 +4,8 @@ import { GlobalAlertsProvider } from '@/features/ide-react/context/global-alerts
 import { FileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
 import { ConnectionContext } from '@/features/ide-react/context/connection-context'
 import { SplitTestProvider } from '@/shared/context/split-test-context'
+import { EditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
+import { IdeReactContext } from '@/features/ide-react/context/ide-react-context'
 
 const defaultUnsavedDocsContextValue = {
   unsavedDocs: new Map<string, number>([['doc1', 16]]),
@@ -37,16 +39,37 @@ const mockFileTreePathContextValue = {
   previewByPath: () => null,
 }
 
-const mount = () => {
+const mockEditorManagerContextValue = {
+  openDocs: {
+    getUnsavedOpsSize: () => ({ pendingOpsLength: 2, inflightOpsLength: 1 }),
+  },
+} as any
+
+const mount = ({
+  unsavedDocsContextValue = defaultUnsavedDocsContextValue,
+  reportError = cy.stub(),
+}: {
+  unsavedDocsContextValue?: typeof defaultUnsavedDocsContextValue
+  reportError?: any
+} = {}) => {
+  const ideReactContextValue = { reportError } as any
   cy.mount(
     <SplitTestProvider>
       <GlobalAlertsProvider>
         <ConnectionContext.Provider value={mockConnectionContextValue}>
-          <FileTreePathContext.Provider value={mockFileTreePathContextValue}>
-            <UnsavedDocsContext.Provider value={defaultUnsavedDocsContextValue}>
-              <UnsavedDocs />
-            </UnsavedDocsContext.Provider>
-          </FileTreePathContext.Provider>
+          <IdeReactContext.Provider value={ideReactContextValue}>
+            <EditorManagerContext.Provider
+              value={mockEditorManagerContextValue}
+            >
+              <FileTreePathContext.Provider
+                value={mockFileTreePathContextValue}
+              >
+                <UnsavedDocsContext.Provider value={unsavedDocsContextValue}>
+                  <UnsavedDocs />
+                </UnsavedDocsContext.Provider>
+              </FileTreePathContext.Provider>
+            </EditorManagerContext.Provider>
+          </IdeReactContext.Provider>
         </ConnectionContext.Provider>
       </GlobalAlertsProvider>
     </SplitTestProvider>
@@ -72,4 +95,34 @@ describe('<UnsavedDocs />', function () {
     mount()
     cy.findByRole('alert').should('not.exist')
   })
+
+  describe('when locked', function () {
+    const lockedContextValue = {
+      unsavedDocs: new Map<string, number>(),
+      isLocked: true,
+    }
+
+    it('shows the locked alert and reports the error when flag is disabled', function () {
+      const reportError = cy.stub().as('reportError')
+      mount({ unsavedDocsContextValue: lockedContextValue, reportError })
+      cy.findByRole('alert').should('exist')
+      cy.get('@reportError').should(
+        'have.been.calledOnceWith',
+        'connection-lost-with-unsaved-changes',
+        { pendingOpsLength: 2, inflightOpsLength: 1 }
+      )
+    })
+
+    it('hides the locked alert but still reports the error when flag is enabled', function () {
+      const reportError = cy.stub().as('reportError')
+      enableFlag()
+      mount({ unsavedDocsContextValue: lockedContextValue, reportError })
+      cy.findByRole('alert').should('not.exist')
+      cy.get('@reportError').should(
+        'have.been.calledOnceWith',
+        'connection-lost-with-unsaved-changes',
+        { pendingOpsLength: 2, inflightOpsLength: 1 }
+      )
+    })
+  })
 })