-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b23b688
commit 11572c3
Showing
2 changed files
with
126 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,22 @@ | ||
| /* jshint expr:true */ | ||
| import { expect } from 'chai'; | ||
| import { | ||
| describeComponent, | ||
| it | ||
| } from 'ember-mocha'; | ||
| import { setupComponentTest } from 'ember-mocha'; | ||
| import { describe, it } from 'mocha'; | ||
| import hbs from 'htmlbars-inline-precompile'; | ||
|
|
||
| describeComponent( | ||
| 'html-tag', | ||
| 'Integration: HtmlTagComponent', | ||
| { | ||
| integration: true | ||
| }, | ||
| function() { | ||
| it('renders', function() { | ||
| // Set any properties with this.set('myProperty', 'value'); | ||
| // Handle any actions with this.on('myAction', function(val) { ... }); | ||
| // Template block usage: | ||
| // this.render(hbs` | ||
| // {{#html-tag}} | ||
| // template content | ||
| // {{/html-tag}} | ||
| // `); | ||
| describe('HtmlTagComponent', function() { | ||
| setupComponentTest('html-tag', { integration: true }); | ||
|
|
||
| this.render(hbs`{{html-tag}}`); | ||
| expect(this.$()).to.have.length(1); | ||
| }); | ||
| } | ||
| ); | ||
| it('renders', function() { | ||
| // Set any properties with this.set('myProperty', 'value'); | ||
| // Handle any actions with this.on('myAction', function(val) { ... }); | ||
| // Template block usage: | ||
| // this.render(hbs` | ||
| // {{#html-tag}} | ||
| // template content | ||
| // {{/html-tag}} | ||
| // `); | ||
|
|
||
| this.render(hbs`{{html-tag}}`); | ||
| expect(this.$()).to.have.length(1); | ||
| }); | ||
| }); |
221 changes: 108 additions & 113 deletions
221
tests/integration/components/links-with-follower-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,154 +1,149 @@ | ||
| /* jshint expr:true */ | ||
| import Ember from 'ember'; | ||
| import { expect } from 'chai'; | ||
| import { describeComponent, it } from 'ember-mocha'; | ||
| import { beforeEach, describe } from 'mocha'; | ||
| import { setupComponentTest } from 'ember-mocha'; | ||
| import { beforeEach, describe, it } from 'mocha'; | ||
| import hbs from 'htmlbars-inline-precompile'; | ||
|
|
||
| const { | ||
| getOwner, | ||
| run | ||
| } = Ember; | ||
|
|
||
| describeComponent( | ||
| 'links-with-follower', | ||
| 'Integration: LinksWithFollowerComponent', | ||
| { | ||
| integration: true | ||
| }, | ||
| function() { | ||
| describe('default usage', function() { | ||
| beforeEach(function() { | ||
| this.render(hbs` | ||
| {{#links-with-follower}} | ||
| <li>One</li> | ||
| <li class="active"></li> | ||
| {{/links-with-follower}} | ||
| `); | ||
| }); | ||
| describe('LinksWithFollowerComponent', function() { | ||
| setupComponentTest('links-with-follower', { integration: true }); | ||
|
|
||
| describe('default usage', function() { | ||
| beforeEach(function() { | ||
| this.render(hbs` | ||
| {{#links-with-follower}} | ||
| <li>One</li> | ||
| <li class="active"></li> | ||
| {{/links-with-follower}} | ||
| `); | ||
| }); | ||
|
|
||
| it('adds a follower', function() { | ||
| expect(this.$('.link-follower')).to.have.length(1); | ||
| }); | ||
| it('adds a follower', function() { | ||
| expect(this.$('.link-follower')).to.have.length(1); | ||
| }); | ||
|
|
||
| it('defaults the follower tag to \'li\'', function() { | ||
| expect(this.$('li.link-follower')).to.have.length(1); | ||
| }); | ||
| it('defaults the follower tag to \'li\'', function() { | ||
| expect(this.$('li.link-follower')).to.have.length(1); | ||
| }); | ||
|
|
||
| it('renders the links from the block', function() { | ||
| expect(this.$('li')).to.have.length(3); | ||
| }); | ||
| it('renders the links from the block', function() { | ||
| expect(this.$('li')).to.have.length(3); | ||
| }); | ||
| }); | ||
|
|
||
| describe('allows custom tags for the list parent', function() { | ||
| beforeEach(function() { | ||
| this.render(hbs` | ||
| {{#links-with-follower containerTagName='ol'}} | ||
| <li>one</li> | ||
| {{/links-with-follower}} | ||
| `) | ||
| }); | ||
|
|
||
| describe('allows custom tags for the list parent', function() { | ||
| beforeEach(function() { | ||
| this.render(hbs` | ||
| {{#links-with-follower containerTagName='ol'}} | ||
| <li>one</li> | ||
| {{/links-with-follower}} | ||
| `) | ||
| }); | ||
| it('renders the proper tag', function() { | ||
| expect(this.$('ol')).to.have.length(1); | ||
| }); | ||
| }); | ||
|
|
||
| describe('allows custom tags for the children and follower', function() { | ||
| beforeEach(function() { | ||
| this.render(hbs` | ||
| {{#links-with-follower linkTagName='div'}} | ||
| <div>one</div> | ||
| {{/links-with-follower}} | ||
| `); | ||
| }); | ||
|
|
||
| it('renders the proper tag', function() { | ||
| expect(this.$('ol')).to.have.length(1); | ||
| }); | ||
| it('renders the proper tag', function() { | ||
| expect(this.$('div')).to.have.length(2); | ||
| }); | ||
| }); | ||
|
|
||
| describe('allows custom tags for the children and follower', function() { | ||
| beforeEach(function() { | ||
| describe('block children and childSelector dont match', function() { | ||
| it('throws an error', function() { | ||
| expect(() => { | ||
| this.render(hbs` | ||
| {{#links-with-follower linkTagName='div'}} | ||
| <div>one</div> | ||
| <li>one</li> | ||
| {{/links-with-follower}} | ||
| `); | ||
| }); | ||
|
|
||
| it('renders the proper tag', function() { | ||
| expect(this.$('div')).to.have.length(2); | ||
| }); | ||
| }).to.throw(/children in block must match the 'linkTagName' property/); | ||
| }); | ||
| }); | ||
|
|
||
| describe('block children and childSelector dont match', function() { | ||
| it('throws an error', function() { | ||
| expect(() => { | ||
| this.render(hbs` | ||
| {{#links-with-follower linkTagName='div'}} | ||
| <li>one</li> | ||
| {{/links-with-follower}} | ||
| `); | ||
| }).to.throw(/children in block must match the 'linkTagName' property/); | ||
| }); | ||
| }); | ||
|
|
||
| describe('clicking a link', function() { | ||
| let router; | ||
| describe('clicking a link', function() { | ||
| let router; | ||
|
|
||
| beforeEach(function() { | ||
| this.register('router:main', Ember.Object.extend(Ember.Evented)); | ||
| beforeEach(function() { | ||
| this.register('router:main', Ember.Object.extend(Ember.Evented)); | ||
|
|
||
| router = this.container.lookup('router:main'); | ||
| router = this.container.lookup('router:main'); | ||
|
|
||
| this.render(hbs` | ||
| {{#links-with-follower class="icon-nav"}} | ||
| <li class="active">One</li> | ||
| <li>Two</li> | ||
| <li class="long">Three Four Five Six</li> | ||
| {{/links-with-follower}} | ||
| `); | ||
| }); | ||
|
|
||
| it('moves follower to the active link position', function(done) { | ||
| let $follower = this.$('.link-follower'); | ||
| this.render(hbs` | ||
| {{#links-with-follower class="icon-nav"}} | ||
| <li class="active">One</li> | ||
| <li>Two</li> | ||
| <li class="long">Three Four Five Six</li> | ||
| {{/links-with-follower}} | ||
| `); | ||
| }); | ||
|
|
||
| run.next(() => { | ||
| expect($follower.position().left).to.equal(this.$('.active').position().left); | ||
| it('moves follower to the active link position', function(done) { | ||
| let $follower = this.$('.link-follower'); | ||
|
|
||
| run(() => { | ||
| this.$('.active').removeClass('active'); | ||
| this.$('.long').addClass('active'); | ||
| router.trigger('willTransition'); | ||
| }); | ||
| run.next(() => { | ||
| expect($follower.position().left).to.equal(this.$('.active').position().left); | ||
|
|
||
| expect($follower.position().left).to.equal(this.$('.active').position().left); | ||
| done(); | ||
| run(() => { | ||
| this.$('.active').removeClass('active'); | ||
| this.$('.long').addClass('active'); | ||
| router.trigger('willTransition'); | ||
| }); | ||
| }); | ||
|
|
||
| it('changes width of follower to width of active link', function(done) { | ||
| let $follower = this.$('.link-follower'); | ||
|
|
||
| run.next(() => { | ||
| expect($follower.outerWidth()).to.equal(this.$('.active').outerWidth()); | ||
| expect($follower.position().left).to.equal(this.$('.active').position().left); | ||
| done(); | ||
| }); | ||
| }); | ||
|
|
||
| run(() => { | ||
| this.$('.active').removeClass('active'); | ||
| this.$('.long').addClass('active'); | ||
| router.trigger('willTransition'); | ||
| }); | ||
| it('changes width of follower to width of active link', function(done) { | ||
| let $follower = this.$('.link-follower'); | ||
|
|
||
| expect($follower.outerWidth()).to.equal(this.$('.active').outerWidth()); | ||
| run.next(() => { | ||
| expect($follower.outerWidth()).to.equal(this.$('.active').outerWidth()); | ||
|
|
||
| done(); | ||
| run(() => { | ||
| this.$('.active').removeClass('active'); | ||
| this.$('.long').addClass('active'); | ||
| router.trigger('willTransition'); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('no active link', function() { | ||
| beforeEach(function() { | ||
| this.render(hbs` | ||
| {{#links-with-follower linkTagName='div'}} | ||
| <div>one</div> | ||
| <div>two</div> | ||
| <div>three</div> | ||
| {{/links-with-follower}} | ||
| `); | ||
| expect($follower.outerWidth()).to.equal(this.$('.active').outerWidth()); | ||
|
|
||
| getOwner(this).lookup('router:main').trigger('willTransition'); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('no active link', function() { | ||
| beforeEach(function() { | ||
| this.render(hbs` | ||
| {{#links-with-follower linkTagName='div'}} | ||
| <div>one</div> | ||
| <div>two</div> | ||
| <div>three</div> | ||
| {{/links-with-follower}} | ||
| `); | ||
|
|
||
| getOwner(this).lookup('router:main').trigger('willTransition'); | ||
| }); | ||
|
|
||
| it('hides the follower', function() { | ||
| expect(this.$('li.link-follower').is(':visible')).not.to.be.ok; | ||
| }); | ||
| it('hides the follower', function() { | ||
| expect(this.$('li.link-follower').is(':visible')).not.to.be.ok; | ||
| }); | ||
| } | ||
| ); | ||
| }); | ||
| }); |