Introduce basic js unit tests
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
106
js/tests/unit/specs/components/Post/PostElementItem.spec.ts
Normal file
106
js/tests/unit/specs/components/Post/PostElementItem.spec.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
import { config, createLocalVue, mount } from "@vue/test-utils";
|
||||
import PostElementItem from "@/components/Post/PostElementItem.vue";
|
||||
import { formatDateTimeString } from "@/filters/datetime";
|
||||
import Buefy from "buefy";
|
||||
import VueRouter from "vue-router";
|
||||
import { routes } from "@/router";
|
||||
import { PostVisibility } from "@/types/enums";
|
||||
|
||||
const localVue = createLocalVue();
|
||||
localVue.use(Buefy);
|
||||
localVue.use(VueRouter);
|
||||
const router = new VueRouter({ routes, mode: "history" });
|
||||
localVue.filter("formatDateTimeString", formatDateTimeString);
|
||||
config.mocks.$t = (key: string): string => key;
|
||||
|
||||
const postData = {
|
||||
id: "1",
|
||||
slug: "my-blog-post-some-uuid",
|
||||
title: "My Blog Post",
|
||||
body: "My content",
|
||||
insertedAt: "2020-12-02T09:01:20.873Z",
|
||||
visibility: PostVisibility.PUBLIC,
|
||||
author: {
|
||||
preferredUsername: "author",
|
||||
domain: "remote-domain.tld",
|
||||
name: "Author",
|
||||
},
|
||||
attributedTo: {
|
||||
preferredUsername: "my-awesome-group",
|
||||
domain: null,
|
||||
name: "My Awesome Group",
|
||||
},
|
||||
};
|
||||
|
||||
const generateWrapper = (
|
||||
customPostData: Record<string, unknown> = {},
|
||||
isCurrentActorMember = false
|
||||
) => {
|
||||
return mount(PostElementItem, {
|
||||
localVue,
|
||||
router,
|
||||
propsData: {
|
||||
post: { ...postData, ...customPostData },
|
||||
isCurrentActorMember,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
describe("PostElementItem", () => {
|
||||
it("renders post with basic informations", () => {
|
||||
const wrapper = generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
expect(
|
||||
wrapper.find("a.post-minimalist-card-wrapper").attributes("href")
|
||||
).toBe(`/p/${postData.slug}`);
|
||||
|
||||
expect(wrapper.find(".post-minimalist-title").text()).toContain(
|
||||
postData.title
|
||||
);
|
||||
expect(wrapper.find(".metadata").text()).toContain(
|
||||
formatDateTimeString(postData.insertedAt, false)
|
||||
);
|
||||
|
||||
expect(wrapper.find(".metadata small").text()).not.toContain("Public");
|
||||
});
|
||||
|
||||
it("shows the author if actor is a group member", () => {
|
||||
const wrapper = generateWrapper({}, true);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
expect(wrapper.find(".metadata").text()).toContain(`Created by {username}`);
|
||||
});
|
||||
|
||||
it("shows the draft tag if post is a draft", () => {
|
||||
const wrapper = generateWrapper({ draft: true });
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
expect(wrapper.findComponent({ name: "b-tag" }).exists()).toBe(true);
|
||||
});
|
||||
|
||||
it("tells if the post is public when the actor is a group member", () => {
|
||||
const wrapper = generateWrapper({}, true);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
expect(wrapper.find(".metadata small").text()).toContain("Public");
|
||||
});
|
||||
|
||||
it("tells if the post is accessible only through link", () => {
|
||||
const wrapper = generateWrapper({ visibility: PostVisibility.UNLISTED });
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
expect(wrapper.find(".metadata small").text()).toContain(
|
||||
"Accessible through link"
|
||||
);
|
||||
});
|
||||
|
||||
it("tells if the post is accessible only to members", () => {
|
||||
const wrapper = generateWrapper({ visibility: PostVisibility.PRIVATE });
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
expect(wrapper.find(".metadata small").text()).toContain(
|
||||
"Accessible only to members"
|
||||
);
|
||||
});
|
||||
});
|
||||
45
js/tests/unit/specs/components/Post/PostListItem.spec.ts
Normal file
45
js/tests/unit/specs/components/Post/PostListItem.spec.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import { config, createLocalVue, mount } from "@vue/test-utils";
|
||||
import PostListItem from "@/components/Post/PostListItem.vue";
|
||||
import Buefy from "buefy";
|
||||
import VueRouter from "vue-router";
|
||||
import { routes } from "@/router";
|
||||
|
||||
const localVue = createLocalVue();
|
||||
localVue.use(Buefy);
|
||||
localVue.use(VueRouter);
|
||||
const router = new VueRouter({ routes, mode: "history" });
|
||||
config.mocks.$t = (key: string): string => key;
|
||||
|
||||
const postData = {
|
||||
id: "1",
|
||||
slug: "my-blog-post-some-uuid",
|
||||
title: "My Blog Post",
|
||||
body: "My content",
|
||||
insertedAt: "2020-12-02T09:01:20.873Z",
|
||||
};
|
||||
|
||||
const generateWrapper = (customPostData: Record<string, unknown> = {}) => {
|
||||
return mount(PostListItem, {
|
||||
localVue,
|
||||
router,
|
||||
propsData: {
|
||||
post: { ...postData, ...customPostData },
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
describe("PostListItem", () => {
|
||||
it("renders post list item with basic informations", () => {
|
||||
const wrapper = generateWrapper();
|
||||
|
||||
// can't use the snapshot feature because of `ago`
|
||||
|
||||
expect(
|
||||
wrapper.find("a.post-minimalist-card-wrapper").attributes("href")
|
||||
).toBe(`/p/${postData.slug}`);
|
||||
|
||||
expect(wrapper.find(".post-minimalist-title").text()).toContain(
|
||||
postData.title
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,103 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`PostElementItem renders post with basic informations 1`] = `
|
||||
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
|
||||
<div class="title-info-wrapper">
|
||||
<div class="media">
|
||||
<div class="media-left"><span class="icon is-large"><i class="mdi mdi-post mdi-48px"></i></span></div>
|
||||
<div class="media-content">
|
||||
<p class="post-minimalist-title">My Blog Post</p>
|
||||
<div class="metadata">
|
||||
<!---->
|
||||
<!----> <small class="has-text-grey">December 2, 2020</small>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`PostElementItem shows the author if actor is a group member 1`] = `
|
||||
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
|
||||
<div class="title-info-wrapper">
|
||||
<div class="media">
|
||||
<div class="media-left"><span class="icon is-large"><i class="mdi mdi-post mdi-48px"></i></span></div>
|
||||
<div class="media-content">
|
||||
<p class="post-minimalist-title">My Blog Post</p>
|
||||
<div class="metadata">
|
||||
<!----> <small class="has-text-grey"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey">December 2, 2020</small> <small class="has-text-grey">Created by {username}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`PostElementItem shows the draft tag if post is a draft 1`] = `
|
||||
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
|
||||
<div class="title-info-wrapper">
|
||||
<div class="media">
|
||||
<div class="media-left"><span class="icon is-large"><i class="mdi mdi-post mdi-48px"></i></span></div>
|
||||
<div class="media-content">
|
||||
<p class="post-minimalist-title">My Blog Post</p>
|
||||
<div class="metadata"><span class="tag is-warning is-small"><span class="">Draft</span>
|
||||
<!----></span>
|
||||
<!----> <small class="has-text-grey">December 2, 2020</small>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`PostElementItem tells if the post is accessible only through link 1`] = `
|
||||
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
|
||||
<div class="title-info-wrapper">
|
||||
<div class="media">
|
||||
<div class="media-left"><span class="icon is-large"><i class="mdi mdi-post mdi-48px"></i></span></div>
|
||||
<div class="media-content">
|
||||
<p class="post-minimalist-title">My Blog Post</p>
|
||||
<div class="metadata">
|
||||
<!----> <small class="has-text-grey"><span class="icon is-small"><i class="mdi mdi-link"></i></span>Accessible through link</small> <small class="has-text-grey">December 2, 2020</small>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`PostElementItem tells if the post is accessible only to members 1`] = `
|
||||
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
|
||||
<div class="title-info-wrapper">
|
||||
<div class="media">
|
||||
<div class="media-left"><span class="icon is-large"><i class="mdi mdi-post mdi-48px"></i></span></div>
|
||||
<div class="media-content">
|
||||
<p class="post-minimalist-title">My Blog Post</p>
|
||||
<div class="metadata">
|
||||
<!----> <small class="has-text-grey"><span class="icon is-small"><i class="mdi mdi-lock"></i></span>Accessible only to members</small> <small class="has-text-grey">December 2, 2020</small>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`PostElementItem tells if the post is public when the actor is a group member 1`] = `
|
||||
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
|
||||
<div class="title-info-wrapper">
|
||||
<div class="media">
|
||||
<div class="media-left"><span class="icon is-large"><i class="mdi mdi-post mdi-48px"></i></span></div>
|
||||
<div class="media-content">
|
||||
<p class="post-minimalist-title">My Blog Post</p>
|
||||
<div class="metadata">
|
||||
<!----> <small class="has-text-grey"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey">December 2, 2020</small> <small class="has-text-grey">Created by {username}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
Reference in New Issue
Block a user