const puppeteer = require('puppeteer');
const { expect } = require('chai');
const browserSync = require('browser-sync').create();

let browser = null;
let page = null;

before(async () => {
  // Workaround until https://github.com/GoogleChrome/puppeteer/issues/290 is fixed
  browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });
  page = await browser.newPage();
  await page.setViewport({
    width: 1024,
    height: 768
  });
  await new Promise(resolve =>
    browserSync.init(
      {
        port: 5000,
        notify: false,
        open: false,
        ui: false,
        logLevel: 'silent',
        server: {
          baseDir: ['examples', '.', 'node_modules']
        }
      },
      resolve
    )
  );
});

after(async () => {
  await browser.close();
  browserSync.exit();
});

describe('GluonJS', () => {
  describe(`'$' property`, () => {
    beforeEach(async () => {
      await page.goto('http://localhost:5000/test/test-$.html');
    });
    it('should contain a key for each child with an ID', async () => {
      const keyCount = await page.evaluate(() => {
        const testElement = document.getElementById('testElement');
        return Object.keys(testElement.$).length;
      });
      expect(keyCount).to.be.equal(2);
    });
    it('should map to the elements by ID', async () => {
      const equality = await page.evaluate(() => {
        const testElement = document.getElementById('testElement');
        return testElement.$.one === testElement.shadowRoot.getElementById('one') && testElement.$.two === testElement.shadowRoot.getElementById('two');
      });
      expect(equality).to.be.true;
    });
  });
  describe(`'is' property`, () => {
    beforeEach(async () => {
      await page.goto('http://localhost:5000/test/test-is.html');
    });
    it(`should be 'regular-element' for RegularElement`, async () => {
      let result = await page.evaluate(() => {
        return class RegularElement extends GluonElement {}.is;
      });
      expect(result).to.be.equal('regular-element');
    });
    it(`should be 'caps-first-element' for CAPSFirstElement`, async () => {
      let result = await page.evaluate(() => {
        return class CAPSFirstElement extends GluonElement {}.is;
      });
      expect(result).to.be.equal('caps-first-element');
    });

    it(`should be 'caps-middle-element' for CapsMIDDLEElement`, async () => {
      let result = await page.evaluate(() => {
        return class CapsMIDDLEElement extends GluonElement {}.is;
      });
      expect(result).to.be.equal('caps-middle-element');
    });

    it(`should be 'caps-last-element' for CapsLastELEMENT`, async () => {
      let result = await page.evaluate(() => {
        return class CapsLastELEMENT extends GluonElement {}.is;
      });
      expect(result).to.be.equal('caps-last-element');
    });

    it(`should be 'as-sh-ol-ec-as-e-element' for AsShOlEcAsEElement`, async () => {
      let result = await page.evaluate(() => {
        return class AsShOlEcAsEElement extends GluonElement {}.is;
      });
      expect(result).to.be.equal('as-sh-ol-ec-as-e-element');
    });
  });
});

@@ -175,23 +175,126 @@
 e(async 
-() =%3E %7B
+function() %7B%0A  // Set a higher timeout to allow puppeteer and browserSync time to start%0A  this.timeout(5000);%0A
 %0A  // Wo
@@ -462,16 +462,17 @@
 x'%5D %7D);%0A
+%0A
   page =
@@ -497,16 +497,17 @@
 Page();%0A
+%0A
   await 
@@ -564,16 +564,17 @@
 8%0A  %7D);%0A
+%0A
   await 
@@ -1086,32 +1086,33 @@
 html');%0A    %7D);%0A
+%0A
     it('should c
@@ -1388,24 +1388,25 @@
 2);%0A    %7D);%0A
+%0A
     it('shou
@@ -1781,16 +1781,17 @@
 ;%0A  %7D);%0A
+%0A
   descri
@@ -1913,32 +1913,33 @@
 html');%0A    %7D);%0A
+%0A
     it(%60should b
@@ -2167,24 +2167,24 @@
 ment');%0A
-
     %7D);%0A
     it(%60
@@ -2171,24 +2171,25 @@
 ');%0A    %7D);%0A
+%0A
     it(%60shou

Configure higher timeout during test setup