Vue 测试期望的空值
Vue testing expected empty value
我正在努力创建测试。我有一个最终会验证带有授权码的电子邮件地址的视图。我现在只有视图,没有任何东西连接到电子邮件或生成代码。我一直得到一个空 属性 的期望值。这是我收到的错误:
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"}}
测试文件:
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);
});
vue 文件:
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>
最后,我要测试的文件:
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 };
}
我需要做什么才能让 verificationCode
为空?或者让这个测试通过?
有几个问题需要解决:
useVerify()
似乎没有在 API 响应中包含 verificationCode
属性,因此应该从 mockVerify
:
//const verificationCode = null
const mockVerify = {
// verificationCode, ❌ this is not actually inserted in useVerify()
input: {
username: '123456',
},
}
useVerify()
从 Verify
字段读取 API 响应,但是您对 API 响应的模拟设置了 signup
领域:
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,
}),
}),
}),
}))
您的第二个测试断言 console.log()
是用 USER:
、undefined
和 mockVerify
调用的,但实际调用是在 [=13] =] 只有两个参数:
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) // ✅
})
注意:使用console.log()
验证行为可能会导致脆弱的测试。如果日志记录是预期的功能(不寻常但并非不可能),我建议只测试 console.log()
。
我正在努力创建测试。我有一个最终会验证带有授权码的电子邮件地址的视图。我现在只有视图,没有任何东西连接到电子邮件或生成代码。我一直得到一个空 属性 的期望值。这是我收到的错误:
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"}}
测试文件:
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);
});
vue 文件:
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>
最后,我要测试的文件:
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 };
}
我需要做什么才能让 verificationCode
为空?或者让这个测试通过?
有几个问题需要解决:
useVerify()
似乎没有在 API 响应中包含verificationCode
属性,因此应该从mockVerify
://const verificationCode = null const mockVerify = { // verificationCode, ❌ this is not actually inserted in useVerify() input: { username: '123456', }, }
useVerify()
从Verify
字段读取 API 响应,但是您对 API 响应的模拟设置了signup
领域: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, }), }), }), }))
您的第二个测试断言
console.log()
是用USER:
、undefined
和mockVerify
调用的,但实际调用是在 [=13] =] 只有两个参数: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) // ✅ })
注意:使用console.log()
验证行为可能会导致脆弱的测试。如果日志记录是预期的功能(不寻常但并非不可能),我建议只测试 console.log()
。