<commit_before>/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import { waitForElementToBeRemoved } from '@testing-library/react';

/**
 * Internal dependencies
 */
import useInsertElement from '../components/canvas/useInsertElement';
import { TEXT_ELEMENT_DEFAULT_FONT } from '../app/font/defaultFonts';
import { useStory } from '../app/story';
import { Fixture } from './fixture';

describe('Element: Text', () => {
  let fixture;

  const addText = async (extraProps = null) => {
    const insertElement = await fixture.renderHook(() => useInsertElement());
    await fixture.act(() =>
      insertElement('text', {
        font: TEXT_ELEMENT_DEFAULT_FONT,
        content: 'hello world!',
        x: 40,
        y: 40,
        width: 250,
        ...extraProps,
      })
    );
  };

  beforeEach(async () => {
    fixture = new Fixture();
    await fixture.render();
    await addText();
  });

  afterEach(() => {
    fixture.restore();
  });

  describe('CUJ: Creator Can Style Text: Use font picker', () => {
    // There are 3 curated fonts included by default even though the total is more.
    const DEFAULT_VISIBLE_FONTS = 3;
    // Timeout used for submitting / search update + 50ms (250 + 50).
    const TIMEOUT = 300;
    const openFontPicker = async () => {
      const input = await fixture.screen.getByLabelText('Edit: Font family');
      await fixture.events.click(input);
    };

    beforeEach(async () => {
      await openFontPicker();
    });

    it('should render the font picker', async () => {
      await fixture.snapshot('font picker open');
    });

    it('should apply the selected font', async () => {
      await fixture.events.keyboard.type('Yrsa');
      // Ensure the debounced callback has taken effect.
      await wait(TIMEOUT);
      const option = fixture.screen.getByText('Yrsa');
      await fixture.events.click(option);
      await wait(TIMEOUT);
      await openFontPicker();
      const selected = fixture.screen.getAllByRole('option', {
        name: 'Selected Yrsa',
      });
      expect(selected.length).toBe(1);

      const {
        state: {
          currentPage: { elements },
        },
      } = await fixture.renderHook(() => useStory());
      expect(elements[1].font.family).toBe('Yrsa');
    });

    it('should display only the fonts from curated list by default', () => {
      const options = document
        .getElementById('editor-font-picker-list')
        .querySelectorAll('li');
      expect(options.length).toBe(DEFAULT_VISIBLE_FONTS);
    });

    describe('when searching fonts', () => {
      it('should display the correct fonts when searching', async () => {
        await fixture.events.keyboard.type('Ab');
        // Ensure the debounced callback has taken effect.
        await wait(TIMEOUT);
        let options = document
          .getElementById('editor-font-picker-list')
          .querySelectorAll('li');
        expect(options.length).toBe(2);
        expect(options[0].textContent).toBe('Abel');
        expect(options[1].textContent).toBe('Abhaya Libre');

        await fixture.events.keyboard.type('el');
        // Ensure the debounced callback has taken effect.
        await wait(TIMEOUT);
        options = document
          .getElementById('editor-font-picker-list')
          .querySelectorAll('li');
        expect(options.length).toBe(1);
        expect(options[0].textContent).toBe('Abel');
      });

      it('should not search with less than 2 characters', async () => {
        await fixture.events.keyboard.type('A');
        // Ensure the debounced callback has taken effect.
        await wait(TIMEOUT);
        let options = document
          .getElementById('editor-font-picker-list')
          .querySelectorAll('li');
        expect(options.length).toBe(DEFAULT_VISIBLE_FONTS);
      });

      it('should restore default fonts list when emptying search', async () => {
        await fixture.events.keyboard.type('Ab');
        // Ensure the debounced callback has taken effect.
        await wait(TIMEOUT);
        let options = document
          .getElementById('editor-font-picker-list')
          .querySelectorAll('li');
        expect(options.length).toBe(2);

        await fixture.events.keyboard.press('del');
        await fixture.events.keyboard.press('del');
        // Ensure the debounced callback has taken effect.
        await wait(TIMEOUT);
        options = document
          .getElementById('editor-font-picker-list')
          .querySelectorAll('li');
        // Back to all options.
        expect(options.length).toBe(DEFAULT_VISIBLE_FONTS);
      });

      it('should show empty list in case of no results', async () => {
        await fixture.events.keyboard.type('No fonts here');
        // Ensure the debounced callback has taken effect.
        await wait(TIMEOUT);
        expect(fixture.screen.getByText('No matches found')).toBeDefined();
      });
    });<commit_msg>Try fixing test again.<commit_after>/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import { waitForElementToBeRemoved } from '@testing-library/react';

/**
 * Internal dependencies
 */
import useInsertElement from '../components/canvas/useInsertElement';
import { TEXT_ELEMENT_DEFAULT_FONT } from '../app/font/defaultFonts';
import { useStory } from '../app/story';
import { Fixture } from './fixture';

describe('Element: Text', () => {
  let fixture;

  const addText = async (extraProps = null) => {
    const insertElement = await fixture.renderHook(() => useInsertElement());
    await fixture.act(() =>
      insertElement('text', {
        font: TEXT_ELEMENT_DEFAULT_FONT,
        content: 'hello world!',
        x: 40,
        y: 40,
        width: 250,
        ...extraProps,
      })
    );
  };

  beforeEach(async () => {
    fixture = new Fixture();
    await fixture.render();
    await addText();
  });

  afterEach(() => {
    fixture.restore();
  });

  describe('CUJ: Creator Can Style Text: Use font picker', () => {
    // There are 3 curated fonts included by default even though the total is more.
    const DEFAULT_VISIBLE_FONTS = 3;
    // Timeout used for submitting / search update + 50ms (250 + 50).
    const TIMEOUT = 300;
    const openFontPicker = async () => {
      const input = await fixture.screen.getByLabelText('Edit: Font family');
      await fixture.events.click(input);
    };

    beforeEach(async () => {
      await openFontPicker();
    });

    it('should render the font picker', async () => {
      await fixture.snapshot('font picker open');
    });

    it('should apply the selected font', async () => {
      await fixture.events.keyboard.type('Yrsa');
      // Ensure the debounced callback has taken effect.
      await wait(TIMEOUT);
      const option = fixture.screen.getByText('Yrsa');
      await fixture.events.click(option);
      await wait(TIMEOUT);
      await openFontPicker();
      const selected = fixture.screen.getAllByRole('option', {
        name: 'Selected Yrsa',
      });
      expect(selected.length).toBe(1);

      const {
        state: {
          currentPage: { elements },
        },
      } = await fixture.renderHook(() => useStory());
      expect(elements[1].font.family).toBe('Yrsa');
    });

    it('should display only the fonts from curated list by default', () => {
      const options = document
        .getElementById('editor-font-picker-list')
        .querySelectorAll('li');
      expect(options.length).toBe(DEFAULT_VISIBLE_FONTS);
    });

    describe('when searching fonts', () => {
      it('should display the correct fonts when searching', async () => {
        await fixture.events.keyboard.type('Ab');
        // Ensure the debounced callback has taken effect.
        await wait(TIMEOUT);
        let options = document
          .getElementById('editor-font-picker-list')
          .querySelectorAll('li');
        expect(options.length).toBe(2);
        expect(options[0].textContent).toBe('Abel');
        expect(options[1].textContent).toBe('Abhaya Libre');

        await fixture.events.keyboard.type('el');
        // Ensure the debounced callback has taken effect.
        await wait(TIMEOUT);
        options = document
          .getElementById('editor-font-picker-list')
          .querySelectorAll('li');
        expect(options.length).toBe(1);
        expect(options[0].textContent).toBe('Abel');
      });

      it('should not search with less than 2 characters', async () => {
        await fixture.events.keyboard.type('A');
        // Ensure the debounced callback has taken effect.
        await wait(TIMEOUT);
        let options = document
          .getElementById('editor-font-picker-list')
          .querySelectorAll('li');
        expect(options.length).toBe(DEFAULT_VISIBLE_FONTS);
      });

      it('should restore default fonts list when emptying search', async () => {
        await fixture.events.keyboard.type('Ab');
        // Ensure the debounced callback has taken effect.
        await wait(TIMEOUT);
        let options = document
          .getElementById('editor-font-picker-list')
          .querySelectorAll('li');
        expect(options.length).toBe(2);

        await fixture.events.keyboard.press('Del');
        await wait(TIMEOUT);
        await fixture.events.keyboard.press('Del');
        // Ensure the debounced callback has taken effect.
        await wait(TIMEOUT);
        options = document
          .getElementById('editor-font-picker-list')
          .querySelectorAll('li');
        // Back to all options.
        expect(options.length).toBe(DEFAULT_VISIBLE_FONTS);
      });

      it('should show empty list in case of no results', async () => {
        await fixture.events.keyboard.type('No fonts here');
        // Ensure the debounced callback has taken effect.
        await wait(TIMEOUT);
        expect(fixture.screen.getByText('No matches found')).toBeDefined();
      });
    });
{'fraction_non_alphanumeric': 0.13000181061017563, 'fraction_numerical': 0.006518196632265073, 'mean_word_length': 2.6713193752077102, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 39, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1079818', 'n_tokens_mistral': 3003, 'n_tokens_neox': 2988, 'n_words': 829}