Add tests for GroupSection

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-12-09 09:56:35 +01:00
parent 16fd2d0a2c
commit cadc741d99
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 120 additions and 0 deletions

View file

@ -0,0 +1,95 @@
import { config, createLocalVue, mount } from "@vue/test-utils";
import GroupSection from "@/components/Group/GroupSection.vue";
import Buefy from "buefy";
import VueRouter, { Location } from "vue-router";
import RouteName from "@/router/name";
import { routes } from "@/router";
const localVue = createLocalVue();
localVue.use(Buefy);
config.mocks.$t = (key: string): string => key;
localVue.use(VueRouter);
const router = new VueRouter({ routes, mode: "history" });
const groupPreferredUsername = "my_group";
const groupDomain = "remotedomain.net";
const groupUsername = `${groupPreferredUsername}@${groupDomain}`;
const defaultSlotText = "A list of elements";
const createSlotButtonText = "+ Post a public message";
type Props = {
title?: string;
icon?: string;
privateSection?: boolean;
route?: Location;
};
const baseProps: Props = {
title: "My group section",
icon: "bullhorn",
route: {
name: RouteName.POSTS,
params: {
preferredUsername: groupUsername,
},
},
};
const generateWrapper = (customProps: Props = {}) => {
return mount(GroupSection, {
localVue,
router,
propsData: { ...baseProps, ...customProps },
slots: {
default: `<div>${defaultSlotText}</div>`,
create: `<router-link :to="{
name: 'POST_CREATE',
params: { preferredUsername: '${groupUsername}' },
}"
class="button is-primary"
>{{ $t("${createSlotButtonText}") }}</router-link
>`,
},
});
};
describe("GroupSection", () => {
it("renders group section with basic informations", () => {
const wrapper = generateWrapper({});
expect(
wrapper
.find(".group-section-title h2 span.icon i")
.classes(`mdi-${baseProps.icon}`)
).toBe(true);
expect(wrapper.find(".group-section-title h2 span:last-child").text()).toBe(
baseProps.title
);
expect(wrapper.find(".group-section-title a").attributes("href")).toBe(
`/@${groupUsername}/p`
);
expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
true
);
expect(wrapper.find(".main-slot div").text()).toBe(defaultSlotText);
expect(wrapper.find(".create-slot a").text()).toBe(createSlotButtonText);
expect(wrapper.find(".create-slot a").attributes("href")).toBe(
`/@${groupUsername}/p/new`
);
expect(wrapper.html()).toMatchSnapshot();
});
it("renders public group section", () => {
const wrapper = generateWrapper({ privateSection: false });
expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
false
);
expect(wrapper.html()).toMatchSnapshot();
});
});

View file

@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`GroupSection renders group section with basic informations 1`] = `
<section>
<div class="group-section-title privateSection">
<h2><span class="icon"><i class="mdi mdi-bullhorn mdi-24px"></i></span> <span>My group section</span></h2> <a href="/@my_group@remotedomain.net/p" class="">View all</a>
</div>
<div class="main-slot">
<div>A list of elements</div>
</div>
<div class="create-slot"><a href="/@my_group@remotedomain.net/p/new" class="button is-primary">+ Post a public message</a></div>
</section>
`;
exports[`GroupSection renders public group section 1`] = `
<section>
<div class="group-section-title">
<h2><span class="icon"><i class="mdi mdi-bullhorn mdi-24px"></i></span> <span>My group section</span></h2> <a href="/@my_group@remotedomain.net/p" class="">View all</a>
</div>
<div class="main-slot">
<div>A list of elements</div>
</div>
<div class="create-slot"><a href="/@my_group@remotedomain.net/p/new" class="button is-primary">+ Post a public message</a></div>
</section>
`;