feat: test containers plugin

src/markdown/plugins/__tests__/containers.spec.ts

@@ -0,0 +1,29 @@
+import each from 'jest-each'
+import MarkdownIt from 'markdown-it'
+import { containerPlugin } from '../containers'
+import { getFragment } from '@/test-utils'
+
+let md: MarkdownIt
+
+describe('plugins/component', () => {
+  beforeEach(() => {
+    md = new MarkdownIt()
+    containerPlugin(md)
+  })
+
+  each([
+    ['tip'],
+    ['warning'],
+    ['danger'],
+    ['info'],
+    ['custom-tip'],
+    ['custom-warning'],
+    ['custom-danger'],
+    ['custom-info'],
+    ['v-pre']
+  ]).test('renders a "%s" block', (fileName: string) => {
+    expect(getFragment(__dirname, `containers/${fileName}.html`)).toEqual(
+      md.render(getFragment(__dirname, `containers/${fileName}.md`))
+    )
+  })
+})

src/markdown/plugins/__tests__/fragments/containers/custom-danger.html

@@ -0,0 +1,3 @@
+<div class="danger custom-block"><p class="custom-block-title">Custom danger</p>
+<p>This is a custom danger block.</p>
+</div>

src/markdown/plugins/__tests__/fragments/containers/custom-danger.md

@@ -0,0 +1,3 @@
+::: danger Custom danger
+This is a custom danger block.
+:::

src/markdown/plugins/__tests__/fragments/containers/custom-info.html

@@ -0,0 +1,3 @@
+<div class="info custom-block"><p class="custom-block-title">Custom info</p>
+<p>This is a custom info block.</p>
+</div>

src/markdown/plugins/__tests__/fragments/containers/custom-info.md

@@ -0,0 +1,3 @@
+::: info Custom info
+This is a custom info block.
+:::

src/markdown/plugins/__tests__/fragments/containers/custom-tip.html

@@ -0,0 +1,3 @@
+<div class="tip custom-block"><p class="custom-block-title">Custom tip</p>
+<p>This is a custom tip block.</p>
+</div>

src/markdown/plugins/__tests__/fragments/containers/custom-tip.md

@@ -0,0 +1,3 @@
+::: tip Custom tip
+This is a custom tip block.
+:::

src/markdown/plugins/__tests__/fragments/containers/custom-warning.html

@@ -0,0 +1,3 @@
+<div class="warning custom-block"><p class="custom-block-title">Custom warning</p>
+<p>This is a custom warning block.</p>
+</div>

src/markdown/plugins/__tests__/fragments/containers/custom-warning.md

@@ -0,0 +1,3 @@
+::: warning Custom warning
+This is a custom warning block.
+:::

src/markdown/plugins/__tests__/fragments/containers/danger.html

@@ -0,0 +1,3 @@
+<div class="danger custom-block"><p class="custom-block-title">Danger</p>
+<p>This is a danger block.</p>
+</div>

src/markdown/plugins/__tests__/fragments/containers/danger.md

@@ -0,0 +1,3 @@
+::: danger
+This is a danger block.
+:::

src/markdown/plugins/__tests__/fragments/containers/info.html

@@ -0,0 +1,3 @@
+<div class="info custom-block"><p class="custom-block-title">Info</p>
+<p>This is an info block.</p>
+</div>

src/markdown/plugins/__tests__/fragments/containers/info.md

@@ -0,0 +1,3 @@
+::: info
+This is an info block.
+:::

src/markdown/plugins/__tests__/fragments/containers/tip.html

@@ -0,0 +1,3 @@
+<div class="tip custom-block"><p class="custom-block-title">Tip</p>
+<p>This is a tip block.</p>
+</div>

src/markdown/plugins/__tests__/fragments/containers/tip.md

@@ -0,0 +1,3 @@
+::: tip
+This is a tip block.
+:::

src/markdown/plugins/__tests__/fragments/containers/v-pre.html

@@ -0,0 +1,3 @@
+<div v-pre>
+<p>This is a v-pre block</p>
+</div>

src/markdown/plugins/__tests__/fragments/containers/v-pre.md

@@ -0,0 +1,3 @@
+::: v-pre
+This is a v-pre block
+:::

src/markdown/plugins/__tests__/fragments/containers/warning.html

@@ -0,0 +1,3 @@
+<div class="warning custom-block"><p class="custom-block-title">Warning</p>
+<p>This is a warning block.</p>
+</div>

src/markdown/plugins/__tests__/fragments/containers/warning.md

@@ -0,0 +1,3 @@
+::: warning
+This is a warning block.
+:::

src/node/markdown/plugins/containers.ts

@@ -4,9 +4,10 @@ import Token from 'markdown-it/lib/token'
 const container = require('markdown-it-container')
 
 export const containerPlugin = (md: MarkdownIt) => {
-  md.use(...createContainer('tip', 'TIP'))
+  md.use(...createContainer('tip', 'Tip'))
-    .use(...createContainer('warning', 'WARNING'))
+    .use(...createContainer('warning', 'Warning'))
-    .use(...createContainer('danger', 'WARNING'))
+    .use(...createContainer('danger', 'Danger'))
+    .use(...createContainer('info', 'Info'))
     // explicitly escape Vue syntax
     .use(container, 'v-pre', {
       render: (tokens: Token[], idx: number) =>