How to use pptr-testing-library - 10 common examples

it('Open', async () => {
    await page.goto(`${HOST}/async-select-input-open`);
    const doc = await getDocument(page);
    const select = await getByText(doc, 'One');
    await select.click();
    // typing triggers async loadOptions
    await select.type('Two');
    await percySnapshot(page, 'AsyncSelectInput - open');
  });
});

it('When open', async () => {
      await page.goto(
        `${HOST}/async-creatable-select-field/interaction/without-default-options`
      );
      const doc = await getDocument(page);
      const selects = await getAllByLabelText(doc, 'State');
      const select = selects[0];
      await select.click();
      await percySnapshot(
        page,
        'AsyncCreatableSelectField - withDefaultOptions disabled - open'
      );
      // typing triggers async loadOptions
      await select.type('Three');
      await percySnapshot(
        page,
        'AsyncCreatableSelectField - withDefaultOptions disabled - open - after typing'
      );
    });
  });

it('Open', async () => {
    await page.goto(`${HOST}/async-creatable-select-input-open`);
    const doc = await getDocument(page);
    const select = await getByText(doc, 'One');
    await select.click();
    // typing triggers async loadOptions
    await select.type('Two');
    await percySnapshot(page, 'AsyncCreatableSelectInput - open after typing');
  });
});

it('Open', async () => {
    await page.goto(`${HOST}/date-input-open`);
    await page.click('#date-input');
    await expect(page).toMatch('November');
    await percySnapshot(page, 'DateInput - open');

    const doc = await getDocument(page);
    const input = await getByTestId(doc, 'date-input');

    const prevMonthButton = await getByLabelText(doc, 'show prev month');
    await prevMonthButton.click();

    await wait(() => getByText(doc, 'October'));
    // our input should still be focused even though we clicked a header button

    await input.press('Backspace');
    await input.press('Backspace');
    await input.press('Backspace');
    await input.press('Backspace');
    await input.type('2017');
    await wait(() => getByText(doc, '2017'));
  });
});

it('Interactive', async () => {
    await page.goto(`${HOST}/localized-rich-text-input/interactive`);
    const doc = await getDocument(page);
    let input = await getByTestId(doc, 'rich-text-data-test-en');

    // make the text bold
    let boldButton = await getByLabelText(doc, 'Bold');
    await boldButton.click();

    await input.type('Hello world');
    await wait(() => getByText(doc, 'Hello world'));

    // check that there is now a strong tag in the document.
    let numOfTags = await getNumberOfTags('strong');

    expect(numOfTags).toEqual(1);

    // select the text
    await selectAllText(input);

it('Open', async () => {
      await page.goto(
        `${HOST}/async-select-field/interaction/without-default-options`
      );
      const doc = await getDocument(page);
      const selects = await getAllByLabelText(doc, 'State');
      const select = selects[0];
      await select.click();
      await percySnapshot(
        page,
        'AsyncSelectField - withDefaultOptions disabled - open'
      );
      // typing triggers async loadOptions
      await select.type('O');
      await percySnapshot(
        page,
        'AsyncSelectField - withDefaultOptions disabled - open - after typing'
      );
    });
  });

it('When open', async () => {
    await page.goto(`${HOST}/primary-action-dropdown/interaction`);
    const doc = await getDocument(page);
    const dropdowns = await getAllByLabelText(doc, 'Open Dropdown');
    await dropdowns[0].click();
    await percySnapshot(page, 'PrimaryActionDropdown - Open');
  });
});

it('Default', async () => {
    const doc = await getDocument(page);
    const cadInputs = await getAllByLabelText(doc, 'CAD');
    expect(cadInputs).toBeTruthy();
    await percySnapshot(page, 'LocalizedMoneyInput');
  });
});

it('Default', async () => {
    const doc = await getDocument(page);
    const button = await getAllByLabelText(doc, 'A label text');
    expect(button).toBeTruthy();
    await percySnapshot(page, 'SecondaryButton');
  });
});

beforeEach(async () => {
    await page.goto(path);
    $document = await getDocument(page);
    $editor = await getByRole($document, 'textbox');
  });