test: added tests to test behavior of exposeFrontmatter prop on Vue2 …

…and Vue3

test/__snapshots__/exposeFrontmatter.test.ts.snap

@@ -0,0 +1,40 @@
+// Vitest Snapshot v1
+
+exports[`exposeFrontmatter property > Vue2 -- when exposeFrontmatter set to false -- does NOT use defineExpose method from Vue3 1`] = `
+"<script>const frontmatter = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
+export const title = \\"Hello World\\"
+export const description = \\"testing is the path to true happiness\\"
+export const excerpt = undefined
+const head = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
+</script>"
+`;
+
+exports[`exposeFrontmatter property > Vue2 -- when exposeFrontmatter set to true -- does NOT use defineExpose method from Vue3 but does expose frontmattter 1`] = `
+"<script>const frontmatter = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
+export const title = \\"Hello World\\"
+export const description = \\"testing is the path to true happiness\\"
+export const excerpt = undefined
+export default { data() { return { frontmatter } } }
+
+const head = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
+</script>"
+`;
+
+exports[`exposeFrontmatter property > Vue3 -- when exposeFrontmatter set to false -- does NOT use defineExpose to expose frontmatter 1`] = `
+"<script setup>const frontmatter = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
+ const title = \\"Hello World\\"
+ const description = \\"testing is the path to true happiness\\"
+ const excerpt = undefined
+const head = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
+</script>"
+`;
+
+exports[`exposeFrontmatter property > Vue3 -- when exposeFrontmatter set to true -- uses defineExpose method to expose to other components 1`] = `
+"<script setup>const frontmatter = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
+ const title = \\"Hello World\\"
+ const description = \\"testing is the path to true happiness\\"
+ const excerpt = undefined
+defineExpose({ frontmatter })
+const head = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
+</script>"
+`;

test/__snapshots__/head.test.ts.snap

@@ -1,38 +1,5 @@
 // Vitest Snapshot v1
 
-exports[`using HEAD variables > !headEnabled 1`] = `
-"<script setup>const frontmatter = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
- const title = \\"Hello World\\"
- const description = \\"testing is the path to true happiness\\"
- const excerpt = undefined
-defineExpose({ frontmatter })
-const head = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
-</script>"
-`;
-
-exports[`using HEAD variables > default settings 1`] = `
-"<script setup>const frontmatter = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
- const title = \\"Hello World\\"
- const description = \\"testing is the path to true happiness\\"
- const excerpt = undefined
-defineExpose({ frontmatter })
-const head = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
-</script>"
-`;
-
-exports[`using HEAD variables > headEnabled 1`] = `
-"<script setup>import { useHead } from \\"@vueuse/head\\"
-const frontmatter = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\",\\"meta\\":[{\\"property\\":\\"og:title\\",\\"content\\":\\"Hello World\\"},{\\"property\\":\\"og:description\\",\\"content\\":\\"testing is the path to true happiness\\"},{\\"name\\":\\"description\\",\\"content\\":\\"testing is the path to true happiness\\"}]}
- const title = \\"Hello World\\"
- const description = \\"testing is the path to true happiness\\"
- const excerpt = undefined
- const meta = [{\\"property\\":\\"og:title\\",\\"content\\":\\"Hello World\\"},{\\"property\\":\\"og:description\\",\\"content\\":\\"testing is the path to true happiness\\"},{\\"name\\":\\"description\\",\\"content\\":\\"testing is the path to true happiness\\"}]
-defineExpose({ frontmatter })
-const head = {\\"title\\":\\"Hello World\\",\\"meta\\":[{\\"property\\":\\"og:title\\",\\"content\\":\\"Hello World\\"},{\\"property\\":\\"og:description\\",\\"content\\":\\"testing is the path to true happiness\\"},{\\"name\\":\\"description\\",\\"content\\":\\"testing is the path to true happiness\\"}]}
-useHead(head)
-</script>"
-`;
-
 exports[`using HEAD variables > when headEnabled property is set to \`false\`, behavior is same as the default 1`] = `
 "<script setup>const frontmatter = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
  const title = \\"Hello World\\"
@@ -55,39 +22,3 @@ const head = {\\"title\\":\\"Hello World\\",\\"meta\\":[{\\"property\\":\\"og:ti
 useHead(head)
 </script>"
 `;
-
-exports[`using HEAD variables > when the headEnabled property is set, 1`] = `
-"<script setup>import { useHead } from \\"@vueuse/head\\"
-const frontmatter = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\",\\"meta\\":[{\\"property\\":\\"og:title\\",\\"content\\":\\"Hello World\\"},{\\"property\\":\\"og:description\\",\\"content\\":\\"testing is the path to true happiness\\"},{\\"name\\":\\"description\\",\\"content\\":\\"testing is the path to true happiness\\"}]}
- const title = \\"Hello World\\"
- const description = \\"testing is the path to true happiness\\"
- const excerpt = undefined
- const meta = [{\\"property\\":\\"og:title\\",\\"content\\":\\"Hello World\\"},{\\"property\\":\\"og:description\\",\\"content\\":\\"testing is the path to true happiness\\"},{\\"name\\":\\"description\\",\\"content\\":\\"testing is the path to true happiness\\"}]
-defineExpose({ frontmatter })
-const head = {\\"title\\":\\"Hello World\\",\\"meta\\":[{\\"property\\":\\"og:title\\",\\"content\\":\\"Hello World\\"},{\\"property\\":\\"og:description\\",\\"content\\":\\"testing is the path to true happiness\\"},{\\"name\\":\\"description\\",\\"content\\":\\"testing is the path to true happiness\\"}]}
-useHead(head)
-</script>"
-`;
-
-exports[`using HEAD variables > when the headEnabled property is set, all interaction with useHead is enabled 1`] = `
-"<script setup>import { useHead } from \\"@vueuse/head\\"
-const frontmatter = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\",\\"meta\\":[{\\"property\\":\\"og:title\\",\\"content\\":\\"Hello World\\"},{\\"property\\":\\"og:description\\",\\"content\\":\\"testing is the path to true happiness\\"},{\\"name\\":\\"description\\",\\"content\\":\\"testing is the path to true happiness\\"}]}
- const title = \\"Hello World\\"
- const description = \\"testing is the path to true happiness\\"
- const excerpt = undefined
- const meta = [{\\"property\\":\\"og:title\\",\\"content\\":\\"Hello World\\"},{\\"property\\":\\"og:description\\",\\"content\\":\\"testing is the path to true happiness\\"},{\\"name\\":\\"description\\",\\"content\\":\\"testing is the path to true happiness\\"}]
-defineExpose({ frontmatter })
-const head = {\\"title\\":\\"Hello World\\",\\"meta\\":[{\\"property\\":\\"og:title\\",\\"content\\":\\"Hello World\\"},{\\"property\\":\\"og:description\\",\\"content\\":\\"testing is the path to true happiness\\"},{\\"name\\":\\"description\\",\\"content\\":\\"testing is the path to true happiness\\"}]}
-useHead(head)
-</script>"
-`;
-
-exports[`using HEAD variables > with default settings, head variable defined but no references to useHead 1`] = `
-"<script setup>const frontmatter = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
- const title = \\"Hello World\\"
- const description = \\"testing is the path to true happiness\\"
- const excerpt = undefined
-defineExpose({ frontmatter })
-const head = {\\"title\\":\\"Hello World\\",\\"description\\":\\"testing is the path to true happiness\\"}
-</script>"
-`;

test/exposeFrontmatter.test.ts

@@ -0,0 +1,41 @@
+import { readFile } from 'fs/promises'
+import { beforeAll, describe, expect, it } from 'vitest'
+import { composeSfcBlocks } from '../src/pipeline'
+
+let md = ''
+const defineExposeFound = /defineExpose\({ frontmatter }\)/
+const vue2ExposeFound = /export default { data\(\) { return { frontmatter } } }/
+
+describe('exposeFrontmatter property', () => {
+ beforeAll(async () => {
+ md = await readFile('test/fixtures/simple.md', 'utf-8')
+ })
+ it('Vue3 -- when exposeFrontmatter set to true -- uses defineExpose method to expose to other components', () => {
+ const { scriptBlock } = composeSfcBlocks('test/fixtures/simple.md', md, { exposeFrontmatter: true })
+ expect(defineExposeFound.test(scriptBlock)).toBeTruthy()
+ expect(vue2ExposeFound.test(scriptBlock)).toBeFalsy()
+ expect(scriptBlock).toMatchSnapshot()
+ })
+
+ it('Vue3 -- when exposeFrontmatter set to false -- does NOT use defineExpose to expose frontmatter', () => {
+ const { scriptBlock } = composeSfcBlocks('test/fixtures/simple.md', md, { exposeFrontmatter: false })
+ expect(defineExposeFound.test(scriptBlock)).toBeFalsy()
+ expect(vue2ExposeFound.test(scriptBlock)).toBeFalsy()
+ expect(scriptBlock).toMatchSnapshot()
+ })
+
+ it('Vue2 -- when exposeFrontmatter set to true -- does NOT use defineExpose method from Vue3 but does expose frontmattter', () => {
+ const { scriptBlock } = composeSfcBlocks('test/fixtures/simple.md', md, { exposeFrontmatter: true, vueVersion: '2.0' })
+ expect(defineExposeFound.test(scriptBlock)).toBeFalsy()
+ expect(vue2ExposeFound.test(scriptBlock)).toBeTruthy()
+ expect(scriptBlock).toMatchSnapshot()
+ })
+
+ it('Vue2 -- when exposeFrontmatter set to false -- does NOT use defineExpose method from Vue3', () => {
+ const { scriptBlock } = composeSfcBlocks('test/fixtures/simple.md', md, { exposeFrontmatter: false, vueVersion: '2.0' })
+ expect(defineExposeFound.test(scriptBlock)).toBeFalsy()
+ expect(vue2ExposeFound.test(scriptBlock)).toBeFalsy()
+
+ expect(scriptBlock).toMatchSnapshot()
+ })
+})