#171 add tests

Prompt: Add tests for the current editor flow in SourceEditor, SourceEditorCard, and helpers. Cover initialization, read-only toggling, replace-content behavior, metadata/header handling, and the pane button visibility logic. Remove or replace any skipped tests that are now stale. Keep the tests focused on the current implementation, not the old textarea-based flow. After editing, run the test suite and fix any failing assertions.
Co-authored-by: GPT-5.4 mini <gpt-5.4-mini@openai.com>

Author: SharonStrats

test/helpers.test.js

@@ -0,0 +1,102 @@
+jest.mock('../src/components/sourceEditor/SourceEditorCard', () => {
+  return class SourceEditorCard {}
+})
+
+const { getResponseHeaders, fetchContentAndMetadata, setUnedited } = require('../src/helpers')
+
+describe('helpers', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    jest.clearAllMocks()
+  })
+
+  it('reads response headers into metadata', () => {
+    const response = {
+      headers: {
+        get: jest.fn((name) => {
+          if (name === 'content-type') return 'text/turtle; charset=utf-8'
+          if (name === 'allow') return 'GET,PUT'
+          if (name === 'etag') return '"abc"'
+          return null
+        }),
+      },
+    }
+    const store = { each: jest.fn(), any: jest.fn(), anyValue: jest.fn(), sym: jest.fn() }
+    const subject = { uri: 'https://example.org/profile/card' }
+
+    expect(getResponseHeaders(store, subject, response)).toEqual({
+      contentType: 'text/turtle',
+      allowed: 'GET,PUT',
+      eTag: '"abc"',
+    })
+  })
+
+  it('fetches content and applies the returned metadata', async () => {
+    const response = {
+      ok: true,
+      headers: {
+        get: jest.fn((name) => {
+          if (name === 'content-type') return 'text/turtle'
+          if (name === 'allow') return 'GET,PUT'
+          if (name === 'etag') return '"abc"'
+          return null
+        }),
+      },
+      responseText: '<> a <#Thing>.',
+    }
+    const store = {
+      fetcher: {
+        webOperation: jest.fn().mockResolvedValue(response),
+      },
+      each: jest.fn(),
+      any: jest.fn(),
+      anyValue: jest.fn(),
+      sym: jest.fn(),
+    }
+    const subject = { uri: 'https://example.org/profile/card' }
+    const sourcePaneState = { broken: false, contentType: undefined, allowed: undefined, eTag: undefined }
+
+    const result = await fetchContentAndMetadata(store, subject, sourcePaneState)
+
+    expect(result).toEqual({
+      content: '<> a <#Thing>.',
+      metadata: {
+        contentType: 'text/turtle',
+        allowed: 'GET,PUT',
+        eTag: '"abc"',
+      },
+    })
+    expect(sourcePaneState).toEqual({
+      broken: false,
+      contentType: 'text/turtle',
+      allowed: 'GET,PUT',
+      eTag: '"abc"',
+    })
+  })
+
+  it('sets the editor back to read only and shows the edit controls', () => {
+    const editorCard = document.createElement('source-editor-card')
+    editorCard.setReadOnly = jest.fn()
+    document.body.appendChild(editorCard)
+
+    const saveButton = document.createElement('button')
+    saveButton.className = 'sourcePaneSaveButton'
+    const editButton = document.createElement('button')
+    editButton.className = 'sourcePaneEditButton'
+    const compactButton = document.createElement('button')
+    compactButton.className = 'sourcePaneCompactButton'
+    document.body.appendChild(saveButton)
+    document.body.appendChild(editButton)
+    document.body.appendChild(compactButton)
+
+    setUnedited(
+      { uri: 'https://example.org/profile/card' },
+      { broken: false, contentType: 'text/turtle', allowed: 'GET', eTag: '"abc"' }
+    )
+
+    expect(editorCard.setReadOnly).toHaveBeenCalledWith(true)
+    expect(saveButton.className).toContain('sourcePaneControlHidden')
+    expect(editButton.className).toContain('sourcePaneControlVisible')
+    expect(compactButton.className).toContain('sourcePaneControlVisible')
+  })
+})

test/sourceEditor.test.js

@@ -0,0 +1,128 @@
+jest.mock('@codemirror/state', () => {
+  class Compartment {
+    of(value) {
+      return { type: 'compartment-of', value }
+    }
+
+    reconfigure(value) {
+      return { type: 'reconfigure', value }
+    }
+  }
+
+  const EditorState = {
+    create: jest.fn((config) => ({ ...config }))
+  }
+
+  return { Compartment, EditorState }
+})
+
+const createdViews = []
+
+jest.mock('@codemirror/view', () => {
+  class EditorView {
+    constructor({ state, parent }) {
+      this.state = state
+      this.parent = parent
+      this.dom = globalThis.document.createElement('div')
+      this.dispatch = jest.fn((transaction) => {
+        this.lastTransaction = transaction
+        if (transaction.changes) {
+          this.state.doc = transaction.changes.insert
+        }
+      })
+      this.focus = jest.fn()
+      this.destroy = jest.fn()
+      createdViews.push(this)
+      if (parent) {
+        parent.appendChild(this.dom)
+      }
+    }
+  }
+
+  EditorView.editable = {
+    of: jest.fn((value) => ({ type: 'editable', value }))
+  }
+  EditorView.theme = jest.fn((spec, options) => ({ type: 'theme', spec, options }))
+  EditorView.lineWrapping = { type: 'lineWrapping' }
+  EditorView.updateListener = {
+    of: jest.fn((listener) => ({ type: 'updateListener', listener }))
+  }
+
+  return {
+    EditorView,
+    drawSelection: jest.fn(() => ({ type: 'drawSelection' })),
+    keymap: {
+      of: jest.fn((value) => ({ type: 'keymap', value }))
+    },
+    lineNumbers: jest.fn(() => ({ type: 'lineNumbers' }))
+  }
+})
+
+jest.mock('@codemirror/language', () => ({
+  defaultHighlightStyle: { name: 'defaultHighlightStyle' },
+  syntaxHighlighting: jest.fn((style, options) => ({ type: 'syntaxHighlighting', style, options })),
+  HighlightStyle: {
+    define: jest.fn(() => ({ type: 'highlightStyle' }))
+  },
+  StreamLanguage: class {
+    static define(mode) {
+      return { type: 'stream-language', mode }
+    }
+  }
+}))
+
+jest.mock('@codemirror/commands', () => ({
+  defaultKeymap: [{ key: 'default' }],
+  history: jest.fn(() => ({ type: 'history' })),
+  historyKeymap: [{ key: 'history' }]
+}))
+
+jest.mock('@codemirror/theme-one-dark', () => ({
+  oneDark: { name: 'oneDark' }
+}))
+
+const { SourceEditor } = require('../src/components/sourceEditor/SourceEditor')
+
+describe('SourceEditor', () => {
+  beforeEach(() => {
+    createdViews.length = 0
+    document.body.innerHTML = ''
+    jest.clearAllMocks()
+  })
+
+  it('initializes with the provided document text', async () => {
+    const editor = new SourceEditor()
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    await editor.initialize(container, 'hello world', 'text/plain')
+
+    expect(editor.getValue()).toBe('hello world')
+    expect(createdViews).toHaveLength(1)
+    expect(createdViews[0].state.doc).toBe('hello world')
+    expect(createdViews[0].parent).toBe(container)
+  })
+
+  it('replaces content and toggles read only state', async () => {
+    const editor = new SourceEditor()
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    await editor.initialize(container, 'first', 'text/plain')
+    const view = createdViews[0]
+
+    editor.replaceContent('second')
+    expect(editor.getValue()).toBe('second')
+    expect(view.dispatch).toHaveBeenCalledWith({
+      changes: { from: 0, to: 5, insert: 'second' }
+    })
+
+    editor.setReadOnly(true)
+    expect(view.dispatch).toHaveBeenLastCalledWith({
+      effects: { type: 'reconfigure', value: { type: 'editable', value: false } }
+    })
+
+    editor.focusEditor()
+    expect(view.focus).toHaveBeenCalled()
+  })
+})

test/sourceEditorCard.test.js

@@ -0,0 +1,84 @@
+jest.mock('../src/helpers', () => ({
+  fetchContentAndMetadata: jest.fn(),
+  setUnedited: jest.fn(),
+}))
+
+jest.mock('../src/components/sourceEditor/SourceEditor', () => {
+  return {
+    SourceEditor: jest.fn().mockImplementation(() => ({
+      initialize: jest.fn(),
+      getValue: jest.fn(() => 'editor value'),
+      focusEditor: jest.fn(),
+      setReadOnly: jest.fn(),
+      replaceContent: jest.fn(),
+    })),
+  }
+})
+
+const { fetchContentAndMetadata, setUnedited } = require('../src/helpers')
+const { SourceEditor } = require('../src/components/sourceEditor/SourceEditor')
+require('../src/components/sourceEditor/SourceEditorCard')
+
+describe('source-editor-card', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    jest.clearAllMocks()
+  })
+
+  it('renders the filename and initializes the editor with fetched content', async () => {
+    fetchContentAndMetadata.mockResolvedValue({
+      content: 'hello world',
+      metadata: {
+        contentType: 'text/turtle',
+        allowed: 'GET',
+        eTag: '"123"',
+      },
+    })
+
+    const card = document.createElement('source-editor-card')
+    card.store = { fetcher: {} }
+    card.subject = {
+      uri: 'https://testingsolidos.solidcommunity.net/profile/card',
+      value: 'https://testingsolidos.solidcommunity.net/profile/card',
+    }
+    card.sourcePaneState = {
+      broken: false,
+      contentType: undefined,
+      allowed: undefined,
+      eTag: undefined,
+    }
+
+    document.body.appendChild(card)
+    await card.updateComplete
+
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    const editorInstance = SourceEditor.mock.results[0].value
+    expect(fetchContentAndMetadata).toHaveBeenCalledWith(card.store, card.subject, card.sourcePaneState)
+    expect(editorInstance.initialize).toHaveBeenCalled()
+    expect(setUnedited).toHaveBeenCalledWith(card.subject, card.sourcePaneState)
+    expect(card.shadowRoot.textContent).toContain('card')
+  })
+
+  it('delegates editor API methods', () => {
+    const card = document.createElement('source-editor-card')
+    const editorInstance = SourceEditor.mock.results[0]?.value ?? {
+      getValue: jest.fn(() => 'editor value'),
+      focusEditor: jest.fn(),
+      setReadOnly: jest.fn(),
+      replaceContent: jest.fn(),
+    }
+    card._editor = editorInstance
+
+    expect(card.getValue()).toBe('editor value')
+
+    card.focusEditor()
+    expect(editorInstance.focusEditor).toHaveBeenCalled()
+
+    card.setReadOnly(true)
+    expect(editorInstance.setReadOnly).toHaveBeenCalledWith(true)
+
+    card.setValue('updated')
+    expect(editorInstance.replaceContent).toHaveBeenCalledWith('updated')
+  })
+})