Add Cypress tests for code check (#30781)

GitOrigin-RevId: 6ff1314542c3042d40054e5173ea85e14719d8a2

services/web/frontend/js/shared/context/user-settings-context.tsx

@@ -10,7 +10,7 @@ import {
 import { UserSettings } from '../../../../types/user-settings'
 import getMeta from '@/utils/meta'
 
-const defaultSettings: UserSettings = {
+export const defaultSettings: UserSettings = {
   pdfViewer: 'pdfjs',
   autoComplete: true,
   autoPairDelimiters: true,

services/web/test/frontend/features/source-editor/components/codemirror-editor-code-check.spec.tsx

@@ -0,0 +1,79 @@
+import { mockScope } from '../helpers/mock-scope'
+import { EditorProviders } from '../../../helpers/editor-providers'
+import CodeMirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
+import { TestContainer } from '../helpers/test-container'
+
+describe('code check', { scrollBehavior: false }, function () {
+  beforeEach(function () {
+    window.metaAttributesCache.set('ol-preventCompileOnLoad', true)
+    window.metaAttributesCache.set('ol-showSymbolPalette', true)
+    cy.interceptEvents()
+    cy.interceptMetadata()
+  })
+
+  it('highlights mismatched environment', function () {
+    const scope = mockScope('\\begin{foo}\n\n\\end{foo}')
+
+    cy.mount(
+      <TestContainer>
+        <EditorProviders
+          scope={scope}
+          userSettings={{
+            syntaxValidation: true,
+          }}
+        >
+          <CodeMirrorEditor />
+        </EditorProviders>
+      </TestContainer>
+    )
+
+    cy.get('.cm-editor').as('editor')
+    cy.get('.cm-lintRange-error').should('have.length', 0)
+    cy.get('.cm-line').eq(1).type('{leftArrow}{leftArrow}t{rightArrow}')
+    cy.contains('\\begin{foot}')
+    cy.get('.cm-lintRange-error').should('have.length', 2)
+  })
+
+  // check for a bug that occurred when a code error was highlighted while typing on the line before a line with a syntax error
+  it('allows typing inside concurrent highlighted errors', function () {
+    const scope = mockScope('\\begin{foo}\n\n\\end{foo}')
+
+    cy.mount(
+      <TestContainer>
+        <EditorProviders
+          scope={scope}
+          userSettings={{
+            syntaxValidation: true,
+            autoPairDelimiters: false, // disable auto pair
+          }}
+        >
+          <CodeMirrorEditor />
+        </EditorProviders>
+      </TestContainer>
+    )
+
+    cy.get('.cm-editor').as('editor')
+
+    cy.contains('\\begin{foo}')
+    cy.contains('\\end{foo}')
+    cy.get('.cm-lintRange-error').should('have.length', 0)
+
+    // put the cursor on a blank line to type in
+    cy.get('.cm-line').eq(1).as('line')
+    cy.get('@line').click()
+
+    // each character is typed separately so the linter has a chance to run between characters
+    cy.get('@line').type('$')
+    cy.get('.cm-lintRange-error').should('have.length', 1)
+    cy.contains('$')
+    cy.get('@line').type('x')
+    cy.get('.cm-lintRange-error').should('have.length', 1)
+    cy.contains('$x')
+    cy.get('@line').type('^')
+    cy.get('.cm-lintRange-error').should('have.length', 2)
+    cy.contains('$x^')
+    cy.get('@line').type('$')
+    cy.contains('$x^$')
+    cy.get('.cm-lintRange-error').should('have.length', 0)
+  })
+})

services/web/test/frontend/helpers/editor-providers.tsx

@@ -49,6 +49,8 @@ import { UserId } from '../../../types/user'
 import { ProjectCompiler } from '../../../types/project-settings'
 import { ReferencesContext } from '@/features/ide-react/context/references-context'
 import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
+import { defaultSettings } from '@/shared/context/user-settings-context'
+import { UserSettings } from '@ol-types/user-settings'
 import { DetachCompileContext } from '@/shared/context/detach-compile-context'
 import { type CompileContext } from '@/shared/context/local-compile-context'
 import { EditorContext } from '@/shared/context/editor-context'
@@ -61,19 +63,11 @@ export const USER_ID = '123abd' as UserId
 export const USER_EMAIL = 'testuser@example.com'
 
 const defaultUserSettings = {
-  pdfViewer: 'pdfjs',
-  fontSize: 12,
-  fontFamily: 'monaco',
-  lineHeight: 'normal',
-  editorTheme: 'textmate',
-  overallTheme: '',
-  mode: 'default',
-  autoComplete: true,
-  autoPairDelimiters: true,
-  trackChanges: true,
-  syntaxValidation: false,
-  mathPreview: true,
-}
+  ...defaultSettings,
+  enableNewEditor: false,
+  enableNewEditorLegacy: false,
+  referencesSearchMode: 'simple',
+} satisfies UserSettings
 
 export type EditorProvidersProps = {
   user?: { id: string; email: string; signUpDate?: string }