From 8f18b5630a5f7c93a0fc0e68b7dda01901c11b27 Mon Sep 17 00:00:00 2001
From: zdw <dewei.zhou@xiaobao100.com>
Date: Wed, 13 May 2020 23:09:23 +0800
Subject: [PATCH] feat: add directive test case add spread test case

---
 test/directive.test.js | 58 ++++++++++++++++++++++++++++++++++++++++++
 test/spread.test.js    | 42 ++++++++++++++++++++++++++++++
 test/util.js           |  7 +++++
 3 files changed, 107 insertions(+)
 create mode 100644 test/directive.test.js
 create mode 100644 test/spread.test.js
 create mode 100644 test/util.js

diff --git a/test/directive.test.js b/test/directive.test.js
new file mode 100644
index 0000000..688bbd0
--- /dev/null
+++ b/test/directive.test.js
@@ -0,0 +1,58 @@
+import { defineComponent } from 'vue';
+import { createMountedApp } from './util';
+test('directive', () => {
+  const calls = [];
+  const customDirective = {
+    mounted() {
+      calls.push(1);
+    },
+  };
+  const compoentA = defineComponent(
+    {
+      directives: { customDirective },
+      render: () => (
+        <div
+          v-custom-directive={
+            {
+              value: 123,
+              modifiers: { modifier: true },
+              arg: 'arg',
+            }
+          } />
+      ),
+    },
+  );
+  const { node } = createMountedApp(compoentA);
+  expect(calls).toEqual(expect.arrayContaining([1]));
+  expect(node.dirs).toHaveLength(1);
+  expect(node.dirs[0]).toMatchObject({
+    modifiers: { modifier: true }, dir: customDirective, arg: 'arg', value: 123,
+  });
+});
+
+
+test('directive in spread object property', () => {
+  const calls = [];
+  const customDirective = {
+    mounted() {
+      calls.push(1);
+    },
+  };
+  const directives = [
+    {
+      name: 'custom-directive', value: 123, modifiers: { modifier: true }, arg: 'arg',
+    },
+  ];
+  const compoentA = defineComponent(
+    {
+      directives: { customDirective },
+      render: () => (<div {...{ directives }}>123</div>),
+    },
+  );
+  const { node } = createMountedApp(compoentA);
+  expect(calls).toEqual(expect.arrayContaining([1]));
+  expect(node.dirs).toHaveLength(1);
+  expect(node.dirs[0]).toMatchObject({
+    modifiers: { abc: true }, dir: customDirective, arg: 'arg', value: 123,
+  });
+});
diff --git a/test/spread.test.js b/test/spread.test.js
new file mode 100644
index 0000000..235d512
--- /dev/null
+++ b/test/spread.test.js
@@ -0,0 +1,42 @@
+import { createMountedApp } from './util';
+
+test('Spread (single object expression)', () => {
+  const props = {
+    innerHTML: 123,
+    other: '1',
+  };
+  const { node, dom } = createMountedApp({ render: () => <div {...props}></div> });
+  expect(dom.innerHTML).toBe('<div other="1">123</div>');
+  expect(node.props.other).toBe('1');
+});
+
+test('Spread (mixed)', () => {
+  const calls = [];
+  const data = {
+    id: 'hehe',
+    onClick() {
+      calls.push(3);
+    },
+    innerHTML: 2,
+    class: ['a', 'b'],
+  };
+
+  const { node, dom } = createMountedApp({
+    setup: () => () => (
+      <div
+        href="huhu"
+        {...data}
+        class={{ c: true }}
+        on-click={() => calls.push(4)}
+        hook-insert={() => calls.push(2)}
+      />
+    ),
+  });
+  expect(node.props.id).toBe('hehe');
+  expect(node.props.href).toBe('huhu');
+  expect(node.props.class).toBe(['a', 'b', { c: true }]);
+  expect(node.props.innerHTML).toBe('2');
+  expect(calls).toBe([1, 2]);
+  dom.click();
+  expect(calls).toBe([1, 2, 3, 4]);
+});
diff --git a/test/util.js b/test/util.js
new file mode 100644
index 0000000..731513a
--- /dev/null
+++ b/test/util.js
@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+
+export const createMountedApp = function (compoent) {
+  const dom = document.createElement('div');
+  const App = createApp(compoent).mount(dom);
+  return { App, dom, node: App.$.subTree };
+};