test: add Button component test snapshots

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-04-12 14:36:19 +08:00
parent bd446449c0
commit 3dadf7af94
2 changed files with 30 additions and 0 deletions

View File

@ -5,6 +5,7 @@ import { mount } from "@vue/test-utils";
describe("Button", () => {
it("should render", () => {
expect(mount(VButton).html()).contains("button");
expect(mount(VButton).html()).toMatchSnapshot();
});
it("should render with text", () => {
@ -19,6 +20,8 @@ describe("Button", () => {
["primary", "secondary", "danger"].forEach((type) => {
const button = mount(VButton, { props: { type } });
expect(button.html()).toMatchSnapshot();
expect(button.find(".btn").classes()).toContain(`btn-${type}`);
button.unmount();
});
@ -30,6 +33,8 @@ describe("Button", () => {
["lg", "sm", "xs"].forEach((size) => {
const button = mount(VButton, { props: { size } });
expect(button.html()).toMatchSnapshot();
expect(button.find(".btn").classes()).toContain(`btn-${size}`);
button.unmount();
});
@ -42,6 +47,7 @@ describe("Button", () => {
expect(button.find(".btn").classes()).not.toContain("btn-circle");
await button.setProps({ circle: true });
expect(button.html()).toMatchSnapshot();
expect(button.find(".btn").classes()).toContain("btn-circle");
});
@ -52,6 +58,7 @@ describe("Button", () => {
expect(button.find(".btn").classes()).not.toContain("btn-block");
await button.setProps({ block: true });
expect(button.html()).toMatchSnapshot();
expect(button.find(".btn").classes()).toContain("btn-block");
});
@ -69,6 +76,8 @@ describe("Button", () => {
onClick.mockReset();
await button.setProps({ disabled: true });
await button.trigger("click");
expect(button.html()).toMatchSnapshot();
expect(onClick).not.toHaveBeenCalled();
});
});

View File

@ -0,0 +1,21 @@
// Vitest Snapshot v1
exports[`Button > should render 1`] = `"<button class=\\"btn btn-md btn-default\\"></button>"`;
exports[`Button > should work with block prop 1`] = `"<button class=\\"btn btn-md btn-default btn-block\\"></button>"`;
exports[`Button > should work with circle prop 1`] = `"<button class=\\"btn btn-md btn-default btn-circle\\"></button>"`;
exports[`Button > should work with disabled prop 1`] = `"<button class=\\"btn btn-md btn-default\\" disabled=\\"\\"></button>"`;
exports[`Button > should work with size prop 1`] = `"<button class=\\"btn btn-lg btn-default\\"></button>"`;
exports[`Button > should work with size prop 2`] = `"<button class=\\"btn btn-sm btn-default\\"></button>"`;
exports[`Button > should work with size prop 3`] = `"<button class=\\"btn btn-xs btn-default\\"></button>"`;
exports[`Button > should work with type prop 1`] = `"<button class=\\"btn btn-md btn-primary\\"></button>"`;
exports[`Button > should work with type prop 2`] = `"<button class=\\"btn btn-md btn-secondary\\"></button>"`;
exports[`Button > should work with type prop 3`] = `"<button class=\\"btn btn-md btn-danger\\"></button>"`;