Introduce basic js unit tests

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-12-02 11:19:39 +01:00
parent 88cba1629d
commit 2f25fa0ca6
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
23 changed files with 2345 additions and 185 deletions

View file

@ -40,7 +40,7 @@ lint:
- cd js - cd js
- yarn install - yarn install
#- yarn run lint || export EXITVALUE=1 #- 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 - yarn run build
- cd ../ - cd ../
- exit $EXITVALUE - exit $EXITVALUE
@ -78,6 +78,21 @@ exunit:
- lint - lint
script: script:
- mix coveralls - 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: # cypress:
# stage: test # stage: test
# services: # services:

View file

@ -67,5 +67,14 @@ module.exports = {
mocha: true, mocha: true,
}, },
}, },
{
files: [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)",
],
env: {
jest: true,
},
},
], ],
}; };

1
js/.gitignore vendored
View file

@ -4,6 +4,7 @@ node_modules
/tests/e2e/videos/ /tests/e2e/videos/
/tests/e2e/screenshots/ /tests/e2e/screenshots/
/coverage
# local env files # local env files
.env.local .env.local

View file

@ -1 +1,2 @@
src/i18n/*.json src/i18n/*.json
coverage/

19
js/jest.config.js Normal file
View 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",
// },
};

View file

@ -5,7 +5,7 @@
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build": "vue-cli-service build --modern", "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", "test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
@ -39,6 +39,7 @@
"tippy.js": "^6.2.3", "tippy.js": "^6.2.3",
"tiptap": "^1.26.0", "tiptap": "^1.26.0",
"tiptap-extensions": "^1.29.1", "tiptap-extensions": "^1.29.1",
"unfetch": "^4.2.0",
"v-tooltip": "2.0.2", "v-tooltip": "2.0.2",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-apollo": "^3.0.3", "vue-apollo": "^3.0.3",
@ -52,6 +53,7 @@
"vuedraggable": "2.23.2" "vuedraggable": "2.23.2"
}, },
"devDependencies": { "devDependencies": {
"@types/jest": "^24.0.19",
"@types/leaflet": "^1.5.2", "@types/leaflet": "^1.5.2",
"@types/leaflet.locatecontrol": "^0.60.7", "@types/leaflet.locatecontrol": "^0.60.7",
"@types/lodash": "^4.14.141", "@types/lodash": "^4.14.141",
@ -69,6 +71,7 @@
"@vue/cli-plugin-pwa": "~4.5.9", "@vue/cli-plugin-pwa": "~4.5.9",
"@vue/cli-plugin-router": "~4.5.9", "@vue/cli-plugin-router": "~4.5.9",
"@vue/cli-plugin-typescript": "~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/cli-service": "~4.5.9",
"@vue/eslint-config-airbnb": "^5.0.2", "@vue/eslint-config-airbnb": "^5.0.2",
"@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-prettier": "^6.0.0",
@ -79,6 +82,7 @@
"eslint-plugin-import": "^2.20.2", "eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.3", "eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0", "eslint-plugin-vue": "^7.0.0",
"mock-apollo-client": "^0.4",
"prettier": "2.2.1", "prettier": "2.2.1",
"prettier-eslint": "^12.0.0", "prettier-eslint": "^12.0.0",
"sass": "^1.29.0", "sass": "^1.29.0",

View file

@ -1,12 +1,13 @@
<template> <template>
<MobilizonLogo /> <mobilizon-logo />
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore // @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({ @Component({
components: { components: {

View file

@ -2,6 +2,7 @@ import Vue from "vue";
import Router, { Route } from "vue-router"; import Router, { Route } from "vue-router";
import VueScrollTo from "vue-scrollto"; import VueScrollTo from "vue-scrollto";
import { PositionResult } from "vue-router/types/router.d"; import { PositionResult } from "vue-router/types/router.d";
import { EsModuleComponent } from "vue/types/options";
import Home from "../views/Home.vue"; import Home from "../views/Home.vue";
import { eventRoutes } from "./event"; import { eventRoutes } from "./event";
import { actorRoutes } from "./actor"; import { actorRoutes } from "./actor";
@ -34,125 +35,125 @@ function scrollBehavior(
return { x: 0, y: 0 }; 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({ const router = new Router({
scrollBehavior, scrollBehavior,
mode: "history", mode: "history",
base: "/", base: "/",
routes: [ 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 },
},
],
}); });
router.beforeEach(authGuardIfNeeded); router.beforeEach(authGuardIfNeeded);

View file

@ -5,3 +5,10 @@ declare module "*.vue" {
const component: DefineComponent<{}, {}, any>; const component: DefineComponent<{}, {}, any>;
export default component; export default component;
} }
declare module "*.svg" {
import Vue, { VueConstructor } from "vue";
const content: VueConstructor<Vue>;
export default content;
}

View file

@ -17,4 +17,5 @@ export interface IPost {
author?: IActor; author?: IActor;
attributedTo?: IActor; attributedTo?: IActor;
publishAt?: Date; publishAt?: Date;
insertedAt?: Date;
} }

View file

@ -18,6 +18,7 @@ import { Socket as PhoenixSocket } from "phoenix";
import * as AbsintheSocket from "@absinthe/socket"; import * as AbsintheSocket from "@absinthe/socket";
import { createAbsintheSocketLink } from "@absinthe/socket-apollo-link"; import { createAbsintheSocketLink } from "@absinthe/socket-apollo-link";
import { getMainDefinition } from "apollo-utilities"; import { getMainDefinition } from "apollo-utilities";
import fetch from "unfetch";
import { GRAPHQL_API_ENDPOINT, GRAPHQL_API_FULL_PATH } from "./api/_entrypoint"; import { GRAPHQL_API_ENDPOINT, GRAPHQL_API_FULL_PATH } from "./api/_entrypoint";
import { fragmentMatcher, refreshAccessToken } from "./apollo/utils"; import { fragmentMatcher, refreshAccessToken } from "./apollo/utils";
@ -56,6 +57,7 @@ const authMiddleware = new ApolloLink((operation, forward) => {
const uploadLink = createLink({ const uploadLink = createLink({
uri: httpEndpoint, uri: httpEndpoint,
fetch,
}); });
const phoenixSocket = new PhoenixSocket(wsEndpoint, { const phoenixSocket = new PhoenixSocket(wsEndpoint, {

View 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"] },
],
},
};

View 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);
});
});

View 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"
);
});
});

View 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
);
});
});

View file

@ -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>
`;

View file

@ -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>`;

View 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();
});
});

View 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);
});

View 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,
},
},
};

View 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} }`;
},
};

View file

@ -13,7 +13,7 @@
"resolveJsonModule": true, "resolveJsonModule": true,
"sourceMap": true, "sourceMap": true,
"baseUrl": ".", "baseUrl": ".",
"types": ["webpack-env"], "types": ["webpack-env", "jest"],
"typeRoots": ["./@types", "./node_modules/@types"], "typeRoots": ["./@types", "./node_modules/@types"],
"paths": { "paths": {
"@/*": ["src/*"] "@/*": ["src/*"]

File diff suppressed because it is too large Load diff