test/index.js

import Component from '../source/Component';
 
import { stringifyDOM } from 'dom-renderer';
 
import { readFile } from 'fs-extra';
 
import { join } from 'path';
 
import { toDataURI } from '@tech_query/node-toolkit';
 
 
/**
 * @test {Component}
 */
describe('Core class',  () => {
 
    var style, template, fragment;
 
    /**
     * @test {Component.parseCSS}
     */
    it('Parse CSS files',  async () => {
 
        const file = 'test/example-js/index.css';
 
        style = await Component.parseCSS( file );
 
        style.tagName.should.be.equal('STYLE');
 
        style.textContent.should.be.equal((await readFile( file )) + '');
    });
 
    /**
     * @test {Component.parseHTML}
     */
    it('Parse pure HTML',  async () => {
 
        const file = 'test/example-js/index.html';
 
        template = await Component.parseHTML( file );
 
        template.nodeType.should.be.equal( 11 );
 
        stringifyDOM( template ).should.be.equal(
            (await readFile( file )) + ''
        );
    });
 
    describe('Parse mixed HTML',  () => {
 
        before(async () =>
            fragment = await Component.parseHTML('test/example-html/index.html')
        );
 
        /**
         * @test {Component.findStyle}
         * @test {Component.parseCSS}
         */
        it('Find & Parse styles',  async () => {
 
            const styles = Component.findStyle( fragment );
 
            styles.map(element => element.tagName).should.be.eql([
                'LINK', 'STYLE'
            ]);
 
            const element = await Component.parseCSS(
                styles[1].textContent,
                styles[1].type,
                'test/example-html/index.css'
            );
 
            element.textContent.trim().should.be.equal(`
textarea {
  outline: none;
}
textarea {
  display: block;
}`.trim()
            );
        });
 
        /**
         * @test {Component.packJS}
         */
        it('Parse script',  () => {
 
            const code = Component.packJS(join(
                'test/example-html/', fragment.lastElementChild.getAttribute('src')
            ));
 
            (() => eval( code )).should.not.throw( SyntaxError );
 
            code.should.containEql('\'example-html\'');
        });
    });
 
    /**
     * @test {Component#toHTML}
     */
    it('Bundle to HTML',  async () => {
 
        const fragment = await (new Component('test/example-html')).toHTML(),
            tagName = element => element.tagName;
 
        Array.from(fragment.children, tagName).should.be.eql(
            ['TEMPLATE', 'SCRIPT']
        );
 
        Array.from(fragment.firstElementChild.content.children, tagName)
            .should.be.eql(['STYLE', 'STYLE', 'TEXTAREA']);
    });
 
    /**
     * @test {Component#toJS}
     */
    it('Bundle to JS',  async () => {
 
        var component = await (new Component('test/example-js')).toJS();
 
        component.includes(
            JSON.stringify( style.textContent ).slice(1, -1)
        ).should.be.true();
 
        component.includes(
            JSON.stringify( stringifyDOM( template ) )
                .slice(1, -1).replace(/\\"/g, '"')
        ).should.be.true();
 
        component.includes('name: \'Web components\'').should.be.true();
 
        component.includes(
            toDataURI('test/example-js/icon.svg')
        ).should.be.true();
 
        (() => eval( component )).should.not.throw( SyntaxError );
    });
});