dom serializer

@Quatico/DOM-сериализатор

Сериализатор разметки, который делает полную структуру DOM, включая Shadow Dom, в строку. Библиотека можно использовать как:

1. сериализатор снимка для шутки,
2. импортированная функция renderToString() ,
3. HTML -элемент, чтобы показать структуру DOM элемента.

Установить

Добавьте @quatico/dom-serializer как (dev-) зависимость в ваш проект

pnpm add -D @quatico/dom-serializer

Шутка сериализатора

Вы можете использовать библиотеку в качестве сериализатора для тестов на шуток. Добавьте его в snapshotSerializers в своем jest.config.js :

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

Вызовите toMatchSnapshot() или toMatchInlineSnapshot() в ваших шутках, чтобы создать/сравнить снимок:

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

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

Настройте снимок

Вы можете использовать пакет в качестве библиотеки. Создайте файл сценария следующей структуры и импортируйте DomSerializer с помощью module.exports Exports:

 // ./tests/customSnapshotSerializer.ts

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

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

Добавьте свой customSnapshotSerializer.ts в свой jest.config.js:

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

Класс DomSerializer предоставляет следующие RenderOptions для настройки снимка:

• diffable : логический, чтобы добавить дополнительные разрывы линий для лучшей сопоставимости; по умолчанию к истинному.
• filterAttrs : массив имен атрибутов строчных строк, которые отфильтрованы из снимка; по умолчанию [].
• filterComments : флаг, чтобы отфильтровать HTML -комментарии из снимка; по умолчанию к истинному.
• filterTags : массив имен нижних метров, которые отфильтрованы из снимка; по умолчанию [«стиль», «скрипт»].
• indent : начальная строка отступа для полученной структуры; по умолчанию пустую строку. Уровень ребенка отступает на 4 места.
• shadow : Boolean, чтобы включить/отключить рендеринг содержимого Shadow Dom; по умолчанию к истинному.
• shadowDepth : количество выставки, которые будут отображаться; по умолчанию в бесконечность.
• shadowRoots : контролирует, как отображаются корни тени. По умолчанию «декларатив».
• slottedContent : Управляйте, как отображается контент. Покажите это как упоминаемый ребенок или копировать в элемент слота. По умолчанию «игнорировать».

Сделать структуру DOM в качестве строки

Вы также можете использовать библиотеку, чтобы превратить структуру DOM в строку:

 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" ,
    } ) ;

Здесь те же самые RenderOptions , что и для DomSerializer можно использовать для настройки полученной строки.

Превратить структуру DOM в компонент React

Использование библиотеки может легко создать компонент React, который показывает структуру DOM предоставленного элемента, например, в сборнике рассказов:

 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 >
    ) ;
} ;