added Test for the Entry List

src/components/EntryForm.test.ts

@@ -136,6 +136,6 @@ describe('Entry Form tests', () => {
 		const errorSpans = component.findAll('[data-test="error-msg"]')
 
 		expect(errorSpans.length).toBe(0)
-		expect(component.emitted('submit'))
+		expect(component.emitted('submit')).toBeTruthy()
 	})
-})
+})

src/components/EntryList.test.ts

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { describe, it } from "vitest";
+import { describe, expect, it } from "vitest";
 import { generateList } from "@/data/entries.test";
 import { Entry } from "@/data/entries";
 import { faker } from "@faker-js/faker";
@@ -7,25 +7,67 @@ import moment from "moment";
 import EntryList from '@/components/EntryList.vue'
 
 describe('entry list tests', () => {
-	function mountListWithSampelData(dataAmount: number) {
-		const sampleData = generateList(dataAmount, () => <Entry>{
-			name: faker.word.noun(),
-			text: faker.lorem.paragraph(),
-			last_reset: moment()
+    function mountListWithSampelData(dataAmount: number): { component: ReturnType<typeof mount>, entries: Entry[] } {
+        const sampleData = generateList(dataAmount, () => <Entry>{
+            name: faker.word.noun(),
+            text: faker.lorem.paragraph(),
+            last_reset: moment()
 
-		})
+        })
 
-		return mount(EntryList, {props: {
-			entries: sampleData
-		}})
-	}
+        return {
+            component: mount(EntryList, {
+                props: {
+                    entries: sampleData
+                }
+            }),
+            entries: sampleData
+        }
+    }
 
 
 
-	it('displays no entry when the inputted list is empty', () => {
-		const component = mountListWithSampelData(0)
+    it('displays no entry when the inputted list is empty', () => {
+        const { component } = mountListWithSampelData(0)
+        const entryButtons = component.findAll('[test-data="entry-button"]')
 
-		component.find('')
+        expect(entryButtons.length).toBe(0)
+    })
 
-	})
-})
+    it('displays no entry when 10 Entries are passed to the component', () => {
+        const { component } = mountListWithSampelData(10)
+        const entryButtons = component.findAll('[test-data="entry-button"]')
+
+        expect(entryButtons.length).toBe(10)
+    })
+
+    it('includes the content of the passed list', () => {
+        const { component, entries } = mountListWithSampelData(10)
+        const entryButtons = component.findAll('[test-data="entry-button"]')
+        const names = entryButtons.map(button => button.text())
+
+        for (let entry of entries) {
+            expect(names).toContain(entry.name + '0 days')
+        }
+    })
+
+    it('triggers event openDetail when one of the Buttons is pressed', () => {
+        const { component, entries } = mountListWithSampelData(10)
+        const entryButtons = component.findAll('[test-data="entry-button"]')
+        const names = entries.map(entry => entry.name)
+
+        for (let i = 0; i < entryButtons.length; i++) {
+            entryButtons[i].trigger('click')
+        }
+
+        expect(component.emitted('openDetail')).toBeTruthy()
+        expect(component.emitted('openDetail')).toBeDefined()
+        expect(component.emitted('openDetail')).toHaveLength(10)
+
+        for (let name of names) {
+            // force unwrap because value is allrady asserted to be defined
+            expect(component.emitted('openDetail')!.map(emit => emit[0]))
+                .toContain(name)
+        }
+    })
+})

src/components/EntryList.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { Entry, getDifferenceToToday } from '@/data/entries';
+import { Button } from './ui/button';
+import { ScrollArea } from './ui/scroll-area';
+import { Badge } from './ui/badge';
 
 defineProps<{
 	entries: Entry[]
@@ -21,6 +24,7 @@ function openDetailWith(name: string) {
 			<header id="title" class="flex w-full h-56 justify-center items-center flex-row">Accident Board</header>
 			<main class="wrapper sm:w-3/4 w-11/12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
 				<Button v-for="entry in entries" class="w-full p-10 flex flex-col items-center gap-2"
+                    test-data="entry-button"
 					@click="openDetailWith(entry.name)">
 					<span>{{ entry.name }}</span>
 					<Badge variant="secondary">{{ getDifferenceToToday(entry.last_reset) }} days</Badge>
@@ -28,4 +32,4 @@ function openDetailWith(name: string) {
 			</main>
 		</div>
 	</ScrollArea>
-</template>
+</template>