♻️ (eta) create an ETA component

.doc-jitrc

@@ -1,6 +1,7 @@
 {
   "patterns": {
     "**/*.vue": "https://vuejs.org/guide/introduction.html",
+    "**/*.test.ts": "https://v1.test-utils.vuejs.org/guides",
     "**/*.store.ts": "https://pinia.vuejs.org/introduction.html",
     "**/router/*.ts": "https://router.vuejs.org/"
   }

src/components/EstimationTimeArrival.test.ts

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import EstimationTimeArrival from './EstimationTimeArrival.vue'
+
+describe('Estimation Time Arrival', () => {
+  it('renders an ETA tag and the estimation', () => {
+    const wrapper = mount(EstimationTimeArrival, {
+      props: {
+        estimation: 4
+      }
+    })
+
+    expect(wrapper.get('.tags')).toBeDefined()
+
+    const tags = wrapper.findAll('.tag')
+
+    expect(tags.length).toBe(2)
+    const [eta, label] = tags
+
+    expect(eta.text()).toEqual('ETA')
+    expect(label.text()).toEqual('4 minutes')
+  })
+})

src/components/EstimationTimeArrival.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  estimation: number
+}>()
+const label = computed(() => `${props.estimation} minutes`)
+</script>
+
+<template>
+  <div class="estimation-time-arrival tags has-addons">
+    <div class="tag">ETA</div>
+    <div class="tag is-primary" data-test="tag-label">
+      {{ label }}
+    </div>
+  </div>
+</template>