fonteva-design-guide/force-app/main/default/lwc/pfmText/__tests__/pfmTextTest.js

## Dev, Build and Test

import { createElement } from 'lwc';

import TEXT from 'c/pfmText';

describe('c-pfm-text', () => {
    afterEach(() => {
        // The jsdom instance is shared across test cases in a single file so reset the DOM
        while (document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
    });

    it('render text type', () => {
        const element = createElement('c-pfm-text', {
            is: TEXT
        });

        element.type = 'heading';
        document.body.appendChild(element);

        // Verify that text is a header
        const txt = element.shadowRoot.querySelector('.pfm-text-heading_small');
        return Promise.resolve().then(() => {
            expect(txt).not.toBeNull();
        });
    });

    it('render text sizes', () => {
        const header1 = createElement('c-pfm-text', { is: TEXT }),
            header2 = createElement('c-pfm-text', { is: TEXT }),
            header3 = createElement('c-pfm-text', { is: TEXT }),
            header4 = createElement('c-pfm-text', { is: TEXT }),
            header5 = createElement('c-pfm-text', { is: TEXT }),
            header6 = createElement('c-pfm-text', { is: TEXT });

        header1.size = 'x-large';
        header2.size = 'large';
        header3.size = 'medium';
        header4.size = 'small';
        header5.size = 'x-small';
        header6.size = 'xx-small';

        header1.type = 'heading';
        header2.type = 'heading';
        header3.type = 'heading';
        header4.type = 'heading';
        header5.type = 'heading';
        header6.type = 'heading';

        document.body.appendChild(header1);
        document.body.appendChild(header2);
        document.body.appendChild(header3);
        document.body.appendChild(header4);
        document.body.appendChild(header5);
        document.body.appendChild(header6);

        // Verify text sizes
        const testH1 = header1.shadowRoot.querySelector('.pfm-text-heading_x-large'),
            testH2 = header2.shadowRoot.querySelector('.pfm-text-heading_large'),
            testH3 = header3.shadowRoot.querySelector('.pfm-text-heading_medium'),
            testH4 = header4.shadowRoot.querySelector('.pfm-text-heading_small'),
            testH5 = header5.shadowRoot.querySelector('.pfm-text-heading_x-small'),
            testH6 = header6.shadowRoot.querySelector('.pfm-text-heading_xx-small');

        expect(testH1).not.toBeNull();
        expect(testH2).not.toBeNull();
        expect(testH3).not.toBeNull();
        expect(testH1).not.toBeNull();
        expect(testH1).not.toBeNull();
        expect(testH1).not.toBeNull();
    });

    it('render text spacing', () => {
        const element = createElement('c-pfm-text', {
            is: TEXT
        });

        element.padding = 'around:large';
        element.margin = 'around:large';
        document.body.appendChild(element);

        // Verify that text is body
        const pTxt = element.shadowRoot.querySelector('.pfm-p-around_large');
        const mTxt = element.shadowRoot.querySelector('.pfm-m-around_large');

        expect(pTxt).not.toBeNull();
        expect(mTxt).not.toBeNull();
    });
});