Merge branch 'js-unit-tests' into 'master'
Introduce basic js unit tests See merge request framasoft/mobilizon!738
This commit is contained in:
Thomas Citharel
commit
c1c9f421e0
@ -40,7 +40,7 @@ lint:
|
||||
- cd js
|
||||
- yarn install
|
||||
#- yarn run lint || export EXITVALUE=1
|
||||
- yarn run prettier --ignore-path="src/i18n/*" -c . || export EXITVALUE=1
|
||||
- yarn run prettier -c . || export EXITVALUE=1
|
||||
- yarn run build
|
||||
- cd ../
|
||||
- exit $EXITVALUE
|
||||
@ -78,6 +78,21 @@ exunit:
|
||||
- lint
|
||||
script:
|
||||
- mix coveralls
|
||||
|
||||
jest:
|
||||
stage: test
|
||||
before_script:
|
||||
- cd js
|
||||
- yarn install
|
||||
dependencies:
|
||||
- lint
|
||||
script:
|
||||
- yarn run test:unit --no-color
|
||||
artifacts:
|
||||
when: always
|
||||
paths:
|
||||
- js/coverage
|
||||
expire_in: 30 days
|
||||
# cypress:
|
||||
# stage: test
|
||||
# services:
|
||||
|
||||
@ -67,5 +67,14 @@ module.exports = {
|
||||
mocha: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
files: [
|
||||
"**/__tests__/*.{j,t}s?(x)",
|
||||
"**/tests/unit/**/*.spec.{j,t}s?(x)",
|
||||
],
|
||||
env: {
|
||||
jest: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
1
js/.gitignore
vendored
1
js/.gitignore
vendored
@ -4,6 +4,7 @@ node_modules
|
||||
|
||||
/tests/e2e/videos/
|
||||
/tests/e2e/screenshots/
|
||||
/coverage
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
|
||||
@ -1 +1,2 @@
|
||||
src/i18n/*.json
|
||||
coverage/
|
||||
19
js/jest.config.js
Normal file
19
js/jest.config.js
Normal file
@ -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",
|
||||
// },
|
||||
};
|
||||
@ -5,7 +5,7 @@
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build --modern",
|
||||
"test:unit": "vue-cli-service test:unit",
|
||||
"test:unit": "LANG=en_US.UTF-8 LANGUAGE=en_US:en LC_ALL=en_US.UTF-8 vue-cli-service test:unit",
|
||||
"test:e2e": "vue-cli-service test:e2e",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
@ -39,6 +39,7 @@
|
||||
"tippy.js": "^6.2.3",
|
||||
"tiptap": "^1.26.0",
|
||||
"tiptap-extensions": "^1.29.1",
|
||||
"unfetch": "^4.2.0",
|
||||
"v-tooltip": "2.0.2",
|
||||
"vue": "^2.6.11",
|
||||
"vue-apollo": "^3.0.3",
|
||||
@ -52,6 +53,7 @@
|
||||
"vuedraggable": "2.23.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jest": "^24.0.19",
|
||||
"@types/leaflet": "^1.5.2",
|
||||
"@types/leaflet.locatecontrol": "^0.60.7",
|
||||
"@types/lodash": "^4.14.141",
|
||||
@ -69,6 +71,7 @@
|
||||
"@vue/cli-plugin-pwa": "~4.5.9",
|
||||
"@vue/cli-plugin-router": "~4.5.9",
|
||||
"@vue/cli-plugin-typescript": "~4.5.9",
|
||||
"@vue/cli-plugin-unit-jest": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.9",
|
||||
"@vue/eslint-config-airbnb": "^5.0.2",
|
||||
"@vue/eslint-config-prettier": "^6.0.0",
|
||||
@ -79,6 +82,7 @@
|
||||
"eslint-plugin-import": "^2.20.2",
|
||||
"eslint-plugin-prettier": "^3.1.3",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"mock-apollo-client": "^0.4",
|
||||
"prettier": "2.2.1",
|
||||
"prettier-eslint": "^12.0.0",
|
||||
"sass": "^1.29.0",
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<MobilizonLogo />
|
||||
<mobilizon-logo />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
import MobilizonLogo from "../assets/mobilizon_logo.svg?inline";
|
||||
import MobilizonLogo from "../assets/mobilizon_logo.svg";
|
||||
// TODO: Jest does not like the ?inline after the import path
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
|
||||
@ -2,6 +2,7 @@ import Vue from "vue";
|
||||
import Router, { Route } from "vue-router";
|
||||
import VueScrollTo from "vue-scrollto";
|
||||
import { PositionResult } from "vue-router/types/router.d";
|
||||
import { EsModuleComponent } from "vue/types/options";
|
||||
import Home from "../views/Home.vue";
|
||||
import { eventRoutes } from "./event";
|
||||
import { actorRoutes } from "./actor";
|
||||
@ -34,125 +35,125 @@ function scrollBehavior(
|
||||
return { x: 0, y: 0 };
|
||||
}
|
||||
|
||||
export const routes = [
|
||||
...userRoutes,
|
||||
...eventRoutes,
|
||||
...settingsRoutes,
|
||||
...actorRoutes,
|
||||
...groupsRoutes,
|
||||
...discussionRoutes,
|
||||
...errorRoutes,
|
||||
{
|
||||
path: "/search",
|
||||
name: RouteName.SEARCH,
|
||||
component: (): Promise<EsModuleComponent> =>
|
||||
import(/* webpackChunkName: "search" */ "../views/Search.vue"),
|
||||
props: true,
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: RouteName.HOME,
|
||||
component: Home,
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/about",
|
||||
name: RouteName.ABOUT,
|
||||
component: (): Promise<EsModuleComponent> =>
|
||||
import(/* webpackChunkName: "about" */ "@/views/About.vue"),
|
||||
meta: { requiredAuth: false },
|
||||
redirect: { name: RouteName.ABOUT_INSTANCE },
|
||||
children: [
|
||||
{
|
||||
path: "instance",
|
||||
name: RouteName.ABOUT_INSTANCE,
|
||||
component: (): Promise<EsModuleComponent> =>
|
||||
import(
|
||||
/* webpackChunkName: "about" */ "@/views/About/AboutInstance.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/terms",
|
||||
name: RouteName.TERMS,
|
||||
component: (): Promise<EsModuleComponent> =>
|
||||
import(/* webpackChunkName: "cookies" */ "@/views/About/Terms.vue"),
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/privacy",
|
||||
name: RouteName.PRIVACY,
|
||||
component: (): Promise<EsModuleComponent> =>
|
||||
import(/* webpackChunkName: "cookies" */ "@/views/About/Privacy.vue"),
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/rules",
|
||||
name: RouteName.RULES,
|
||||
component: (): Promise<EsModuleComponent> =>
|
||||
import(/* webpackChunkName: "cookies" */ "@/views/About/Rules.vue"),
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/glossary",
|
||||
name: RouteName.GLOSSARY,
|
||||
component: (): Promise<EsModuleComponent> =>
|
||||
import(
|
||||
/* webpackChunkName: "cookies" */ "@/views/About/Glossary.vue"
|
||||
),
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/interact",
|
||||
name: RouteName.INTERACT,
|
||||
component: (): Promise<EsModuleComponent> =>
|
||||
import(/* webpackChunkName: "cookies" */ "@/views/Interact.vue"),
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/auth/:provider/callback",
|
||||
name: "auth-callback",
|
||||
component: (): Promise<EsModuleComponent> =>
|
||||
import(
|
||||
/* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/welcome/:step?",
|
||||
name: RouteName.WELCOME_SCREEN,
|
||||
component: (): Promise<EsModuleComponent> =>
|
||||
import(
|
||||
/* webpackChunkName: "WelcomeScreen" */ "@/views/User/SettingsOnboard.vue"
|
||||
),
|
||||
meta: { requiredAuth: true },
|
||||
props: (route: Route): Record<string, unknown> => {
|
||||
const step = Number.parseInt(route.params.step, 10);
|
||||
if (Number.isNaN(step)) {
|
||||
return { step: 1 };
|
||||
}
|
||||
return { step };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/404",
|
||||
name: RouteName.PAGE_NOT_FOUND,
|
||||
component: (): Promise<EsModuleComponent> =>
|
||||
import(/* webpackChunkName: "search" */ "../views/PageNotFound.vue"),
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "*",
|
||||
redirect: { name: RouteName.PAGE_NOT_FOUND },
|
||||
},
|
||||
];
|
||||
|
||||
const router = new Router({
|
||||
scrollBehavior,
|
||||
mode: "history",
|
||||
base: "/",
|
||||
routes: [
|
||||
...userRoutes,
|
||||
...eventRoutes,
|
||||
...settingsRoutes,
|
||||
...actorRoutes,
|
||||
...groupsRoutes,
|
||||
...discussionRoutes,
|
||||
...errorRoutes,
|
||||
{
|
||||
path: "/search",
|
||||
name: RouteName.SEARCH,
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "search" */ "../views/Search.vue"),
|
||||
props: true,
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: RouteName.HOME,
|
||||
component: Home,
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/about",
|
||||
name: RouteName.ABOUT,
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "about" */ "@/views/About.vue"),
|
||||
meta: { requiredAuth: false },
|
||||
redirect: { name: RouteName.ABOUT_INSTANCE },
|
||||
children: [
|
||||
{
|
||||
path: "instance",
|
||||
name: RouteName.ABOUT_INSTANCE,
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "about" */ "@/views/About/AboutInstance.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/terms",
|
||||
name: RouteName.TERMS,
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "cookies" */ "@/views/About/Terms.vue"),
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/privacy",
|
||||
name: RouteName.PRIVACY,
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "cookies" */ "@/views/About/Privacy.vue"
|
||||
),
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/rules",
|
||||
name: RouteName.RULES,
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "cookies" */ "@/views/About/Rules.vue"),
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/glossary",
|
||||
name: RouteName.GLOSSARY,
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "cookies" */ "@/views/About/Glossary.vue"
|
||||
),
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/interact",
|
||||
name: RouteName.INTERACT,
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "cookies" */ "@/views/Interact.vue"),
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/auth/:provider/callback",
|
||||
name: "auth-callback",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/welcome/:step?",
|
||||
name: RouteName.WELCOME_SCREEN,
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "WelcomeScreen" */ "@/views/User/SettingsOnboard.vue"
|
||||
),
|
||||
meta: { requiredAuth: true },
|
||||
props: (route) => {
|
||||
const step = Number.parseInt(route.params.step, 10);
|
||||
if (Number.isNaN(step)) {
|
||||
return 1;
|
||||
}
|
||||
return { step };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/404",
|
||||
name: RouteName.PAGE_NOT_FOUND,
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "search" */ "../views/PageNotFound.vue"),
|
||||
meta: { requiredAuth: false },
|
||||
},
|
||||
{
|
||||
path: "*",
|
||||
redirect: { name: RouteName.PAGE_NOT_FOUND },
|
||||
},
|
||||
],
|
||||
routes,
|
||||
});
|
||||
|
||||
router.beforeEach(authGuardIfNeeded);
|
||||
|
||||
7
js/src/shims-vue.d.ts
vendored
7
js/src/shims-vue.d.ts
vendored
@ -5,3 +5,10 @@ declare module "*.vue" {
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
export default component;
|
||||
}
|
||||
|
||||
declare module "*.svg" {
|
||||
import Vue, { VueConstructor } from "vue";
|
||||
|
||||
const content: VueConstructor<Vue>;
|
||||
export default content;
|
||||
}
|
||||
|
||||
@ -17,4 +17,5 @@ export interface IPost {
|
||||
author?: IActor;
|
||||
attributedTo?: IActor;
|
||||
publishAt?: Date;
|
||||
insertedAt?: Date;
|
||||
}
|
||||
|
||||
@ -18,6 +18,7 @@ import { Socket as PhoenixSocket } from "phoenix";
|
||||
import * as AbsintheSocket from "@absinthe/socket";
|
||||
import { createAbsintheSocketLink } from "@absinthe/socket-apollo-link";
|
||||
import { getMainDefinition } from "apollo-utilities";
|
||||
import fetch from "unfetch";
|
||||
import { GRAPHQL_API_ENDPOINT, GRAPHQL_API_FULL_PATH } from "./api/_entrypoint";
|
||||
import { fragmentMatcher, refreshAccessToken } from "./apollo/utils";
|
||||
|
||||
@ -56,6 +57,7 @@ const authMiddleware = new ApolloLink((operation, forward) => {
|
||||
|
||||
const uploadLink = createLink({
|
||||
uri: httpEndpoint,
|
||||
fetch,
|
||||
});
|
||||
|
||||
const phoenixSocket = new PhoenixSocket(wsEndpoint, {
|
||||
|
||||
15
js/tests/unit/.eslintrc.js
Normal file
15
js/tests/unit/.eslintrc.js
Normal file
@ -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"] },
|
||||
],
|
||||
},
|
||||
};
|
||||
24
js/tests/unit/specs/boot/routes.spec.ts
Normal file
24
js/tests/unit/specs/boot/routes.spec.ts
Normal file
@ -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);
|
||||
});
|
||||
});
|
||||
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>
|
||||
`;
|
||||
@ -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>`;
|
||||
81
js/tests/unit/specs/components/navbar.spec.ts
Normal file
81
js/tests/unit/specs/components/navbar.spec.ts
Normal file
@ -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();
|
||||
});
|
||||
});
|
||||
19
js/tests/unit/specs/components/tag.spec.ts
Normal file
19
js/tests/unit/specs/components/tag.spec.ts
Normal file
@ -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);
|
||||
});
|
||||
83
js/tests/unit/specs/mocks/config.ts
Normal file
83
js/tests/unit/specs/mocks/config.ts
Normal file
@ -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,
|
||||
},
|
||||
},
|
||||
};
|
||||
14
js/tests/unit/svgTransform.js
Normal file
14
js/tests/unit/svgTransform.js
Normal file
@ -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} }`;
|
||||
},
|
||||
};
|
||||
@ -13,7 +13,7 @@
|
||||
"resolveJsonModule": true,
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"types": ["webpack-env"],
|
||||
"types": ["webpack-env", "jest"],
|
||||
"typeRoots": ["./@types", "./node_modules/@types"],
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
|
||||
1734
js/yarn.lock
1734
js/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user