Natuurlijk! Hier is een stapsgewijze uitleg om een Vue.js component te ontwikkelen met geautomatiseerde visual regression testing, inclusief het detecteren van visuele veranderingen en het voorkomen van regressieproblemen met tools zoals Percy of Chromatic. --- ### 1. Vue.js component maken Begin met het ontwikkelen van je Vue.js component voor de productkaart, bijvoorbeeld `ProductCard.vue`: ```vue <template> <div class="product-card"> <img :src="product.image" alt="Product afbeelding" /> <h2>{{ product.title }}</h2> <p class="price">{{ product.price }}</p> </div> </template> <script> export default { props: { product: Object } } </script> <style scoped> .product-card { font-family: Arial, sans-serif; display: flex; flex-direction: column; width: 200px; } h2 { font-family: 'Helvetica Neue', sans-serif; font-size: 1.2em; } .price { color: green; font-weight: bold; } </style> ``` --- ### 2. Visual Regression Testing setup #### a. Gebruik van Chromatic of Percy **Chromatic** en **Percy** zijn populaire tools voor visuele regressietests die integreren met CI/CD pipelines. - **Chromatic**: - Werkt uitstekend met Storybook, dat je ook kunt gebruiken voor je componenten. - **Stappen**: 1. Installeer Storybook en voeg je Vue componenten toe. 2. Installeer Chromatic: ```bash npm install --save-dev chromatic ``` 3. Voeg een script toe in `package.json`: ```json "scripts": { "chromatic": "chromatic --project-token=<je-project-token>" } ``` 4. Run Chromatic: ```bash npm run chromatic ``` 5. Chromatic vergelijkt automatisch visuele snapshots en toont regressies. - **Percy**: - Werkt goed met Puppeteer of Playwright. - **Stappen**: 1. Installeer Percy CLI: ```bash npm install --save-dev @percy/cli @percy/puppeteer ``` 2. Maak een testscript met Puppeteer dat je component rendert: ```js const puppeteer = require('@percy/puppeteer'); (async () => { await puppeteer PercySnapshot('Product Card', async (page) => { await page.goto('http://localhost:8080'); // of de route waar je component zichtbaar is // eventueel: wacht tot alles geladen is }); })(); ``` 3. Run Percy: ```bash npx percy exec -- node your-test-script.js ``` 4. Percy vergelijkt snapshots en geeft visuele regressie-rapporten. --- ### 3. Testomgeving op je lokale machine Gebruik **Jest** in combinatie met **Puppeteer** voor het automatiseren van visuele tests: ```js // example.test.js const puppeteer = require('puppeteer'); describe('Visuele regressie test voor ProductCard', () => { let browser; let page; beforeAll(async () => { browser = await puppeteer.launch(); page = await browser.newPage(); }); afterAll(async () => { await browser.close(); }); test('Controleert visuele consistentie', async () => { await page.goto('http://localhost:8080/testpagina'); // pagina met de component // Wacht tot de component geladen is await page.waitForSelector('.product-card'); // Maak een screenshot voor visueel testen const screenshot = await page.screenshot(); // Vergelijk met bestaande snapshot (bijvoorbeeld met jest-image-snapshot) // of stuur naar Percy/Chromatic }); }); ``` ### 4. Controleren van lettertypen en lay-out - **Lettertypen**: - Zorg dat je font-family consistent is in je CSS. - Gebruik Percy of Chromatic om te controleren of de lettertypen correct worden weergegeven. - **Lay-out**: - Gebruik CSS (bijv. Flexbox, grid) voor consistente lay-out. - Voer visuele testen uit op verschillende schermformaten (responsive testing). --- ### 5. Preventie van regressieproblemen - **Automatiseer** je tests met CI/CD pipelines. - **Maak regelmatig snapshots** en vergelijk ze met vorige versies. - **Gebruik visuele review tools** zoals Percy of Chromatic voor goedkeuring. - **Documenteer afwijkingen** en pas je componenten aan om regressies te voorkomen. --- ### Samenvatting - Bouw je Vue component. - Configureer visuele regressietests met Percy of Chromatic. - Gebruik Puppeteer en Jest voor lokale tests. - Controleer lettertypen en lay-out door consistente CSS en visuele snapshots. - Automatiseer en integreer tests in je ontwikkelproces. --- Heeft u nog verdere vragen of behoefte aan specifieke codevoorbeelden?

Hier is een complete uitleg voor het ontwikkelen van een Vue.js productkaart component met geautomatiseerde visual regression tests: ## Vue.js Productkaart Component ```vue <template> <div class="product-card" data-testid="product-card"> <div class="image-container"> <img :src="product.image" :alt="product.title" class="product-image" data-testid="product-image" /> </div> <div class="product-content"> <h3 class="product-title" data-testid="product-title"> {{ product.title }} </h3> <p class="product-price" data-testid="product-price"> {{ formatPrice(product.price) }} </p> </div> </div> </template> <script> export default { name: 'ProductCard', props: { product: { type: Object, required: true, validator: (product) => { return product.title && product.price && product.image } } }, methods: { formatPrice(price) { return `€${price.toFixed(2)}` } } } </script> <style scoped> .product-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; max-width: 300px; font-family: 'Inter', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: box-shadow 0.3s ease; } .product-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .image-container { width: 100%; height: 200px; overflow: hidden; border-radius: 4px; margin-bottom: 12px; } .product-image { width: 100%; height: 100%; object-fit: cover; } .product-title { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0 0 8px 0; color: #333; } .product-price { font-size: 20px; font-weight: 700; color: #2c5aa0; margin: 0; } </style> ``` ## Test Setup met Jest, Puppeteer en Percy ### 1. Installatie vereiste packages ```bash npm install --save-dev jest @vue/test-utils puppeteer percy-cli npm install --save-dev jest-puppeteer eslint-plugin-jest ``` ### 2. Jest Configuratie (jest.config.js) ```javascript module.exports = { preset: '@vue/cli-plugin-unit-jest', testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'], setupFilesAfterEnv: ['<rootDir>/tests/setup.js'], testEnvironment: 'jsdom', } ``` ### 3. Puppeteer Configuratie (jest-puppeteer.config.js) ```javascript module.exports = { launch: { headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'], defaultViewport: { width: 1280, height: 720 } } } ``` ### 4. Visual Regression Test (tests/visual/productCard.visual.test.js) ```javascript import percySnapshot from '@percy/puppeteer' import puppeteer from 'puppeteer' describe('ProductCard Visual Regression Tests', () => { let browser let page beforeAll(async () => { browser = await puppeteer.launch() page = await browser.newPage() await page.setViewport({ width: 1280, height: 720 }) }) afterAll(async () => { await browser.close() }) test('ProductCard ziet er correct uit met standaard product', async () => { await page.goto('http://localhost:8080/test-visual') // Wacht tot component geladen is await page.waitForSelector('[data-testid="product-card"]') // Percy snapshot voor visuele vergelijking await percySnapshot(page, 'ProductCard - Standaard weergave') }) test('ProductCard behoudt consistent lettertype en layout', async () => { await page.goto('http://localhost:8080/test-visual') await page.waitForSelector('[data-testid="product-card"]') // Controleer specifieke visuele aspecten const styles = await page.evaluate(() => { const card = document.querySelector('[data-testid="product-card"]') const title = document.querySelector('[data-testid="product-title"]') const price = document.querySelector('[data-testid="product-price"]') return { cardPadding: window.getComputedStyle(card).padding, titleFontSize: window.getComputedStyle(title).fontSize, titleFontFamily: window.getComputedStyle(title).fontFamily, priceColor: window.getComputedStyle(price).color, priceFontWeight: window.getComputedStyle(price).fontWeight } }) // Asserties voor visuele consistentie expect(styles.cardPadding).toBe('16px') expect(styles.titleFontSize).toBe('18px') expect(styles.titleFontFamily).toContain('Inter') expect(styles.priceColor).toBe('rgb(44, 90, 160)') expect(styles.priceFontWeight).toBe('700') await percySnapshot(page, 'ProductCard - Lettertype en layout controle') }) test('ProductCard met lange titel behoudt layout', async () => { await page.goto('http://localhost:8080/test-visual-long-title') await page.waitForSelector('[data-testid="product-card"]') await percySnapshot(page, 'ProductCard - Lange titel scenario') }) }) ``` ### 5. Test Helper Component (tests/visual/TestWrapper.vue) ```vue <template> <div id="visual-test-app"> <ProductCard :product="testProduct" /> </div> </template> <script> import ProductCard from '@/components/ProductCard.vue' export default { name: 'TestWrapper', components: { ProductCard }, data() { return { testProduct: { title: 'Premium Wireless Headphones', price: 199.99, image: '/test-image.jpg' } } } } </script> ``` ### 6. Package.json Scripts ```json { "scripts": { "test:visual": "percy exec -- jest tests/visual/", "test:visual:local": "jest tests/visual/ --verbose", "percy:finalize": "percy finalize --all" } } ``` ## Visuele Regressie Preventie Strategie ### 1. Percy Integratie - **Automatische detectie**: Percy vergelijkt screenshots met baseline images - **Pixel-perfect vergelijking**: Detecteert subtiele visuele veranderingen - **Cross-browser testing**: Test consistentie across verschillende browsers ### 2. Chromatic Alternatief ```bash npm install --save-dev chromatic ``` ```javascript // chromatic.config.js module.exports = { projectId: 'your-project-id', storybookBuildDir: 'build/storybook' } ``` ### 3. Preventieve Maatregelen **CSS Variabelen voor Consistentie:** ```css :root { --font-primary: 'Inter', sans-serif; --color-primary: #2c5aa0; --spacing-md: 16px; --border-radius: 8px; } ``` **Layout Guard Tests:** ```javascript test('Layout blijft consistent bij verschillende viewports', async () => { const viewports = [ { width: 375, height: 667 }, // Mobile { width: 768, height: 1024 }, // Tablet { width: 1280, height: 720 } // Desktop ] for (const viewport of viewports) { await page.setViewport(viewport) await percySnapshot(page, `ProductCard - ${viewport.width}px breed`) } }) ``` ## Uitvoering en Monitoring 1. **Lokaal testen**: `npm run test:visual:local` 2. **CI/CD integratie**: Percy snapshots in pipeline 3. **Review proces**: Visuele changes vereisen approval 4. **Baseline updates**: Bij bewuste visuele wijzigingen Deze setup garandeert dat lettertypen, layout en styling consistent blijven across alle wijzigingen, en detecteert regressies voordat ze in productie terechtkomen.