gidztech

// Use Puppeteer to interact with the DevTools UI while inspecting a page
// This is a complete hack, but it allows you to interact with the DevTools UI using Puppeteer.
// In this example, I'm able to install Adblock Plus and navigate to the extension's tab

// Author: Gideon Pyzer (https://www.gideonpyzer.com)

const puppeteer = require('puppeteer');

(async() => {
    // launch with devtools, which enables debugging capabilities

gidztech

describe('Panel tests', async () => {
    beforeAll(async () => {
        await runSetup();
    });

    describe('Simple mode', async () => {
        it('should have a title and body', async () => {
            ... omitted functional tests ...
        });

gidztech

it('renders correctly', async () => {
    const page = await browser.newPage();
    await page.goto('https://localhost:3000');
    const image = await page.screenshot();

    expect(image).toMatchImageSnapshot();
});

gidztech

const ConfigureLauncher = require('muppeteer');

const launcher = await ConfigureLauncher({
    testPathPattern: 'tests/**/*.test.js'
    reportDir: 'tests/report',
    componentTestUrlFactory: 
        ({name}) => `http://${IP}:${PORT}/${name}`,
    visualThreshold: 0.05,
    useDocker: true,
    dockerChromeVersion: '67.0.3396.79',

gidztech

describeComponent({ name: 'Panel' }, () => {
    describe('Simple mode', async () => {
        it('should have a title and body', async () => {
            ... omitted functional tests ...
        });
        it('should position the title and body correctly', async () => {
            await assert.visual(panelContainer);
        });
    });
    describe('Icon mode', async () => {

gidztech

console.fancyTable

I was answering a StackOverflow question, where someone asked whether you could style console.table statements, as you can do with console.log. It turns out that there's no styling capabilities.

I worked on a really hacky solution to get around this by allowing you to use console.log to style objects in a table like fashion. There were several limitations, such as not being able to set width and height properties. My workaround was to pad each object's property values with spaces to have equal number of characters.

The Code