Natuurlijk! Hier is een stapsgewijze uitleg om een Vue.js component te ontwikkelen met geautomatiseerde unit tests, inclusief gebruik van Jest en Vue Test Utils. ### Stap 1: Component maken Laten we een eenvoudige Vue-component maken die taken toevoegt en verwijdert. ```vue <!-- TodoList.vue --> <template> <div> <input v-model="newTask" placeholder="Nieuwe taak" /> <button @click="addTask">Toevoegen</button> <ul> <li v-for="(task, index) in tasks" :key="index"> {{ task }} <button @click="removeTask(index)">Verwijderen</button> </li> </ul> </div> </template> <script> export default { data() { return { newTask: '', tasks: [] }; }, methods: { addTask() { if (this.newTask.trim() !== '') { this.tasks.push(this.newTask.trim()); this.newTask = ''; } }, removeTask(index) { this.tasks.splice(index, 1); } } }; </script> ``` ### Stap 2: Unit tests schrijven met Jest en Vue Test Utils Installeer eerst de benodigde dependencies: ```bash npm install --save-dev jest @vue/test-utils vue-jest ``` Voeg een testbestand toe, bijvoorbeeld `TodoList.spec.js`: ```js import { shallowMount } from '@vue/test-utils'; import TodoList from '@/components/TodoList.vue'; describe('TodoList.vue', () => { let wrapper; beforeEach(() => { wrapper = shallowMount(TodoList); }); // Test of de component rendert test('rendert de component correct', () => { expect(wrapper.exists()).toBe(true); expect(wrapper.find('input').exists()).toBe(true); expect(wrapper.find('button').exists()).toBe(true); }); // Test of een taak toevoegen test('voegt een taak toe bij knopklik', async () => { const input = wrapper.find('input'); await input.setValue('Nieuwe taak'); const button = wrapper.find('button'); await button.trigger('click'); expect(wrapper.vm.tasks).toContain('Nieuwe taak'); expect(wrapper.vm.newTask).toBe(''); }); // Test of een taak verwijderen test('verwijdert een taak bij knopklik', async () => { // Voeg eerst een taak toe wrapper.setData({ tasks: ['Taak 1', 'Taak 2'] }); await wrapper.vm.$nextTick(); const removeButtons = wrapper.findAll('li button'); await removeButtons.at(0).trigger('click'); expect(wrapper.vm.tasks).not.toContain('Taak 1'); expect(wrapper.vm.tasks).toContain('Taak 2'); }); }); ``` ### Stap 3: Testen uitvoeren Voeg in je `package.json` een script toe: ```json "scripts": { "test": "jest" } ``` En voer de tests uit met: ```bash npm run test ``` ### Samenvatting: - Je hebt een Vue-component gemaakt die taken toevoegt en verwijdert. - Met Vue Test Utils en Jest heb je tests geschreven voor: - Rendering van de component - Klikken op de knop om een taak toe te voegen - Verwijderen van een taak via de knop - Je kunt deze aanpak uitbreiden met meer tests, zoals invoer validatie of reactieve data-binding. Wil je nog meer voorbeelden of hulp bij een specifiek onderdeel?

Hier is een complete uitleg voor het ontwikkelen en testen van een Vue.js takenlijst component: ## Vue.js Takenlijst Component ```vue <template> <div class="task-list"> <h2>Mijn Taken</h2> <div class="add-task"> <input v-model="newTask" @keyup.enter="addTask" placeholder="Voer een nieuwe taak in" class="task-input" /> <button @click="addTask" class="add-btn">Taak Toevoegen</button> </div> <ul class="tasks"> <li v-for="(task, index) in tasks" :key="index" class="task-item"> <span>{{ task }}</span> <button @click="removeTask(index)" class="remove-btn">Verwijderen</button> </li> </ul> <p v-if="tasks.length === 0" class="no-tasks">Geen taken toegevoegd</p> </div> </template> <script> export default { name: 'TaskList', data() { return { newTask: '', tasks: [] } }, methods: { addTask() { if (this.newTask.trim() !== '') { this.tasks.push(this.newTask.trim()) this.newTask = '' } }, removeTask(index) { this.tasks.splice(index, 1) } } } </script> <style scoped> .task-list { max-width: 500px; margin: 0 auto; padding: 20px; } .task-input { padding: 8px; margin-right: 10px; width: 200px; } .add-btn, .remove-btn { padding: 8px 12px; cursor: pointer; } .tasks { list-style: none; padding: 0; } .task-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #ddd; } .no-tasks { color: #666; font-style: italic; } </style> ``` ## Test Setup met Jest en Vue Test Utils ### 1. Installatie ```bash npm install --save-dev @vue/test-utils jest vue-jest ``` ### 2. Jest Configuratie (jest.config.js) ```javascript module.exports = { preset: '@vue/cli-plugin-unit-jest', testMatch: [ '**/tests/unit/**/*.spec.[jt]s?(x)' ], collectCoverageFrom: [ 'src/**/*.{js,vue}', '!src/main.js' ] } ``` ## Unit Tests voor TaskList Component ```javascript // tests/unit/TaskList.spec.js import { mount } from '@vue/test-utils' import TaskList from '@/components/TaskList.vue' describe('TaskList.vue', () => { // Test 1: Component rendert correct it('rendert het component correct', () => { const wrapper = mount(TaskList) // Controleer of de titel aanwezig is expect(wrapper.find('h2').text()).toBe('Mijn Taken') // Controleer of inputveld aanwezig is expect(wrapper.find('.task-input').exists()).toBe(true) // Controleer of knop aanwezig is expect(wrapper.find('.add-btn').exists()).toBe(true) expect(wrapper.find('.add-btn').text()).toBe('Taak Toevoegen') }) // Test 2: Knop klik triggert addTask methode it('triggert addTask bij knop klik', async () => { const wrapper = mount(TaskList) // Stel input waarde in await wrapper.find('.task-input').setValue('Nieuwe taak') // Klik op de knop await wrapper.find('.add-btn').trigger('click') // Controleer of taak is toegevoegd expect(wrapper.vm.tasks).toContain('Nieuwe taak') expect(wrapper.vm.newTask).toBe('') // Input moet leeg zijn na toevoegen }) // Test 3: Taak toevoegen met Enter key it('voegt taak toe met Enter key', async () => { const wrapper = mount(TaskList) await wrapper.find('.task-input').setValue('Taak met Enter') await wrapper.find('.task-input').trigger('keyup.enter') expect(wrapper.vm.tasks).toContain('Taak met Enter') }) // Test 4: Lege taak toevoegen wordt voorkomen it('voegt geen lege taken toe', async () => { const wrapper = mount(TaskList) const initialTaskCount = wrapper.vm.tasks.length await wrapper.find('.task-input').setValue(' ') // Alleen spaties await wrapper.find('.add-btn').trigger('click') expect(wrapper.vm.tasks.length).toBe(initialTaskCount) }) // Test 5: Taak verwijderen functionaliteit it('verwijdert taken correct', async () => { const wrapper = mount(TaskList) // Voeg eerst taken toe await wrapper.find('.task-input').setValue('Taak 1') await wrapper.find('.add-btn').trigger('click') await wrapper.find('.task-input').setValue('Taak 2') await wrapper.find('.add-btn').trigger('click') // Verwijder eerste taak await wrapper.find('.remove-btn').trigger('click') expect(wrapper.vm.tasks).not.toContain('Taak 1') expect(wrapper.vm.tasks).toContain('Taak 2') }) // Test 6: Reactieve data updates it('update reactieve data correct', async () => { const wrapper = mount(TaskList) // Test newTask data binding await wrapper.find('.task-input').setValue('Test taak') expect(wrapper.vm.newTask).toBe('Test taak') // Test tasks array updates await wrapper.find('.add-btn').trigger('click') expect(wrapper.vm.tasks).toHaveLength(1) expect(wrapper.vm.tasks[0]).toBe('Test taak') }) // Test 7: Template updates met data wijzigingen it('update template wanneer data wijzigt', async () => { const wrapper = mount(TaskList) // Voeg taak toe await wrapper.find('.task-input').setValue('Zichtbare taak') await wrapper.find('.add-btn').trigger('click') // Controleer of taak zichtbaar is in template expect(wrapper.find('.tasks').text()).toContain('Zichtbare taak') expect(wrapper.find('.no-tasks').exists()).toBe(false) // Verwijder alle taken await wrapper.find('.remove-btn').trigger('click') expect(wrapper.find('.no-tasks').exists()).toBe(true) }) }) ``` ## Test Commands Voeg deze scripts toe aan je `package.json`: ```json { "scripts": { "test:unit": "vue-cli-service test:unit", "test:watch": "vue-cli-service test:unit --watch", "test:coverage": "vue-cli-service test:unit --coverage" } } ``` ## Belangrijke Test Concepten 1. **mount()**: Creëert een volledig gerenderde component instantie 2. **find()**: Zoekt elementen in de component template 3. **trigger()**: Simuleert gebruikersinteracties zoals klikken 4. **setValue()**: Stelt waarden in voor form inputs 5. **async/await**: Voor het afhandelen van Vue's reactieve updates Deze tests dekken alle gevraagde scenario's en demonstreren hoe je component functionaliteit en reactieve data kunt testen met Vue Test Utils en Jest.