@instructure/ui-source-code-editor 10.16.1 → 10.16.3

package/src/SourceCodeEditor/__new-tests__/SourceCodeEditor.test.tsx

@@ -21,10 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
+import type { MockInstance } from 'vitest'
 
-import { render } from '@testing-library/react'
-import SourceCodeEditor from '../index'
 import '@testing-library/jest-dom'
+import SourceCodeEditor from '../index'
 
 describe('<SourceCodeEditor />', () => {
   describe('syntax highlight', () => {
@@ -59,4 +62,301 @@ describe('<SourceCodeEditor />', () => {
       expect(editorElement).toHaveAttribute('aria-labelledby', labelId)
     })
   })
+
+  describe('defaultValue', () => {
+    let consoleWarningMock: ReturnType<typeof vi.spyOn>
+    let consoleErrorMock: ReturnType<typeof vi.spyOn>
+
+    beforeEach(() => {
+      // Mocking console to prevent test output pollution
+      consoleWarningMock = vi
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {}) as MockInstance
+      consoleErrorMock = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {}) as MockInstance
+    })
+
+    afterEach(() => {
+      consoleWarningMock.mockRestore()
+      consoleErrorMock.mockRestore()
+    })
+
+    it('should be applied on load', async () => {
+      render(<SourceCodeEditor label="foo" defaultValue="hello" />)
+      const input = screen.getByRole('textbox')
+
+      expect(input).toHaveTextContent('hello')
+    })
+  })
+
+  describe('spellcheck', () => {
+    it('should set `spellcheck="true"` on the input', async () => {
+      render(<SourceCodeEditor label="foo" spellcheck />)
+      const input = screen.getByRole('textbox')
+
+      expect(input).toHaveAttribute('spellcheck', 'true')
+    })
+  })
+
+  describe('readOnly', () => {
+    it('should still update value when value prop changes', async () => {
+      const onChange = vi.fn()
+      const { rerender } = render(
+        <SourceCodeEditor
+          label="foo"
+          readOnly
+          value="hello"
+          onChange={onChange}
+        />
+      )
+      const input = screen.getByRole('textbox')
+      expect(input).not.toHaveTextContent('hello world')
+
+      rerender(
+        <SourceCodeEditor
+          label="foo"
+          readOnly
+          value="hello world"
+          onChange={onChange}
+        />
+      )
+
+      const inputUpdated = screen.getByRole('textbox')
+      expect(inputUpdated).toHaveTextContent('hello world')
+    })
+
+    it('should still be focusable', async () => {
+      let elementRef: SourceCodeEditor | null = null
+
+      render(
+        <SourceCodeEditor
+          label="foo"
+          readOnly
+          ref={(component: SourceCodeEditor) => {
+            elementRef = component
+          }}
+        />
+      )
+      const input = screen.getByRole('textbox')
+
+      elementRef!.focus()
+
+      await waitFor(() => {
+        expect(input).toHaveFocus()
+        expect(document.activeElement).toBe(input)
+      })
+    })
+  })
+
+  describe('editable turned off', () => {
+    it('should set `contenteditable` to false', async () => {
+      render(<SourceCodeEditor label="foo" editable={false} />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveAttribute('contenteditable', 'false')
+    })
+
+    it('should not be focusable', async () => {
+      let elementRef: HTMLDivElement | null = null
+
+      render(
+        <SourceCodeEditor
+          label="foo"
+          editable={false}
+          elementRef={(component: HTMLDivElement | null) => {
+            elementRef = component
+          }}
+        />
+      )
+
+      const input = screen.getByRole('textbox')
+
+      elementRef!.focus()
+
+      await waitFor(() => {
+        expect(elementRef).not.toHaveFocus()
+        expect(document.activeElement).not.toBe(input)
+      })
+    })
+  })
+
+  describe('lineNumbers', () => {
+    it('should display line numbers', async () => {
+      const { container } = render(
+        <SourceCodeEditor
+          label="foo"
+          defaultValue={`
+            line1
+            line2
+            line3
+          `}
+          lineNumbers
+        />
+      )
+      const lineNumbers = container.querySelector('[class$="-lineNumbers"]')!
+
+      expect(lineNumbers).toBeInTheDocument()
+      expect(lineNumbers).toBeVisible()
+      expect(lineNumbers).toHaveTextContent('123')
+    })
+  })
+
+  describe('foldGutter', () => {
+    it('should display fold icons', async () => {
+      render(
+        <SourceCodeEditor
+          label="foo"
+          defaultValue={`const func = () => {
+              console.log('foo')
+            }`}
+          foldGutter
+        />
+      )
+
+      const gutterIcon = screen.getByTitle('Fold line')
+
+      expect(gutterIcon).toBeInTheDocument()
+      expect(gutterIcon).toBeVisible()
+    })
+
+    it('should fold lines on click', async () => {
+      const { container } = render(
+        <SourceCodeEditor
+          label="foo"
+          defaultValue={`const func = () => {
+  console.log('foo')
+}`}
+          foldGutter
+        />
+      )
+      const editor = container.querySelector('[class$="-codeEditor"]')
+      const gutterIcon = screen.getByTitle('Fold line')
+
+      expect(gutterIcon).toBeInTheDocument()
+
+      await userEvent.click(gutterIcon)
+
+      const unfoldIcons = screen.getAllByTitle('Unfold line')
+
+      expect(editor).not.toHaveTextContent("console.log('foo')")
+      expect(unfoldIcons[1]).toBeVisible()
+    })
+  })
+
+  describe('highlightActiveLine', () => {
+    it('should not highlight line by default', async () => {
+      const { container } = render(
+        <SourceCodeEditor label="foo" defaultValue={`const myNumber = 8`} />
+      )
+      const allLines = container.querySelectorAll('[class="cm-line"]')!
+
+      expect(allLines[0]).not.toHaveClass('cm-activeLine')
+    })
+
+    it('should highlight line when true', async () => {
+      const { container } = render(
+        <SourceCodeEditor
+          label="foo"
+          defaultValue={`const myNumber = 8`}
+          highlightActiveLine
+        />
+      )
+      const allLines = container.querySelectorAll('[class$="cm-line"]')!
+
+      expect(allLines[0]).toHaveClass('cm-activeLine')
+    })
+  })
+
+  describe('highlightActiveLineGutter', () => {
+    it('should not highlight gutter element by default', async () => {
+      const { container } = render(
+        <SourceCodeEditor
+          label="foo"
+          defaultValue={`const myNumber = 8`}
+          lineNumbers
+        />
+      )
+      const allGutterElements = container.querySelectorAll(
+        '[class$="cm-gutterElement"]'
+      )!
+
+      expect(allGutterElements[0]).not.toHaveClass('cm-activeLineGutter')
+    })
+
+    it('should highlight gutter element when true', async () => {
+      const { container } = render(
+        <SourceCodeEditor
+          label="foo"
+          defaultValue={`const myNumber = 8`}
+          lineNumbers
+          highlightActiveLineGutter
+        />
+      )
+      const allGutterElements = container.querySelectorAll(
+        '[class^="cm-gutterElement"]'
+      )!
+
+      expect(allGutterElements[1]).toHaveClass('cm-activeLineGutter')
+    })
+  })
+
+  describe('direction', () => {
+    it('rtl should apply', async () => {
+      render(
+        <SourceCodeEditor label="foo" defaultValue="hello" direction={'rtl'} />
+      )
+      const input = screen.getByRole('textbox')
+
+      expect(input).toHaveAttribute('dir', 'rtl')
+    })
+  })
+
+  describe('label', () => {
+    it('should be inserted in the ScreenReaderContent', async () => {
+      const { container } = render(
+        <SourceCodeEditor
+          label="this is a label for the SR"
+          defaultValue="hello"
+        />
+      )
+      const label = container.querySelector('[class$="-screenReaderContent"]')
+
+      expect(label).toHaveTextContent('this is a label for the SR')
+    })
+  })
+
+  describe('elementRef', () => {
+    it('should return with the root element', async () => {
+      const elementRef = vi.fn()
+      const { container } = render(
+        <SourceCodeEditor
+          label="foo"
+          defaultValue="hello"
+          elementRef={elementRef}
+        />
+      )
+      const editor = container.querySelector('[class$="-codeEditor"]')
+
+      expect(elementRef).toHaveBeenCalledWith(editor)
+    })
+  })
+
+  describe('containerRef', () => {
+    it('should return with the root element', async () => {
+      const containerRef = vi.fn()
+      const { container } = render(
+        <SourceCodeEditor
+          label="foo"
+          defaultValue="hello"
+          containerRef={containerRef}
+        />
+      )
+      const editorContainer = container.querySelector(
+        '[class$="-codeEditorContainer"]'
+      )
+
+      expect(containerRef).toHaveBeenCalledWith(editorContainer)
+    })
+  })
 })

package/tsconfig.build.json

@@ -11,7 +11,6 @@
     { "path": "../ui-buttons/tsconfig.build.json" },
     { "path": "../ui-text-input/tsconfig.build.json" },
     { "path": "../ui-icons/tsconfig.build.json" },
-    { "path": "../ui-test-utils/tsconfig.build.json" },
     { "path": "../ui-themes/tsconfig.build.json" },
     { "path": "../emotion/tsconfig.build.json" },
     { "path": "../shared-types/tsconfig.build.json" },
@@ -20,8 +19,6 @@
     { "path": "../ui-i18n/tsconfig.build.json" },
     { "path": "../ui-prop-types/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
-    { "path": "../ui-test-locator/tsconfig.build.json" },
-    { "path": "../ui-test-queries/tsconfig.build.json" },
     { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" }
   ]