diff --git a/tests/acceptance/beacon-inbox-test.js b/tests/acceptance/beacon-inbox-test.js index ee738a711..e171b9186 100644 --- a/tests/acceptance/beacon-inbox-test.js +++ b/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'); + + }); + + + }); + diff --git a/tests/acceptance/between-two-lists-example-test.js b/tests/acceptance/between-two-lists-example-test.js index d05f8386f..50fd44ec9 100644 --- a/tests/acceptance/between-two-lists-example-test.js +++ b/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); +} diff --git a/tests/acceptance/navigates-routes-test.js b/tests/acceptance/navigates-routes-test.js new file mode 100644 index 000000000..278e1e942 --- /dev/null +++ b/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'); + + + }); + + + + + +}); diff --git a/tests/dummy/app/components/between-components.js b/tests/dummy/app/components/between-components.js index 1d6e6bfa8..4d04b3852 100644 --- a/tests/dummy/app/components/between-components.js +++ b/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 diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css index a1323f316..cde799a81 100644 --- a/tests/dummy/app/styles/app.css +++ b/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); diff --git a/tests/dummy/app/templates/components/between-components.hbs b/tests/dummy/app/templates/components/between-components.hbs index b2f833dd4..ff03d023f 100644 --- a/tests/dummy/app/templates/components/between-components.hbs +++ b/tests/dummy/app/templates/components/between-components.hbs @@ -41,7 +41,7 @@
{{item.message}}
-
{{moment-format now 'MMM D'}}
+
{{moment-format item.received 'MMM D'}}
{{/animated-each}} diff --git a/tests/dummy/app/templates/docs/beacons.md b/tests/dummy/app/templates/docs/beacons.md index 858044c97..da47bc489 100644 --- a/tests/dummy/app/templates/docs/beacons.md +++ b/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}} + diff --git a/tests/integration/components/moving-word-text-test.js b/tests/integration/components/moving-word-text-test.js new file mode 100644 index 000000000..88342617d --- /dev/null +++ b/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')); + }); + + +}); diff --git a/tests/integration/components/opacity-demo-test.js b/tests/integration/components/opacity-demo-test.js new file mode 100644 index 000000000..824b3e750 --- /dev/null +++ b/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}`); + }); + +}); diff --git a/tests/integration/components/transitions-example-test.js b/tests/integration/components/transitions-example-test.js new file mode 100644 index 000000000..7ae44b311 --- /dev/null +++ b/tests/integration/components/transitions-example-test.js @@ -0,0 +1,52 @@ +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, bounds } from 'ember-animated/test-support'; + +module('Integration | Component | transitions-example', function(hooks) { + setupRenderingTest(hooks); + setupAnimationTest(hooks); + + test('it renders', async function(assert) { + await render(hbs`{{transitions-example}}`); + assert.ok(this.element.querySelector('input[type="checkbox"]')); + + }); + + test('Message Slides In and Out', async function(assert) { + await render(hbs`{{transitions-example}}`); + + await time.pause(); + await click(this.element.querySelector('input[type="checkbox"]')); + await time.advance(2000); + assert.ok(this.element.querySelector('.message')); + + await time.pause(); + await click(this.element.querySelector('input[type="checkbox"]')); + await time.advance(2000); + assert.notOk(this.element.querySelector('.message')); + }); + + test('Interruption Case', async function(assert) { + await render(hbs`{{transitions-example}}`); + + await time.pause(); + await click(this.element.querySelector('input[type="checkbox"]')); + await time.advance(2000); + let initialBounds = bounds(this.element.querySelector('.message')); + + await time.pause(); + await click(this.element.querySelector('input[type="checkbox"]')); + await time.advance(500); + let middleBounds = bounds(this.element.querySelector('.message')); + + await time.pause(); + await click(this.element.querySelector('input[type="checkbox"]')); + await time.advance(2000); + let finalBounds = bounds(this.element.querySelector('.message')); + assert.deepEqual(initialBounds, finalBounds, "Message started and ended in the same place"); + assert.notEqual(middleBounds, finalBounds, "Message was interrupted during transition"); + }); + +}); diff --git a/tests/integration/components/transitions-fade-test.js b/tests/integration/components/transitions-fade-test.js new file mode 100644 index 000000000..8f469bff2 --- /dev/null +++ b/tests/integration/components/transitions-fade-test.js @@ -0,0 +1,49 @@ +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 | transitions-fade', function(hooks) { + setupRenderingTest(hooks); + setupAnimationTest(hooks); + + test('it renders', async function(assert) { + await render(hbs`{{transitions-fade}}`); + + assert.ok(this.element.querySelector('input[type="checkbox"]')); + + }); + + test('Message Fades In', async function(assert) { + await render(hbs`{{transitions-fade}}`); + + 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(500); + 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`{{transitions-fade}}`); + + await time.pause(); + await click(this.element.querySelector('input[type="checkbox"]')); + await time.advance(1000); + 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}`); + }); + + +}); diff --git a/tests/integration/components/transitions-moveover-test.js b/tests/integration/components/transitions-moveover-test.js new file mode 100644 index 000000000..415945bca --- /dev/null +++ b/tests/integration/components/transitions-moveover-test.js @@ -0,0 +1,38 @@ +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 | transitions-moveover', function(hooks) { + setupRenderingTest(hooks); + setupAnimationTest(hooks); + + test('it renders', async function(assert) { + await render(hbs`{{transitions-moveover}}`); + assert.ok(this.element.querySelector('input[type="checkbox"]')); + }); + + test('Show Hello', async function(assert) { + await render(hbs`{{transitions-moveover}}`); + + await time.pause(); + await click(this.element.querySelector('input[type="checkbox"]')); + await time.advance(2000); + assert.ok(this.element.querySelector('.hello')); + + }); + + test('Show Goodbye', async function(assert) { + await render(hbs`{{transitions-moveover}}`); + + await time.pause(); + await click(this.element.querySelector('input[type="checkbox"]')); + await time.advance(2000); + assert.ok(this.element.querySelector('.hello')); + await time.pause(); + await click(this.element.querySelector('input[type="checkbox"]')); + await time.advance(2000); + assert.ok(this.element.querySelector('.goodbye')); + }); +});