Komponentbygger
Her kan du teste ut alle egenskapene til PktCheckbox, og få ferdig kode for React og Elements.
Hvordan ta i bruk?
Det anbefales at PktCheckbox brukes sammen med PktInputWrapper for å få en konsistent skjemalayout. Ved grupper av checkboxes brukes hasFieldset som wrapper gruppen med fieldset og legend.
// React
import { PktCheckbox } from "@oslokommune/punkt-react";
// Custom Element:
import "@oslokommune/punkt-elements/dist/pkt-checkbox.js";
// Custom Element fra CDN:
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-checkbox.js"></script>;
Testing
Dersom dere skal skrive tester med JSDOM eller liknende, er det viktig at dere lar komponenten bli rendret ferdig før dere tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:
await window.customElements.whenDefined("pkt-checkbox");
Om dere bruker data-testid for å hente ut elementer i testene, vil attributten videresendes til selve skjemaelementet. Dersom dere heller ønsker å bruke data-testid på elementet <pkt-checkbox>, må dere sette attributten skipForwardTestid på elementet.
Dersom dere skal teste tilstanden på checked bør dere teste på den visuelle tilstanden med en query mot :checked istedenfor å teste property .checked. Grunnen til dette har vi ikke helt klart å komme til bunns i, da det fungerer helt fint med riktig property i nettleseren. Det kan tenkes at dette kan løses ved å vente et øyeblikk, om det er helt nødvendig å teste property istedenfor synlig tilstand.
I punkt-testing-utils har vi skrevet testen slik: element.querySelectorAll(':checked').length > 0.