1'use strict'; 2(globalThis.webpackChunk_nl_design_system_website = globalThis.webpackChunk_nl_design_system_website || []).push([ 3 [23770], 4 { 5 8803(e, n, t) { 6 t.d(n, { Ay: () => d, RM: () => i }); 7 var s = t(86070), 8 o = t(18439); 9 const i = []; 10 function a(e) { 11 const n = { p: 'p', ...(0, o.R)(), ...e.components }; 12 return (0, s.jsx)(n.p, { children: 'De Candidate component kan voorspelbaar worden ingezet door de verschillende organisaties in de community met een eigen huisstijl.' }); 13 } 14 function d(e = {}) { 15 const { wrapper: n } = { ...(0, o.R)(), ...e.components }; 16 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(a, { ...e }) }) : a(e); 17 } 18 }, 19 18439(e, n, t) { 20 t.d(n, { R: () => a, x: () => d }); 21 var s = t(30758); 22 const o = {}, 23 i = s.createContext(o); 24 function a(e) { 25 const n = s.useContext(i); 26 return s.useMemo( 27 function () { 28 return 'function' == typeof e ? e(n) : { ...n, ...e }; 29 }, 30 [n, e], 31 ); 32 } 33 function d(e) { 34 let n; 35 return ((n = e.disableParentContext ? ('function' == typeof e.components ? e.components(o) : e.components || o) : a(e.components)), s.createElement(i.Provider, { value: n }, e.children)); 36 } 37 }, 38 19178(e, n, t) { 39 t.d(n, { Ay: () => d, RM: () => i }); 40 var s = t(86070), 41 o = t(18439); 42 const i = []; 43 function a(e) { 44 const n = { p: 'p', ...(0, o.R)(), ...e.components }; 45 return (0, s.jsx)(n.p, { children: 'De Candidate component kan goed worden ingezet in productie. De component kan omgaan met verschillende soorten data, schermformaten, zoom levels, forced-colors mode en andere gebruikersinstellingen.' }); 46 } 47 function d(e = {}) { 48 const { wrapper: n } = { ...(0, o.R)(), ...e.components }; 49 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(a, { ...e }) }) : a(e); 50 } 51 }, 52 20878(e, n, t) { 53 t.d(n, { Ay: () => d, RM: () => i }); 54 var s = t(86070), 55 o = t(18439); 56 const i = []; 57 function a(e) { 58 const n = { a: 'a', p: 'p', ...(0, o.R)(), ...e.components }; 59 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(n.p, { children: "De component voldoet in testscenario's aantoonbaar aan alle WCAG succescriteria die van toepassing zijn." }), '\n', (0, s.jsxs)(n.p, { children: ["Het is duidelijk welke testscenario's zijn getest en voor welke versie van de ", (0, s.jsx)(n.a, { href: '/baseline/', children: 'NL Design System Baseline' }), ' is getest.'] }), '\n', (0, s.jsx)(n.p, { children: 'Gebruikers kunnen vertrouwen dat alles is gedaan zodat de component toegankelijk ingezet kan worden in de situaties waarvoor de component bedoeld is.' })] }); 60 } 61 function d(e = {}) { 62 const { wrapper: n } = { ...(0, o.R)(), ...e.components }; 63 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(a, { ...e }) }) : a(e); 64 } 65 }, 66 61544(e, n, t) { 67 t.d(n, { Ay: () => d, RM: () => i }); 68 var s = t(86070), 69 o = t(18439); 70 const i = []; 71 function a(e) { 72 const n = { p: 'p', ...(0, o.R)(), ...e.components }; 73 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(n.p, { children: 'De component kan veilig uitgebreid en verbeterd worden, zonder dat het veel tijd kost om vertrouwen te krijgen in de kwaliteit van de nieuwe release.' }), '\n', (0, s.jsx)(n.p, { children: 'Bestaande gebruikers krijgen geen problemen bij het installeren van updates, doordat alle bestaande functionaliteit automatisch wordt getest.' })] }); 74 } 75 function d(e = {}) { 76 const { wrapper: n } = { ...(0, o.R)(), ...e.components }; 77 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(a, { ...e }) }) : a(e); 78 } 79 }, 80 67348(e, n, t) { 81 (t.r(n), t.d(n, { assets: () => h, contentTitle: () => g, default: () => k, frontMatter: () => m, metadata: () => s, toc: () => u })); 82 const s = JSON.parse('{"id":"handboek/definition-of-done/candidate-stappenplan/testfase","title":"4. Testfase","description":"Stappen voor de Testfase van de Definition of Done voor Candidate","source":"@site/docs/handboek/definition-of-done/candidate-stappenplan/4-testfase.mdx","sourceDirName":"handboek/definition-of-done/candidate-stappenplan","slug":"/handboek/estafettemodel/componenten/candidate/testfase","permalink":"/handboek/estafettemodel/componenten/candidate/testfase","draft":false,"unlisted":false,"editUrl":"https://github.com/nl-design-system/documentatie/tree/main/docs/handboek/definition-of-done/candidate-stappenplan/4-testfase.mdx","tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"title":"4. Testfase","hide_title":true,"hide_table_of_contents":false,"sidebar_label":"4. Testfase","sidebar_position":4,"navigation_order":4,"pagination_label":"4. Testfase","description":"Stappen voor de Testfase van de Definition of Done voor Candidate","slug":"/handboek/estafettemodel/componenten/candidate/testfase","keywords":["componenten","de
82sign system","estafettemodel","definition of done","candidate"]},"sidebar":"handboek","previous":{"title":"3. Ontwikkelfase","permalink":"/handboek/estafettemodel/componenten/candidate/ontwikkelfase"},"next":{"title":"5. Publicatiefase","permalink":"/handboek/estafettemodel/componenten/candidate/publicatiefase"}}'); 83 var o = t(86070), 84 i = t(18439), 85 a = t(8803), 86 d = t(20878), 87 r = t(19178), 88 l = t(61544), 89 c = t(69624), 90 p = t(70990); 91 const m = { title: '4. Testfase', hide_title: !0, hide_table_of_contents: !1, sidebar_label: '4. Testfase', sidebar_position: 4, navigation_order: 4, pagination_label: '4. Testfase', description: 'Stappen voor de Testfase van de Definition of Done voor Candidate', slug: '/handboek/estafettemodel/componenten/candidate/testfase', keywords: ['componenten', 'design system', 'estafettemodel', 'definition of done', 'candidate'] }, 92 g = 'Testfase voor Candidate componenten', 93 h = {}, 94 u = [{ value: 'Design Tokens getest', id: 'design-tokens-getest', level: 2 }, { value: 'Doel', id: 'doel', level: 3 }, ...a.RM, { value: 'Uitkomst', id: 'uitkomst', level: 3 }, { value: 'Accessibility getest', id: 'accessibility-getest', level: 2 }, { value: 'Doel', id: 'doel-1', level: 3 }, ...d.RM, { value: 'Uitkomst', id: 'uitkomst-1', level: 3 }, { value: 'Testcases getest', id: 'testcases-getest', level: 2 }, { value: 'Doel', id: 'doel-2', level: 3 }, ...r.RM, { value: 'Uitkomst', id: 'uitkomst-2', level: 3 }, { value: 'Test coverage getest', id: 'test-coverage-getest', level: 2 }, { value: 'Doel', id: 'doel-3', level: 3 }, ...l.RM, { value: 'Uitkomst', id: 'uitkomst-3', level: 3 }, { value: 'Documentatie getest', id: 'documentatie-getest', level: 2 }, { value: 'Doel', id: 'doel-4', level: 3 }, ...c.RM, { value: 'Uitkomst', id: 'uitkomst-4', level: 3 }, { value: 'Rond de Testfase af', id: 'afronden', level: 2 }, { value: 'Doel', id: 'doel-5', level: 3 }, ...p.RM, { value: 'Uitkomst', id: 'uitkomst-5', level: 3 }]; 95 function v(e) { 96 const n = { a: 'a', code: 'code', h1: 'h1', h2: 'h2', h3: 'h3', header: 'header', img: 'img', li: 'li', ol: 'ol', p: 'p', ul: 'ul', ...(0, i.R)(), ...e.components }; 97 return (0, o.jsxs)(o.Fragment, { children: ['\n', (0, o.jsx)(n.header, { children: (0, o.jsx)(n.h1, { id: 'testfase-voor-candidate-componenten', children: 'Testfase voor Candidate componenten' }) }), '\n', (0, o.jsx)(n.p, { children: 'De Testfase start wanneer de Ontwikkelfase is afgerond. Dan zijn alle implementaties beschikbaar zodat alle acceptatiecriteria gevalideerd en testcases uitgevoerd kunnen worden.' }), '\n', (0, o.jsx)(n.p, { children: 'In de Testfase wordt de component getest volgens de acceptatiecriteria en testcases uit de community. Er wordt gevalideerd of de test coverage voldoende is voor een robuust component.' }), '\n', (0, o.jsx)(n.p, { children: 'Door te valideren of er voldoende testcases zijn en een baseline vast te stellen kunnen regressies makkelijk voorkomen worden wanneer de Candidate component wordt doorontwikkeld na feedback uit de community.' }), '\n', (0, o.jsx)(n.p, { children: (0, o.jsx)(n.img, { src: 'https://raw.githubusercontent.com/nl-design-system/documentatie/refs/heads/assets/candidate-stappenplan-testfase.png', alt: 'Een overzicht van de stappen in de Testfase, van links naar rechts op volgorde en van boven naar beneden gegroepeerd per specialisme dat hierbij betrokken is: Developer relations en Design relations (samen relations), toegankelijkheidsspecialist, developer, designer en design system lead met productmanager (samen lead).' }) }), '\n', (0, o.jsx)(n.p, { children: (0, o.jsx)(n.a, { href: 'https://raw.githubusercontent.com/nl-design-system/documentatie/refs/heads/assets/candidate-stappenplan-testfase.png', children: 'Bekijk de illustratie voor de Testfase op een losse pagina' }) }), '\n', (0, o.jsx)(n.p, { children: 'De stappen en substappen in de Testfase kunnen soms parallel worden opgepakt, maar hebben hierin wel relatie tot elkaar. Bovenstaande visualisatie laat de volgende stappen zien:' }), '\n', (0, o.jsxs)(n.ul, { children: ['\n', (0, o.jsxs)(n.li, { children: ['Design tokens getest', '\n', (0, o.jsxs)(n.ol, { children: ['\n', (0, o.jsx)(n.li, { children: 'Getest in Chromatic en baseline vastgesteld door Developer relations & Design relations.' }), '\n', (0, o.jsx)(n.li, { children: 'Gevonden problemen opgelost door developer.' }), '\n', (0, o.jsx)(n.li, { children: 'Opnieuw getest door Developer relations & Design relations.' }), '\n'] }), '\n'] }), '\n', (0, o.jsxs)(n.li, { children: ['Accessibility getest', '\n', (0, o.jsxs)(n.ol, { children: ['\n', (0, o.jsx)(n.li, { children: 'Getest volgens acceptatiecriteria voor toegankelijkheid door toegankelijkheidsspecialist.' }), '\n', (0, o.jsx)(n.li, { children: 'Gevonden problemen opgelost door developer.' }), '\n', (0, o.jsx)(n.li, { children: 'Opnieuw getest door toegankelijkheidsspecialist.' }), '\n'] }), '\n'] }), '\n', (0, o.jsxs)(n.li, { children: ['Test coverage getest', '\n', (0, o.jsxs)(n.ol, { children: ['\n', (0, o.jsx)(n.li, { children: 'Missende tests opgesteld door Design System Lead & Product Manager.' }), '\n', (0, o.jsx)(n.li, { children: 'Gevonden problemen opgelost door developer.' }), '\n'] }), '\n'] }), '\n', (0, o.jsxs)(n.li, { children: ['NL Design System architectuur', '\n', (0, o.jsxs)(n.ol, { children: ['\n', (0, o.jsx)(n.li, { children: 'Opleveringen in code en Figma getoetst aan architectuur door Design System Lead & Product Manager.' }), '\n', (0, o.jsx)(n.li, { children: 'Gevonden problemen opgelost door developer en designer.' }), '\n', (0, o.jsx)(n.li, { children: 'Opnieuw getest door Design System Lead & Product Manager.' }), '\n'] }), '\n'] }), '\n', (0, o.jsx)(n.li, { children: 'Documentatie getest en gevonden problemen opgelost door relations.' }), '\n', (0, o.jsx)(n.li, { children: 'Testcases getest en gevonden problemen opgelost door developer en designer.' }), '\n'] }), '\n', (0, o.jsx)(n.h2, { id: 'design-tokens-getest', children: 'Design Tokens getest' }), '\n', (0, o.jsx)(n.h3, { id: 'doel', children: 'Doel' }), '\n', (0, o.jsx)(a.Ay, {}), '\n', (0, o.jsx)(n.h3, { id: 'uitkomst', children: 'Uitkomst' }), '\n', (0, o.jsx)(n.p, { children: 'De Candidate component voldoet aan de acceptatiecriteria voor design tokens. De baseline voor de visuele regressietests in Chromatic is vastgesteld. Alle design tokens zijn getest met twee verschillende invullingen in Stories. Gevonden problemen zijn opgelost.' }), '\n', (0, o.jsx)(n.h2, { id: 'accessibility-getest', children: 'Accessibility getest' }), '\n', (0, o.jsx)(n.h3, { id: 'doel-1', children: 'Doel' }), '\n', (0, o.jsx)(d.Ay, {}), '\n', (0, o.jsx)(n.h3, { id: 'uitkomst-1', children: 'Uitkomst' }), '\n', (0, o.jsx)(n.p, { children: 'De Candidate component voldoet aan de acceptatiecriteria voor toegankelijkheid. Alle stories in de algemene Storybook en test-Storybook zijn voorzien van de uitkomsten van de toegankelijkheidstest. Missende Stories en unit tests zijn toegevoegd. Gevonden problemen zijn opgelost.' }), '\n', (0, o.jsx)(n.h2, { id: 'testcases-getest', children: 'Testcases getest' }), '\n', (0, o.jsx)(n.h3, { id: 'doel-2', children: 'Doel' }), '\n', (0, o.jsx)(r.Ay, {}), '\n', (0, o.jsx)(n.h3, { id: 'uitkomst-2', children: 'Uitkomst' }), '\n', (0, o.jsxs)(n.p, { children: ['De Candidate component voldoet aan de acceptatiecriteria en testcases voor gebruik. Alle geautomatiseerde tests slagen. De tests die niet automatisch te testen zijn, zijn te herkennen aan ', (0, o.jsx)(n.code, { children: 'describe.todo' }), ' en ', (0, o.jsx)(n.code, { children: 'it.todo' }), ' en zijn succesvol handmatig getest.'] }), '\n', (0, o.jsx)(n.h2, { id: 'test-coverage-getest', children: 'Test coverage getest' }), '\n', (0, o.jsx)(n.h3, { id: 'doel-3', children: 'Doel' }), '\n', (0, o.jsx)(l.Ay, {}), '\n', (0, o.jsx)(n.h3, { id: 'uitkomst-3', children: 'Uitkomst' }), '\n', (0, o.jsx)(n.p, { children: 'Alle acceptatiecriteria voor de component zijn beschreven in unit tests of Stories. Waar nodig zijn extra testcases toegevoegd voor functionaliteit die nog niet is gedekt, of manieren waarop de component kan worden gebruikt die nu niet zijn opgenomen.' }), '\n', (0, o.jsx)(n.h2, { id: 'documentatie-getest', children: 'Documentatie getest' }), '\n', (0, o.jsx)(n.h3, { id: 'doel-4', children: 'Doel' }), '\n', (0, o.jsx)(c.Ay, {}), '\n', (0, o.jsx)(n.h3, { id: 'uitkomst-4', children: 'Uitkomst' }), '\n', (0, o.jsx)(n.p, { children: 'De Candidate component documentatie staat klaar om in de Publicatiefase beschikbaar te worden gesteld. Er is documentatie voor het gebruik van de component in React, CSS en Figma.' }), '\n', (0, o.jsx)(n.h2, { id: 'afronden', children: 'Rond de Testfase af' }), '\n', (0, o.jsx)(n.h3, { id: 'doel-5', children: 'Doel' }), '\n', (0, o.jsx)(p.Ay, {}), '\n', (0, o.jsx)(n.h3, { id: 'uitkomst-5', children: 'Uitkomst' }), '\n', (0, o.jsx)(n.p, { children: 'Er is nog een keer goed gekeken of er in de voorbereidingsfase testcases zijn vergeten die het kernteam voor een robuust component toch noodzakelijk vindt.' }), '\n', (0, o.jsx)(n.p, { children: 'De Publicatiefase kan starten nu de Candidate component klaar is voor gebruik en input uit de community.' })] }); 98 } 99 function k(e = {}) { 100 const { wrapper: n } = { ...(0, i.R)(), ...e.components }; 101 return n ? (0, o.jsx)(n, { ...e, children: (0, o.jsx)(v, { ...e }) }) : v(e); 102 } 103 }, 104 69624(e, n, t) { 105 t.d(n, { Ay: () => d, RM: () => i }); 106 var s = t(86070), 107 o = t(18439); 108 const i = []; 109 function a(e) { 110 const n = { p: 'p', ...(0, o.R)(), ...e.components }; 111 return (0, s.jsx)(n.p, { children: 'De Candidate component kan makkelijk
111worden ingezet door developers en designers in de community. Het is duidelijk welke acceptatiecriteria voor toegankelijkheid er al in de component zijn opgenomen en welke nog door de gebruiker moeten worden getest.' }); 112 } 113 function d(e = {}) { 114 const { wrapper: n } = { ...(0, o.R)(), ...e.components }; 115 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(a, { ...e }) }) : a(e); 116 } 117 }, 118 70990(e, n, t) { 119 t.d(n, { Ay: () => d, RM: () => i }); 120 var s = t(86070), 121 o = t(18439); 122 const i = []; 123 function a(e) { 124 const n = { p: 'p', ...(0, o.R)(), ...e.components }; 125 return (0, s.jsx)(n.p, { children: 'De Candidate component voldoet aan de acceptatiecriteria die hiervoor in de Voorbereidingsfase zijn opgesteld.' }); 126 } 127 function d(e = {}) { 128 const { wrapper: n } = { ...(0, o.R)(), ...e.components }; 129 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(a, { ...e }) }) : a(e); 130 } 131 }, 132 }, 133]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.