<commit_before>/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

// @flow

import React from 'react';
import { fireEvent } from '@testing-library/react';
import { Provider } from 'react-redux';

import { render } from 'firefox-profiler/test/fixtures/testing-library';
import createStore from '../../app-logic/create-store';
import {
  DragAndDrop,
  DragAndDropOverlay,
} from '../../components/app/DragAndDrop';

describe('app/DragAndDrop', () => {
  it('matches the snapshot with default overlay', () => {
    const { container } = render(
      <Provider store={createStore()}>
        <DragAndDrop>Target area here</DragAndDrop>
      </Provider>
    );
    const [dragAndDrop, overlay] = container.children;
    expect(dragAndDrop).toMatchSnapshot();
    expect(overlay).toMatchSnapshot();
  });

  it('matches the snapshot with custom overlay', () => {
    const { container } = render(
      <Provider store={createStore()}>
        <DragAndDrop>
          Target area here
          <DragAndDropOverlay />
        </DragAndDrop>
      </Provider>
    );
    const [dragAndDrop] = container.children;
    expect(dragAndDrop).toMatchSnapshot();
  });

  it('responds to dragging', () => {
    // It would be better if we could check that when dropping
    // something on the area we'd get a call to
    // `retrieveProfileFromFile`, but jsdom is not supporting
    // `dataTransfer`. We should improve this test when that support
    // is added:
    // https://github.com/firefox-devtools/profiler/issues/2366
    const { container } = render(
      <Provider store={createStore()}>
        <DragAndDrop>Target area here</DragAndDrop>
      </Provider>
    );
    const [dragAndDrop, overlay] = container.children;
    expect(overlay.classList).not.toContain('dragging');

    fireEvent.dragEnter(dragAndDrop);
    expect(overlay.classList).toContain('dragging');

    fireEvent.dragExit(dragAndDrop);
    expect(overlay.classList).not.toContain('dragging');
  });
});<commit_msg>Add a test for drag and dropping a profile into the profiler window (Merge PR #3125)<commit_after>/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

// @flow

import { TextDecoder } from 'util';
import React from 'react';
import { fireEvent, waitFor } from '@testing-library/react';
import { Provider } from 'react-redux';

import { render } from 'firefox-profiler/test/fixtures/testing-library';
import createStore from '../../app-logic/create-store';
import {
  DragAndDrop,
  DragAndDropOverlay,
} from '../../components/app/DragAndDrop';
import { getProfileFromTextSamples } from '../fixtures/profiles/processed-profile';
import { serializeProfile } from '../../profile-logic/process-profile';
import { getView } from 'firefox-profiler/selectors';

describe('app/DragAndDrop', () => {
  afterEach(function() {
    delete window.TextDecoder;
  });

  it('matches the snapshot with default overlay', () => {
    const { container } = render(
      <Provider store={createStore()}>
        <DragAndDrop>Target area here</DragAndDrop>
      </Provider>
    );
    const [dragAndDrop, overlay] = container.children;
    expect(dragAndDrop).toMatchSnapshot();
    expect(overlay).toMatchSnapshot();
  });

  it('matches the snapshot with custom overlay', () => {
    const { container } = render(
      <Provider store={createStore()}>
        <DragAndDrop>
          Target area here
          <DragAndDropOverlay />
        </DragAndDrop>
      </Provider>
    );
    const [dragAndDrop] = container.children;
    expect(dragAndDrop).toMatchSnapshot();
  });

  it('responds to dragging', () => {
    const { container } = render(
      <Provider store={createStore()}>
        <DragAndDrop>Target area here</DragAndDrop>
      </Provider>
    );
    const [dragAndDrop, overlay] = container.children;
    expect(overlay.classList).not.toContain('dragging');

    fireEvent.dragEnter(dragAndDrop);
    expect(overlay.classList).toContain('dragging');

    fireEvent.dragExit(dragAndDrop);
    expect(overlay.classList).not.toContain('dragging');
  });

  it('receives profile on file drop', async () => {
    window.TextDecoder = TextDecoder;
    const store = createStore();
    const { container } = render(
      <Provider store={store}>
        <DragAndDrop>Target area here</DragAndDrop>
      </Provider>
    );
    const [dragAndDrop] = container.children;

    const { profile } = getProfileFromTextSamples('A');
    const file = new File([serializeProfile(profile)], 'profile.json', {
      type: 'application/json',
    });
    const files = [file];

    fireEvent.drop(dragAndDrop, { dataTransfer: { files } });
    await waitFor(() =>
      expect(getView(store.getState()).phase).toBe('DATA_LOADED')
    );
  });
});
{'fraction_non_alphanumeric': 0.1428003182179793, 'fraction_numerical': 0.0031821797931583136, 'mean_word_length': 3.3541125541125543, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 43, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, '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': '1546153', 'n_tokens_mistral': 1479, 'n_tokens_neox': 1450, 'n_words': 367}