npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@4tw/cypress-drag-drop

v2.2.5

Published

A cypress child command for drag'n'drop support.

Downloads

831,931

Readme

cypress-drag-drop

A Cypress child command for drag'n'drop support.

Setup

Install using npm:

npm install --save-dev @4tw/cypress-drag-drop

or yarn

yarn add --dev @4tw/cypress-drag-drop

Before Cypress is loaded (usually in your commands.js) put the following line:

require('@4tw/cypress-drag-drop')

Or, if you are using ES module syntax:

import '@4tw/cypress-drag-drop'

This will register the drag and move command.

If you're using TypeScript, put the following configuration in a tsconfig.json

{
  "compilerOptions": {
    "types": ["cypress", "@4tw/cypress-drag-drop"]
  }
}

Usage

drag

The drag command is a child command. The command only accepts elements. As the drop target simply pass a selector as a string.

In your Cypress spec use the command as follows:

describe('Dragtest', () => {
  it('should dragndrop', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').drag('.targetitem')
  })
})

Pass the options as an object in the second paramteter.

describe('Dragtest', () => {
  it('should dragndrop', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').drag('.targetitem', options)
  })
})

During the drag and drop interaction, two elements are involved. The source element being dragged and the drop target. In order to decide what options should either be applied to the source or the target, the options object can be divided in source and target. Options that are not specific to the source or target are applied to both the source and the target.

cy.get('.sourceitem').drag('.target', {
  source: { x: 100, y: 100 }, // applies to the element being dragged
  target: { position: 'left' }, // applies to the drop target
  force: true, // applied to both the source and target element
})

The options are directly passed to Cypress' trigger command. So, all options from https://docs.cypress.io/api/commands/trigger#Arguments are possible.

Check command outcome

The drag command is able to tell whether the drag attempt was successful or not. So, the command will yield true when the drag attempt was successful and false otherwise:

cy.get('.sourceitem').drag('.target').then((success) => {
  assert.isTrue(success)
})

Or you might also want to check that the element is not draggable:

cy.get('.sourceitem').drag('.target').then((success) => {
  assert.isFalse(success)
})

move

The move command is a child command. The command only accepts elements. Define deltaX and deltaY as an object parameter to move the element in x- and y-position relative to the element's current position.

In your Cypress spec use the command as follows:

describe('Movetest', () => {
  it('should move', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').move({ deltaX: 100, deltaY: 100 })
  })
})

The command accepts all options from https://docs.cypress.io/api/commands/trigger#Arguments except position, x and y because they have no effect, since the command makes use of clientX and clientY internally.

describe('Movetest', () => {
  it('should move', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').move({ deltaX: 100, deltaY: 100, ...options })
  })
})

Development

The plugin itself is implemented in the index.js file.

Testing

The tests can be run using Cypress:

yarn test

The test fixtures are under src/examples/. Using the setExample Cypress command the fixture is loaded and ready to run tests on. The first attribute in the setExample command is the name of the fixture which needs to be the filename of the component.

cy.setExample('NameOfTheComponent')

Release

Release a new version of this package:

yarn run release

Changelog

Have a look at the Changelog