puppeteer/test/drag-and-drop.spec.ts

/**
 * Copyright 2021 Google Inc. All rights reserved.
 *
 * 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
 *
 *     http://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.
 */

import expect from 'expect';
import {
  getTestState,
  setupTestPageAndContextHooks,
  setupTestBrowserHooks,
  describeChromeOnly,
} from './mocha-utils'; // eslint-disable-line import/extensions

describeChromeOnly('Input.drag', function () {
  setupTestBrowserHooks();
  setupTestPageAndContextHooks();
  it('should throw an exception if not enabled before usage', async () => {
    const { page, server } = getTestState();

    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
    const draggable = await page.$('#drag');

    try {
      await draggable.drag({ x: 1, y: 1 });
    } catch (error) {
      expect(error.message).toContain('Drag Interception is not enabled!');
    }
  });
  it('should emit a dragIntercepted event when dragged', async () => {
    const { page, server } = getTestState();

    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
    expect(page.isDragInterceptionEnabled()).toBe(false);
    await page.setDragInterception(true);
    expect(page.isDragInterceptionEnabled()).toBe(true);
    const draggable = await page.$('#drag');
    const data = await draggable.drag({ x: 1, y: 1 });

    expect(data.items.length).toBe(1);
    expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
  });
  it('should emit a dragEnter', async () => {
    const { page, server } = getTestState();

    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
    expect(page.isDragInterceptionEnabled()).toBe(false);
    await page.setDragInterception(true);
    expect(page.isDragInterceptionEnabled()).toBe(true);
    const draggable = await page.$('#drag');
    const data = await draggable.drag({ x: 1, y: 1 });
    const dropzone = await page.$('#drop');
    await dropzone.dragEnter(data);

    expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
    expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
  });
  it('should emit a dragOver event', async () => {
    const { page, server } = getTestState();

    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
    expect(page.isDragInterceptionEnabled()).toBe(false);
    await page.setDragInterception(true);
    expect(page.isDragInterceptionEnabled()).toBe(true);
    const draggable = await page.$('#drag');
    const data = await draggable.drag({ x: 1, y: 1 });
    const dropzone = await page.$('#drop');
    await dropzone.dragEnter(data);
    await dropzone.dragOver(data);

    expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
    expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
    expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
  });
  it('can be dropped', async () => {
    const { page, server } = getTestState();

    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
    expect(page.isDragInterceptionEnabled()).toBe(false);
    await page.setDragInterception(true);
    expect(page.isDragInterceptionEnabled()).toBe(true);
    const draggable = await page.$('#drag');
    const dropzone = await page.$('#drop');
    const data = await draggable.drag({ x: 1, y: 1 });
    await dropzone.dragEnter(data);
    await dropzone.dragOver(data);
    await dropzone.drop(data);

    expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
    expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
    expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
    expect(await page.evaluate(() => globalThis.didDrop)).toBe(true);
  });
  it('can be dragged and dropped with a single function', async () => {
    const { page, server } = getTestState();

    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
    expect(page.isDragInterceptionEnabled()).toBe(false);
    await page.setDragInterception(true);
    expect(page.isDragInterceptionEnabled()).toBe(true);
    const draggable = await page.$('#drag');
    const dropzone = await page.$('#drop');
    await draggable.dragAndDrop(dropzone);

    expect(await page.evaluate(() => globalThis.didDragStart)).toBe(true);
    expect(await page.evaluate(() => globalThis.didDragEnter)).toBe(true);
    expect(await page.evaluate(() => globalThis.didDragOver)).toBe(true);
    expect(await page.evaluate(() => globalThis.didDrop)).toBe(true);
  });
  it('can be disabled', async () => {
    const { page, server } = getTestState();

    await page.goto(server.PREFIX + '/input/drag-and-drop.html');
    expect(page.isDragInterceptionEnabled()).toBe(false);
    await page.setDragInterception(true);
    expect(page.isDragInterceptionEnabled()).toBe(true);
    const draggable = await page.$('#drag');
    await draggable.drag({ x: 1, y: 1 });
    await page.setDragInterception(false);

    try {
      await draggable.drag({ x: 1, y: 1 });
    } catch (error) {
      expect(error.message).toContain('Drag Interception is not enabled!');
    }
  });
});