test: add additional test cases

Author: danielroe

src/utils/template.ts

@@ -193,7 +193,7 @@ export async function transpileVueTemplate(
   return s.toString()
 }
 
-function replaceQuote(code: string, target: string, replace: string): string {
+export function replaceQuote(code: string, target: string, replace: string): string {
   let res = code
 
   if (res.includes(target)) {

test/mkdist.test.ts

@@ -2,8 +2,9 @@ import { mkdir, readFile, rm, writeFile } from 'node:fs/promises'
 import { join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { mkdist } from 'mkdist'
-import { afterAll, describe, expect, it } from 'vitest'
+import { afterAll, describe, expect, it, vi } from 'vitest'
 import { vueLoader } from '../src/mkdist'
+import { cleanupBreakLine, defineDefaultBlockLoader } from '../src/utils/mkdist'
 
 describe('transform typescript script setup', () => {
   const tmpDir = fileURLToPath(new URL('../node_modules/.tmp/fixtures', import.meta.url))
@@ -249,6 +250,155 @@ describe('transform typescript script setup', () => {
       "
     `)
   })
+  it('generates contents with multiple blocks', async () => {
+    const src = `
+      <template>
+        <div>Hello World</div>
+      </template>
+
+      <script lang="ts">
+        export default { name: 'App' }
+      </script>
+
+      <style scoped>
+        div { color: red; }
+      </style>`
+
+    expect(await fixture(src)).toMatchInlineSnapshot(`
+      "<template>
+              <div>Hello World</div>
+      </template>
+
+      <script>
+      export default { name: "App" };
+      </script>
+
+      <style scoped>
+              div { color: red; }
+      </style>
+      "
+    `)
+  })
+
+  it('handles empty blocks gracefully', async () => {
+    const src = `
+      <template></template>
+      <script></script>
+      <style></style>`
+
+    expect(await fixture(src)).toMatchInlineSnapshot(`
+      "
+            <template></template>
+            <script></script>
+            <style></style>"
+    `)
+  })
+
+  it('sorts blocks by offset', async () => {
+    const src = `
+      <style scoped>
+        div { color: red; }
+      </style>
+
+      <script lang="ts">
+        export default { name: 'App' }
+      </script>
+
+      <template>
+        <div>Hello World</div>
+      </template>`
+
+    expect(await fixture(src)).toMatchInlineSnapshot(`
+      "<style scoped>
+              div { color: red; }
+      </style>
+
+      <script>
+      export default { name: "App" };
+      </script>
+
+      <template>
+              <div>Hello World</div>
+      </template>
+      "
+    `)
+  })
+
+  it('handles attributes in blocks', async () => {
+    const src = `
+      <template lang="html">
+        <div>Hello World</div>
+      </template>
+
+      <script lang="ts">
+        export default { name: 'App' }
+      </script>`
+
+    expect(await fixture(src)).toMatchInlineSnapshot(`
+      "<template lang="html">
+              <div>Hello World</div>
+      </template>
+
+      <script>
+      export default { name: "App" };
+      </script>
+      "
+    `)
+  })
+
+  it('removes unnecessary break lines', async () => {
+    const src = `
+      <template>
+
+
+        <div>Hello World</div>
+
+
+      </template>
+
+      <script lang="ts">
+
+
+        export default { name: 'App' }
+
+
+      </script>`
+
+    expect(await fixture(src)).toMatchInlineSnapshot(`
+      "<template>
+              <div>Hello World</div>
+      </template>
+
+      <script>
+      export default { name: "App" };
+      </script>
+      "
+    `)
+  })
+
+  it('handles invalid .vue files gracefully', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+    const invalidVue = `<template><div></div>` // Missing closing tags
+    await expect(fixture(invalidVue)).rejects.toThrowError()
+    expect(console.error).toHaveBeenCalledWith(expect.objectContaining({ message: 'Element is missing end tag.' }))
+  })
+
+  it('cleans up excessive break lines', () => {
+    const input = '\n\n\n<div>Test</div>\n\n\n'
+    const output = cleanupBreakLine(input)
+    expect(output).toBe('<div>Test</div>')
+  })
+
+  it('handles unsupported block types in defineDefaultBlockLoader', async () => {
+    const unsupportedBlock = { type: 'unknown', attrs: {}, content: 'test' }
+    // @ts-expect-error invalid unsupported block
+    const result = await defineDefaultBlockLoader({ type: 'script', defaultLang: 'js' })(unsupportedBlock, {
+      loadFile: async () => [],
+      rawInput: { path: '', srcPath: '' },
+      addOutput: () => {},
+    })
+    expect(result).toBeUndefined()
+  })
 
   async function fixture(src: string): Promise<string> {
     await rm(tmpDir, { force: true, recursive: true })

test/setup.test.ts

@@ -234,6 +234,13 @@ describe('transform typescript script setup', () => {
     await expect(fixture('<script setup lang="ts">defineModel("foo", "bar")</script>')).rejects.toThrow(`[vue-sfc-transformer] defineModel()'s second argument must be an object.`)
   })
 
+  it('handles edge cases in processDefineProps', async () => {
+    const script = `<script setup lang=\"ts\">defineProps<{}>()</script>`
+    const sfc = parse(script, { filename: 'test.vue', ignoreEmpty: true })
+    const result = await preTranspileScriptSetup(sfc.descriptor, 'test.vue')
+    expect(result.content).toContain('defineProps({})')
+  })
+
   async function fixture(src: string): Promise<string> {
     const sfc = parse(src, {
       filename: 'test.vue',

test/template.test.ts

@@ -2,7 +2,7 @@ import { createRequire } from 'node:module'
 import { transform } from 'esbuild'
 import { resolveModulePath } from 'exsolve'
 import { describe, expect, it } from 'vitest'
-import { transpileVueTemplate } from '../src/utils/template'
+import { replaceQuote, transpileVueTemplate } from '../src/utils/template'
 
 describe('transform typescript template', () => {
   it('v-for', async () => {
@@ -172,6 +172,18 @@ describe('transform typescript template', () => {
     `)
   })
 
+  it('handles deeply nested templates', async () => {
+    const nestedTemplate = `<div><span><p>{{ (data as any).value }}</p></span></div>`
+    const result = await fixture(nestedTemplate)
+    expect(result).toEqual('<div><span><p>{{ data.value }}</p></span></div>')
+  })
+
+  it('replaces quotes correctly', () => {
+    const input = `\"test\"`
+    const output = replaceQuote(input, '\"', '\'')
+    expect(output).toBe(`'test'`)
+  })
+
   async function fixture(src: string) {
     const requireFromVue = createRequire(resolveModulePath('vue'))
     const { parse } = requireFromVue('@vue/compiler-dom') as typeof import('@vue/compiler-dom')