kdamball · January 4, 2019 12:21
diff --git a/controllers.application.js b/controllers.application.js
 import Ember from 'ember';

 export default Ember.Controller.extend({
  appName: 'Ember Sortable',
  items: [
    {
      name: 'Link'
    },
    {
      name: 'Zelda'
    }
  ],
  
  actions: {
    reorderItems(itemModels) {
      this.get('items').forEach((item) => {
        const position = itemModels.indexOf(item) + 1;
        Ember.set(item, 'position', position);
      });
    }
  }
 });
diff --git a/styles.app.css b/styles.app.css
 body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
 }

 .sortable-item {
  transition: none;
 }
diff --git a/templates.application.hbs b/templates.application.hbs
 <h1>Welcome to {{appName}}</h1>
 <br>
 {{#sortable-group onChange=(action "reorderItems") as |group|}}
  {{#each (sort-by "position" items) as |item|}}
    {{#sortable-item model=item group=group handle=".js-handle"}}
    	<span class="js-handle">&varr;</span>	
      <span class="item-name">{{item.name}}</span>
    {{/sortable-item}}
  {{/each}}
 {{/sortable-group}}
 <br>
diff --git a/tests.acceptance.my-acceptance-test.js b/tests.acceptance.my-acceptance-test.js
 import { test } from 'qunit';
 import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';

 moduleForAcceptance('Acceptance | general');

 test('visiting /', function(assert) {
  visit('/');
 	let currentList;

  andThen(function() {
    assert.equal(currentURL(), '/');
    //     get current order
    currentList = [...document.querySelectorAll('#test-root .item-name')].map(el => el.textContent);
    assert.deepEqual(currentList, ['Link', 'Zelda'], 'Default render')
  });
  
  
  andThen(() => {
    //  drag the first element
    drag('mouse', '.sortable-item:first-child .js-handle', () => ({dx: 0, dy: 30}));
  });
  
  andThen(() => {
    //     expect it load properly
    let updatedList = [...document.querySelectorAll('#test-root .item-name')].map(el => el.textContent);
 		assert.deepEqual(updatedList, ['Link', 'Zelda'].reverse(), 'it reverses the list');
  });
 });
diff --git a/tests.helpers.destroy-app.js b/tests.helpers.destroy-app.js
 import { run } from '@ember/runloop';

 export default function destroyApp(application) {
  run(application, 'destroy');
 }
diff --git a/tests.helpers.module-for-acceptance.js b/tests.helpers.module-for-acceptance.js
 import { module } from 'qunit';
 import { resolve } from 'rsvp';
 import startApp from '../helpers/start-app';
 import destroyApp from '../helpers/destroy-app';

 export default function(name, options = {}) {
  module(name, {
    beforeEach() {
      this.application = startApp();

      if (options.beforeEach) {
        return options.beforeEach.apply(this, arguments);
      }
    },

    afterEach() {
      let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
      return resolve(afterEach).then(() => destroyApp(this.application));
    }
  });
 }
diff --git a/tests.helpers.start-app.js b/tests.helpers.start-app.js
 import Ember from 'ember';
 import Application from '../../app';
 import config from '../../config/environment';
 import 'ember-sortable/helpers/drag';
 import 'ember-sortable/helpers/reorder';

 const { run } = Ember;
 const assign = Ember.assign || Ember.merge;

 export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes.autoboot = true;
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
 }
diff --git a/tests.test-helper.js b/tests.test-helper.js
 import Application from '../app';
 import config from '../config/environment';
 import { setApplication } from '@ember/test-helpers';
 import { start } from 'ember-qunit';
 import { assign } from '@ember/polyfills';

 let attributes = assign({ rootElement: '#main' }, config.APP);
 setApplication(Application.create(attributes));

 start();
diff --git a/twiddle.json b/twiddle.json
 {
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3",
    "ember-sortable": "1.12.4",
    "ember-composable-helpers": "2.0.2"
  }
 }
	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Sortable',
	items: [
	{
	name: 'Link'
	},
	{
	name: 'Zelda'
	}
	],

	actions: {
	reorderItems(itemModels) {
	this.get('items').forEach((item) => {
	const position = itemModels.indexOf(item) + 1;
	Ember.set(item, 'position', position);
	});
	}
	}
	});
	body {
	margin: 12px 16px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 12pt;
	}

	.sortable-item {
	transition: none;
	}
	<h1>Welcome to {{appName}}</h1>
	<br>
	{{#sortable-group onChange=(action "reorderItems") as \|group\|}}
	{{#each (sort-by "position" items) as \|item\|}}
	{{#sortable-item model=item group=group handle=".js-handle"}}
	<span class="js-handle">&varr;</span>
	<span class="item-name">{{item.name}}</span>
	{{/sortable-item}}
	{{/each}}
	{{/sortable-group}}
	<br>
	import { test } from 'qunit';
	import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';

	moduleForAcceptance('Acceptance \| general');

	test('visiting /', function(assert) {
	visit('/');
	let currentList;

	andThen(function() {
	assert.equal(currentURL(), '/');
	// get current order
	currentList = [...document.querySelectorAll('#test-root .item-name')].map(el => el.textContent);
	assert.deepEqual(currentList, ['Link', 'Zelda'], 'Default render')
	});


	andThen(() => {
	// drag the first element
	drag('mouse', '.sortable-item:first-child .js-handle', () => ({dx: 0, dy: 30}));
	});

	andThen(() => {
	// expect it load properly
	let updatedList = [...document.querySelectorAll('#test-root .item-name')].map(el => el.textContent);
	assert.deepEqual(updatedList, ['Link', 'Zelda'].reverse(), 'it reverses the list');
	});
	});
	import { run } from '@ember/runloop';

	export default function destroyApp(application) {
	run(application, 'destroy');
	}
	import { module } from 'qunit';
	import { resolve } from 'rsvp';
	import startApp from '../helpers/start-app';
	import destroyApp from '../helpers/destroy-app';

	export default function(name, options = {}) {
	module(name, {
	beforeEach() {
	this.application = startApp();

	if (options.beforeEach) {
	return options.beforeEach.apply(this, arguments);
	}
	},

	afterEach() {
	let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
	return resolve(afterEach).then(() => destroyApp(this.application));
	}
	});
	}
	import Ember from 'ember';
	import Application from '../../app';
	import config from '../../config/environment';
	import 'ember-sortable/helpers/drag';
	import 'ember-sortable/helpers/reorder';

	const { run } = Ember;
	const assign = Ember.assign \|\| Ember.merge;

	export default function startApp(attrs) {
	let application;

	let attributes = assign({rootElement: "#test-root"}, config.APP);
	attributes.autoboot = true;
	attributes = assign(attributes, attrs); // use defaults, but you can override;

	run(() => {
	application = Application.create(attributes);
	application.setupForTesting();
	application.injectTestHelpers();
	});

	return application;
	}
	import Application from '../app';
	import config from '../config/environment';
	import { setApplication } from '@ember/test-helpers';
	import { start } from 'ember-qunit';
	import { assign } from '@ember/polyfills';

	let attributes = assign({ rootElement: '#main' }, config.APP);
	setApplication(Application.create(attributes));

	start();
	{
	"version": "0.13.0",
	"EmberENV": {
	"FEATURES": {}
	},
	"options": {
	"use_pods": false,
	"enable-testing": true
	},
	"dependencies": {
	"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
	"ember": "2.16.2",
	"ember-template-compiler": "2.16.2",
	"ember-testing": "2.16.2"
	},
	"addons": {
	"ember-data": "2.16.3",
	"ember-sortable": "1.12.4",
	"ember-composable-helpers": "2.0.2"
	}
	}