Added check for transitionDuration to isAnimated (#343)

* Added check for transitionDuraction to isAnimated * Added test where css transition is not applied to show that the test still completes * Can not have two <main> in the test application
adopted-ember-addons · Dec 18, 2019 · b0597db · b0597db
1 parent fae34e2
commit b0597db
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 8 deletions.
diff --git a/addon/components/sortable-item.js b/addon/components/sortable-item.js
@@ -627,7 +627,7 @@ export default Component.extend({
         let el = this.element;
         let property = getComputedStyle(el).transitionProperty;
 
-        return /all|transform/.test(property);
+        return /all|transform/.test(property) && this.get("transitionDuration") > 0;
       }
     });
 

diff --git a/tests/acceptance/smoke-test.js b/tests/acceptance/smoke-test.js
@@ -91,7 +91,28 @@ module('Acceptance | smoke', function(hooks) {
     assert.equal(scrollableContents(), 'Tres Dos Uno Cuatro Cinco');
   });
 
-  test('reordering with touch events', async function(assert) {
+  test('Test is Animated still works without css for transitionDuration', async function(assert) {
+    await visit('/');
+
+    assert.equal(verticalContents(), 'Uno Dos Tres Cuatro Cinco');
+    assert.equal(horizontalContents(), 'Uno Dos Tres Cuatro Cinco');
+    assert.equal(tableContents(), 'Uno Dos Tres Cuatro Cinco');
+    assert.equal(scrollableContents(), 'Uno Dos Tres Cuatro Cinco');
+
+    let order = findAll('[data-test-vertical-demo-handle-no-css]').reverse();
+    await reorder(
+      'mouse',
+      '[data-test-vertical-demo-handle-no-css]',
+      ...order
+    );
+
+    assert.equal(verticalContents(), 'Cinco Cuatro Tres Dos Uno');
+    assert.equal(horizontalContents(), 'Cinco Cuatro Tres Dos Uno');
+    assert.equal(tableContents(), 'Cinco Cuatro Tres Dos Uno');
+    assert.equal(scrollableContents(), 'Cinco Cuatro Tres Dos Uno');
+  });
+
+    test('reordering with touch events', async function(assert) {
     await visit('/');
 
     assert.equal(verticalContents(), 'Uno Dos Tres Cuatro Cinco');

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -150,3 +150,25 @@
     </p>
   </footer>
 </article>
+<article class="demo-no-css">
+  <section class="vertical-demo">
+    <h3>Vertical</h3>
+
+    {{#sortable-group
+            data-test-vertical-demo-group-no-css
+            handleVisualClass=handleVisualClass onChange=(action "update")
+            model=model.items as |group|
+    }}
+      {{#each group.model as |item|}}
+        {{#group.item data-test-vertical-demo-item-no-css tagName="li" model=item  as |groupItem|}}
+          {{item}}
+          {{#groupItem.handle data-test-vertical-demo-handle-no-css class="handle"}}
+            <span data-item={{item}}>
+              <span>&vArr;</span>
+            </span>
+          {{/groupItem.handle}}
+        {{/group.item}}
+      {{/each}}
+    {{/sortable-group}}
+  </section>
+</article>
diff --git a/tests/unit/components/sortable-item-test.js b/tests/unit/components/sortable-item-test.js
@@ -48,21 +48,26 @@ moduleForComponent('sortable-item', {
 });
 
 test('isAnimated', function(assert) {
-  assert.expect(4);
+  assert.expect(6);
 
-  this.render();
+  this.render(); //
+
+  assert.equal(subject.get('isAnimated'), false);
 
-  subject.element.style.transition = 'all';
+  subject.element.style.transition = 'all 0s';
+  assert.equal(subject.get('isAnimated'), false);
+
+  subject.element.style.transition = 'all .125s';
   assert.equal(subject.get('isAnimated'), true);
 
-  subject.element.style.transition = 'transform';
+  subject.element.style.transition = 'transform .125s';
 
   assert.equal(subject.get('isAnimated'), true);
 
-  subject.element.style.transition = 'color';
+  subject.element.style.transition = 'color .125s';
   assert.equal(subject.get('isAnimated'), false);
 
-  subject.element.style.transition = 'none';
+  subject.element.style.transition = 'none .125s';
   assert.equal(subject.get('isAnimated'), false);
 });