Concepts demo tests

tests/acceptance/beacon-inbox-test.js

@@ -1,4 +1,4 @@
-import { skip, module } from 'qunit';
+import { test, module } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click } from '@ember/test-helpers';
 import { bounds, time, setupAnimationTest } from 'ember-animated/test-support';
@@ -8,18 +8,49 @@ module('Integration | Beacon Demo', function(hooks){
   setupRenderingTest(hooks);
   setupAnimationTest(hooks);
 
-  skip('visiting /between-components', async function(assert) {
+  test('it renders', async function(assert) {
     await this.render(hbs`
       {{between-components}}
     `);
+    assert.ok(this.element.querySelector('button'));
+  });
+
+
+  test('Mail Icon Beacon Generates Emails', async function(assert) {
+    await this.render(hbs`
+      {{between-components}}
+    `);
+
+    await time.pause();
+    await click(this.element.querySelector('.top-bar > button'));
+    await time.advance(10);
+
     await time.pause();
-    await click(this.element.querySelector('button'));
-    await time.advance(100);
-    let modal = bounds(this.element.querySelector('.message'));
-    let button = bounds(this.element.querySelector('button'));
-    assert.closeBounds(5, modal, button, 'modal should be near button');
+    let newEmail = this.element.querySelector('.message');
+    let mailBeacon = this.element.querySelector('.top-bar > button');
+    assert.closeBounds(5, bounds(mailBeacon), bounds(newEmail), 'new email is near mail icon');
+
+    await time.advance(2000);
+    let finalEmails = this.element.querySelectorAll('.each-item');
+    assert.equal(finalEmails.length, 8, 'New Email was added to Inbox');
   });
 
+  test('Trash Icon Deletes Email', async function(assert) {
+    await this.render(hbs`
+      {{between-components}}
+    `);
+    await time.pause();
+    await click(this.element.querySelector('input[type="checkbox"]'));
+
+    await time.advance(2000);
+    let finalEmails = this.element.querySelectorAll('.each-item');
+    assert.equal(finalEmails.length, 7, 'One Email was Deleted from Inbox');
+
+  });
+
+
+
 
 });
 
+

tests/acceptance/between-two-lists-example-test.js

@@ -1,13 +1,110 @@
 import { test, module } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { click } from '@ember/test-helpers';
+import { time, setupAnimationTest, bounds } from 'ember-animated/test-support';
 
 module('Integration | Between Two Lists Example', function(hooks){
   setupRenderingTest(hooks);
+  setupAnimationTest(hooks);
   test('it renders', async function(assert) {
     await this.render(hbs`
     {{between-two-lists-example}}
     `);
     assert.ok(this.element.querySelectorAll('bounce'), "found undo button");
   });
+
+  test('Both Lists Have 5 People', async function(assert) {
+    await this.render(hbs`
+    {{between-two-lists-example}}
+    `);
+    await time.pause();
+    let going = this.element.querySelectorAll('.left > .each-item');
+    let notGoing = this.element.querySelectorAll('.right > .each-item');
+    assert.equal(going.length, notGoing.length, "Both lists have 5 people at first render");
+  });
+
+  test('Dwight Moved from Going to Not Going', async function(assert) {
+    await this.render(hbs`
+    {{between-two-lists-example}}
+    `);
+
+    await time.pause();
+    await click(this.element.querySelector('.left > .each-item > button'));
+    await time.advance(2000);
+    let going = this.element.querySelectorAll('.left > .each-item');
+    let notGoing = this.element.querySelectorAll('.right > .each-item');
+    assert.equal(going.length, 4, "Dwight was removed from going list");
+    assert.equal(notGoing.length, 6, "Dwight was added to Not Going list");
+  });
+
+  test('Move First person in Not Going to Going', async function(assert) {
+    await this.render(hbs`
+    {{between-two-lists-example}}
+    `);
+
+    await time.pause();
+    await click(this.element.querySelector('.right > .each-item > button'));
+    await time.advance(2000);
+    let notGoing = this.element.querySelectorAll('.right > .each-item');
+    let going = this.element.querySelectorAll('.left > .each-item');
+    assert.equal(going.length, 6, "Removed from going list");
+    assert.equal(notGoing.length, 4, "Added to Not Going list");
+  });
+
+  test('Dwight Moved from Going to Not Going Bounds', async function(assert) {
+    await this.render(hbs`
+    {{between-two-lists-example}}
+    `);
+
+    await time.pause();
+    let going = this.element.querySelectorAll('.left > .each-item');
+    await click(this.element.querySelector('.left > .each-item > button'));
+    await time.advance(1000);
+    assert.ok(bounds(going[0]).right > bounds(going[1]).right, "Dwight moving away from going list");
+  });
+
+  test('Bounce Back Feature Works', async function(assert) {
+    await this.render(hbs`
+    {{between-two-lists-example}}
+    `);
+    await time.pause();
+    await click(this.element.querySelector('.bounce'));
+    let going = this.element.querySelectorAll('.left > .each-item');
+    await click(this.element.querySelector('.left > .each-item > button'));
+    await time.advance(1000);
+    assert.ok(bounds(going[0]).right > bounds(going[1]).right, "Dwight moving away from going list");
+    await time.advance(1000);
+    assert.equal(going.length, 5, "Dwight Returned to Going List");
+
+
+  });
+
+  test('transitions get logged to screen', async function(assert) {
+    await this.render(hbs`
+      {{#full-log-table as |fullLog|}}
+        {{logged-two-lists fullLog=fullLog}}
+      {{/full-log-table}}
+    `);
+
+    await click(this.element.querySelector('.left > .each-item > button'));
+    let rows = this.element.querySelectorAll('.transition-log-table tr');
+    assert.equal(rows.length, 4, "should have two log entries (first two rows are headers)");
+    let columns = rows[2].querySelectorAll('td');
+    assert.equal(loggedWords(columns[0]).length, 4, "Four Kept People");
+    assert.equal(loggedWords(columns[1]).length, 1, "One Sent Person");
+    assert.equal(loggedWords(columns[2]).length, 0, "No Received People");
+
+    let column2 = rows[3].querySelectorAll('td');
+    assert.equal(loggedWords(column2[0]).length, 5, "Five Kept People");
+    assert.equal(loggedWords(column2[1]).length, 0, "No Sent People");
+    assert.equal(loggedWords(column2[2]).length, 1, "One Received Person");
+  });
+
+
+
 });
+
+function loggedWords(tdElement) {
+  return tdElement.textContent.trim().split(',').filter(Boolean);
+}

tests/acceptance/navigates-routes-test.js

@@ -0,0 +1,40 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+
+module('Acceptance | navigates routes', function(hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /docs', async function(assert) {
+    await visit('/docs');
+
+    assert.equal(currentURL(), '/docs');
+  });
+
+  test('visiting concept pages', async function(assert) {
+    await visit('/docs');
+    assert.equal(currentURL(), '/docs');
+
+    await visit('/docs/sprites');
+    assert.equal(currentURL(), '/docs/sprites');
+
+    await visit('/docs/transitions');
+    assert.equal(currentURL(), '/docs/transitions');
+
+    await visit('/docs/motions');
+    assert.equal(currentURL(), '/docs/motions');
+
+    await visit('/docs/rules');
+    assert.equal(currentURL(), '/docs/rules');
+
+    await visit('/docs/beacons');
+    assert.equal(currentURL(), '/docs/beacons');
+
+
+  });
+
+
+
+
+
+});

tests/dummy/app/components/between-components.js

@@ -63,7 +63,7 @@ export default Component.extend({
 
 function makeRandomItem(index) {
   var messages = ["Hi", "Hello", "Invitation", "Thank You", "Congratulations", "Namaste", "Happy Birthday", "Aloha", "Welcome","Urgent"];
-  return { id: Math.round(Math.random()*1000), message: messages[index] };
+  return { id: Math.round(Math.random()*1000), message: messages[index], received: new Date() };
 }
 //END-SNIPPET
 

tests/dummy/app/styles/app.css

@@ -202,6 +202,7 @@
   font-size: 17px;
 }
 
+
 .scenario-two-lists button {
   padding-right: 10px;
   color: rgb(37, 158, 199);

tests/dummy/app/templates/components/between-components.hbs

@@ -41,7 +41,7 @@
           <div class="each-item">
               <input type="checkbox" onclick={{action "removeItem" item}}>
               <div class="message">{{item.message}}</div>
-              <div class="date">{{moment-format now 'MMM D'}}</div>
+              <div class="date">{{moment-format item.received 'MMM D'}}</div>
           </div>
       {{/animated-each}}
     </div>

tests/dummy/app/templates/docs/beacons.md

@@ -17,3 +17,4 @@ In this demonstration, the "Delete with Undo" option shows what happens when an
     {{demo.snippet 'between-components-snippet.js' label='between-components.js'}}
     {{demo.snippet 'sprites-snippet.css'}}
 {{/docs-demo}}
+

tests/integration/components/moving-word-text-test.js

@@ -0,0 +1,66 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+import { time, setupAnimationTest } from 'ember-animated/test-support';
+
+module('Integration | Component | moving-word-text', function(hooks) {
+  setupRenderingTest(hooks);
+  setupAnimationTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`{{moving-word-text}}`);
+    assert.ok(this.element.querySelector('button'));
+  });
+
+  test('Font Size, Color, and Letter Spacing Change From Initial to Final Values', async function(assert) {
+    await render(hbs`{{moving-word-text}}`);
+
+    await time.pause();
+    let initialFontSize = parseFloat(getComputedStyle(this.element.querySelector('p')).fontSize);
+    let initialLetterSpacing = parseFloat(getComputedStyle(this.element.querySelector('p')).letterSpacing);
+    assert.equal(this.element.querySelector('p').getAttribute('style'), 'color: lightblue; font-size: 20px; letter-spacing: 0.2rem;', 'starts as lightblue');
+
+
+
+    await click(this.element.querySelector('button'));
+    await time.advance(2000);
+    let finalFontSize = parseFloat(getComputedStyle(this.element.querySelector('ul > li')).fontSize);
+    let finalLetterSpacing = parseFloat(getComputedStyle(this.element.querySelector('ul > li')).letterSpacing);
+    assert.notEqual(initialFontSize, finalFontSize, "Initial and Final Font Size are Different");
+    assert.notEqual(initialLetterSpacing, finalLetterSpacing, "Initial and Final Letter Spacing are Different");
+    assert.notOk(this.element.querySelector('ul > li').getAttribute('style'));
+
+
+
+  });
+
+  test('Attributes transition smoothly from Initial to Final Values', async function(assert) {
+    await render(hbs`{{moving-word-text}}`);
+    await time.pause();
+    let initialFontSize = parseFloat(getComputedStyle(this.element.querySelector('p')).fontSize);
+    let initialLetterSpacing = parseFloat(getComputedStyle(this.element.querySelector('p')).letterSpacing);
+    assert.equal(initialFontSize, 20);
+    assert.equal(this.element.querySelector('p').getAttribute('style'), 'color: lightblue; font-size: 20px; letter-spacing: 0.2rem;', 'starts as lightblue');
+
+
+    await click(this.element.querySelector('button'));
+    await time.advance(200);
+    await time.pause();
+    let middleFontSize = parseFloat(getComputedStyle(this.element.querySelector('ul > li')).fontSize);
+    let middleLetterSpacing = parseFloat(getComputedStyle(this.element.querySelector('ul > li')).letterSpacing);
+    assert.notDeepEqual(initialFontSize, middleFontSize, "Font Size changes");
+    assert.notEqual(initialLetterSpacing, middleLetterSpacing, "Letter Spacing changes");
+    assert.notOk(this.element.querySelector('ul > li').getAttribute('style'));
+
+    await time.advance(2000);
+    await time.pause();
+    let finalFontSize = parseFloat(getComputedStyle(this.element.querySelector('ul > li')).fontSize);
+    let finalLetterSpacing = parseFloat(getComputedStyle(this.element.querySelector('ul > li')).letterSpacing);
+    assert.equal(finalFontSize, 16);
+    assert.notEqual(middleLetterSpacing, finalLetterSpacing, "Middle and Final Letter Spacing are Different");
+    assert.notOk(this.element.querySelector('ul > li').getAttribute('style'));
+  });
+
+
+});

tests/integration/components/opacity-demo-test.js

@@ -0,0 +1,47 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+import { time, setupAnimationTest } from 'ember-animated/test-support';
+
+module('Integration | Component | opacity-demo', function(hooks) {
+  setupRenderingTest(hooks);
+  setupAnimationTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`{{opacity-demo}}`);
+    assert.ok(this.element.querySelector('input[type="checkbox"]'));
+  });
+
+
+  test('Message Fades In', async function(assert) {
+    await render(hbs`{{opacity-demo}}`);
+
+    await time.pause();
+    await click(this.element.querySelector('input[type="checkbox"]'));
+    await time.advance(500);
+
+    let opacity = parseFloat(getComputedStyle(this.element.querySelector('.message')).opacity);
+    assert.ok(opacity > 0 && opacity < 1, `expected opacity to be animating, it's ${opacity}`);
+
+    await time.advance(1500);
+    let finalOpacity = parseFloat(getComputedStyle(this.element.querySelector('.message')).opacity);
+    assert.equal(finalOpacity, 1, `expected opacity to be animating, it's ${opacity}`);
+
+  });
+
+  test('Message Fades Out', async function(assert) {
+    await render(hbs`{{opacity-demo}}`);
+
+    await time.pause();
+    await click(this.element.querySelector('input[type="checkbox"]'));
+    await time.advance(2000);
+    let initialOpacity = parseFloat(getComputedStyle(this.element.querySelector('.message')).opacity);
+    assert.equal(initialOpacity, 1);
+    await click(this.element.querySelector('input[type="checkbox"]'));
+    await time.advance(500);
+    let finalOpacity = parseFloat(getComputedStyle(this.element.querySelector('.message')).opacity);
+    assert.ok(finalOpacity < initialOpacity, `expected opacity to be animating, it's ${finalOpacity}`);
+  });
+
+});