From 751eabaae9c597ff905a5e39e14ef4ec6098831c Mon Sep 17 00:00:00 2001
From: Amour1688 <lcz_1996@foxmail.com>
Date: Thu, 14 May 2020 13:24:22 +0800
Subject: [PATCH] with @vue/test-utils

---
 .gitignore         |  1 +
 package.json       |  1 +
 test/index.test.js | 85 ++++++++++++++++++++++++++++++----------------
 3 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/.gitignore b/.gitignore
index cab290e..f02ca0a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,7 @@ pids
 *.pid
 *.seed
 *.pid.lock
+yarn.lock
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
diff --git a/package.json b/package.json
index eb447da..5713389 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
   "devDependencies": {
     "@babel/core": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
+    "@vue/test-utils": "^2.0.0-alpha.4",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",
diff --git a/test/index.test.js b/test/index.test.js
index dc44570..9b9e8fe 100644
--- a/test/index.test.js
+++ b/test/index.test.js
@@ -1,21 +1,32 @@
-import { createApp } from 'vue';
-
-const render = (app) => {
-  const root = document.createElement('div');
-  document.body.append(root);
-  createApp(app).mount(root);
-  return root;
-};
+import { shallowMount } from '@vue/test-utils';
 
 test('should render with setup', () => {
-  const App = {
+  const wrapper = shallowMount({
     setup() {
       return () => <div>123</div>;
     },
-  };
+  });
+  expect(wrapper.text()).toBe('123');
+});
 
-  const wrapper = render(App);
-  expect(wrapper.innerHTML).toBe('<div>123</div>');
+test('Extracts attrs', () => {
+  const wrapper = shallowMount({
+    setup() {
+      return () => <div id="hi" dir="ltr" />;
+    },
+  });
+  expect(wrapper.element.id).toBe('hi');
+  expect(wrapper.element.dir).toBe('ltr');
+});
+
+test('Binds attrs', () => {
+  const id = 'foo';
+  const wrapper = shallowMount({
+    setup() {
+      return () => <div>{id}</div>;
+    },
+  });
+  expect(wrapper.text()).toBe('foo');
 });
 
 test('should not fallthrough with inheritAttrs: false', () => {
@@ -23,12 +34,14 @@ test('should not fallthrough with inheritAttrs: false', () => {
 
   Child.inheritAttrs = false;
 
-  const Parent = () => (
-    <Child class="parent" foo={1} />
-  );
-
-  const wrapper = render(Parent);
-  expect(wrapper.innerHTML).toBe('<div>1</div>');
+  const wrapper = shallowMount({
+    setup() {
+      return () => (
+        <Child class="parent" foo={1} />
+      );
+    },
+  });
+  expect(wrapper.text()).toBe('1');
 });
 
 
@@ -38,28 +51,40 @@ test('should render', () => {
       return <div>1234</div>;
     },
   };
-  const wrapper = render(App);
-  expect(wrapper.innerHTML).toBe('<div>1234</div>');
+  const wrapper = shallowMount(App);
+  expect(wrapper.html()).toBe('<div>1234</div>');
 });
 
 test('xlink:href', () => {
-  const wrapper = render(() => <use xlinkHref={'#name'}></use>);
-  expect(wrapper.innerHTML).toBe('<use xlink:href="#name"></use>');
+  const wrapper = shallowMount({
+    setup() {
+      return () => <use xlinkHref={'#name'}></use>;
+    },
+  });
+  expect(wrapper.attributes()['xlink:href']).toBe('#name');
 });
 
-// test('Merge class', () => {
-//   const wrapper = render(() => <div class="a" {...{ class: 'b' } } />);
-//   expect(wrapper.innerHTML).toBe('<div class="a b"></div>');
-// });
+// // test('Merge class', () => {
+// //   const wrapper = render(() => <div class="a" {...{ class: 'b' } } />);
+// //   expect(wrapper.innerHTML).toBe('<div class="a b"></div>');
+// // });
 
 test('JSXSpreadChild', () => {
   const a = ['1', '2'];
-  const wrapper = render(() => <div>{[...a]}</div>);
-  expect(wrapper.innerHTML).toBe('<div>12</div>');
+  const wrapper = shallowMount({
+    setup() {
+      return () => <div>{[...a]}</div>;
+    },
+  });
+  expect(wrapper.text).toBe('12');
 });
 
 test('domProps input[value]', () => {
   const val = 'foo';
-  const wrapper = render(() => <input type="text" value={val} />);
-  expect(wrapper.innerHTML).toBe('<input type="text">');
+  const wrapper = shallowMount({
+    setup() {
+      return () => <input type="text" value={val} />;
+    },
+  });
+  expect(wrapper.html()).toBe('<input type="text">');
 });