react-native-devtools-frontend/test/e2e/inline_editor/font-editor_test.ts

// Copyright 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {assert} from 'chai';

import {enableExperiment, getBrowserAndPages, goToResource, waitFor} from '../../shared/helper.js';
import {describe, it} from '../../shared/mocha-extensions.js';
import {
  clickNthChildOfSelectedElementNode,
  getElementStyleFontEditorButton,
  getFontEditorButtons,
  getHiddenFontEditorButtons,
  waitForContentOfSelectedElementsNode,
  waitForCSSPropertyValue,
} from '../helpers/elements-helpers.js';

async function goToTestPageAndSelectTestElement(path: string = 'inline_editor/fontEditor.html') {
  await goToResource(path);
  await waitForContentOfSelectedElementsNode('<body>\u200B');
  await clickNthChildOfSelectedElementNode(1);
}

async function openFontEditorForInlineStyle() {
  const fontEditorButton = await getElementStyleFontEditorButton();
  if (!fontEditorButton) {
    throw new Error('Missing font editor button in the element style section');
  }
  await fontEditorButton.click();
  await waitFor('.font-selector-section');
}

describe('The font editor', async function() {
  beforeEach(async function() {
    await enableExperiment('fontEditor');
    await goToTestPageAndSelectTestElement();
    await waitForCSSPropertyValue('#inspected', 'color', 'red');
  });

  it('icon is displayed for sections containing font properties', async () => {
    const fontEditorButtons = await getFontEditorButtons();
    const hiddenFontEditorButtons = await getHiddenFontEditorButtons();
    assert.deepEqual(fontEditorButtons.length, 5);
    assert.deepEqual(hiddenFontEditorButtons.length, 2);
  });

  it('opens when button is clicked', async () => {
    await openFontEditorForInlineStyle();
  });

  it('is properly applying font family changes to the style section', async () => {
    const {frontend} = getBrowserAndPages();
    await openFontEditorForInlineStyle();
    const fontFamilySelector = await waitFor('[aria-label="Font Family"]');
    await fontFamilySelector.focus();
    await frontend.keyboard.press('a');
    await waitForCSSPropertyValue('element.style', 'font-family', 'Arial');
  });

  it('is properly applying slider input changes to the style section', async () => {
    const {frontend} = getBrowserAndPages();
    await openFontEditorForInlineStyle();
    const fontSizeSliderInput = await waitFor('[aria-label="font-size Slider Input"]');
    await fontSizeSliderInput.focus();
    await frontend.keyboard.press('ArrowRight');
    await waitForCSSPropertyValue('element.style', 'font-size', '11px');
  });

  it('is properly applying text input changes to the style section', async () => {
    const {frontend} = getBrowserAndPages();
    await openFontEditorForInlineStyle();
    const fontSizeTextInput = await waitFor('[aria-label="font-size Text Input"]');
    await fontSizeTextInput.focus();
    await frontend.keyboard.press('ArrowUp');
    await waitForCSSPropertyValue('element.style', 'font-size', '11px');
  });

  it('is properly applying selector key values to the style section', async () => {
    const {frontend} = getBrowserAndPages();
    await openFontEditorForInlineStyle();
    const fontWeightSelectorInput = await waitFor('[aria-label="font-weight Key Value Selector"]');
    await fontWeightSelectorInput.focus();
    await frontend.keyboard.press('i');
    await waitForCSSPropertyValue('element.style', 'font-weight', 'inherit');
  });

  it('is properly converting units and applying changes to the styles section', async () => {
    const {frontend} = getBrowserAndPages();
    await openFontEditorForInlineStyle();
    const fontSizeUnitInput = await waitFor('[aria-label="font-size Unit Input"]');
    await fontSizeUnitInput.focus();
    await frontend.keyboard.press('e');
    await waitForCSSPropertyValue('element.style', 'font-size', '0.6em');
  });

  it('computed font list is being generated correctly', async () => {
    await openFontEditorForInlineStyle();
    await waitFor('[value="testFont"]');
  });
});