Thomas Citharel
2 years ago
parent
88cba1629d
commit
2f25fa0ca6
@ -1 +1,2 @@
|
||||
src/i18n/*.json
|
||||
src/i18n/*.json
|
||||
coverage/
|
||||
@ -0,0 +1,19 @@
|
||||
module.exports = {
|
||||
preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
|
||||
collectCoverage: true,
|
||||
collectCoverageFrom: [
|
||||
"**/*.{vue,ts}",
|
||||
"!**/node_modules/**",
|
||||
"!get_union_json.ts",
|
||||
],
|
||||
coverageReporters: ["html", "text", "text-summary"],
|
||||
// The following should fix the issue with svgs and ?inline loader (see Logo.vue), but doesn't work
|
||||
//
|
||||
// transform: {
|
||||
// "^.+\\.svg$": "<rootDir>/tests/unit/svgTransform.js",
|
||||
// },
|
||||
// moduleNameMapper: {
|
||||
// "^@/(.*svg)(\\?inline)$": "<rootDir>/src/$1",
|
||||
// "^@/(.*)$": "<rootDir>/src/$1",
|
||||
// },
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
mocha: true,
|
||||
},
|
||||
globals: {
|
||||
expect: true,
|
||||
sinon: true,
|
||||
},
|
||||
rules: {
|
||||
"import/no-extraneous-dependencies": [
|
||||
"error",
|
||||
{ devDependencies: ["**/*.test.js", "**/*.spec.js"] },
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,24 @@
|
||||
import { config, createLocalVue, mount } from "@vue/test-utils";
|
||||
import { routes } from "@/router";
|
||||
import App from "@/App.vue";
|
||||
import VueRouter from "vue-router";
|
||||
import Home from "@/views/Home.vue";
|
||||
|
||||
const localVue = createLocalVue();
|
||||
config.mocks.$t = (key: string): string => key;
|
||||
localVue.use(VueRouter);
|
||||
|
||||
const router = new VueRouter({ routes });
|
||||
const wrapper = mount(App, {
|
||||
localVue,
|
||||
router,
|
||||
stubs: ["NavBar", "mobilizon-footer"],
|
||||
});
|
||||
|
||||
describe("routing", () => {
|
||||
test("Homepage", async () => {
|
||||
router.push("/");
|
||||
await wrapper.vm.$nextTick();
|
||||
expect(wrapper.findComponent(Home).exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
@ -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"
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -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>
|
||||
`;
|
||||
@ -0,0 +1,3 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`App component renders a Vue component 1`] = `<b-navbar-stub type="is-secondary" wrapperclass="container" closeonclick="true" mobileburger="true"><template></template> <template></template> <template></template></b-navbar-stub>`;
|
||||
@ -0,0 +1,81 @@
|
||||
import { shallowMount, createLocalVue, Wrapper, config } from "@vue/test-utils";
|
||||
import NavBar from "@/components/NavBar.vue";
|
||||
import {
|
||||
createMockClient,
|
||||
MockApolloClient,
|
||||
RequestHandler,
|
||||
} from "mock-apollo-client";
|
||||
import VueApollo from "vue-apollo";
|
||||
import { CONFIG } from "@/graphql/config";
|
||||
import { USER_SETTINGS } from "@/graphql/user";
|
||||
import { InMemoryCache } from "apollo-cache-inmemory";
|
||||
import buildCurrentUserResolver from "@/apollo/user";
|
||||
import Buefy from "buefy";
|
||||
import { configMock } from "../mocks/config";
|
||||
|
||||
const localVue = createLocalVue();
|
||||
localVue.use(VueApollo);
|
||||
localVue.use(Buefy);
|
||||
config.mocks.$t = (key: string): string => key;
|
||||
|
||||
describe("App component", () => {
|
||||
let wrapper: Wrapper<Vue>;
|
||||
let mockClient: MockApolloClient | null;
|
||||
let apolloProvider;
|
||||
let requestHandlers: Record<string, RequestHandler>;
|
||||
|
||||
const createComponent = (handlers = {}, baseData = {}) => {
|
||||
const cache = new InMemoryCache({ addTypename: false });
|
||||
|
||||
mockClient = createMockClient({
|
||||
cache,
|
||||
resolvers: buildCurrentUserResolver(cache),
|
||||
});
|
||||
|
||||
requestHandlers = {
|
||||
configQueryHandler: jest.fn().mockResolvedValue(configMock),
|
||||
loggedUserQueryHandler: jest.fn().mockResolvedValue(null),
|
||||
...handlers,
|
||||
};
|
||||
|
||||
mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
|
||||
|
||||
mockClient.setRequestHandler(
|
||||
USER_SETTINGS,
|
||||
requestHandlers.loggedUserQueryHandler
|
||||
);
|
||||
|
||||
apolloProvider = new VueApollo({
|
||||
defaultClient: mockClient,
|
||||
});
|
||||
|
||||
wrapper = shallowMount(NavBar, {
|
||||
localVue,
|
||||
apolloProvider,
|
||||
stubs: ["router-link", "router-view"],
|
||||
data() {
|
||||
return {
|
||||
...baseData,
|
||||
};
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
wrapper.destroy();
|
||||
mockClient = null;
|
||||
apolloProvider = null;
|
||||
});
|
||||
|
||||
it("renders a Vue component", async () => {
|
||||
createComponent();
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
expect(wrapper.exists()).toBe(true);
|
||||
expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
|
||||
expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
expect(wrapper.findComponent({ name: "b-navbar" }).exists()).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,19 @@
|
||||
import { mount } from "@vue/test-utils";
|
||||
import Tag from "@/components/Tag.vue";
|
||||
|
||||
const tagContent = "My tag";
|
||||
|
||||
const createComponent = () => {
|
||||
return mount(Tag, {
|
||||
slots: {
|
||||
default: tagContent,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
it("renders a Vue component", () => {
|
||||
const wrapper = createComponent();
|
||||
|
||||
expect(wrapper.exists()).toBe(true);
|
||||
expect(wrapper.find("span.tag span").text()).toEqual(tagContent);
|
||||
});
|
||||
@ -0,0 +1,83 @@
|
||||
export const configMock = {
|
||||
data: {
|
||||
config: {
|
||||
anonymous: {
|
||||
actorId: "1",
|
||||
eventCreation: {
|
||||
allowed: false,
|
||||
validation: {
|
||||
captcha: {
|
||||
enabled: false,
|
||||
},
|
||||
email: {
|
||||
confirmationRequired: true,
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
participation: {
|
||||
allowed: true,
|
||||
validation: {
|
||||
captcha: {
|
||||
enabled: false,
|
||||
},
|
||||
email: {
|
||||
confirmationRequired: true,
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
reports: {
|
||||
allowed: false,
|
||||
},
|
||||
},
|
||||
auth: {
|
||||
ldap: false,
|
||||
oauthProviders: [],
|
||||
},
|
||||
countryCode: "fr",
|
||||
demoMode: false,
|
||||
description: "Mobilizon.fr est l'instance Mobilizon de Framasoft.",
|
||||
features: {
|
||||
eventCreation: true,
|
||||
groups: true,
|
||||
},
|
||||
geocoding: {
|
||||
autocomplete: true,
|
||||
provider: "Elixir.Mobilizon.Service.Geospatial.Pelias",
|
||||
},
|
||||
languages: ["fr"],
|
||||
location: {
|
||||
latitude: 48.8717,
|
||||
longitude: 2.32075,
|
||||
},
|
||||
maps: {
|
||||
tiles: {
|
||||
attribution: "© The OpenStreetMap Contributors",
|
||||
endpoint: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
},
|
||||
},
|
||||
name: "Mobilizon",
|
||||
registrationsAllowlist: false,
|
||||
registrationsOpen: true,
|
||||
resourceProviders: [
|
||||
{
|
||||
endpoint: "https://lite.framacalc.org/",
|
||||
software: "calc",
|
||||
type: "ethercalc",
|
||||
},
|
||||
{
|
||||
endpoint: "https://hebdo.framapad.org/p/",
|
||||
software: "pad",
|
||||
type: "etherpad",
|
||||
},
|
||||
{
|
||||
endpoint: "https://framatalk.org/",
|
||||
software: "visio",
|
||||
type: "jitsi",
|
||||
},
|
||||
],
|
||||
slogan: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,14 @@
|
||||
const vueJest = require("vue-jest/lib/template-compiler");
|
||||
|
||||
module.exports = {
|
||||
process(content) {
|
||||
const { render } = vueJest({
|
||||
content,
|
||||
attrs: {
|
||||
functional: false,
|
||||
},
|
||||
});
|
||||
|
||||
return `module.exports = { render: ${render} }`;
|
||||
},
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue