@vue/test-utils#RouterLinkStub JavaScript Examples

The following examples show how to use @vue/test-utils#RouterLinkStub. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: boardBadge.spec.js    From logchimp with Apache License 2.0 6 votes vote down vote up 
describe("board badge", () => {
	const wrapper = mount(BoardBadge, {
		propsData: {
			name: "Feature requests",
			color: "abcabc",
			url: "feature-requests",
			showBoard: true
		},
		stubs: {
			NuxtLink: RouterLinkStub
		}
	});

	it("color is 'rgb(171, 202, 188)'", () => {
		expect(
			wrapper.find("[data-test=board-badge-color]").attributes("style")
		).toBe("background-color: rgb(171, 202, 188);");
	});

	it("name is 'Feature requests'", () => {
		expect(wrapper.find("[data-test=board-badge-name]").text()).toBe(
			"Feature requests"
		);
	});

	it("link to '/feature-requests' board", () => {
		const link = wrapper.find("a[data-test=board-badge]").attributes("href");
		expect(link).toBe("/boards/feature-requests");
	});
});
Example #2
Source File: boardItem.spec.js    From logchimp with Apache License 2.0 6 votes vote down vote up 
describe("board item", () => {
	const wrapper = mount(BoardItem, {
		propsData: {
			name: "Feature requests",
			color: "abcabc",
			url: "feature-requests",
			postCount: 30
		},
		stubs: {
			NuxtLink: RouterLinkStub
		}
	});

	it("link to '/feature-requests' board", () => {
		const link = wrapper.find("a[data-test=board-item]").attributes("href");
		expect(link).toBe("/boards/feature-requests");
	});

	it("color is 'rgb(171, 202, 188)'", () => {
		expect(
			wrapper.find("[data-test=board-item-color]").attributes("style")
		).toBe("background-color: rgb(171, 202, 188);");
	});

	it("name is 'Feature requests'", () => {
		expect(wrapper.find("[data-test=board-item-name]").text()).toBe(
			"Feature requests"
		);
	});

	it("post count is '30'", () => {
		expect(wrapper.find("[data-test=board-item-postcount]").text()).toBe("30");
	});
});
Example #3
Source File: roadmapPostCard.js    From logchimp with Apache License 2.0 4 votes vote down vote up 
describe("post card", () => {
  const wrapper = shallowMount(PostCard, {
    localVue,
    propsData: {
      post: {
        // random UUID
        postId: "69136892-b8c8-41c7-9e8f-a2eb212e5311",
        title: "Post title",
        // random slug ID
        slug: "post-title-qwJy9_3Sm9g3Qm3r9OQk",
        contentMarkdown: "What's this feature is all about?",
        // random createdAt date
        createdAt: "2020-12-19T09:50:10.137Z",
        voters: {
          isVoted: true,
          votesCount: 120,
          votes: [
            {
              // random UUID
              userId: "01982803-d099-4f03-8607-471f87d7c6e9",
              avatar: "https://www.gravatar.com/avatar/1",
              username: "peg-legge"
            },
            {
              // random UUID
              userId: "e1de47b3-7acb-4024-9635-1c7ebffc07c3",
              avatar: "https://www.gravatar.com/avatar/2",
              username: "peter"
            }
          ]
        },
        board: {
          name: "Feature requests",
          color: "abcabc",
          url: "feature-requests",
          showBoard: true
        }
      }
    },
    stubs: {
      Vote: true,
      NuxtLink: RouterLinkStub,
      AvatarStack: true,
      BoardBadge: true
    }
  });

  it("link to post", () => {
    expect(
      wrapper
        .find("[data-test=post-link]")
        .findComponent(RouterLinkStub)
        .props().to
    ).toBe("/posts/post-title-qwJy9_3Sm9g3Qm3r9OQk");
  });

  it("post board name", () => {
    expect(wrapper.find("[data-test=post-board-name]").text()).toBe(
      "Feature requests"
    );
  });

  it("post card extra is not shown", () => {
    expect(wrapper.find("[data-test=post-card-extra]").exists()).toBe(false);
  });

  describe("post card expanded", () => {
    it("Expand post card", async () => {
      await wrapper.find("[data-test=post-card-toggle]").trigger("click");

      expect(
        wrapper.find("[data-test=post-card-toggle]").attributes("style")
      ).toBe("transform: rotateX(180deg);");
    });

    it("Board name should not be visible", () => {
      expect(wrapper.find("[data-test=post-board-name]").exists()).toBe(false);
    });

    it("Relative post createdAt date", () => {
      expect(wrapper.find("[data-test=post-date]").text()).toContain("ago");
    });

    // todo: showing different time on CI (in UTC timezone)
    // it("Post createdAt full date", () => {
    // 	expect(wrapper.find("[data-test=post-date]").attributes("title")).toBe(
    // 		"Saturday, 19 December 2020 03:20"
    // 	);
    // });

    it("post description", () => {
      expect(wrapper.find("[data-test=post-card-description]").text()).toBe(
        "What's this feature is all about?"
      );
    });

    it("post card extra is shown", () => {
      expect(wrapper.find("[data-test=post-card-extra]").exists()).toBe(true);
    });
  });
});