Vue :: Better Testing 2024

© 2017 - 2024 Siam Chamnankit Company Limited. All rights
reserved. Better Testing With Vue application

All rights reserved. 27 Project structure Split by Feature or Domain Nuxt app export default defineNuxtConfig({ devtools: { enabled: true }, modules: ['@nuxtjs/tailwindcss'], extends: ['./domains/users', './domains/products'], })

All rights reserved. 45 Write test with Playwright import { test, expect } from '@playwright/test'; test('add item to list', async ({ page }) => { await page.goto('http://localhost:5173'); await page.fill('#title', '2x4 DIPA Melvin'); await page.click('#add-button'); const item = page.locator('.item:nth-child(1)'); await expect(item).toBeVisible(); }); Passed

All rights reserved. 46 Bad test !! import { test, expect } from '@playwright/test'; test('add item to list', async ({ page }) => { await page.goto('http://localhost:5173'); await page.fill('#title', '2x4 DIPA Melvin'); await page.click('#add-button'); const item = page.locator('.item:nth-child(1)'); await expect(item).toBeVisible(); }); Coupling from test framework and User interface

All rights reserved. 50 Better test import { test } from '../../drivers/virtual/driver'; test("add item to list", async ({ driver }) => { await driver.goTo("/"); await driver.findByTestId("title").type("2x4 DIPA Melvin"); await driver.findByTestId("add-button").click(); await driver .findByText("2x4 DIPA Melvin", { withinTestId: "active items" }) .shouldBeVisible(); }); Decoupling from test framework and User interface

All rights reserved. 53 Better Better test test("add item to list", async ({ driver }) => { const shoppingList = createShoppingList({ driver }); await shoppingList.open(); const newBeer = "2x4 DIPA Melvin”; await shoppingList.expectItemNotOnList(newBeer); await shoppingList.addItem(newBeer); await shoppingList.expectItemOnList(newBeer); }); Test case as specification Human readable

All rights reserved. 54 Domain Specific Language (DSL) const createShoppingList = ({ driver }: { driver: Driver }) => ({ open: async () => { await driver.goTo('/'); }, addItem: async (title: string) => { await driver.findByTestId("title").type(title); await driver.findByTestId("add-button").click(); }, expectItemOnList: async (item: string) => { await driver .findByText(item, { withinTestId: "active items" }) .shouldBeVisible(); }, expectItemNotOnList: async (item: string) => { await driver.queryByText(item).shouldNotExist(); }, });

All rights reserved. 56 Vue app Component Testing Mock Mock Service Worker Testing framework library https://testing-library.com/docs/vue-testing-library/intro Vue Test Utils https://github.com/vuejs/test-utils

All rights reserved. 57 ShoppingList component import { expect, test, render, screen, fireEvent } from '../__test__/utils'; import ShoppingList from './ShoppingList.vue'; test(`Should emit an "remove" event when we click an item`, async () => { let { emitted } = render(ShoppingList, { props: { items: [ { id: '1', title: `2x4 DIPA Melvin 9.9%`, state: `active` }, { id: '2', title: `Muay Thai Kob Khun 6.2%`, state: `active` }, ], }, }); const removeItem = screen.getByRole(`button`, { name: `2x4 DIPA Melvin 9.9%`, }); await fireEvent.click(removeItem); const removeEvents = emitted().remove as unknown[][]; expect(removeEvents[0][0]).toBe('1'); // id of removed item });

Vue :: Better Testing 2024

Vue :: Better Testing 2024

Transcript

More Decks by up1

Other Decks in Programming

Featured