Home

showroom

The Next-Generation Visual Development & Test Environment for Web Components

showroom enables developers to isolate web components for development purposes and provides puppeteer integration for easy unit-testing.

Installation

• npm i -D showroom or npm i -g showroom for running from command line
• Add a script definition in your package.json with the command showroom
• Create a .showroom folder in your project
• Add descriptor files in .showroom folder
• Optionally add global config file .showroom/config.js

Use examples as provided here

Puppeteer integration

Example integration in your test file

const ShowroomUtils = require('showroom/test-utils');

// assuming puppeteer launch and page exists
describe('My awesome Test Suite', async () => {
   let showroom;
   before(async () => {
      // instantiate showroom helper linked to page instance
      showroom = await ShowroomUtils(page);
      // load showroom page and wait until all resources are loaded
      await page.goto('http://localhost:3000', {"waitUntil" : "networkidle0"});
   });

   it('Awesome component test', async () => {
      // assuming "awesome-component" is your custom element's tag name
      const componentHandle = await showroom.setTestSubject('awesome-component');
      // use showroom to set properties, attributes, and take events from the component.
      // ... the rest of the test
   });
});

Available commands

• showroom.setTestSubject(componentName:string):Promise<JSHandle>
• showroom.setProperty(propertyName:string, value: any):Promise
• showroom.getProperty(propertyName:string):Promise<any>
• showroom.setAttribute(attributeName:string, value: string):Promise
• showroom.getAttribute(attributeName:string):Promise<string>
• showroom.hasAttribute(attributeName:string):Promise<boolean>
• showroom.removeAttribute(attributeName:string):Promise
• showroom.find(path:string):Promise<JSHandle> - search DOM within the component, use double slash // for shadow-DOM penetration
• showroom.getEventList():Promise<SerializedEventObject[]>
• showroom.getLastEvent():Promise<SerializedEventObject>

Using puppeteer you can work with your component as JSHandle object like any other browser based test.