hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Improve post & events cards, homepage and my events page

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2021-11-02 19:47:54 +01:00
parent 39f40a86f7
commit 4923c52f3b
51 changed files with 2057 additions and 1092 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
js/tests/unit/specs/components/Post/PostElementItem.spec.ts
View File

@@ -1,106 +0,0 @@
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, undefined, 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
View File

@@ -4,6 +4,8 @@ import Buefy from "buefy";
import VueRouter from "vue-router";
import { routes } from "@/router";
import { enUS } from "date-fns/locale";
import { formatDateTimeString } from "@/filters/datetime";
import { i18n } from "@/utils/i18n";
const localVue = createLocalVue();
localVue.use(Buefy);
@@ -20,14 +22,23 @@ const postData = {
title: "My Blog Post",
body: "My content",
insertedAt: "2020-12-02T09:01:20.873Z",
tags: [],
};
const generateWrapper = (customPostData: Record<string, unknown> = {}) => {
const generateWrapper = (
customPostData: Record<string, unknown> = {},
customProps: Record<string, unknown> = {}
) => {
return mount(PostListItem, {
localVue,
router,
i18n,
propsData: {
post: { ...postData, ...customPostData },
...customProps,
},
filters: {
formatDateTimeString,
},
});
};
@@ -36,14 +47,40 @@ describe("PostListItem", () => {
it("renders post list item with basic informations", () => {
const wrapper = generateWrapper();
// can't use the snapshot feature because of `ago`
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(".post-minimalist-title").text()).toBe(postData.title);
expect(wrapper.find(".post-publication-date").text()).toBe("Dec 2, 2020");
expect(wrapper.find(".post-publisher").exists()).toBeFalsy();
});
it("renders post list item with tags", () => {
const wrapper = generateWrapper({
tags: [{ slug: "a-tag", title: "A tag" }],
});
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.find(".tags").text()).toContain("A tag");
expect(wrapper.find(".post-publisher").exists()).toBeFalsy();
});
it("renders post list item with publisher name", () => {
const wrapper = generateWrapper(
{ author: { name: "An author" } },
{ isCurrentActorMember: true }
);
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.find(".post-publisher").exists()).toBeTruthy();
expect(wrapper.find(".post-publisher").text()).toContain("An author");
});
});

103
js/tests/unit/specs/components/Post/__snapshots__/PostElementItem.spec.ts.snap
View File

@@ -1,103 +0,0 @@
// 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-dark">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-dark"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey-dark">December 2, 2020</small> <small class="has-text-grey-dark">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-dark">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-dark"><span class="icon is-small"><i class="mdi mdi-link"></i></span>Accessible through link</small> <small class="has-text-grey-dark">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-dark"><span class="icon is-small"><i class="mdi mdi-lock"></i></span>Accessible only to members</small> <small class="has-text-grey-dark">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-dark"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey-dark">December 2, 2020</small> <small class="has-text-grey-dark">Created by {username}</small>
</div>
</div>
</div>
</div>
</a>
`;

39
js/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap Normal file
View File

@@ -0,0 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PostListItem renders post list item with basic informations 1`] = `
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
<!---->
<div class="title-info-wrapper has-text-grey-dark">
<p class="post-minimalist-title">My Blog Post</p>
<p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span class="has-text-grey-dark">Dec 2, 2020</span></p>
<!---->
<!---->
</div>
</a>
`;
exports[`PostListItem renders post list item with publisher name 1`] = `
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
<!---->
<div class="title-info-wrapper has-text-grey-dark">
<p class="post-minimalist-title">My Blog Post</p>
<p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span class="has-text-grey-dark">Dec 2, 2020</span></p>
<!---->
<p class="post-publisher has-text-grey-dark"><span class="icon"><i class="mdi mdi-account-edit mdi-24px"></i></span> <span>Published by <b class="has-text-weight-medium">An author</b></span></p>
</div>
</a>
`;
exports[`PostListItem renders post list item with tags 1`] = `
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
<!---->
<div class="title-info-wrapper has-text-grey-dark">
<p class="post-minimalist-title">My Blog Post</p>
<p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span class="has-text-grey-dark">Dec 2, 2020</span></p>
<div class="tags" style="display: inline;"><span class="icon"><i class="mdi mdi-tag mdi-24px"></i></span> <span class="tag"><span class="">A tag</span>
<!----></span>
</div>
<!---->
</div>
</a>
`;