fix(app): fix tests errors

Author: zzhenryquezz

packages/app/__tests__/setup.ts

@@ -1,3 +1,4 @@
+import i18n from '@plugins/i18n'
 import { config } from '@vue/test-utils'
 
 config.global.stubs['fa-icon'] = true
@@ -7,6 +8,7 @@ config.global.config.warnHandler = () => true
 
 config.global.renderStubDefaultSlot = true
 config.global.mocks.$t = (key: string) => key
+config.global.plugins = [i18n]
 
 window.clientConfig = {
     useCase: () => Promise.reject('Not implemented'),

packages/app/modules/block-editor/__tests__/factories.ts

@@ -1,4 +1,11 @@
-import { MarkdownNode, MarkdownNodeHeading, MarkdownNodeParagraph } from '@language-kit/markdown'
+import {
+    MarkdownNode,
+    MarkdownNodeHeading,
+    MarkdownNodeParagraph,
+    MarkdownParser,
+} from '@language-kit/markdown'
+
+const parser = new MarkdownParser()
 
 export function createParagraph(data: Partial<MarkdownNodeParagraph> = {}) {
     const node = new MarkdownNodeParagraph()
@@ -37,6 +44,10 @@ export function createHeadingFactory() {
 
         Object.assign(node, data)
 
+        node.tokens = parser.toTokens(node.body, {
+            includeEndOfFileToken: false,
+        })
+
         return node
     })
 }

packages/app/modules/block-editor/components/BlockHeading.spec.ts

@@ -52,7 +52,7 @@ describe('BlockHeading (unit)', () => {
     it('should render HTMLContentEditable component', () => {
         const node = factory.make({ level: 1 })
 
-        editor.create(node)
+        editor.add(node)
 
         component.mount({
             props: {
@@ -66,7 +66,7 @@ describe('BlockHeading (unit)', () => {
     it('should use h1 element as  v-model', () => {
         const node = factory.make({ level: 1 })
 
-        editor.create(node)
+        editor.add(node)
 
         component.mount({
             props: {
@@ -76,57 +76,62 @@ describe('BlockHeading (unit)', () => {
 
         const editable = findEditable()
 
-        expect(editable.props('modelValue')).toBe('<h1>Heading</h1>')
+        expect(editable.props('modelValue')).toBe('Heading')
     })
 
     it.each([
-        ['Hello word', 'Hello&nbsp;word'],
-        ['Hello <strong>bold</strong>', 'Hello&nbsp;<strong>bold</strong>'],
-    ])('should transform white-spaces %s before use the html', (input, expected) => {
-        const node = factory.make({
-            level: 1,
-            body: input,
-        })
+        ['Hello word ', 'Hello word&nbsp;'],
+        ['Hello <strong>bold</strong> ', 'Hello <strong>bold</strong>&nbsp;'],
+    ])(
+        'should transform white-spaces at end of string %s before use the html',
+        (input, expected) => {
+            const node = factory.make({
+                level: 1,
+                body: input,
+            })
 
-        component.mount({
-            props: {
-                modelValue: node,
-            },
-        })
+            component.mount({
+                props: {
+                    modelValue: node,
+                },
+            })
 
-        const editable = findEditable()
+            const editable = findEditable()
 
-        expect(editable.props('modelValue')).toBe(`<h1>${expected}</h1>`)
-    })
+            expect(editable.props('modelValue')).toBe(`${expected}`)
+        }
+    )
 
     it('should change heading element based on node level', async () => {
         const node = ref(factory.make({ level: 3 }))
 
-        editor.create(node.value)
+        editor.add(node.value)
 
-        component.mount({
+        const wrapper = component.mount({
             props: {
                 modelValue: node.value,
             },
         })
 
         const editable = findEditable()
 
-        expect(editable.props('modelValue')).toBe('<h3>Heading</h3>')
+        expect(editable.props('modelValue')).toBe('Heading')
+
+        expect(wrapper.html()).toContain('<h3>')
 
         node.value.level = 2
 
         await nextTick()
 
-        expect(editable.props('modelValue')).toBe('<h2>Heading</h2>')
+        expect(wrapper.html()).toContain('<h2>')
     })
 
     it.each(['blur', 'keydown.enter', 'keydown.ctrl.s'])(
         'should update node with %s event',
         async (event) => {
             const node = factory.make()
 
-            editor.create(node)
+            editor.add(node)
 
             component.mount({
                 props: {
@@ -140,18 +145,18 @@ describe('BlockHeading (unit)', () => {
 
             const editable = findEditable()
 
-            await editable.setValue('<h1>Updated</h1>')
+            await editable.setValue('Updated')
 
             await editable.trigger(event)
 
-            expect(node.body).toBe('Updated')
+            expect(node.body).toBe('# Updated')
         }
     )
 
     it('should focus HTMLContentEditable when block is selected', async () => {
         const node = factory.make()
 
-        editor.create(node)
+        editor.add(node)
 
         component.mount({
             props: {

packages/app/modules/block-editor/components/BlockParagraph.spec.ts

@@ -174,6 +174,6 @@ describe('BlockParagraph', () => {
 
         expect(input).toHaveBeenCalledOnce()
 
-        expect(node.body).toBe('Updated')
+        expect(node.body).toBe('Updated\n')
     })
 })

packages/app/modules/block-editor/components/BlockScript.spec.ts

@@ -4,16 +4,16 @@ import { MarkdownNodeComponent } from '@language-kit/markdown'
 import { useBlockStub } from '../__tests__/stubs'
 
 import BlockScript from './BlockScript.vue'
-import VBtn from '@components/VBtn.vue'
 import ANSICard from '@modules/evaluation/components/ANSICard.vue'
-import { waitFor } from '@composables/utils'
 import MonacoEditor from '@components/MonacoEditor.vue'
 import { flushPromises } from '@vue/test-utils'
+import pinia from '@plugins/pinia'
 
 describe('BlockScript (unit)', () => {
     const component = useMountWrapper(BlockScript, {
         shallow: true,
         global: {
+            plugins: [pinia],
             stubs: {
                 Block: useBlockStub(),
             },

packages/app/modules/block-editor/components/Editor.spec.ts

@@ -30,7 +30,7 @@ describe('Editor (unit)', () => {
     })
 
     function createBlock(node: MarkdownNode) {
-        editor.create(node)
+        editor.add(node)
 
         const toolbar = document.createElement('div')
 

packages/app/modules/block-editor/components/NewBlockMenu.spec.ts

@@ -3,7 +3,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import NewBlockMenu from './NewBlockMenu.vue'
 
 import { useMountWrapper } from '__tests__/fixtures/component'
-import i18n from '@plugins/i18n'
+
 import {
     MarkdownNode,
     MarkdownNodeComponent,
@@ -13,9 +13,7 @@ import {
 
 describe('NewBlockMenu', () => {
     const component = useMountWrapper(NewBlockMenu, {
-        global: {
-            plugins: [i18n],
-        },
+        shallow: true,
     })
 
     afterEach(component.unmount)

packages/app/modules/block-editor/components/Toolbar.spec.ts

@@ -24,7 +24,7 @@ describe('Toolbar (unit)', () => {
     function createManyNodes(length = 5) {
         const nodes = createManyParagraphs(length)
 
-        editor.createAll(nodes)
+        editor.addAll(nodes)
 
         return nodes
     }