refactor(component): split historyItem

This also adds `result` based on `historyItem`

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,

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>