test(`Canvas width and height should equal to the container`, async t => {
    const demo = Selector('#instance1 .demo');
    const canvas = Selector('#instance1 .demo canvas');
    const open = Selector('#instance1 .btn-primary');
    const pasue = Selector('#instance1 .btn-danger');

    function testWH() {
        return new Promise(async resolve => {
            const dw: string = await demo.getStyleProperty('width').then(value => value);
            const dh: string = await demo.getStyleProperty('height').then(value => value);
            const cw: string = await canvas.getStyleProperty('width').then(value => value);
            const ch: string = await canvas.getStyleProperty('height').then(value => value);

            await t.expect(parseInt(cw)).eql(parseInt(dw));
            await t.expect(parseInt(ch)).eql(parseInt(dh));

            resolve();
        });
    }

    await testWH();
    await t.resizeWindow(1000, 400);
    await testWH();

    await t.click(open).click(pasue);
});

test('Showing and hiding with buttons and window history', async t => {
  const goBack = ClientFunction(() => window.history.back());
  const goForward = ClientFunction(() => window.history.forward());

  // Ensures that the page loads before we start messing with history. Otherwise
  // Edge will click "back" right off of the page.
  await map.root();

  await t.click(Selector('a.btn'));
  await t.expect(map.leafletMap.exists).ok();

  await goBack();
  await t.expect(map.leafletMap.exists).notOk();

  await goForward();
  await t.expect(map.leafletMap.exists).ok();

  await t.click(map.modalCloseButton);
  await t.expect(map.leafletMap.exists).notOk();

  // Regression to ensure that the close button clears out the hash, otherwise
  // pressing the button won't cause a hashchange event.
  await t.click(Selector('a.btn'));
  await t.expect(map.leafletMap.exists).ok();
});

test('show "Thank you" message after submitting contact form', async t => {
  const nameInput = Selector('input[aria-label="Name"]');
  const emailInput = Selector('input[aria-label="Email"]');
  const messageInput = Selector('textarea[aria-label="Message"]');
  const submit = Selector('input[type="submit"]').withAttribute(
    'data-testid',
    'Send Message',
  );
  await t
    .typeText(nameInput, 'Me')
    .typeText(emailInput, '[email protected]')
    .typeText(messageInput, 'lorem ipsum')
    .click(submit)
    .expect(Selector('[aria-label="Thank you"]').exists)
    .ok();
});

test('set input form elements', async (t) => {
  const email: string = '[email protected]'
  const el = Selector('.form-group:first-of-type .form-controll')

  await t
    .typeText(el, email)
    .expect(el.value).eql(email)
})

test('Trump Card has 5 PP', async t => {
    await t.click('[name="close"]')
        .click('[value="teambuilder"]')
        .click('[name="newTop"]')
        .click('[name="addPokemon"]')
        // Eevee (e e v), Trump Card (t c)
        .pressKey('e e v enter enter enter t c')
        .expect(Selector('.hover .pplabelcol').textContent).eql('PP5');
});

test('Chart updates when an item in drop down is selected', async t => {
  // Currently, our charts only support having one select option,
  // so we find and return the one 'select' element within cob-chart.
  const selectElem = Selector('select');
  const selectOptions = chartSelect.getSelectOptions();
  await selectOptions();

  await t
    .click(selectElem)
    .click(selectOptions.withText('Education'))
    .expect(selectElem.value)
    .eql('Education');

  // After selecting an item from the dropdown, we get the number of
  // bars on the chart again.
  const bars = chartSelect.getBars();
  await bars();
  // Check to make sure there are now 2 bars.
  await t.expect(bars.count).eql(2);
});

test('keywords', async t => {
  await t
    .expect(Selector('meta[name="keywords"]').getAttribute('content'))
    .eql('TypeScript,JavaScript,HTML,CSS,Node.js,React,Vue');
});