add support for v-model and some tests (#10)

Author: koca

README.md

@@ -106,20 +106,24 @@ OR:
 
 | Name                 | Type      | Default | Options                              | Description                                           |
 | -------------------- | --------- | ------- | ------------------------------------ | ----------------------------------------------------- |
+| v-model              | `string`  | -       | -                                    | for the `code` prop below                             |
 | code                 | `string`  | `""`    | -                                    | the code                                              |
 | language             | `String`  | `"js"`  | `vue,html,md,ts` + Prismjs Languages | language of the code                                  |
 | lineNumbers          | `Boolean` | `false` | -                                    | Whether to show line numbers or not                   |
 | readonly             | `Boolean` | `false` | -                                    | Indicates if the editor is read only or not.          |
-| emitEvents           | `Boolean` | `false` | -                                    | Indicates if the editor should emit events.                  |
+| emitEvents           | `Boolean` | `false` | -                                    | Indicates if the editor should emit events.           |
 | autoStyleLineNumbers | `Boolean` | `true`  | -                                    | Allow the line number to be styled by this component. |
 
 ## Events
 
-Those events won't fire unless you set the `emitEvents` prop to `true`.
+| Name   | Parameters | Description                     |
+| ------ | ---------- | ------------------------------- |
+| change | `(code)`   | Fires when the code is changed. |
+
+The events below won't be fired unless you set the `emitEvents` prop to `true`.
 
 | Name         | Parameters | Description                                                                 |
 | ------------ | ---------- | --------------------------------------------------------------------------- |
-| change       | `(event)`  | Fires when the value is changed.                                            |
 | keydown      | `(event)`  | This event is emitted when a keydown event happens in editor                |
 | keyup        | `(event)`  | This event is emitted when a keyup event happens in editor                  |
 | editor-click | `(event)`  | This event is emitted  when clicking anywhere in the contenteditable editor |

jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  moduleFileExtensions: ["js", "jsx", "json", "vue"],
+  transform: {
+    "^.+\\.vue$": "vue-jest",
+    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
+      "jest-transform-stub",
+    "^.+\\.jsx?$": "babel-jest"
+  },
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1"
+  },
+  snapshotSerializers: ["jest-serializer-vue"],
+  testMatch: [
+    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
+  ],
+  testURL: "http://localhost/"
+};

package.json

@@ -1,35 +1,13 @@
 {
   "name": "vue-prism-editor",
-  "version": "0.0.1",
-  "description": "A dead simple code editor with syntax highlighting and line numbers.",
-  "keywords": [
-    "vue",
-    "editor",
-    "code editor",
-    "prism"
-  ],
-  "main": "dist/VuePrismEditor.umd.js",
-  "module": "dist/VuePrismEditor.common.js",
-  "unpkg": "dist/VuePrismEditor.umd.min.js",
+  "version": "0.1.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --dest site",
+    "lint": "vue-cli-service lint",
     "build:lib": "vue-cli-service build --target lib --name VuePrismEditor ./src/components/Editor.vue && rimraf dist/demo.html",
-    "lint": "vue-cli-service lint"
+    "test:unit": "vue-cli-service test:unit"
   },
-  "author": {
-    "name": "Mesut Koca",
-    "email": "imesutkoca@gmail.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/koca/vue-prism-editor.git"
-  },
-  "bugs": {
-    "url": "https://github.com/koca/vue-prism-editor/issues"
-  },
-  "homepage": "https://github.com/koca/vue-prism-editor#readme",
-  "license": "MIT",
   "dependencies": {
     "dom-iterator": "^1.0.0",
     "escape-html": "^1.0.3",
@@ -39,8 +17,12 @@
     "@vue/cli-plugin-babel": "^3.0.0-beta.15",
     "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
     "@vue/cli-plugin-pwa": "^3.0.0-beta.15",
+    "@vue/cli-plugin-unit-jest": "^3.0.3",
     "@vue/cli-service": "^3.0.0-beta.15",
     "@vue/eslint-config-prettier": "^3.0.0-beta.15",
+    "@vue/test-utils": "^1.0.0-beta.20",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "^23.0.1",
     "prismjs": "^1.15.0",
     "register-service-worker": "^1.5.2",
     "rimraf": "^2.6.2",
@@ -52,5 +34,28 @@
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
-  ]
+  ],
+  "unpkg": "dist/VuePrismEditor.umd.min.js",
+  "module": "dist/VuePrismEditor.common.js",
+  "main": "dist/VuePrismEditor.umd.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/koca/vue-prism-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/koca/vue-prism-editor/issues"
+  },
+  "homepage": "https://github.com/koca/vue-prism-editor#readme",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "editor",
+    "code editor",
+    "prism"
+  ],
+  "description": "A dead simple code editor with syntax highlighting and line numbers.",
+  "author": {
+    "name": "Mesut Koca",
+    "email": "imesutkoca@gmail.com"
+  }
 }

src/App.vue

@@ -25,7 +25,7 @@
       <Editor
         class="my-editor"
         language="html"
-        :code="code"
+        v-model="code"
         :line-numbers="lineNumbers"
         :readonly="readonly"
         ></Editor>

src/components/Editor.vue

@@ -31,10 +31,14 @@ import selectionRange from "../utils/selection-range.js";
 import { getIndent, getDeindentLevel } from "../utils/getIndent";
 
 export default {
+  model: {
+    prop: "code",
+    event: "change"
+  },
   props: {
     emitEvents: {
       type: Boolean,
-      default: true
+      default: false
     },
     language: {
       type: String,
@@ -220,9 +224,7 @@ export default {
       this.$nextTick(() => {
         this.codeData = plain;
       });
-      if (this.emitEvents) {
-        this.$emit("change", plain);
-      }
+      this.$emit("change", plain);
     },
     restoreStackState(offset) {
       const { plain, selection } = this.undoStack[

tests/unit/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    jest: true
+  }
+};

tests/unit/Editor.spec.js

@@ -0,0 +1,55 @@
+import { mount } from "@vue/test-utils";
+import Editor from "@/components/Editor.vue";
+import "prismjs";
+import { compileToFunctions } from "vue-template-compiler";
+
+document.createRange = jest.fn();
+global.getSelection = jest.fn();
+global.getSelection.mockReturnValue({
+  rangeCount: 1,
+  getRangeAt: jest.fn().mockReturnValue({
+    cloneRange: jest.fn().mockReturnValue({
+      selectNodeContents: jest.fn(),
+      setEnd: jest.fn(),
+      setStart: jest.fn()
+    })
+  })
+});
+
+describe("Editor.vue", () => {
+  test("renders", () => {
+    let code = "initialCode";
+    const wrapper = mount(Editor, {
+      propsData: { code }
+    });
+    expect(wrapper.html()).toContain(code);
+  });
+  test("emits change event", () => {
+    let code = "console.log('test')";
+    const wrapper = mount(Editor);
+    const $pre = wrapper.find(".prism-editor__code");
+    $pre.element.innerHTML = code;
+    $pre.trigger("keyup");
+    expect(wrapper.emitted("change")[0]).toEqual([code]);
+  });
+
+  test("v-model works", () => {
+    const compiled = compileToFunctions(
+      '<div><Editor class="foo" v-model="code" /></div>'
+    );
+    const wrapper = mount(compiled, {
+      data: () => ({
+        code: "test"
+      }),
+      stubs: {
+        Editor
+      }
+    });
+    const $pre = wrapper.find("pre");
+
+    expect(wrapper.vm.code).toEqual("test");
+    $pre.element.innerHTML = "works";
+    wrapper.vm.$children[0].$emit("change", "works");
+    expect(wrapper.vm.code).toEqual("works");
+  });
+});