Introduce basic js unit tests

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

.gitlab-ci.yml

@@ -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:

js/.eslintrc.js

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

js/.gitignore

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

js/.prettierignore

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

js/jest.config.js

@@ -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",
+  // },
+};

js/package.json

@@ -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",

js/src/components/Logo.vue

@@ -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: {

js/src/router/index.ts

@@ -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: [
+  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);

js/src/shims-vue.d.ts

@@ -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;
+}

js/src/types/post.model.ts

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

js/src/vue-apollo.ts

@@ -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, {

js/tests/unit/.eslintrc.js

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

js/tests/unit/specs/boot/routes.spec.ts

@@ -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);
+  });
+});

js/tests/unit/specs/components/Post/PostElementItem.spec.ts

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

js/tests/unit/specs/components/Post/PostListItem.spec.ts

@@ -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
+    );
+  });
+});

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

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

js/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap

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

js/tests/unit/specs/components/navbar.spec.ts

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

js/tests/unit/specs/components/tag.spec.ts

@@ -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);
+});

js/tests/unit/specs/mocks/config.ts

@@ -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,
+    },
+  },
+};

js/tests/unit/svgTransform.js

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

js/tsconfig.json

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