dom serializer

@ Quatico / Dom-Serializer

Un sérialiseur de balisage qui rend la structure DOM complète, y compris Shadow Dom, dans une chaîne. La bibliothèque peut être utilisée comme:

1. Un sérialiseur d'instantané pour Jest,
2. une fonction renderToString() importée,
3. un élément HTML pour montrer la structure DOM d'un élément.

Installer

Ajoutez la @quatico/dom-serializer en tant que dépendance (dev-) à votre projet

pnpm add -D @quatico/dom-serializer

Sérialiseur de plaisanterie

Vous pouvez utiliser la bibliothèque comme sérialiseur pour vos tests d'instantané de plaisanterie. Ajoutez-le à snapshotSerializers dans votre jest.config.js :

 // jest.config.js
module . exports = {
    /* ... */
    snapshotSerializers : [ "@quatico/dom-serializer/bin/serializer" ] ,
}

Appelez toMatchSnapshot() ou toMatchInlineSnapshot() dans vos tests de plaisanterie pour créer / comparer l'instantané:

 describe ( "my-element" , ( ) => {
    it ( `shows markup with default properties` , async ( ) => {
        const el : HTMLElement = ... ;

        expect ( el ) . toMatchSnapshot ( ) ;
    } ) ;
    ...

Personnalisez l'instantané

Vous pouvez utiliser le package comme bibliothèque. Créez un fichier de script de la structure suivante et importez le DomSerializer avec une instruction module.exports :

 // ./tests/customSnapshotSerializer.ts

import { DomSerializer } from "@quatico/dom-serializer" ;

module . exports = new DomSerializer ( { filterTags : [ "script" ] } ) ;

Ajoutez votre customSnapshotSerializer.ts à votre jest.config.js:

 // jest.config.js
module . exports = {
    /* ... */
    snapshotSerializers : [ "./tests/customSnapshotSerializer.ts" ] ,
}

La classe Domserializer fournit les RenderOptions suivants pour personnaliser l'instantané:

• diffable : booléen pour ajouter des ruptures de ligne supplémentaires pour une meilleure comparabilité; par défaut est vrai.
• filterAttrs : tableau des noms d'attributs minuscules qui sont filtrés hors de l'instantané; par défaut à [].
• filterComments : indicateur pour filtrer les commentaires HTML de l'instantané; par défaut est vrai.
• filterTags : tableau de noms de balises minuscules qui sont filtrés hors de l'instantané; par défaut est ["style", "script"].
• indent : chaîne d'indemne initiale pour la structure résultante; par défaut est une chaîne vide. Les niveaux d'enfants sont en retrait par 4 espaces.
• shadow : Boolean pour activer / désactiver le rendu du contenu de l'ombre DOM; par défaut est vrai.
• shadowDepth : Nombre de showroots à rendre; par défaut à l'infini.
• shadowRoots : contrôle comment les racines de l'ombre sont rendues. Par défaut est "déclaratif".
• slottedContent : contrôle comment le contenu fendu est rendu. Montrez-le en tant qu'enfant référencé ou copiez dans l'élément de l'emplacement. Par défaut "ignorer".

Rendre une structure DOM comme chaîne

Vous pouvez également utiliser la bibliothèque pour rendre une structure DOM en une chaîne:

 import { renderToString } from "@quatico/dom-serializer" ;

const htmlElement = ... ;

const string = renderToString ( htmlElement , { 
        diffable : true ,
        filterAttrs : [ "id" ] ,
        filterComments : true ,
        filterTags : [ "style" , "script" ] ,
        shadow : true ,
        shadowDepth : 1 ,
        shadowRoots : "declarative" ,
    } ) ;

Ici, les mêmes RenderOptions que pour le DomSerializer peuvent être utilisés pour personnaliser la chaîne résultante.

Rendez la structure DOM dans un composant réact

L'utilisation de la bibliothèque peut facilement créer un composant React qui montre la structure DOM d'un élément fourni, par exemple, dans le livre de contes:

 import { renderToString } from "@quatico/dom-serializer" ;
import { Source } from "@storybook/components" ;
import * as React from "react" ;
import { useEffect , useRef , useState } from "react" ;


export const DomMarkup = ( { children , shadow , shadowDepth = 1 , diffable = false } : any ) => {
    const domRef = useRef < HTMLDivElement > ( null ) ;
    const [ markup , setMarkup ] = useState ( "" ) ;
    useEffect ( ( ) => {
        const host = domRef . current ;
        setMarkup (
            host ?. firstElementChild ? renderToString ( host . firstElementChild , { diffable , shadow , shadowDepth } ) : ""
        ) ;
    } ) ;
    return (
        < div >
            < div ref = { domRef } style = { { display : "none" } } className = { "dom-markup__dom-container" } >
                { children }
            < / div >
            < div className = { "dom-markup__markup-container" } >
                < Source language = { "html" } format = { false } code = { markup } / >
            < / div >
        < / div >
    ) ;
} ;