chore: 🤖 add snapshot testing
This commit is contained in:
Binbin Sun
@@ -1,3 +1,4 @@
|
||||
module.exports = {
|
||||
preset: '@vue/cli-plugin-unit-jest'
|
||||
}
|
||||
preset: "@vue/cli-plugin-unit-jest",
|
||||
snapshotSerializers: ["jest-serializer-vue"]
|
||||
};
|
||||
|
||||
14
package-lock.json
generated
14
package-lock.json
generated
@@ -3719,7 +3719,7 @@
|
||||
},
|
||||
"condense-newlines": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npm.taobao.org/condense-newlines/download/condense-newlines-0.2.1.tgz",
|
||||
"resolved": "https://registry.npmjs.org/condense-newlines/-/condense-newlines-0.2.1.tgz",
|
||||
"integrity": "sha1-PemFVTE5R10yUCyDsC9gaE0kxV8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@@ -3730,7 +3730,7 @@
|
||||
"dependencies": {
|
||||
"extend-shallow": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npm.taobao.org/extend-shallow/download/extend-shallow-2.0.1.tgz",
|
||||
"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
|
||||
"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@@ -3739,7 +3739,7 @@
|
||||
},
|
||||
"kind-of": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-3.2.2.tgz",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
|
||||
"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@@ -7396,7 +7396,7 @@
|
||||
},
|
||||
"is-whitespace": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npm.taobao.org/is-whitespace/download/is-whitespace-0.3.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/is-whitespace/-/is-whitespace-0.3.0.tgz",
|
||||
"integrity": "sha1-Fjnssb4DauxppUy7QBz77XEUq38=",
|
||||
"dev": true
|
||||
},
|
||||
@@ -8090,7 +8090,7 @@
|
||||
},
|
||||
"jest-serializer-vue": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npm.taobao.org/jest-serializer-vue/download/jest-serializer-vue-2.0.2.tgz",
|
||||
"resolved": "https://registry.npmjs.org/jest-serializer-vue/-/jest-serializer-vue-2.0.2.tgz",
|
||||
"integrity": "sha1-sjjvKGNX7GtIBCG9RxRQUJh9WbM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@@ -10601,7 +10601,7 @@
|
||||
},
|
||||
"pretty": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/pretty/download/pretty-2.0.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/pretty/-/pretty-2.0.0.tgz",
|
||||
"integrity": "sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@@ -10612,7 +10612,7 @@
|
||||
"dependencies": {
|
||||
"extend-shallow": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npm.taobao.org/extend-shallow/download/extend-shallow-2.0.1.tgz",
|
||||
"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
|
||||
"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
"babel-eslint": "^10.0.3",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-plugin-vue": "^5.0.0",
|
||||
"jest-serializer-vue": "^2.0.2",
|
||||
"less": "^3.10.3",
|
||||
"less-loader": "^5.0.0",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
|
||||
72
tests/unit/__snapshots__/example.spec.js.snap
Normal file
72
tests/unit/__snapshots__/example.spec.js.snap
Normal file
@@ -0,0 +1,72 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`VueTreeList renders correctly 1`] = `
|
||||
<div class="vtl">
|
||||
<!---->
|
||||
<div class="">
|
||||
<div class="vtl">
|
||||
<div>
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div id="1" draggable="false" class="vtl-tree-node vtl-drag-disabled"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-right"></i></span> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 1
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="vtl-tree-margin" style="display: none;">
|
||||
<div class="vtl">
|
||||
<div>
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div id="2" draggable="true" class="vtl-tree-node">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-file"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 1-2
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;">
|
||||
<!---->
|
||||
<!----> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vtl">
|
||||
<div>
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div id="3" draggable="true" class="vtl-tree-node vtl-disabled">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 2
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="vtl">
|
||||
<div>
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div id="4" draggable="true" class="vtl-tree-node">
|
||||
<!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 3
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -3,48 +3,47 @@ import { Tree, VueTreeList } from "@/index";
|
||||
|
||||
describe("VueTreeList", () => {
|
||||
it("renders correctly", () => {
|
||||
const tree = new Tree([
|
||||
{
|
||||
name: "Node 1",
|
||||
id: 1,
|
||||
pid: 0,
|
||||
dragDisabled: true,
|
||||
addTreeNodeDisabled: true,
|
||||
addLeafNodeDisabled: true,
|
||||
editNodeDisabled: true,
|
||||
delNodeDisabled: true,
|
||||
children: [
|
||||
{
|
||||
name: "Node 1-2",
|
||||
id: 2,
|
||||
isLeaf: true,
|
||||
pid: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Node 2",
|
||||
id: 3,
|
||||
pid: 0,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
name: "Node 3",
|
||||
id: 4,
|
||||
pid: 0
|
||||
}
|
||||
]);
|
||||
|
||||
const wrapper = mount(VueTreeList, {
|
||||
propsData: {
|
||||
model: new Tree([
|
||||
{
|
||||
name: "Node 1",
|
||||
id: 1,
|
||||
pid: 0,
|
||||
dragDisabled: true,
|
||||
addTreeNodeDisabled: true,
|
||||
addLeafNodeDisabled: true,
|
||||
editNodeDisabled: true,
|
||||
delNodeDisabled: true,
|
||||
children: [
|
||||
{
|
||||
name: "Node 1-2",
|
||||
id: 2,
|
||||
isLeaf: true,
|
||||
pid: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Node 2",
|
||||
id: 3,
|
||||
pid: 0,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
name: "Node 3",
|
||||
id: 4,
|
||||
pid: 0
|
||||
}
|
||||
]),
|
||||
model: tree,
|
||||
defaultTreeNodeName: "new node",
|
||||
defaultLeafNodeName: "new leaf",
|
||||
defaultExpanded: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.text()).toMatch(`Node 1················
|
||||
Node 1-2················
|
||||
Node 2················
|
||||
Node 3`);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user