Serialize initial code correctly (exercism#7862)

* Set initial code correctly

* Start adding test cases

---------

Co-authored-by: dem4ron <[email protected]>

Author: iHiD

app/commands/bootcamp/solution/create.rb

@@ -41,13 +41,13 @@ def code
       {
         html: Bootcamp::Solution::GenerateStub.(exercise, user, 'html'),
         css: Bootcamp::Solution::GenerateStub.(exercise, user, 'css')
-      }
+      }.to_json
     when "frontend"
       {
         html: Bootcamp::Solution::GenerateStub.(exercise, user, 'html'),
         css: Bootcamp::Solution::GenerateStub.(exercise, user, 'css'),
         js: Bootcamp::Solution::GenerateStub.(exercise, user, 'js')
-      }
+      }.to_json
     end
   end
 

app/javascript/components/bootcamp/CSSExercisePage/hooks/getInitialEditorCode.tsx

@@ -0,0 +1,35 @@
+import { EditorCode } from './useSetupEditors'
+
+export function getInitialEditorCode(code: CSSExercisePageCode): EditorCode {
+  const fallbackReadonlyRanges = {
+    html: code.defaultReadonlyRanges?.html || [],
+    css: code.defaultReadonlyRanges?.css || [],
+  }
+
+  const fallbackCode: EditorCode = {
+    htmlEditorContent: code.stub.html,
+    cssEditorContent: code.stub.css,
+    storedAt: new Date().toISOString(),
+    readonlyRanges: fallbackReadonlyRanges,
+  }
+
+  if (!code.code) return fallbackCode
+
+  let parsed: { html?: string; css?: string } = {}
+  try {
+    parsed = JSON.parse(code.code)
+  } catch (error) {
+    console.error('Error parsing initial code:', error)
+    return fallbackCode
+  }
+
+  const html = parsed.html?.trim() || code.stub.html
+  const css = parsed.css?.trim() || code.stub.css
+
+  return {
+    htmlEditorContent: html,
+    cssEditorContent: css,
+    storedAt: new Date().toISOString(),
+    readonlyRanges: fallbackReadonlyRanges,
+  }
+}

app/javascript/components/bootcamp/CSSExercisePage/hooks/useSetupEditors.tsx

@@ -4,6 +4,7 @@ import { useEditorHandler } from './useEditorHandler'
 import { updateIFrame } from '../utils/updateIFrame'
 import { EditorView } from 'codemirror'
 import { updateReadOnlyRangesEffect } from '../../JikiscriptExercisePage/CodeMirror/extensions/read-only-ranges/readOnlyRanges'
+import { getInitialEditorCode } from './getInitialEditorCode'
 
 export type ReadonlyRange = { from: number; to: number }
 
@@ -218,38 +219,3 @@ function resetSingleEditor(
   setupEditor(view, { code: '', readonlyRanges: [] })
   setupEditor(view, { code: content, readonlyRanges })
 }
-
-function getInitialEditorCode(code: CSSExercisePageCode): EditorCode {
-  const fallbackReadonlyRanges = {
-    html: code.defaultReadonlyRanges?.html || [],
-    css: code.defaultReadonlyRanges?.css || [],
-  }
-
-  const fallbackCode: EditorCode = {
-    htmlEditorContent: code.stub.html,
-    cssEditorContent: code.stub.css,
-    storedAt: new Date().toISOString(),
-    readonlyRanges: fallbackReadonlyRanges,
-  }
-
-  if (!code.code) return fallbackCode
-
-  let parsed: { html?: string; css?: string } = {}
-
-  try {
-    parsed = JSON.parse(code.code)
-  } catch (error) {
-    console.error('Error parsing initial code:', error)
-    return fallbackCode
-  }
-
-  const html = parsed.html?.trim() || code.stub.html
-  const css = parsed.css?.trim() || code.stub.css
-
-  return {
-    htmlEditorContent: html,
-    cssEditorContent: css,
-    storedAt: new Date().toISOString(),
-    readonlyRanges: fallbackReadonlyRanges,
-  }
-}

test/javascript/components/bootcamp/getInitialEditorCode.test.ts

@@ -0,0 +1,103 @@
+import { getInitialEditorCode } from '@/components/bootcamp/CSSExercisePage/hooks/getInitialEditorCode'
+describe('getInitialEditorCode', () => {
+  const baseStub = {
+    stub: {
+      html: '<div>Hello</div>',
+      css: 'div { color: red; }',
+    },
+    code: undefined,
+    defaultReadonlyRanges: {
+      html: [{ start: 0, end: 5 }],
+      css: [{ start: 0, end: 10 }],
+    },
+  }
+
+  it('returns fallback code when code.code is undefined', () => {
+    const result = getInitialEditorCode(baseStub)
+    expect(result).toMatchObject({
+      htmlEditorContent: baseStub.stub.html,
+      cssEditorContent: baseStub.stub.css,
+      readonlyRanges: baseStub.defaultReadonlyRanges,
+    })
+    expect(typeof result.storedAt).toBe('string')
+  })
+
+  it('returns fallback code and logs error when code.code is invalid JSON', () => {
+    const invalidCode = { ...baseStub, code: '{ invalid JSON' }
+    console.error = jest.fn()
+    const result = getInitialEditorCode(invalidCode)
+    expect(result).toMatchObject({
+      htmlEditorContent: baseStub.stub.html,
+      cssEditorContent: baseStub.stub.css,
+      readonlyRanges: baseStub.defaultReadonlyRanges,
+    })
+    expect(console.error).toHaveBeenCalled()
+  })
+
+  it('uses stub html/css if parsed code is missing both', () => {
+    const input = {
+      ...baseStub,
+      code: JSON.stringify({}),
+    }
+    const result = getInitialEditorCode(input)
+    expect(result.htmlEditorContent).toBe(baseStub.stub.html)
+    expect(result.cssEditorContent).toBe(baseStub.stub.css)
+  })
+
+  it('uses stub html if parsed html is empty', () => {
+    const input = {
+      ...baseStub,
+      code: JSON.stringify({ html: '' }),
+    }
+    const result = getInitialEditorCode(input)
+    expect(result.htmlEditorContent).toBe(baseStub.stub.html)
+  })
+
+  it('uses stub css if parsed css is empty', () => {
+    const input = {
+      ...baseStub,
+      code: JSON.stringify({ css: '' }),
+    }
+    const result = getInitialEditorCode(input)
+    expect(result.cssEditorContent).toBe(baseStub.stub.css)
+  })
+
+  it('trims html/css content if provided in parsed code', () => {
+    const input = {
+      ...baseStub,
+      code: JSON.stringify({
+        html: '  <p>Hi</p>  ',
+        css: '  p { color: blue; }  ',
+      }),
+    }
+    const result = getInitialEditorCode(input)
+    expect(result.htmlEditorContent).toBe('<p>Hi</p>')
+    expect(result.cssEditorContent).toBe('p { color: blue; }')
+  })
+
+  it('handles missing defaultReadonlyRanges', () => {
+    const input = {
+      stub: baseStub.stub,
+      code: undefined,
+      defaultReadonlyRanges: undefined,
+    }
+    const result = getInitialEditorCode(input)
+    expect(result.readonlyRanges).toEqual({ html: [], css: [] })
+  })
+
+  it('handles partially defined defaultReadonlyRanges', () => {
+    const input = {
+      stub: baseStub.stub,
+      code: undefined,
+      defaultReadonlyRanges: {
+        html: [{ start: 0, end: 3 }],
+        // css is undefined
+      },
+    }
+    const result = getInitialEditorCode(input)
+    expect(result.readonlyRanges).toEqual({
+      html: [{ start: 0, end: 3 }],
+      css: [],
+    })
+  })
+})