[CHORE] Add cypress

Author: lvegerano

.eslintrc.js

@@ -52,6 +52,12 @@ module.exports = {
       rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
         // add your custom rules and overrides for node files here
       })
+    }, { // cypress
+      files: ['cypress/integration/**/*.js'],
+      env: {
+        'cypress/globals': true,
+      },
+      extends: ['plugin:cypress/recommended']
     }
   ]
 };

cypress.json

@@ -0,0 +1 @@
+{}

cypress/integration/drag_drop.spec.js

@@ -0,0 +1,79 @@
+describe('Ember SortableJS ', function() {
+  it('renders a list', function() {
+    const initial = ['one', 'two', 'three', 'four', 'five'];
+
+    cy.visit('http://localhost:4200/simple');
+
+    cy
+      .get('div[data-list-item]')
+      .should(($divs) => {
+        expect($divs).to.have.length(5);
+
+        const renderedList = $divs.map((i, el) => el.innerText);
+
+        expect(renderedList.get()).to.deep.eq(initial);
+      });
+  });
+
+  it('reorders as list from top to bottom', function() {
+    const sorted = ['two', 'three', 'four', 'five', 'one'];
+
+    cy.visit('http://localhost:4200/simple');
+    cy.get('div[data-list-item="0"').drag('div[data-list-item="4"', { force: true, position: 'bottom' })
+
+    cy
+      .get('div[data-list-item]')
+      .should(($divs) => {
+        expect($divs).to.have.length(5);
+
+        const renderedList = $divs.map((i, el) => el.innerText);
+
+        expect(renderedList.get()).to.deep.eq(sorted);
+      });
+  });
+
+  it('reorders a list bottom to top', function() {
+    const sorted = ['five', 'one', 'two', 'three', 'four'];
+
+    cy.visit('http://localhost:4200/simple');
+    cy.get('div[data-list-item="4"').drag('div[data-list-item="0"', { force: true, position: 'center' })
+
+    cy
+      .get('div[data-list-item]')
+      .should(($divs) => {
+        expect($divs).to.have.length(5);
+
+        const renderedList = $divs.map((i, el) => el.innerText);
+
+        expect(renderedList.get()).to.deep.eq(sorted);
+      });
+  });
+
+  it('adds an item from one list to another', function() {
+    cy.visit('http://localhost:4200/shared');
+    cy.get('.list-a > div[data-list-item="0"').drag('.list-b > div[data-list-item="1"', { force: true, position: 'top' });
+
+    const listA = ['Jaden', 'Gustavo'];
+    const listB = ['Lance', 'Luis', 'Britni', 'Kelly'];
+
+    cy
+      .get('.list-a > div[data-list-item]')
+      .should(($divs) => {
+        expect($divs).to.have.length(2);
+
+        const renderedList = $divs.map((i, el) => el.innerText);
+
+        expect(renderedList.get()).to.deep.eq(listA);
+      });
+
+      cy
+      .get('.list-b > div[data-list-item]')
+      .should(($divs) => {
+        expect($divs).to.have.length(4);
+
+        const renderedList = $divs.map((i, el) => el.innerText);
+
+        expect(renderedList.get()).to.deep.eq(listB);
+      });
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,27 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+require('@4tw/cypress-drag-drop')

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')