Add tests for plugins (#792)

* Add tests for plugins

The first test fails because the rules property of plugins doesn't work
as expected.

* Fix plugins tes

test/index.js

@@ -11,6 +11,7 @@ import 'babel-polyfill'
  * Tests.
  */
 
+import './plugins'
 import './rendering'
 import './schema'
 import './serializers'

test/plugins/fixtures/custom-rules/index.js

@@ -0,0 +1,28 @@
+
+import { Mark } from '../../../..'
+
+const BOLD = {
+  fontWeight: 'bold'
+}
+
+function decorate(text, block) {
+  let { characters } = text
+  let second = characters.get(1)
+  const mark = Mark.create({ type: 'bold' })
+  const marks = second.marks.add(mark)
+  second = second.merge({ marks })
+  characters = characters.set(1, second)
+  return characters
+}
+
+export const plugins = [{
+  schema: {
+    marks: {
+      bold: BOLD
+    },
+    rules: [{
+      match: () => true,
+      decorate,
+    }]
+  }
+}]

test/plugins/fixtures/custom-rules/input.yaml

@@ -0,0 +1,8 @@
+
+nodes:
+  - kind: block
+    type: default
+    nodes:
+      - kind: text
+        ranges:
+          - text: word

test/plugins/fixtures/custom-rules/output.html

@@ -0,0 +1,4 @@
+<div data-slate-editor="true" contenteditable="true" role="textbox">
+    <div style="position:relative;"><span><span>w</span><span><span style="font-weight:bold;">o</span></span><span>rd</span></span>
+    </div>
+</div>

test/plugins/index.js

@@ -0,0 +1,65 @@
+
+import React from 'react'
+import ReactDOM from 'react-dom/server'
+import assert from 'assert'
+import cheerio from 'cheerio'
+import fs from 'fs-promise'
+import readYaml from 'read-yaml-promise'
+import { Editor, Raw } from '../..'
+import { resolve } from 'path'
+
+/**
+ * Tests.
+ */
+
+describe.only('plugins', () => {
+  const tests = fs.readdirSync(resolve(__dirname, './fixtures'))
+
+  for (const test of tests) {
+    if (test[0] === '.') continue
+
+    it(test, async () => {
+      const dir = resolve(__dirname, './fixtures', test)
+      const input = await readYaml(resolve(dir, 'input.yaml'))
+      const output = await fs.readFile(resolve(dir, 'output.html'), 'utf8')
+      const props = {
+        state: Raw.deserialize(input, { terse: true }),
+        onChange: () => {},
+        ...require(dir)
+      }
+
+      const string = ReactDOM.renderToStaticMarkup(<Editor {...props} />)
+      const expected = cheerio
+        .load(output)
+        .html()
+        .trim()
+        .replace(/\n/gm, '')
+        .replace(/>\s*</g, '><')
+
+      assert.equal(clean(string), expected)
+    })
+  }
+})
+
+/**
+ * Clean a renderer `html` string, removing dynamic attributes.
+ *
+ * @param {String} html
+ * @return {String}
+ */
+
+function clean(html) {
+  const $ = cheerio.load(html)
+
+  $('*').each((i, el) => {
+    $(el).removeAttr('data-key')
+    $(el).removeAttr('data-offset-key')
+  })
+
+  $.root().children().removeAttr('autocorrect')
+  $.root().children().removeAttr('spellcheck')
+  $.root().children().removeAttr('style')
+  $.root().children().removeAttr('data-gramm')
+
+  return $.html()
+}