Vue testing expected empty value

user_8743714 0
Viewed 187

I am am struggling with creating tests. I have a view that will eventually verify an email address with an auth code. I just have the view right now, nothing is hooked up to an email or generating a code. I keep getting an expected value of an empty property. Here's the error I'm getting:

 verifyUser logs results if correct code (123456) is provided

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: "USER:", undefined, {"input": {"username": "123456"}, "verificationCode": null}
    Received
           1: "USER:", undefined
           2: "verificationCode: ", {"input": {"username": "123456"}}

The test file:

import { ref } from "vue";

const verificationCode = null;
const mockVerify = {
  verificationCode,
  input: {
    username: "123456",
  },
};

jest.mock("@vue/apollo-composable", () => ({
  __esModule: true,
  useApolloClient: () => ({
    resolveClient: () => ({
      query: () => ({
        data: { signup: mockVerify },
        loading: false,
        error: null,
      }),
    }),
  }),
}));

test("verifyUser returns undefined if email doesn't meet minimum length", async () => {
  const verificationCode = ref("");
  const { verifyUser } = useVerify(verificationCode);

  const result = await verifyUser();

  expect(result).toBe(undefined);
});

test("verifyUser logs results if correct code (123456) is provided", async () => {
  const consoleSpy = jest.spyOn(console, "log");
  const verificationCode = ref("123456");
  const { verifyUser } = useVerify(verificationCode);

  await verifyUser();

  expect(consoleSpy).toHaveBeenCalledWith("USER:", undefined, mockVerify);
});

the vue file:

  View to validate new user email address from emailed code before completing the registration process.
-->
<template lang="pug">
.Verify
  .Verify__focus
    .Verify__title Verify Your Email
    .Verify__form
      .Verify__field
        va-input.Verify__textInput(
          type="text",
          name="verificationCode",
          placeholder="Verification Code",
          v-model="verificationCode",
          @keyup.enter="verifyUser()"
        )
          template(v-slot:prependInner="")
            va-icon(name="check_circle")

        .Login__buttonRow
          va-button.Login__submitButton(@click="verifyUser") Verify
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import useVerify from "@/views/Signup/Verify/useVerify";

/**
 * Assemble the Verify reactivity.
 *
 * @returns Data for the component to use.
 *  - verificationCode: verification code the user is sent
 *  - verifyUser: function to call to carry out the verification operation.
 */
function setup() {
  const verificationCode = ref("");
  const { verifyUser } = useVerify(verificationCode);

  return {
    verificationCode,
    verifyUser,
  };
}

export default defineComponent({
  name: "Verify",
  setup,
});
</script>

<style lang="scss">
.Verify {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  &__focus {
    width: 360px;
    max-width: 95vw;
  }

  &__field {
    padding-bottom: 0.5em;
  }

  &__buttonRow {
    display: flex;
    justify-content: flex-end;
  }

  &__title {
    font-size: 1.2em;
    padding-bottom: 0.5em;
    text-align: center;
  }
}
</style>

and, finally, the file that I am trying to test:

import { useApolloClient } from "@vue/apollo-composable";
import { ValidatedUser } from "@/models";
import { gql } from "graphql-tag";

const query = gql`
  query Verify($input: Verify) {
    Verify(input: $input) {
      __typename
      token
      user {
        email
        id
      }
    }
  }
`;

/**
 * Retrive apollo client and provide useVerify
 * function to validate input and execute Verify process.
 *
 * @param verificationCode - reactively wrapped email address of the user signing up.
 * @returns useVerify composition functionality.
 */
export default function useVerify(verificationCode: Ref<string>): {
  verifyUser: () => Promise<void>;
} {
  const { resolveClient } = useApolloClient();
  /**
   * Execute the Verify process for the given verification code.
   */
  async function verifyUser(): Promise<void> {
    if (verificationCode.value !== "123456") {
      //TODO: add window that shows the verification code is not valid
      return;
    } else {
      //TODO: link to login page
    }
    const client = resolveClient();

    const variables = {
      input: { username: verificationCode.value },
    };
    const response = await client.query({ query, variables });
    const validatedUser: ValidatedUser = response.data.Verify;
    console.log("USER:", validatedUser);
    console.log("verificationCode: ", variables);
  }
  return { verifyUser };
}

What do I need to do to get the verificationCode to be empty? Or to get this test to pass?

pug vue.js typescript sass
1 Answers

There's a few issues to fix:

  1. useVerify() does not seem to include a verificationCode property in the API response, so that should be removed from mockVerify:

    //const verificationCode = null
const mockVerify = {
  // verificationCode, ❌ this is not actually inserted in useVerify()
  input: {
    username: '123456',
  },
}

  2. useVerify() reads the API response from the Verify field, but your mock of the API response sets a signup field:

    jest.mock('@vue/apollo-composable', () => ({
  __esModule: true,
  useApolloClient: () => ({
    resolveClient: () => ({
      query: () => ({
        // data: { signup: mockVerify }, ❌ useQuery() reads `data.Verify` (not `data.signup`)
        data: { Verify: mockVerify }, // ✅
        loading: false,
        error: null,
      }),
    }),
  }),
}))

  3. Your second test asserts that console.log() was called with USER:, undefined, and mockVerify, but the actual call in useVerify() has only two arguments:

    test('verifyUser logs results if correct code (123456) is provided', async () => {
  ⋮
  // expect(consoleSpy).toHaveBeenCalledWith('USER:', undefined, mockVerify) ❌ useVerify() calls console.log() with only 2 args
  expect(consoleSpy).toHaveBeenCalledWith('USER:', mockVerify) // ✅
})

demo

Note: Using console.log() to verify behavior will probably lead to fragile tests. I recommend only testing for console.log() if logging is an expected feature (unusual but not impossible).

user_62771510
Related