unit(consultation): prepare test to render chat message with picture

lemredd · Sep 13, 2022 · 10c9970 · 10c9970
1 parent b847ccc
commit 10c9970
Showing 1 changed file with 96 additions and 1 deletion.
diff --git 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": "<img/>"
+					}
 				}
 			},
 			"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": "<img/>"
+					}
 				}
 			},
 			"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<any>(Component, {
+			"global": {
+				"provide": {
+					"pageContext": {
+						"pageProps": {
+							"userProfile": user
+						}
+					}
+				},
+				"stubs": {
+					"ProfilePicture": {
+						"name": "ProfilePicture",
+						"template": "<img/>"
+					}
+				}
+			},
+			"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()
 	})
 })