Fix Vue unit tests

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

js/tests/unit/specs/components/User/PasswordReset.spec.ts

@@ -0,0 +1,105 @@
+import { config, createLocalVue, mount } from "@vue/test-utils";
+import PasswordReset from "@/views/User/PasswordReset.vue";
+import Buefy from "buefy";
+import { createMockClient, RequestHandler } from "mock-apollo-client";
+import { RESET_PASSWORD } from "@/graphql/auth";
+import VueApollo from "vue-apollo";
+import { resetPasswordResponseMock } from "../../mocks/auth";
+import RouteName from "@/router/name";
+import flushPromises from "flush-promises";
+
+const localVue = createLocalVue();
+localVue.use(Buefy);
+config.mocks.$t = (key: string): string => key;
+const $router = { push: jest.fn() };
+
+let requestHandlers: Record<string, RequestHandler>;
+
+const generateWrapper = (
+  customRequestHandlers: Record<string, RequestHandler> = {},
+  customMocks = {}
+) => {
+  const mockClient = createMockClient();
+
+  requestHandlers = {
+    resetPasswordMutationHandler: jest
+      .fn()
+      .mockResolvedValue(resetPasswordResponseMock),
+    ...customRequestHandlers,
+  };
+
+  mockClient.setRequestHandler(
+    RESET_PASSWORD,
+    requestHandlers.resetPasswordMutationHandler
+  );
+
+  const apolloProvider = new VueApollo({
+    defaultClient: mockClient,
+  });
+
+  return mount(PasswordReset, {
+    localVue,
+    mocks: {
+      $route: { query: {} },
+      $router,
+      ...customMocks,
+    },
+    apolloProvider,
+    propsData: {
+      token: "some-token",
+    },
+  });
+};
+
+describe("Reset page", () => {
+  it("renders correctly", () => {
+    const wrapper = generateWrapper();
+    expect(wrapper.findAll('input[type="password"').length).toBe(2);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("shows error if token is invalid", async () => {
+    const wrapper = generateWrapper({
+      resetPasswordMutationHandler: jest.fn().mockResolvedValue({
+        errors: [{ message: "The token you provided is invalid." }],
+      }),
+    });
+
+    wrapper.findAll('input[type="password"').setValue("my password");
+    wrapper.find("form").trigger("submit");
+
+    await wrapper.vm.$nextTick();
+
+    expect(requestHandlers.resetPasswordMutationHandler).toBeCalledTimes(1);
+    expect(requestHandlers.resetPasswordMutationHandler).toBeCalledWith({
+      password: "my password",
+      token: "some-token",
+    });
+
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find("article.message.is-danger").text()).toContain(
+      "The token you provided is invalid"
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("redirects to homepage if token is valid", async () => {
+    const wrapper = generateWrapper();
+
+    wrapper.findAll('input[type="password"').setValue("my password");
+    wrapper.find("form").trigger("submit");
+
+    await wrapper.vm.$nextTick();
+
+    expect(requestHandlers.resetPasswordMutationHandler).toBeCalledTimes(1);
+    expect(requestHandlers.resetPasswordMutationHandler).toBeCalledWith({
+      password: "my password",
+      token: "some-token",
+    });
+    expect(jest.isMockFunction(wrapper.vm.$router.push)).toBe(true);
+    await flushPromises();
+    expect($router.push).toHaveBeenCalledWith({ name: RouteName.HOME });
+  });
+});

js/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Reset page renders correctly 1`] = `
+<section class="section container">
+  <div class="columns is-mobile is-centered">
+    <div class="column is-half-desktop">
+      <h1 class="title">
+        Password reset
+      </h1>
+      <form>
+        <div class="field"><label class="label">Password</label>
+          <div class="control has-icons-right is-clearfix"><input type="password" autocomplete="on" aria-required="true" required="required" minlength="6" class="input">
+            <!----><span class="icon is-right has-text-primary is-clickable"><i class="mdi mdi-eye mdi-24px"></i></span>
+            <!---->
+          </div>
+          <!---->
+        </div>
+        <div class="field"><label class="label">Password (confirmation)</label>
+          <div class="control has-icons-right is-clearfix"><input type="password" autocomplete="on" aria-required="true" required="required" minlength="6" class="input">
+            <!----><span class="icon is-right has-text-primary is-clickable"><i class="mdi mdi-eye mdi-24px"></i></span>
+            <!---->
+          </div>
+          <!---->
+        </div> <button class="button is-primary">
+          Reset my password
+        </button>
+      </form>
+    </div>
+  </div>
+</section>
+`;
+
+exports[`Reset page shows error if token is invalid 1`] = `
+<section class="section container">
+  <div class="columns is-mobile is-centered">
+    <div class="column is-half-desktop">
+      <h1 class="title">
+        Password reset
+      </h1>
+      <transition-stub name="fade">
+        <article class="message is-danger">
+          <header class="message-header">
+            <p>Error</p><button type="button" class="delete"></button>
+          </header>
+          <section class="message-body">
+            <div class="media">
+              <!---->
+              <div class="media-content">The token you provided is invalid.</div>
+            </div>
+          </section>
+        </article>
+      </transition-stub>
+      <form>
+        <div class="field"><label class="label">Password</label>
+          <div class="control has-icons-right is-clearfix"><input type="password" autocomplete="on" aria-required="true" required="required" minlength="6" class="input">
+            <!----><span class="icon is-right has-text-primary is-clickable"><i class="mdi mdi-eye mdi-24px"></i></span>
+            <!---->
+          </div>
+          <!---->
+        </div>
+        <div class="field"><label class="label">Password (confirmation)</label>
+          <div class="control has-icons-right is-clearfix"><input type="password" autocomplete="on" aria-required="true" required="required" minlength="6" class="input">
+            <!----><span class="icon is-right has-text-primary is-clickable"><i class="mdi mdi-eye mdi-24px"></i></span>
+            <!---->
+          </div>
+          <!---->
+        </div> <button class="button is-primary">
+          Reset my password
+        </button>
+      </form>
+    </div>
+  </div>
+</section>
+`;

js/tests/unit/specs/components/User/login.spec.ts

@@ -36,7 +36,7 @@ describe("Render login form", () => {
     baseData: Record<string, unknown> = {},
     customMocks: Record<string, unknown> = {}
   ) => {
-    const cache = new InMemoryCache({ addTypename: true });
+    const cache = new InMemoryCache({ addTypename: false });
 
     mockClient = createMockClient({
       cache,