chore(component): make a general component for profile picture

components/helpers/profile_picture.spec.ts

@@ -0,0 +1,42 @@
+import { shallowMount } from "@vue/test-utils"
+
+import Component from "./profile_picture.vue"
+
+describe("Component: helpers/profile_picture_item", () => {
+	it("should show if user has profile picture", () => {
+		const sampleURL = "/images/profile.png"
+		const wrapper = shallowMount<any>(Component, {
+			"props": {
+				"user": {
+					"data": {
+						"profilePicture": {
+							"data": {
+								"fileContents": sampleURL
+							}
+						}
+					}
+				}
+			}
+		})
+
+		const image = wrapper.find("img")
+		const source = image.attributes("src")
+
+		expect(source).toBe(sampleURL)
+	})
+
+	it("should show if user has profile picture", () => {
+		const wrapper = shallowMount<any>(Component, {
+			"props": {
+				"user": {
+					"data": {}
+				}
+			}
+		})
+
+		const image = wrapper.find("img")
+		const source = image.attributes("src")
+
+		expect(source).toBe("stub")
+	})
+})

components/helpers/profile_picture.vue

@@ -0,0 +1,31 @@
+<template>
+	<img :src="profilePictureURL"/>
+</template>
+<script setup lang="ts">
+import { computed } from "vue"
+
+import type { DeserializedUserDocument } from "$/types/documents/user"
+import type { DeserializedProfilePictureDocument } from "$/types/documents/profile_picture"
+import Icon from "@assets/icon.png"
+
+const {
+	user
+} = defineProps<{
+	user: DeserializedUserDocument<"profilePicture">
+}>()
+
+function isDeserializedProfilePictureDocument(value: any)
+: value is DeserializedProfilePictureDocument {
+	return typeof value === "object"
+}
+
+const profilePictureURL = computed(() => {
+	const { profilePicture } = user.data
+
+	if (isDeserializedProfilePictureDocument(profilePicture)) {
+		return profilePicture.data.fileContents
+	}
+
+	return Icon
+})
+</script>