feat(app): add initial block-script component

zzhenryquezz · zzhenryquezz · commit 617dc87cd625 · 2023-07-01T17:08:44.000-03:00
diff --git a/packages/app/modules/block-editor/components/BlockScript.spec.ts b/packages/app/modules/block-editor/components/BlockScript.spec.ts
@@ -0,0 +1,213 @@
+import { useMountWrapper } from '__tests__/fixtures/component'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+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 * as Evaluation from '@modules/evaluation/composables/use-evaluation'
+import MonacoEditor from '@components/MonacoEditor.vue'
+
+describe('BlockScript (unit)', () => {
+    const component = useMountWrapper(BlockScript, {
+        shallow: true,
+        global: {
+            stubs: {
+                Block: useBlockStub(),
+            },
+        },
+    })
+
+    afterEach(() => {
+        component.unmount()
+
+        vi.resetAllMocks()
+    })
+
+    function createNode(data?: Partial<MarkdownNodeComponent>) {
+        const node = new MarkdownNodeComponent()
+
+        node.name = 'script'
+        node.attrs = data?.attrs ?? {}
+        node.body = data?.body ?? ''
+
+        return node
+    }
+
+    function createRuntimeMock() {
+        const callbacks = {
+            stdout: [] as Function[],
+            stderr: [] as Function[],
+        }
+
+        return {
+            run: vi.fn(),
+            onDone: vi.fn().mockResolvedValue(undefined),
+            on: (event: keyof typeof callbacks, callback: any) => callbacks[event]?.push(callback),
+            emit: (event: keyof typeof callbacks, ...args: any[]) => {
+                callbacks[event].forEach((cb) => cb(...args))
+            },
+        }
+    }
+
+    function createEvaluationMock() {
+        const spy = vi.fn()
+
+        const runtime = createRuntimeMock()
+
+        spy.mockReturnValue(runtime as any)
+
+        vi.spyOn(Evaluation, 'useEvaluation').mockReturnValue({
+            run: spy,
+        } as any)
+
+        return { spy, runtime }
+    }
+
+    function findRunButton() {
+        return component.wrapper!.findComponent<typeof VBtn>('[data-test-id="run-button"]')
+    }
+
+    function findClearButton() {
+        return component.wrapper!.findComponent('[data-test-id="clear-button"]')
+    }
+
+    function findEditor() {
+        return component.wrapper!.findComponent<typeof MonacoEditor>('[data-test-id="editor"]')
+    }
+
+    function findANSIComponent() {
+        return component.wrapper!.findComponent(ANSICard)
+    }
+
+    it('should render run button', () => {
+        component.mount({
+            props: {
+                modelValue: createNode(),
+            },
+        })
+
+        expect(findRunButton().exists()).toBe(true)
+    })
+
+    it('should mount runtime with node body run button', async () => {
+        const node = createNode({
+            body: 'console.log("Hello world!")',
+        })
+
+        const running = ref(false)
+
+        const { spy } = createEvaluationMock()
+
+        component.mount({
+            props: {
+                'modelValue': node,
+                'running': running.value,
+                'onUpdate:running': (v: boolean) => (running.value = v),
+            },
+        })
+
+        await findRunButton().trigger('click')
+
+        await waitFor(() => !running.value)
+
+        expect(spy).toHaveBeenCalledWith(node.body, { immediate: false, timeout: 10000 })
+    })
+
+    it('should execute script on button click', async () => {
+        const node = createNode({
+            body: 'console.log("Hello world!")',
+        })
+
+        const running = ref(false)
+
+        const { runtime } = createEvaluationMock()
+
+        component.mount({
+            props: {
+                'modelValue': node,
+                'running': running.value,
+                'onUpdate:running': (v: boolean) => (running.value = v),
+            },
+        })
+
+        let done = false
+
+        const runButton = findRunButton()
+        const ANSIComponent = findANSIComponent()
+
+        runtime.onDone.mockImplementation(() => waitFor(() => done))
+
+        await runButton.trigger('click')
+
+        runtime.emit('stdout', 'Hello world!')
+
+        done = true
+
+        await waitFor(() => !running.value)
+
+        expect(ANSIComponent.exists()).toBe(true)
+
+        expect(ANSIComponent.props('modelValue')).toEqual([
+            '🔥 Running code...',
+            '',
+            'Hello world!',
+            '',
+            '🎉 Code executed successfully!',
+        ])
+    })
+
+    it('should update node when edit script', async () => {
+        const node = createNode({
+            body: 'console.log("Hello world!")',
+        })
+
+        createEvaluationMock()
+
+        component.mount({
+            props: {
+                'modelValue': node,
+                'onUpdate:modelValue': (n: MarkdownNodeComponent) => {
+                    node.body = n.body
+                },
+            },
+        })
+
+        const editor = findEditor()
+
+        expect(editor.exists()).toBe(true)
+
+        await editor.setValue('console.log("Update!")')
+
+        await editor.trigger('keydown.ctrl.s')
+
+        expect(node.body).toBe('console.log("Update!")')
+    })
+
+    it('should clear output on clean-button click', async () => {
+        const node = createNode({
+            body: 'console.log("Hello world!")',
+        })
+
+        createEvaluationMock()
+
+        component.mount({
+            props: {
+                modelValue: node,
+            },
+        })
+
+        const ANSIComponent = findANSIComponent()
+        const clearButton = findClearButton()
+
+        await ANSIComponent.setValue(['Hello world!'])
+
+        expect(ANSIComponent.props('modelValue')).toEqual(['Hello world!'])
+
+        await clearButton.trigger('click')
+
+        expect(ANSIComponent.props('modelValue')).toEqual([])
+    })
+})
diff --git a/packages/app/modules/block-editor/components/BlockScript.vue b/packages/app/modules/block-editor/components/BlockScript.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { MarkdownNodeComponent } from '@language-kit/markdown'
+import { useEvaluation } from '@modules/evaluation/composables/use-evaluation'
+
+import Block from './Block.vue'
+import ANSICard from '@modules/evaluation/components/ANSICard.vue'
+// import MonacoEditor from '@modules/monaco/components/MEditor.vue'
+
+const MonacoEditor = defineAsyncComponent(() => import('@modules/monaco/components/MEditor.vue'))
+
+const node = defineModel({
+    type: MarkdownNodeComponent,
+    required: true,
+    validator: (n: MarkdownNodeComponent) => n.name === 'script',
+})
+
+const running = defineModel('running', {
+    type: Boolean,
+    default: false,
+    local: true,
+})
+
+const code = ref(node.value.body)
+const evaluation = useEvaluation()
+const output = ref<string[]>([])
+
+async function run() {
+    output.value = []
+
+    output.value.push('🔥 Running code...')
+    output.value.push('')
+
+    const runtime = await evaluation.run(code.value, {
+        immediate: false,
+        timeout: 10000,
+    })
+
+    runtime.on('stdout', (data) => output.value.push(data))
+
+    runtime.on('stderr', (data) => output.value.push(data))
+
+    runtime.run()
+
+    runtime
+        .onDone()
+        .then(() => {
+            output.value.push('')
+
+            output.value.push('🎉 Code executed successfully!')
+
+            running.value = false
+        })
+        .catch(() => {
+            output.value.push('')
+
+            output.value.push('🚨 Code execution failed!')
+
+            running.value = false
+        })
+}
+
+async function update() {
+    node.value.body = code.value
+
+    node.value = node.value
+}
+</script>
+<template>
+    <block v-model="node">
+        <v-btn data-test-id="run-button" @click="run">
+            {{ $t('run') }}
+        </v-btn>
+
+        <v-btn data-test-id="clear-button" @click="output = []">
+            {{ $t('clear') }}
+        </v-btn>
+
+        <MonacoEditor
+            v-model="code"
+            data-test-id="editor"
+            :line-options="{
+                show: 'off',
+                decorationsWidth: 16,
+                numbersMinChars: 0,
+            }"
+            :padding="{
+                top: 8,
+                bottom: 8,
+            }"
+            :scrollbar="{
+                verticalScrollbarSize: 0,
+                horizontalScrollbarSize: 0,
+                useShadows: false,
+                horizontal: 'hidden',
+                vertical: 'hidden',
+            }"
+            render-line-highlight="none"
+            @keydown.ctrl.s="update"
+        />
+
+        <ANSICard v-model="output" />
+    </block>
+</template>
diff --git a/packages/app/vitest.config.ts b/packages/app/vitest.config.ts
@@ -1,7 +1,10 @@
 import { mergeConfig } from 'vite'
+import { resolve } from 'path'
 import { defineConfig, configDefaults } from 'vitest/config'
 import viteConfig from './vite.config'
 
+const root = resolve(__dirname, '..', '..')
+
 export default mergeConfig(
     viteConfig,
     defineConfig({
@@ -11,6 +14,15 @@ export default mergeConfig(
             exclude: [...configDefaults.exclude, 'packages/core/*'],
             setupFiles: ['__tests__/setup.ts'],
             reporters: 'verbose',
+            alias: [
+                {
+                    find: /^monaco-editor$/,
+                    replacement: resolve(
+                        root,
+                        'node_modules/monaco-editor/esm/vs/editor/editor.api'
+                    ),
+                },
+            ],
         },
     })
 )
