From 1febe7d72e2f37cccd5217eec46000d3152f8891 Mon Sep 17 00:00:00 2001
From: "Jarlem Red J. de Peralta" <lmoa.jhdp@gmail.com>
Date: Tue, 10 Jan 2023 08:51:37 +0800
Subject: [PATCH] refactor(component): split `historyItem`

This also adds `result` based on `historyItem`
---
 .../HistoryContainer.test.ts                  | 23 ------------------
 .../HistoryContainer/HistoryItem.vue          | 24 +++++++++++++++++++
 2 files changed, 24 insertions(+), 23 deletions(-)
 create mode 100644 src/components/CalculatorContainer/HistoryContainer/HistoryItem.vue

diff --git a/src/components/CalculatorContainer/HistoryContainer.test.ts b/src/components/CalculatorContainer/HistoryContainer.test.ts
index e206aee..e7df4d4 100644
--- a/src/components/CalculatorContainer/HistoryContainer.test.ts
+++ b/src/components/CalculatorContainer/HistoryContainer.test.ts
@@ -18,29 +18,6 @@ describe("Component: CalculatorContainer/HistoryContainer", () => {
 		expect(historyListHiddenByDefault.exists()).toBeTruthy()
 	})
 
-	it("can display a history item properly", async() => {
-		const historyItem = {
-			"leftOperand": 1,
-			"operation": "+" as Operations,
-			"rightOperand": 1
-		}
-		const historyList = [ historyItem ]
-		const props = {
-			historyList
-		}
-		const wrapper = shallowMount(Component, { props })
-
-		// mock `isShowingHistoryList = true`
-		const wrapperInternals = wrapper.vm as any
-		wrapperInternals.isShowingHistoryList = true
-		await nextTick()
-
-		const historyListHiddenByDefault = wrapper.find(".history-list.hidden-by-default")
-		const [historyListItem1] = historyListHiddenByDefault.findAll("li.history-item")
-		const expectedTextValue = `${historyItem.leftOperand} ${historyItem.operation} ${ historyItem.rightOperand} =`
-		expect(historyListItem1.text()).toEqual(expectedTextValue)
-	})
-
 	it("should emit to revert evaluation to chosen history item", async() => {
 		const historyItem = {
 			"leftOperand": 1,
diff --git a/src/components/CalculatorContainer/HistoryContainer/HistoryItem.vue b/src/components/CalculatorContainer/HistoryContainer/HistoryItem.vue
new file mode 100644
index 0000000..2c6f01b
--- /dev/null
+++ b/src/components/CalculatorContainer/HistoryContainer/HistoryItem.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HistoryItem } from "@/types/history"
+
+import evaluate from "@/CalculatorContainer/helpers/evaluate"
+import joinHistoryItemParts from "@/CalculatorContainer/HistoryContainer/helpers/joinHistoryItemParts"
+
+interface Props {
+	historyItem: HistoryItem
+}
+const props = defineProps<Props>()
+
+const result = evaluate(joinHistoryItemParts(props.historyItem))
+</script>
+
+<template>
+	<li class="history-item">
+		<h3 class="expression">
+			{{ joinHistoryItemParts(historyItem) }} =
+		</h3>
+		<h1 class="result">
+			{{ result }}
+		</h1>
+	</li>
+</template>