From 10c997009e0890813fe3316595b7cc501d0b2fe4 Mon Sep 17 00:00:00 2001
From: Kenneth Trecy Tobias <19201.tobias.kennethtrecy.c@gmail.com>
Date: Tue, 13 Sep 2022 23:29:50 +0800
Subject: [PATCH] unit(consultation): prepare test to render chat message with
picture
---
.../chat_window/chat_message_item.spec.ts | 97 ++++++++++++++++++-
1 file changed, 96 insertions(+), 1 deletion(-)
diff --git a/components/consultation/chat_window/chat_message_item.spec.ts b/components/consultation/chat_window/chat_message_item.spec.ts
index c2843c829..accbf0c47 100644
--- a/components/consultation/chat_window/chat_message_item.spec.ts
+++ b/components/consultation/chat_window/chat_message_item.spec.ts
@@ -1,5 +1,5 @@
import { shallowMount } from "@vue/test-utils"
-import type { TextMessage } from "$/types/message"
+import type { TextMessage, StatusMessage } from "$/types/message"
import type { DeserializedUserDocument } from "$/types/documents/user"
import type { DeserializedChatMessageResource } from "$/types/documents/chat_message"
@@ -34,6 +34,12 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
"userProfile": user
}
}
+ },
+ "stubs": {
+ "ProfilePicture": {
+ "name": "ProfilePicture",
+ "template": "
"
+ }
}
},
"props": {
@@ -54,10 +60,12 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
const messageItem = wrapper.find(".message-item")
const messageItemName = wrapper.find(".message-item-name")
const messageItemContent = wrapper.find(".message-item-content")
+ const messageItemProfilePicture = wrapper.find(".message-item .align-right + img")
expect(messageItem.find(".align-right").exists()).toBeTruthy()
expect(messageItemName.html()).toContain(user.data.name)
expect(messageItemContent.html()).toContain(textValue)
+ expect(messageItemProfilePicture.exists()).toBeTruthy()
})
it("should show other's text message properly", () => {
@@ -105,6 +113,12 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
"userProfile": user
}
}
+ },
+ "stubs": {
+ "ProfilePicture": {
+ "name": "ProfilePicture",
+ "template": "
"
+ }
}
},
"props": {
@@ -125,9 +139,90 @@ describe("Component: consultation/chat_window/chat_message_item", () => {
const messageItem = wrapper.find(".message-item")
const messageItemName = wrapper.find(".message-item-name")
const messageItemContent = wrapper.find(".message-item-content")
+ const messageItemProfilePicture = wrapper.find(".message-item img:first-child")
expect(messageItem.find(".align-left").exists()).toBeTruthy()
expect(messageItemName.html()).toContain(other.data.name)
expect(messageItemContent.html()).toContain(textValue)
+ expect(messageItemProfilePicture.exists()).toBeTruthy()
+ })
+
+ it("should show other's status message properly", () => {
+ const CURRENT_TIME = new Date()
+ const user = {
+ "data": {
+ "email": "",
+ "id": "1",
+ "kind": "reachable_employee",
+ "name": "A",
+ "prefersDark": true,
+ "profilePicture": {
+ "data": {
+ "fileContents": "http://example.com/image_a",
+ "id": "1",
+ "type": "profile_picture"
+ }
+ },
+ "type": "user"
+ }
+ } as DeserializedUserDocument<"profilePicture">
+ const other = {
+ "data": {
+ "email": "",
+ "id": "2",
+ "kind": "student",
+ "name": "B",
+ "prefersDark": true,
+ "profilePicture": {
+ "data": {
+ "fileContents": "http://example.com/image_b",
+ "id": "2",
+ "type": "profile_picture"
+ }
+ },
+ "type": "user"
+ }
+ } as DeserializedUserDocument<"profilePicture">
+ const textValue = "Hello foo!"
+ const wrapper = shallowMount(Component, {
+ "global": {
+ "provide": {
+ "pageContext": {
+ "pageProps": {
+ "userProfile": user
+ }
+ }
+ },
+ "stubs": {
+ "ProfilePicture": {
+ "name": "ProfilePicture",
+ "template": "
"
+ }
+ }
+ },
+ "props": {
+ "chatMessage": {
+ "createdAt": CURRENT_TIME,
+ "data": {
+ "value": textValue
+ },
+ "id": "0",
+ "kind": "status",
+ "type": "chat_message",
+ "updatedAt": CURRENT_TIME,
+ "user": other
+ } as DeserializedChatMessageResource<"user"> & StatusMessage<"deserialized">
+ }
+ })
+
+ const messageItem = wrapper.find(".message-item")
+ const messageItemName = wrapper.find(".message-item-name")
+ const messageItemContent = wrapper.find(".message-item-content")
+ const messageItemProfilePicture = wrapper.find(".message-item img")
+
+ expect(messageItem.find(".align-center").exists()).toBeTruthy()
+ expect(messageItemName.html()).toContain(other.data.name)
+ expect(messageItemContent.html()).toContain(textValue)
+ expect(messageItemProfilePicture.exists()).toBeFalsy()
})
})