Introduce basic js unit tests

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

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