I am facing difficulties when it comes to creating tests. Currently, I have a view that is supposed to verify an email address using an authentication code. At the moment, the view exists but no connection is established with an email service or code generator. The issue I'm encountering revolves around an expected value of an empty property. Here's the error message:
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 in order to make sure the verificationCode remains empty? How can I get this test to pass successfully?