feat: support for vue2 (#88)

* chore: initial setup for vue2 packages * feat: basic Vue 2 Component * feat(vue2): add more test cases * test(preset): add more cases to test in preset * test(preset-vue2): add more cases to test tags processing * fix(preset): tag node checking * test(preset-vue): more coverage for vue preset * refactor(vue2): move default export to plugin install func * feat(example-vue2): add vue2 example to examples folder * chore(example-vue2): remove unused npm scripts * chore: add vue 2 example in main README * chore: update package.json descriptions
2026-06-23 20:40:34 +03:00 · 2021-05-19 19:41:56 +02:00
parent 64b4778cfb
commit cbccbaf896
38 changed files with 13439 additions and 30 deletions
@@ -0,0 +1,74 @@
+import preset from '@bbob/preset-vue';
+import { render, fireEvent } from '@testing-library/vue'
+import Component from '../src/Component'
+
+const renderBBCode = (input, options) => {
+  const { html } = render(Component, {
+    props: {
+      plugins: [preset()],
+      options,
+    },
+    slots: {
+      default: input
+    }
+  })
+
+  return html()
+}
+
+describe('@bbob/vue2', () => {
+  test('[b]bolded text[/b]', () => {
+    const html = renderBBCode('[b]bolded text[/b]');
+
+    expect(html).toBe('<span><span style="font-weight: bold;">bolded text</span></span>')
+  });
+
+  test('[i]italicized text[/i]', () => {
+    const html = renderBBCode('[i]italicized text[/i]');
+
+    expect(html).toBe('<span><span style="font-style: italic;">italicized text</span></span>')
+  });
+
+  test('[u]underlined text[/u]', () => {
+    const html = renderBBCode('[u]underlined text[/u]');
+
+    expect(html).toBe('<span><span style="text-decoration: underline;">underlined text</span></span>')
+  });
+
+  test('[s]strikethrough text[/s]', () => {
+    const html = renderBBCode('[s]strikethrough text[/s]');
+
+    expect(html).toBe('<span><span style="text-decoration: line-through;">strikethrough text</span></span>')
+  });
+
+  test('[url]https://en.wikipedia.org[/url]', () => {
+    const html = renderBBCode('[url]https://en.wikipedia.org[/url]');
+
+    expect(html).toBe('<span><a href="https://en.wikipedia.org">https://en.wikipedia.org</a></span>')
+  });
+
+  test('[b]Testing[/b][hr]', () => {
+    const html = renderBBCode('[b]Testing[/b][hr]');
+
+    expect(html).toBe(`<span><span style="font-weight: bold;">Testing</span>
+<hr></span>`)
+  });
+
+  test('render empty <slot></slot>', () => {
+    const { html } = render(Component, {
+      props: {
+        plugins: [preset()],
+      }
+    })
+
+    expect(html()).toBe('')
+  })
+
+  describe('options.onlyAllowTags', () => {
+    test('render "[Super Feature] and [i]super[/i]" when only [i] allowed', () => {
+      const html = renderBBCode('[Super Feature] and [i]super[/i]', { onlyAllowTags: ['i'] });
+
+      expect(html).toBe('<span>[Super Feature] and <span style="font-style: italic;">super</span></span>')
+    });
+  });
+})