Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use LinkTo method in storybook-root
Best JavaScript code snippet using storybook-root
routing-angle-test.js
Source:routing-angle-test.js 
1/* eslint-disable no-inner-declarations */2// ^^^ remove after unflagging EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS3import { moduleFor, ApplicationTestCase, runLoopSettled, runTask } from 'internal-test-helpers';4import { EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS } from '@ember/canary-features';5import Controller, { inject as injectController } from '@ember/controller';6import { A as emberA, RSVP } from '@ember/-internals/runtime';7import { alias } from '@ember/-internals/metal';8import { subscribe, reset } from '@ember/instrumentation';9import { Route, NoneLocation } from '@ember/-internals/routing';10import { EMBER_IMPROVED_INSTRUMENTATION } from '@ember/canary-features';11if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {12 // IE includes the host name13 function normalizeUrl(url) {14 return url.replace(/https?:\/\/[^\/]+/, '');15 }16 function shouldNotBeActive(assert, element) {17 checkActive(assert, element, false);18 }19 function shouldBeActive(assert, element) {20 checkActive(assert, element, true);21 }22 function checkActive(assert, element, active) {23 let classList = element.attr('class');24 assert.equal(classList.indexOf('active') > -1, active, `${element} active should be ${active}`);25 }26 moduleFor(27 '<LinkTo /> component (routing tests)',28 class extends ApplicationTestCase {29 constructor() {30 super();31 this.router.map(function() {32 this.route('about');33 });34 this.addTemplate(35 'index',36 `37 <h3 class="home">Home</h3>38 <LinkTo @route='about' id='about-link'>About</LinkTo>39 <LinkTo @route='index' id='self-link'>Self</LinkTo>40 `41 );42 this.addTemplate(43 'about',44 `45 <h3 class="about">About</h3>46 <LinkTo @route='index' id='home-link'>Home</LinkTo>47 <LinkTo @route='about' id='self-link'>Self</LinkTo>48 `49 );50 }51 ['@test The <LinkTo /> component navigates into the named route'](assert) {52 return this.visit('/')53 .then(() => {54 assert.equal(this.$('h3.home').length, 1, 'The home template was rendered');55 assert.equal(56 this.$('#self-link.active').length,57 1,58 'The self-link was rendered with active class'59 );60 assert.equal(61 this.$('#about-link:not(.active)').length,62 1,63 'The other link was rendered without active class'64 );65 return this.click('#about-link');66 })67 .then(() => {68 assert.equal(this.$('h3.about').length, 1, 'The about template was rendered');69 assert.equal(70 this.$('#self-link.active').length,71 1,72 'The self-link was rendered with active class'73 );74 assert.equal(75 this.$('#home-link:not(.active)').length,76 1,77 'The other link was rendered without active class'78 );79 });80 }81 [`@test the <LinkTo /> component doesn't add an href when the tagName isn't 'a'`](assert) {82 this.addTemplate(83 'index',84 `<LinkTo @route='about' id='about-link' @tagName='div'>About</LinkTo>`85 );86 return this.visit('/').then(() => {87 assert.equal(this.$('#about-link').attr('href'), undefined, 'there is no href attribute');88 });89 }90 [`@test the <LinkTo /> component applies a 'disabled' class when disabled`](assert) {91 this.addTemplate(92 'index',93 `94 <LinkTo id="about-link-static" @route="about" @disabledWhen="shouldDisable">About</LinkTo>95 <LinkTo id="about-link-dynamic" @route="about" @disabledWhen={{dynamicDisabledWhen}}>About</LinkTo>96 `97 );98 this.add(99 'controller:index',100 Controller.extend({101 shouldDisable: true,102 dynamicDisabledWhen: 'shouldDisable',103 })104 );105 return this.visit('/').then(() => {106 assert.equal(107 this.$('#about-link-static.disabled').length,108 1,109 'The static link is disabled when its disabledWhen is true'110 );111 assert.equal(112 this.$('#about-link-dynamic.disabled').length,113 1,114 'The dynamic link is disabled when its disabledWhen is true'115 );116 let controller = this.applicationInstance.lookup('controller:index');117 runTask(() => controller.set('dynamicDisabledWhen', false));118 assert.equal(119 this.$('#about-link-dynamic.disabled').length,120 0,121 'The dynamic link is re-enabled when its disabledWhen becomes false'122 );123 });124 }125 [`@test the <LinkTo /> component doesn't apply a 'disabled' class if disabledWhen is not provided`](126 assert127 ) {128 this.addTemplate('index', `<LinkTo id="about-link" @route="about">About</LinkTo>`);129 return this.visit('/').then(() => {130 assert.ok(131 !this.$('#about-link').hasClass('disabled'),132 'The link is not disabled if disabledWhen not provided'133 );134 });135 }136 [`@test the <LinkTo /> component supports a custom disabledClass`](assert) {137 this.addTemplate(138 'index',139 `<LinkTo id="about-link" @route="about" @disabledWhen={{true}} @disabledClass="do-not-want">About</LinkTo>`140 );141 return this.visit('/').then(() => {142 assert.equal(143 this.$('#about-link.do-not-want').length,144 1,145 'The link can apply a custom disabled class'146 );147 });148 }149 [`@test the <LinkTo /> component supports a custom disabledClass set via bound param`](150 assert151 ) {152 this.addTemplate(153 'index',154 `<LinkTo id="about-link" @route="about" @disabledWhen={{true}} @disabledClass={{disabledClass}}>About</LinkTo>`155 );156 this.add(157 'controller:index',158 Controller.extend({159 disabledClass: 'do-not-want',160 })161 );162 return this.visit('/').then(() => {163 assert.equal(164 this.$('#about-link.do-not-want').length,165 1,166 'The link can apply a custom disabled class via bound param'167 );168 });169 }170 [`@test the <LinkTo /> component does not respond to clicks when disabledWhen`](assert) {171 this.addTemplate(172 'index',173 `<LinkTo id="about-link" @route="about" @disabledWhen={{true}}>About</LinkTo>`174 );175 return this.visit('/')176 .then(() => {177 return this.click('#about-link');178 })179 .then(() => {180 assert.equal(this.$('h3.about').length, 0, 'Transitioning did not occur');181 });182 }183 [`@test the <LinkTo /> component does not respond to clicks when disabled`](assert) {184 this.addTemplate(185 'index',186 `<LinkTo id="about-link" @route="about" @disabled={{true}}>About</LinkTo>`187 );188 return this.visit('/')189 .then(() => {190 return this.click('#about-link');191 })192 .then(() => {193 assert.equal(this.$('h3.about').length, 0, 'Transitioning did not occur');194 });195 }196 [`@test the <LinkTo /> component responds to clicks according to its disabledWhen bound param`](197 assert198 ) {199 this.addTemplate(200 'index',201 `<LinkTo id="about-link" @route="about" @disabledWhen={{disabledWhen}}>About</LinkTo>`202 );203 this.add(204 'controller:index',205 Controller.extend({206 disabledWhen: true,207 })208 );209 return this.visit('/')210 .then(() => {211 return this.click('#about-link');212 })213 .then(() => {214 assert.equal(this.$('h3.about').length, 0, 'Transitioning did not occur');215 let controller = this.applicationInstance.lookup('controller:index');216 controller.set('disabledWhen', false);217 return runLoopSettled();218 })219 .then(() => {220 return this.click('#about-link');221 })222 .then(() => {223 assert.equal(224 this.$('h3.about').length,225 1,226 'Transitioning did occur when disabledWhen became false'227 );228 });229 }230 [`@test The <LinkTo /> component supports a custom activeClass`](assert) {231 this.addTemplate(232 'index',233 `234 <h3 class="home">Home</h3>235 <LinkTo id='about-link' @route='about'>About</LinkTo>236 <LinkTo id='self-link' @route='index' @activeClass='zomg-active'>Self</LinkTo>237 `238 );239 return this.visit('/').then(() => {240 assert.equal(this.$('h3.home').length, 1, 'The home template was rendered');241 assert.equal(242 this.$('#self-link.zomg-active').length,243 1,244 'The self-link was rendered with active class'245 );246 assert.equal(247 this.$('#about-link:not(.active)').length,248 1,249 'The other link was rendered without active class'250 );251 });252 }253 [`@test The <LinkTo /> component supports a custom activeClass from a bound param`](assert) {254 this.addTemplate(255 'index',256 `257 <h3 class="home">Home</h3>258 <LinkTo id='about-link' @route='about'>About</LinkTo>259 <LinkTo id='self-link' @route='index' @activeClass={{activeClass}}>Self</LinkTo>260 `261 );262 this.add(263 'controller:index',264 Controller.extend({265 activeClass: 'zomg-active',266 })267 );268 return this.visit('/').then(() => {269 assert.equal(this.$('h3.home').length, 1, 'The home template was rendered');270 assert.equal(271 this.$('#self-link.zomg-active').length,272 1,273 'The self-link was rendered with active class'274 );275 assert.equal(276 this.$('#about-link:not(.active)').length,277 1,278 'The other link was rendered without active class'279 );280 });281 }282 // See https://github.com/emberjs/ember.js/issues/17771283 [`@skip The <LinkTo /> component supports 'classNameBindings' with custom values [GH #11699]`](284 assert285 ) {286 this.addTemplate(287 'index',288 `289 <h3 class="home">Home</h3>290 <LinkTo id='about-link' @route='about' @classNameBindings='foo:foo-is-true:foo-is-false'>About</LinkTo>291 `292 );293 this.add(294 'controller:index',295 Controller.extend({296 foo: false,297 })298 );299 return this.visit('/').then(() => {300 assert.equal(301 this.$('#about-link.foo-is-false').length,302 1,303 'The about-link was rendered with the falsy class'304 );305 let controller = this.applicationInstance.lookup('controller:index');306 runTask(() => controller.set('foo', true));307 assert.equal(308 this.$('#about-link.foo-is-true').length,309 1,310 'The about-link was rendered with the truthy class after toggling the property'311 );312 });313 }314 }315 );316 moduleFor(317 '<LinkTo /> component (routing tests - location hooks)',318 class extends ApplicationTestCase {319 constructor() {320 super();321 this.updateCount = 0;322 this.replaceCount = 0;323 let testContext = this;324 this.add(325 'location:none',326 NoneLocation.extend({327 setURL() {328 testContext.updateCount++;329 return this._super(...arguments);330 },331 replaceURL() {332 testContext.replaceCount++;333 return this._super(...arguments);334 },335 })336 );337 this.router.map(function() {338 this.route('about');339 });340 this.addTemplate(341 'index',342 `343 <h3 class="home">Home</h3>344 <LinkTo id='about-link' @route='about'>About</LinkTo>345 <LinkTo id='self-link' @route='index'>Self</LinkTo>346 `347 );348 this.addTemplate(349 'about',350 `351 <h3 class="about">About</h3>352 <LinkTo id='home-link' @route='index'>Home</LinkTo>353 <LinkTo id='self-link' @route='about'>Self</LinkTo>354 `355 );356 }357 visit() {358 return super.visit(...arguments).then(() => {359 this.updateCountAfterVisit = this.updateCount;360 this.replaceCountAfterVisit = this.replaceCount;361 });362 }363 ['@test The <LinkTo /> component supports URL replacement'](assert) {364 this.addTemplate(365 'index',366 `367 <h3 class="home">Home</h3>368 <LinkTo id='about-link' @route='about' @replace={{true}}>About</LinkTo>369 `370 );371 return this.visit('/')372 .then(() => {373 return this.click('#about-link');374 })375 .then(() => {376 assert.equal(377 this.updateCount,378 this.updateCountAfterVisit,379 'setURL should not be called'380 );381 assert.equal(382 this.replaceCount,383 this.replaceCountAfterVisit + 1,384 'replaceURL should be called once'385 );386 });387 }388 ['@test The <LinkTo /> component supports URL replacement via replace=boundTruthyThing'](389 assert390 ) {391 this.addTemplate(392 'index',393 `394 <h3 class="home">Home</h3>395 <LinkTo id='about-link' @route='about' @replace={{boundTruthyThing}}>About</LinkTo>396 `397 );398 this.add(399 'controller:index',400 Controller.extend({401 boundTruthyThing: true,402 })403 );404 return this.visit('/')405 .then(() => {406 return this.click('#about-link');407 })408 .then(() => {409 assert.equal(410 this.updateCount,411 this.updateCountAfterVisit,412 'setURL should not be called'413 );414 assert.equal(415 this.replaceCount,416 this.replaceCountAfterVisit + 1,417 'replaceURL should be called once'418 );419 });420 }421 ['@test The <LinkTo /> component supports setting replace=boundFalseyThing'](assert) {422 this.addTemplate(423 'index',424 `425 <h3 class="home">Home</h3>426 <LinkTo id='about-link' @route='about' replace={{boundFalseyThing}}>About</LinkTo>427 `428 );429 this.add(430 'controller:index',431 Controller.extend({432 boundFalseyThing: false,433 })434 );435 return this.visit('/')436 .then(() => {437 return this.click('#about-link');438 })439 .then(() => {440 assert.equal(441 this.updateCount,442 this.updateCountAfterVisit + 1,443 'setURL should be called'444 );445 assert.equal(446 this.replaceCount,447 this.replaceCountAfterVisit,448 'replaceURL should not be called'449 );450 });451 }452 }453 );454 if (EMBER_IMPROVED_INSTRUMENTATION) {455 moduleFor(456 'The <LinkTo /> component with EMBER_IMPROVED_INSTRUMENTATION',457 class extends ApplicationTestCase {458 constructor() {459 super();460 this.router.map(function() {461 this.route('about');462 });463 this.addTemplate(464 'index',465 `466 <h3 class="home">Home</h3>467 <LinkTo id='about-link' @route='about'>About</LinkTo>468 <LinkTo id='self-link' @route='index'>Self</LinkTo>469 `470 );471 this.addTemplate(472 'about',473 `474 <h3 class="about">About</h3>475 <LinkTo id='home-link' @route='index'>Home</LinkTo>476 <LinkTo id='self-link' @route='about'>Self</LinkTo>477 `478 );479 }480 beforeEach() {481 return this.visit('/');482 }483 afterEach() {484 reset();485 return super.afterEach();486 }487 ['@test The <LinkTo /> component fires an interaction event'](assert) {488 assert.expect(2);489 subscribe('interaction.link-to', {490 before() {491 assert.ok(true, 'instrumentation subscriber was called');492 },493 after() {494 assert.ok(true, 'instrumentation subscriber was called');495 },496 });497 return this.click('#about-link');498 }499 ['@test The <LinkTo /> component interaction event includes the route name'](assert) {500 assert.expect(2);501 subscribe('interaction.link-to', {502 before(name, timestamp, { routeName }) {503 assert.equal(routeName, 'about', 'instrumentation subscriber was passed route name');504 },505 after(name, timestamp, { routeName }) {506 assert.equal(routeName, 'about', 'instrumentation subscriber was passed route name');507 },508 });509 return this.click('#about-link');510 }511 ['@test The <LinkTo /> component interaction event includes the transition in the after hook'](512 assert513 ) {514 assert.expect(1);515 subscribe('interaction.link-to', {516 before() {},517 after(name, timestamp, { transition }) {518 assert.equal(519 transition.targetName,520 'about',521 'instrumentation subscriber was passed route name'522 );523 },524 });525 return this.click('#about-link');526 }527 }528 );529 }530 moduleFor(531 'The <LinkTo /> component - nested routes and link-to arguments',532 class extends ApplicationTestCase {533 ['@test The <LinkTo /> component supports leaving off .index for nested routes'](assert) {534 this.router.map(function() {535 this.route('about', function() {536 this.route('item');537 });538 });539 this.addTemplate('about', `<h1>About</h1>{{outlet}}`);540 this.addTemplate('about.index', `<div id='index'>Index</div>`);541 this.addTemplate(542 'about.item',543 `<div id='item'><LinkTo @route='about'>About</LinkTo></div>`544 );545 return this.visit('/about/item').then(() => {546 assert.equal(normalizeUrl(this.$('#item a').attr('href')), '/about');547 });548 }549 [`@test The <LinkTo /> component supports custom, nested, current-when`](assert) {550 this.router.map(function() {551 this.route('index', { path: '/' }, function() {552 this.route('about');553 });554 this.route('item');555 });556 this.addTemplate('index', `<h3 class="home">Home</h3>{{outlet}}`);557 this.addTemplate(558 'index.about',559 `<LinkTo id='other-link' @route='item' @current-when='index'>ITEM</LinkTo>`560 );561 return this.visit('/about').then(() => {562 assert.equal(563 this.$('#other-link.active').length,564 1,565 'The link is active since current-when is a parent route'566 );567 });568 }569 [`@test The <LinkTo /> component does not disregard current-when when it is given explicitly for a route`](570 assert571 ) {572 this.router.map(function() {573 this.route('index', { path: '/' }, function() {574 this.route('about');575 });576 this.route('items', function() {577 this.route('item');578 });579 });580 this.addTemplate('index', `<h3 class="home">Home</h3>{{outlet}}`);581 this.addTemplate(582 'index.about',583 `<LinkTo id='other-link' @route='items' @current-when='index'>ITEM</LinkTo>`584 );585 return this.visit('/about').then(() => {586 assert.equal(587 this.$('#other-link.active').length,588 1,589 'The link is active when current-when is given for explicitly for a route'590 );591 });592 }593 ['@test The <LinkTo /> component does not disregard current-when when it is set via a bound param'](594 assert595 ) {596 this.router.map(function() {597 this.route('index', { path: '/' }, function() {598 this.route('about');599 });600 this.route('items', function() {601 this.route('item');602 });603 });604 this.add(605 'controller:index.about',606 Controller.extend({607 currentWhen: 'index',608 })609 );610 this.addTemplate('index', `<h3 class="home">Home</h3>{{outlet}}`);611 this.addTemplate(612 'index.about',613 `<LinkTo id='other-link' @route='items' @current-when={{currentWhen}}>ITEM</LinkTo>`614 );615 return this.visit('/about').then(() => {616 assert.equal(617 this.$('#other-link.active').length,618 1,619 'The link is active when current-when is given for explicitly for a route'620 );621 });622 }623 ['@test The <LinkTo /> component supports multiple current-when routes'](assert) {624 this.router.map(function() {625 this.route('index', { path: '/' }, function() {626 this.route('about');627 });628 this.route('item');629 this.route('foo');630 });631 this.addTemplate('index', `<h3 class="home">Home</h3>{{outlet}}`);632 this.addTemplate(633 'index.about',634 `<LinkTo id='link1' @route='item' @current-when='item index'>ITEM</LinkTo>`635 );636 this.addTemplate(637 'item',638 `<LinkTo id='link2' @route='item' @current-when='item index'>ITEM</LinkTo>`639 );640 this.addTemplate(641 'foo',642 `<LinkTo id='link3' @route='item' @current-when='item index'>ITEM</LinkTo>`643 );644 return this.visit('/about')645 .then(() => {646 assert.equal(647 this.$('#link1.active').length,648 1,649 'The link is active since current-when contains the parent route'650 );651 return this.visit('/item');652 })653 .then(() => {654 assert.equal(655 this.$('#link2.active').length,656 1,657 'The link is active since you are on the active route'658 );659 return this.visit('/foo');660 })661 .then(() => {662 assert.equal(663 this.$('#link3.active').length,664 0,665 'The link is not active since current-when does not contain the active route'666 );667 });668 }669 ['@test The <LinkTo /> component supports boolean values for current-when'](assert) {670 this.router.map(function() {671 this.route('index', { path: '/' }, function() {672 this.route('about');673 });674 this.route('item');675 });676 this.addTemplate(677 'index.about',678 `679 <LinkTo id='index-link' @route='index' @current-when={{isCurrent}}>ITEM</LinkTo>680 <LinkTo id='about-link' @route='item' @current-when={{true}}>ITEM</LinkTo>681 `682 );683 this.add('controller:index.about', Controller.extend({ isCurrent: false }));684 return this.visit('/about').then(() => {685 assert.ok(686 this.$('#about-link').hasClass('active'),687 'The link is active since current-when is true'688 );689 assert.notOk(690 this.$('#index-link').hasClass('active'),691 'The link is not active since current-when is false'692 );693 let controller = this.applicationInstance.lookup('controller:index.about');694 runTask(() => controller.set('isCurrent', true));695 assert.ok(696 this.$('#index-link').hasClass('active'),697 'The link is active since current-when is true'698 );699 });700 }701 ['@test The <LinkTo /> component defaults to bubbling'](assert) {702 this.addTemplate(703 'about',704 `705 <div {{action 'hide'}}>706 <LinkTo id='about-contact' @route='about.contact'>About</LinkTo>707 </div>708 {{outlet}}709 `710 );711 this.addTemplate('about.contact', `<h1 id='contact'>Contact</h1>`);712 this.router.map(function() {713 this.route('about', function() {714 this.route('contact');715 });716 });717 let hidden = 0;718 this.add(719 'route:about',720 Route.extend({721 actions: {722 hide() {723 hidden++;724 },725 },726 })727 );728 return this.visit('/about')729 .then(() => {730 return this.click('#about-contact');731 })732 .then(() => {733 assert.equal(this.$('#contact').text(), 'Contact', 'precond - the link worked');734 assert.equal(hidden, 1, 'The link bubbles');735 });736 }737 [`@test The <LinkTo /> component supports bubbles=false`](assert) {738 this.addTemplate(739 'about',740 `741 <div {{action 'hide'}}>742 <LinkTo id='about-contact' @route='about.contact' @bubbles={{false}}>743 About744 </LinkTo>745 </div>746 {{outlet}}747 `748 );749 this.addTemplate('about.contact', `<h1 id='contact'>Contact</h1>`);750 this.router.map(function() {751 this.route('about', function() {752 this.route('contact');753 });754 });755 let hidden = 0;756 this.add(757 'route:about',758 Route.extend({759 actions: {760 hide() {761 hidden++;762 },763 },764 })765 );766 return this.visit('/about')767 .then(() => {768 return this.click('#about-contact');769 })770 .then(() => {771 assert.equal(this.$('#contact').text(), 'Contact', 'precond - the link worked');772 assert.equal(hidden, 0, "The link didn't bubble");773 });774 }775 [`@test The <LinkTo /> component supports bubbles=boundFalseyThing`](assert) {776 this.addTemplate(777 'about',778 `779 <div {{action 'hide'}}>780 <LinkTo id='about-contact' @route='about.contact' @bubbles={{boundFalseyThing}}>781 About782 </LinkTo>783 </div>784 {{outlet}}785 `786 );787 this.addTemplate('about.contact', `<h1 id='contact'>Contact</h1>`);788 this.add(789 'controller:about',790 Controller.extend({791 boundFalseyThing: false,792 })793 );794 this.router.map(function() {795 this.route('about', function() {796 this.route('contact');797 });798 });799 let hidden = 0;800 this.add(801 'route:about',802 Route.extend({803 actions: {804 hide() {805 hidden++;806 },807 },808 })809 );810 return this.visit('/about')811 .then(() => {812 return this.click('#about-contact');813 })814 .then(() => {815 assert.equal(this.$('#contact').text(), 'Contact', 'precond - the link worked');816 assert.equal(hidden, 0, "The link didn't bubble");817 });818 }819 [`@test The <LinkTo /> component moves into the named route with context`](assert) {820 this.router.map(function() {821 this.route('about');822 this.route('item', { path: '/item/:id' });823 });824 this.addTemplate(825 'about',826 `827 <h3 class="list">List</h3>828 <ul>829 {{#each model as |person|}}830 <li>831 <LinkTo id={{person.id}} @route='item' @model={{person}}>832 {{person.name}}833 </LinkTo>834 </li>835 {{/each}}836 </ul>837 <LinkTo id='home-link' @route='index'>Home</LinkTo>838 `839 );840 this.addTemplate(841 'item',842 `843 <h3 class="item">Item</h3>844 <p>{{model.name}}</p>845 <LinkTo id='home-link' @route='index'>Home</LinkTo>846 `847 );848 this.addTemplate(849 'index',850 `851 <h3 class="home">Home</h3>852 <LinkTo id='about-link' @route='about'>About</LinkTo>853 `854 );855 this.add(856 'route:about',857 Route.extend({858 model() {859 return [860 { id: 'yehuda', name: 'Yehuda Katz' },861 { id: 'tom', name: 'Tom Dale' },862 { id: 'erik', name: 'Erik Brynroflsson' },863 ];864 },865 })866 );867 return this.visit('/about')868 .then(() => {869 assert.equal(this.$('h3.list').length, 1, 'The home template was rendered');870 assert.equal(871 normalizeUrl(this.$('#home-link').attr('href')),872 '/',873 'The home link points back at /'874 );875 return this.click('#yehuda');876 })877 .then(() => {878 assert.equal(this.$('h3.item').length, 1, 'The item template was rendered');879 assert.equal(this.$('p').text(), 'Yehuda Katz', 'The name is correct');880 return this.click('#home-link');881 })882 .then(() => {883 return this.click('#about-link');884 })885 .then(() => {886 assert.equal(normalizeUrl(this.$('li a#yehuda').attr('href')), '/item/yehuda');887 assert.equal(normalizeUrl(this.$('li a#tom').attr('href')), '/item/tom');888 assert.equal(normalizeUrl(this.$('li a#erik').attr('href')), '/item/erik');889 return this.click('#erik');890 })891 .then(() => {892 assert.equal(this.$('h3.item').length, 1, 'The item template was rendered');893 assert.equal(this.$('p').text(), 'Erik Brynroflsson', 'The name is correct');894 });895 }896 [`@test The <LinkTo /> component binds some anchor html tag common attributes`](assert) {897 this.addTemplate(898 'index',899 `900 <h3 class="home">Home</h3>901 <LinkTo id='self-link' @route='index' title='title-attr' rel='rel-attr' tabindex='-1'>902 Self903 </LinkTo>904 `905 );906 return this.visit('/').then(() => {907 let link = this.$('#self-link');908 assert.equal(link.attr('title'), 'title-attr', 'The self-link contains title attribute');909 assert.equal(link.attr('rel'), 'rel-attr', 'The self-link contains rel attribute');910 assert.equal(link.attr('tabindex'), '-1', 'The self-link contains tabindex attribute');911 });912 }913 [`@test The <LinkTo /> component supports 'target' attribute`](assert) {914 this.addTemplate(915 'index',916 `917 <h3 class="home">Home</h3>918 <LinkTo id='self-link' @route='index' target='_blank'>Self</LinkTo>919 `920 );921 return this.visit('/').then(() => {922 let link = this.$('#self-link');923 assert.equal(link.attr('target'), '_blank', 'The self-link contains `target` attribute');924 });925 }926 [`@test The <LinkTo /> component supports 'target' attribute specified as a bound param`](927 assert928 ) {929 this.addTemplate(930 'index',931 `932 <h3 class="home">Home</h3>933 <LinkTo id='self-link' @route='index' target={{boundLinkTarget}}>Self</LinkTo>934 `935 );936 this.add(937 'controller:index',938 Controller.extend({939 boundLinkTarget: '_blank',940 })941 );942 return this.visit('/').then(() => {943 let link = this.$('#self-link');944 assert.equal(link.attr('target'), '_blank', 'The self-link contains `target` attribute');945 });946 }947 [`@test the <LinkTo /> component calls preventDefault`](assert) {948 this.router.map(function() {949 this.route('about');950 });951 this.addTemplate('index', `<LinkTo @route='about' id='about-link'>About</LinkTo>`);952 return this.visit('/').then(() => {953 assertNav({ prevented: true }, () => this.$('#about-link').click(), assert);954 });955 }956 [`@test the <LinkTo /> component does not call preventDefault if '@preventDefault={{false}}' is passed as an option`](957 assert958 ) {959 this.router.map(function() {960 this.route('about');961 });962 this.addTemplate(963 'index',964 `<LinkTo id='about-link' @route='about' @preventDefault={{false}}>About</LinkTo>`965 );966 return this.visit('/').then(() => {967 assertNav({ prevented: false }, () => this.$('#about-link').trigger('click'), assert);968 });969 }970 [`@test the <LinkTo /> component does not call preventDefault if '@preventDefault={{boundFalseyThing}}' is passed as an option`](971 assert972 ) {973 this.router.map(function() {974 this.route('about');975 });976 this.addTemplate(977 'index',978 `<LinkTo id='about-link' @route='about' @preventDefault={{boundFalseyThing}}>About</LinkTo>`979 );980 this.add(981 'controller:index',982 Controller.extend({983 boundFalseyThing: false,984 })985 );986 return this.visit('/').then(() => {987 assertNav({ prevented: false }, () => this.$('#about-link').trigger('click'), assert);988 });989 }990 [`@test The <LinkTo /> component does not call preventDefault if 'target' attribute is provided`](991 assert992 ) {993 this.addTemplate(994 'index',995 `996 <h3 class="home">Home</h3>997 <LinkTo id='self-link' @route='index' target='_blank'>Self</LinkTo>998 `999 );1000 return this.visit('/').then(() => {1001 assertNav({ prevented: false }, () => this.$('#self-link').click(), assert);1002 });1003 }1004 [`@test The <LinkTo /> component should preventDefault when 'target = _self'`](assert) {1005 this.addTemplate(1006 'index',1007 `1008 <h3 class="home">Home</h3>1009 <LinkTo id='self-link' @route='index' target='_self'>Self</LinkTo>1010 `1011 );1012 return this.visit('/').then(() => {1013 assertNav({ prevented: true }, () => this.$('#self-link').click(), assert);1014 });1015 }1016 [`@test The <LinkTo /> component should not transition if target is not equal to _self or empty`](1017 assert1018 ) {1019 this.addTemplate(1020 'index',1021 `1022 <LinkTo id='about-link' @route='about' @replace={{true}} target='_blank'>1023 About1024 </LinkTo>1025 `1026 );1027 this.router.map(function() {1028 this.route('about');1029 });1030 return this.visit('/')1031 .then(() => this.click('#about-link'))1032 .then(() => {1033 expectDeprecation(() => {1034 let currentRouteName = this.applicationInstance1035 .lookup('controller:application')1036 .get('currentRouteName');1037 assert.notEqual(1038 currentRouteName,1039 'about',1040 'link-to should not transition if target is not equal to _self or empty'1041 );1042 }, 'Accessing `currentRouteName` on `controller:application` is deprecated, use the `currentRouteName` property on `service:router` instead.');1043 });1044 }1045 [`@test The <LinkTo /> component accepts string/numeric arguments`](assert) {1046 this.router.map(function() {1047 this.route('filter', { path: '/filters/:filter' });1048 this.route('post', { path: '/post/:post_id' });1049 this.route('repo', { path: '/repo/:owner/:name' });1050 });1051 this.add(1052 'controller:filter',1053 Controller.extend({1054 filter: 'unpopular',1055 repo: { owner: 'ember', name: 'ember.js' },1056 post_id: 123,1057 })1058 );1059 this.addTemplate(1060 'filter',1061 `1062 <p>{{filter}}</p>1063 <LinkTo id="link" @route="filter" @model="unpopular">Unpopular</LinkTo>1064 <LinkTo id="path-link" @route="filter" @model={{filter}}>Unpopular</LinkTo>1065 <LinkTo id="post-path-link" @route="post" @model={{post_id}}>Post</LinkTo>1066 <LinkTo id="post-number-link" @route="post" @model={{123}}>Post</LinkTo>1067 <LinkTo id="repo-object-link" @route="repo" @model={{repo}}>Repo</LinkTo>1068 `1069 );1070 return this.visit('/filters/popular').then(() => {1071 assert.equal(normalizeUrl(this.$('#link').attr('href')), '/filters/unpopular');1072 assert.equal(normalizeUrl(this.$('#path-link').attr('href')), '/filters/unpopular');1073 assert.equal(normalizeUrl(this.$('#post-path-link').attr('href')), '/post/123');1074 assert.equal(normalizeUrl(this.$('#post-number-link').attr('href')), '/post/123');1075 assert.equal(1076 normalizeUrl(this.$('#repo-object-link').attr('href')),1077 '/repo/ember/ember.js'1078 );1079 });1080 }1081 [`@test Issue 4201 - Shorthand for route.index shouldn't throw errors about context arguments`](1082 assert1083 ) {1084 assert.expect(2);1085 this.router.map(function() {1086 this.route('lobby', function() {1087 this.route('index', { path: ':lobby_id' });1088 this.route('list');1089 });1090 });1091 this.add(1092 'route:lobby.index',1093 Route.extend({1094 model(params) {1095 assert.equal(params.lobby_id, 'foobar');1096 return params.lobby_id;1097 },1098 })1099 );1100 this.addTemplate(1101 'lobby.index',1102 `<LinkTo id='lobby-link' @route='lobby' @model='foobar'>Lobby</LinkTo>`1103 );1104 this.addTemplate(1105 'lobby.list',1106 `<LinkTo id='lobby-link' @route='lobby' @model='foobar'>Lobby</LinkTo>`1107 );1108 return this.visit('/lobby/list')1109 .then(() => this.click('#lobby-link'))1110 .then(() => shouldBeActive(assert, this.$('#lobby-link')));1111 }1112 [`@test Quoteless route param performs property lookup`](assert) {1113 this.router.map(function() {1114 this.route('about');1115 });1116 this.addTemplate(1117 'index',1118 `1119 <LinkTo id='string-link' @route='index'>string</LinkTo>1120 <LinkTo id='path-link' @route={{foo}}>path</LinkTo>1121 `1122 );1123 this.add(1124 'controller:index',1125 Controller.extend({1126 foo: 'index',1127 })1128 );1129 let assertEquality = href => {1130 assert.equal(normalizeUrl(this.$('#string-link').attr('href')), '/');1131 assert.equal(normalizeUrl(this.$('#path-link').attr('href')), href);1132 };1133 return this.visit('/').then(() => {1134 assertEquality('/');1135 let controller = this.applicationInstance.lookup('controller:index');1136 runTask(() => controller.set('foo', 'about'));1137 assertEquality('/about');1138 });1139 }1140 [`@test The <LinkTo /> component refreshes href element when one of params changes`](assert) {1141 this.router.map(function() {1142 this.route('post', { path: '/posts/:post_id' });1143 });1144 let post = { id: '1' };1145 let secondPost = { id: '2' };1146 this.addTemplate('index', `<LinkTo id="post" @route="post" @model={{post}}>post</LinkTo>`);1147 this.add('controller:index', Controller.extend());1148 return this.visit('/').then(() => {1149 let indexController = this.applicationInstance.lookup('controller:index');1150 runTask(() => indexController.set('post', post));1151 assert.equal(1152 normalizeUrl(this.$('#post').attr('href')),1153 '/posts/1',1154 'precond - Link has rendered href attr properly'1155 );1156 runTask(() => indexController.set('post', secondPost));1157 assert.equal(1158 this.$('#post').attr('href'),1159 '/posts/2',1160 'href attr was updated after one of the params had been changed'1161 );1162 runTask(() => indexController.set('post', null));1163 assert.equal(1164 this.$('#post').attr('href'),1165 '#',1166 'href attr becomes # when one of the arguments in nullified'1167 );1168 });1169 }1170 [`@test The <LinkTo /> component is active when a route is active`](assert) {1171 this.router.map(function() {1172 this.route('about', function() {1173 this.route('item');1174 });1175 });1176 this.addTemplate(1177 'about',1178 `1179 <div id='about'>1180 <LinkTo id='about-link' @route='about'>About</LinkTo>1181 <LinkTo id='item-link' @route='about.item'>Item</LinkTo>1182 {{outlet}}1183 </div>1184 `1185 );1186 return this.visit('/about')1187 .then(() => {1188 assert.equal(this.$('#about-link.active').length, 1, 'The about route link is active');1189 assert.equal(this.$('#item-link.active').length, 0, 'The item route link is inactive');1190 return this.visit('/about/item');1191 })1192 .then(() => {1193 assert.equal(this.$('#about-link.active').length, 1, 'The about route link is active');1194 assert.equal(this.$('#item-link.active').length, 1, 'The item route link is active');1195 });1196 }1197 [`@test The <LinkTo /> component works in an #each'd array of string route names`](assert) {1198 this.router.map(function() {1199 this.route('foo');1200 this.route('bar');1201 this.route('rar');1202 });1203 this.add(1204 'controller:index',1205 Controller.extend({1206 routeNames: emberA(['foo', 'bar', 'rar']),1207 route1: 'bar',1208 route2: 'foo',1209 })1210 );1211 this.addTemplate(1212 'index',1213 `1214 {{#each routeNames as |routeName|}}1215 <LinkTo @route={{routeName}}>{{routeName}}</LinkTo>1216 {{/each}}1217 {{#each routeNames as |r|}}1218 <LinkTo @route={{r}}>{{r}}</LinkTo>1219 {{/each}}1220 <LinkTo @route={{route1}}>a</LinkTo>1221 <LinkTo @route={{route2}}>b</LinkTo>1222 `1223 );1224 let linksEqual = (links, expected) => {1225 assert.equal(links.length, expected.length, 'Has correct number of links');1226 let idx;1227 for (idx = 0; idx < links.length; idx++) {1228 let href = this.$(links[idx]).attr('href');1229 // Old IE includes the whole hostname as well1230 assert.equal(1231 href.slice(-expected[idx].length),1232 expected[idx],1233 `Expected link to be '${expected[idx]}', but was '${href}'`1234 );1235 }1236 };1237 return this.visit('/').then(() => {1238 linksEqual(this.$('a'), ['/foo', '/bar', '/rar', '/foo', '/bar', '/rar', '/bar', '/foo']);1239 let indexController = this.applicationInstance.lookup('controller:index');1240 runTask(() => indexController.set('route1', 'rar'));1241 linksEqual(this.$('a'), ['/foo', '/bar', '/rar', '/foo', '/bar', '/rar', '/rar', '/foo']);1242 runTask(() => indexController.routeNames.shiftObject());1243 linksEqual(this.$('a'), ['/bar', '/rar', '/bar', '/rar', '/rar', '/foo']);1244 });1245 }1246 async [`@test the <LinkTo /> component throws a useful error if you invoke it wrong`](1247 assert1248 ) {1249 assert.expect(1);1250 this.router.map(function() {1251 this.route('post', { path: 'post/:post_id' });1252 });1253 this.addTemplate('application', `<LinkTo @route='post'>Post</LinkTo>`);1254 await assert.throws(1255 () => runTask(() => this.visit('/')),1256 /(You attempted to generate a link for the "post" route, but did not pass the models required for generating its dynamic segments.|You must provide param `post_id` to `generate`)/1257 );1258 }1259 [`@test the <LinkTo /> component does not throw an error if its route has exited`](assert) {1260 assert.expect(0);1261 this.router.map(function() {1262 this.route('post', { path: 'post/:post_id' });1263 });1264 this.addTemplate(1265 'application',1266 `1267 <LinkTo id='home-link' @route='index'>Home</LinkTo>1268 <LinkTo id='default-post-link' @route='post' @model={{defaultPost}}>Default Post</LinkTo>1269 {{#if currentPost}}1270 <LinkTo id='current-post-link' @route='post' @model={{currentPost}}>Current Post</LinkTo>1271 {{/if}}1272 `1273 );1274 this.add(1275 'controller:application',1276 Controller.extend({1277 defaultPost: { id: 1 },1278 postController: injectController('post'),1279 currentPost: alias('postController.model'),1280 })1281 );1282 this.add('controller:post', Controller.extend());1283 this.add(1284 'route:post',1285 Route.extend({1286 model() {1287 return { id: 2 };1288 },1289 serialize(model) {1290 return { post_id: model.id };1291 },1292 })1293 );1294 return this.visit('/')1295 .then(() => this.click('#default-post-link'))1296 .then(() => this.click('#home-link'))1297 .then(() => this.click('#current-post-link'))1298 .then(() => this.click('#home-link'));1299 }1300 [`@test the <LinkTo /> component's active property respects changing parent route context`](1301 assert1302 ) {1303 this.router.map(function() {1304 this.route('things', { path: '/things/:name' }, function() {1305 this.route('other');1306 });1307 });1308 this.addTemplate(1309 'application',1310 `1311 <LinkTo id='omg-link' @route='things' @model='omg'>OMG</LinkTo>1312 <LinkTo id='lol-link' @route='things' @model='lol'>LOL</LinkTo>1313 `1314 );1315 return this.visit('/things/omg')1316 .then(() => {1317 shouldBeActive(assert, this.$('#omg-link'));1318 shouldNotBeActive(assert, this.$('#lol-link'));1319 return this.visit('/things/omg/other');1320 })1321 .then(() => {1322 shouldBeActive(assert, this.$('#omg-link'));1323 shouldNotBeActive(assert, this.$('#lol-link'));1324 });1325 }1326 [`@test the <LinkTo /> component populates href with default query param values even without query-params object`](1327 assert1328 ) {1329 this.add(1330 'controller:index',1331 Controller.extend({1332 queryParams: ['foo'],1333 foo: '123',1334 })1335 );1336 this.addTemplate('index', `<LinkTo id='the-link' @route='index'>Index</LinkTo>`);1337 return this.visit('/').then(() => {1338 assert.equal(this.$('#the-link').attr('href'), '/', 'link has right href');1339 });1340 }1341 [`@test the <LinkTo /> component populates href with default query param values with empty query-params object`](1342 assert1343 ) {1344 this.add(1345 'controller:index',1346 Controller.extend({1347 queryParams: ['foo'],1348 foo: '123',1349 })1350 );1351 this.addTemplate(1352 'index',1353 `<LinkTo id='the-link' @route='index' @query={{hash}}>Index</LinkTo>`1354 );1355 return this.visit('/').then(() => {1356 assert.equal(this.$('#the-link').attr('href'), '/', 'link has right href');1357 });1358 }1359 [`@test the <LinkTo /> component with only query-params and a block updates when route changes`](1360 assert1361 ) {1362 this.router.map(function() {1363 this.route('about');1364 });1365 this.add(1366 'controller:application',1367 Controller.extend({1368 queryParams: ['foo', 'bar'],1369 foo: '123',1370 bar: 'yes',1371 })1372 );1373 this.addTemplate(1374 'application',1375 `<LinkTo id='the-link' @query={{hash foo='456' bar='NAW'}}>Index</LinkTo>`1376 );1377 return this.visit('/')1378 .then(() => {1379 assert.equal(1380 this.$('#the-link').attr('href'),1381 '/?bar=NAW&foo=456',1382 'link has right href'1383 );1384 return this.visit('/about');1385 })1386 .then(() => {1387 assert.equal(1388 this.$('#the-link').attr('href'),1389 '/about?bar=NAW&foo=456',1390 'link has right href'1391 );1392 });1393 }1394 ['@test [GH#17018] passing model to <LinkTo /> with `hash` helper works']() {1395 this.router.map(function() {1396 this.route('post', { path: '/posts/:post_id' });1397 });1398 this.add(1399 'route:index',1400 Route.extend({1401 model() {1402 return RSVP.hash({1403 user: { name: 'Papa Smurf' },1404 });1405 },1406 })1407 );1408 this.addTemplate(1409 'index',1410 `<LinkTo @route='post' @model={{hash id="someId" user=this.model.user}}>Post</LinkTo>`1411 );1412 this.addTemplate('post', 'Post: {{this.model.user.name}}');1413 return this.visit('/')1414 .then(() => {1415 this.assertComponentElement(this.firstChild, {1416 tagName: 'a',1417 attrs: { href: '/posts/someId' },1418 content: 'Post',1419 });1420 return this.click('a');1421 })1422 .then(() => {1423 this.assertText('Post: Papa Smurf');1424 });1425 }1426 [`@test The <LinkTo /> component can use dynamic params`](assert) {1427 this.router.map(function() {1428 this.route('foo', { path: 'foo/:some/:thing' });1429 this.route('bar', { path: 'bar/:some/:thing/:else' });1430 });1431 this.add(1432 'controller:index',1433 Controller.extend({1434 init() {1435 this._super(...arguments);1436 this.dynamicLinkParams = ['foo', 'one', 'two'];1437 },1438 })1439 );1440 this.addTemplate(1441 'index',1442 `1443 <h3 class="home">Home</h3>1444 <LinkTo id="dynamic-link" @params={{dynamicLinkParams}}>Dynamic</LinkTo>1445 `1446 );1447 return this.visit('/').then(() => {1448 let link = this.$('#dynamic-link');1449 assert.equal(link.attr('href'), '/foo/one/two');1450 let controller = this.applicationInstance.lookup('controller:index');1451 runTask(() => {1452 controller.set('dynamicLinkParams', ['bar', 'one', 'two', 'three']);1453 });1454 assert.equal(link.attr('href'), '/bar/one/two/three');1455 });1456 }1457 [`@test GJ: <LinkTo /> to a parent root model hook which performs a 'transitionTo' has correct active class #13256`](1458 assert1459 ) {1460 assert.expect(1);1461 this.router.map(function() {1462 this.route('parent', function() {1463 this.route('child');1464 });1465 });1466 this.add(1467 'route:parent',1468 Route.extend({1469 afterModel() {1470 this.transitionTo('parent.child');1471 },1472 })1473 );1474 this.addTemplate('application', `<LinkTo id='parent-link' @route='parent'>Parent</LinkTo>`);1475 return this.visit('/')1476 .then(() => {1477 return this.click('#parent-link');1478 })1479 .then(() => {1480 shouldBeActive(assert, this.$('#parent-link'));1481 });1482 }1483 }1484 );1485 moduleFor(1486 'The <LinkTo /> component - loading states and warnings',1487 class extends ApplicationTestCase {1488 [`@test <LinkTo /> with null/undefined dynamic parameters are put in a loading state`](1489 assert1490 ) {1491 assert.expect(19);1492 let warningMessage =1493 'This link is in an inactive loading state because at least one of its models currently has a null/undefined value, or the provided route name is invalid.';1494 this.router.map(function() {1495 this.route('thing', { path: '/thing/:thing_id' });1496 this.route('about');1497 });1498 this.addTemplate(1499 'index',1500 `1501 <LinkTo id='context-link' @route={{destinationRoute}} @model={{routeContext}} @loadingClass='i-am-loading'>1502 string1503 </LinkTo>1504 <LinkTo id='static-link' @route={{secondRoute}} @loadingClass={{loadingClass}}>1505 string1506 </LinkTo>1507 `1508 );1509 this.add(1510 'controller:index',1511 Controller.extend({1512 destinationRoute: null,1513 routeContext: null,1514 loadingClass: 'i-am-loading',1515 })1516 );1517 this.add(1518 'route:about',1519 Route.extend({1520 activate() {1521 assert.ok(true, 'About was entered');1522 },1523 })1524 );1525 function assertLinkStatus(link, url) {1526 if (url) {1527 assert.equal(normalizeUrl(link.attr('href')), url, 'loaded link-to has expected href');1528 assert.ok(!link.hasClass('i-am-loading'), 'loaded linkComponent has no loadingClass');1529 } else {1530 assert.equal(normalizeUrl(link.attr('href')), '#', "unloaded link-to has href='#'");1531 assert.ok(link.hasClass('i-am-loading'), 'loading linkComponent has loadingClass');1532 }1533 }1534 let contextLink, staticLink, controller;1535 return this.visit('/')1536 .then(() => {1537 contextLink = this.$('#context-link');1538 staticLink = this.$('#static-link');1539 controller = this.applicationInstance.lookup('controller:index');1540 assertLinkStatus(contextLink);1541 assertLinkStatus(staticLink);1542 return expectWarning(() => {1543 return this.click(contextLink[0]);1544 }, warningMessage);1545 })1546 .then(() => {1547 // Set the destinationRoute (context is still null).1548 runTask(() => controller.set('destinationRoute', 'thing'));1549 assertLinkStatus(contextLink);1550 // Set the routeContext to an id1551 runTask(() => controller.set('routeContext', '456'));1552 assertLinkStatus(contextLink, '/thing/456');1553 // Test that 0 isn't interpreted as falsy.1554 runTask(() => controller.set('routeContext', 0));1555 assertLinkStatus(contextLink, '/thing/0');1556 // Set the routeContext to an object1557 runTask(() => {1558 controller.set('routeContext', { id: 123 });1559 });1560 assertLinkStatus(contextLink, '/thing/123');1561 // Set the destinationRoute back to null.1562 runTask(() => controller.set('destinationRoute', null));1563 assertLinkStatus(contextLink);1564 return expectWarning(() => {1565 return this.click(staticLink[0]);1566 }, warningMessage);1567 })1568 .then(() => {1569 runTask(() => controller.set('secondRoute', 'about'));1570 assertLinkStatus(staticLink, '/about');1571 // Click the now-active link1572 return this.click(staticLink[0]);1573 });1574 }1575 }1576 );1577 function assertNav(options, callback, assert) {1578 let nav = false;1579 function check(event) {1580 assert.equal(1581 event.defaultPrevented,1582 options.prevented,1583 `expected defaultPrevented=${options.prevented}`1584 );1585 nav = true;1586 event.preventDefault();1587 }1588 try {1589 document.addEventListener('click', check);1590 callback();1591 } finally {1592 document.removeEventListener('click', check);1593 assert.ok(nav, 'Expected a link to be clicked');1594 }1595 }...
Footer.js
Source:Footer.js
1import React, { useState } from 'react';2import Link from 'next/link';3import Image from 'next/image';4// components5import { Div, FlexDiv, hookDeviceInfo } from 'components';6import Spam from '@/components/Typography/Spam';7import GridContainer from '@/components/Grid/GridContainer';8import GridItem from '@/components/Grid/GridItem';9// Images des journaux10import imagine1 from '@/assets/img/footer_img_1.png';11import imagine2 from '@/assets/img/footer_img_2.png';12import imagine3 from '@/assets/img/footer_img_3.png';13// Images des réseaux sociaux14import imagine4 from '@/assets/img/linkedIn_icon.png';15import imagine5 from '@/assets/img/instagram_footer_icon.png';16import imagine6 from '@/assets/img/facebook_footer_icon.png';17// import { Store } from '@material-ui/icons';18const link1 = 'https://www.google.com/maps/place/Meister+Engineering+SA/@46.2437724,6.2205624,16.05z/data=!4m5!3m4!1s0x478c6f36743605d3:0xd980424fe7e5d52!8m2!3d46.2448713!4d6.2226469';19const link2 = 'https://www.google.com/maps/place/Meister+Engineering+Showroom/@46.2030078,6.1588146,17z/data=!3m1!4b1!4m5!3m4!1s0x478c65c7187924f7:0xae7f241e5fc8194c!8m2!3d46.203009!4d6.1610129';20const LinkTo = (props) => {21 const { link, children } = props;22 const [hover, setHover] = useState(false);23 return (24 <span25 type="link2"26 onMouseEnter={() => setHover(true)}27 onMouseLeave={() => setHover(false)}28 style={{29 cursor: 'pointer', color: hover ? 'black' : null, textDecoration: hover ? 'underline' : null,30 }}31 >32 <Link href={link} passHref>33 <span>{children}</span>34 </Link>35 </span>36 );37};38const LinkToOutside = (props) => {39 const { link, children } = props;40 const [hover, setHover] = useState(false);41 return (42 <a43 href={link}44 onMouseEnter={() => setHover(true)}45 onMouseLeave={() => setHover(false)}46 target="_blank"47 rel="noreferrer"48 style={{49 cursor: 'pointer', color: hover ? 'black' : 'grey', textDecoration: hover ? 'underline' : null,50 }}51 >52 <span>{children}</span>53 </a>54 );55};56function Footer() {57 const { width, hookWidth = 0 } = hookDeviceInfo();58 return (59 <Div width="100%" style={{ backgroundColor: '#fbf9f4' }}>60 <Div height="15px" />61 <Div width={['80%', '60%', '60%', '60%', '60%']} row style={{ maxWidth: '1400px' }}>62 {width > 96063 ? (64 <GridContainer spacing={2}>65 <GridItem num={[12, 12, 12, 12, 12]}>66 <Div style={{ marginTop: '10px' }}>67 <Spam type="heading2">As featured in</Spam>68 </Div>69 </GridItem>70 <GridItem num={[4, 4, 4, 4, 4]}>71 <Div width="200px" height="80px">72 <LinkToOutside link="https://www.meister-engineering.com/press_bmw_motorrad">73 <Image src={imagine1 ?? '/static/images/notPhoto.png'} alt="..." width="200px" height="90px" />74 </LinkToOutside>75 </Div>76 </GridItem>77 <GridItem num={[4, 4, 4, 4, 4]}>78 <Div width="170px" height="80px">79 <LinkToOutside link="https://bikeshedmoto.com/blogs/blog/meister-engineering-r80-gs-geneva-dakar?_pos=1&_sid=a23c9a58c&_ss=r">80 <Image src={imagine2 ?? '/static/images/notPhoto.png'} alt="..." width="150px" height="90px" />81 </LinkToOutside>82 </Div>83 </GridItem>84 <GridItem num={[4, 4, 4, 4, 4]}>85 <Div width="170px" height="80px">86 <LinkToOutside link="https://www.bikeexif.com/custom-bikes-week-25">87 <Image src={imagine3 ?? '/static/images/notPhoto.png'} alt="..." width="130px" height="90px" />88 </LinkToOutside>89 </Div>90 </GridItem>91 </GridContainer>92 )93 : null}94 </Div>95 {width > 1000 ? (96 <Div width="95vw" row horizontal="around" style={{ maxWidth: '1700px', marginTop: '40px', marginBottom: '40px' }}>97 <Div width={['100%', '35%', '35%', '35%', '30%']}>98 <Div width="95%" horizontal="left" height="140px" vertical="at">99 <Spam type="heading1">CONTACT</Spam>100 <Spam type="heading2"><LinkTo link="tel:+41 (0)79 336 61 29">+41 (0)79 336 61 29</LinkTo></Spam>101 <Spam type="heading2"><LinkTo link="mailto: moto@meister-engineering.com">moto@meister-engineering.com</LinkTo></Spam>102 <Spam type="heading2"><LinkToOutside link={link1}>Workshop: Route de Compois 24, 1252 Meinier</LinkToOutside></Spam>103 <Spam type="heading2"><LinkToOutside link={link2}>Store & Showroom: Rue Maunoir 30, 1207 Genève</LinkToOutside></Spam>104 </Div>105 </Div>106 <Div width={['100%', '40%', '45%', '40%', '40%']}>107 <Div width="50%" horizontal="left" height="140px" vertical="at">108 <Spam type="heading1">INFORMATION</Spam>109 <Spam type="heading2"><LinkTo link="/Information/aboutMeister">About Meister Engineering</LinkTo></Spam>110 <Spam type="heading2"><LinkTo link="/Information/termsConditions">Terms and conditions</LinkTo></Spam>111 <Spam type="heading2"><LinkTo link="/Information/FAQs?option=general">FAQs</LinkTo></Spam>112 <Spam type="heading2" />113 </Div>114 </Div>115 <Div width="20%">116 <Div width="90%" horizontal="right" height="130px" vertical="top">117 <Spam type="heading1">FOLLOW US</Spam>118 <Div row height={70} width={['100px', '100px', '60%', '50%', '40%']} horizontal="at">119 <LinkToOutside link="https://www.instagram.com/meisterengineering/?hl=fr">120 <Image src={imagine5 ?? '/static/images/notPhoto.png'} alt="..." height="30px" width="30px" />121 </LinkToOutside>122 <LinkToOutside link="https://www.facebook.com/meisterengineering/">123 <Image src={imagine6 ?? '/static/images/notPhoto.png'} alt="..." height="30px" width="30px" />124 </LinkToOutside>125 <LinkToOutside link="https://www.linkedin.com/in/antoine-meister-2596a3136/?originalSubdomain=ch">126 <Image src={imagine4 ?? '/static/images/notPhoto.png'} alt="..." height="30px" width="30px" />127 </LinkToOutside>128 </Div>129 </Div>130 </Div>131 </Div>132 ) : (133 width > 600 ? (134 <Div width="95vw" style={{ maxWidth: '1700px' }}>135 <Div width="95vw" row horizontal="around" style={{ maxWidth: '1700px' }}>136 <Div width={['100%', '40%', '40%', '35%', '30%']}>137 <Div width="95%" horizontal="left" height="160px" vertical="at">138 <Spam type="heading1">CONTACT</Spam>139 <Spam type="heading2"><LinkTo link="tel:+41 (0)79 336 61 29">+41 (0)79 336 61 29</LinkTo></Spam>140 <Spam type="heading2"><LinkTo link="mailto: moto@meister-engineering.com">moto@meister-engineering.com</LinkTo></Spam>141 <Spam type="heading2"><LinkToOutside link={link1}>Workshop: Route de Compois 24, 1252 Meinier</LinkToOutside></Spam>142 <Spam type="heading2"><LinkToOutside link={link2}>Store & Showroom: Rue Maunoir 30, 1207 Genève</LinkToOutside></Spam>143 </Div>144 </Div>145 <Div width={['100%', '20%', '20%', '25%', '25%']}>146 <Div width="90%" horizontal="left" height="160px" vertical="at">147 <Spam type="heading1">INFORMATION</Spam>148 <Spam type="heading2"><LinkTo link="/Information/Meister">About Meister Engineering</LinkTo></Spam>149 <Spam type="heading2"><LinkTo link="/Information/termsConditions">Terms and conditions</LinkTo></Spam>150 <Spam type="heading2"><LinkTo link="/Information/FAQs?option=general">FAQs</LinkTo></Spam>151 <Spam type="heading2" />152 </Div>153 </Div>154 </Div>155 <Div height="20px" />156 <Div width="95vw" row horizontal="around" style={{ maxWidth: '1700px' }}>157 <Div width={['100%', '40%', '40%', '35%', '30%']} />158 <Div width={['100%', '20%', '20%', '25%', '25%']}>159 <Div width="90%" horizontal="left" height="130px" vertical="top">160 <Spam type="heading1">FOLLOW US</Spam>161 <Div row height={70} width={['100px', '100px', '60%', '50%', '50%']} horizontal="at">162 <LinkToOutside link="https://www.instagram.com/meisterengineering/?hl=fr">163 <Image src={imagine5} alt="..." height="30px" width="30px" />164 </LinkToOutside>165 <LinkToOutside link="https://www.facebook.com/meisterengineering/">166 <Image src={imagine6} alt="..." height="30px" width="30px" />167 </LinkToOutside>168 <LinkToOutside link="https://www.linkedin.com/in/antoine-meister-2596a3136/?originalSubdomain=ch">169 <Image src={imagine4} alt="..." height="30px" width="30px" />170 </LinkToOutside>171 </Div>172 </Div>173 </Div>174 </Div>175 </Div>176 ) : (177 <Div width="95vw" style={{ maxWidth: '1700px' }}>178 <Div width="95vw" style={{ maxWidth: '1700px' }}>179 <Div width={['100%', '40%', '40%', '35%', '30%']}>180 <Div width="95%" horizontal="left" vertical="at">181 <Spam type="heading1">CONTACT</Spam>182 <Spam type="heading2"><LinkTo link="tel:+41 (0)79 336 61 29">+41 (0)79 336 61 29</LinkTo></Spam>183 <Spam type="heading2"><LinkTo link="mailto: moto@meister-engineering.com">moto@meister-engineering.com</LinkTo></Spam>184 <Spam type="heading2">Workshop:</Spam>185 <Spam type="heading2"><LinkTo link={link1}>Route de Compois 24, 1252 Meinier</LinkTo></Spam>186 <Spam type="heading2">Store & Showroom:</Spam>187 <Spam type="heading2"><LinkTo link={link2}>Rue Maunoir 30, 1207 Genève</LinkTo></Spam>188 </Div>189 </Div>190 <Div height="20px" />191 <Div width={['100%', '20%', '20%', '25%', '25%']}>192 <Div width="95%" horizontal="left">193 <Spam type="heading1">INFORMATION</Spam>194 <Spam type="heading2"><LinkTo link="/Information/aboutMeister">About Meister Engineering</LinkTo></Spam>195 <Spam type="heading2"><LinkTo link="/Information/termsConditions">Terms and conditions</LinkTo></Spam>196 <Spam type="heading2"><LinkTo link="/Information/FAQs?option=general">FAQs</LinkTo></Spam>197 <Spam type="heading2" />198 </Div>199 </Div>200 </Div>201 <Div height="20px" />202 <Div width="95vw" style={{ maxWidth: '1700px' }}>203 <Div width={['100%', '40%', '40%', '35%', '30%']} />204 <Div height="20px" />205 <Div width={['100%', '20%', '20%', '25%', '25%']}>206 <Div width="95%" horizontal="left" vertical="top">207 <Spam type="heading1">FOLLOW US</Spam>208 <Div row height={70} width={['100px', '100px', '50%', '50%', '50%']} horizontal="at">209 <LinkTo link="https://www.instagram.com/meisterengineering/?hl=fr">210 <Image src={imagine5} alt="..." height="30px" width="30px" />211 </LinkTo>212 <LinkTo link="https://www.facebook.com/meisterengineering/">213 <Image src={imagine6} alt="..." height="30px" width="30px" />214 </LinkTo>215 <LinkTo link="https://www.linkedin.com/in/antoine-meister-2596a3136/?originalSubdomain=ch">216 <Image src={imagine4} alt="..." height="30px" width="30px" />217 </LinkTo>218 </Div>219 </Div>220 </Div>221 </Div>222 </Div>223 )224 )}225 </Div>226 );227}...
BTList.js
Source:BTList.js
1import React,{PureComponent} from 'react'2import BTListCell from './BTListCell' 3const IconText = ({ type, text }) => (4 <span>5 <Icon type={type} style={{ marginRight: 8 }} />6 {text}7 </span>8 );9export default class BTList extends PureComponent{10 constructor(props){11 super(props)12 }13 render(){14 return(15 <div className="listContent">16 <ul className="list">17 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>18 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>19 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>20 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>21 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>22 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>23 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>24 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>25 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>26 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>27 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>28 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>29 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>30 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>31 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>32 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>33 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>34 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>35 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>36 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>37 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>38 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>39 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>40 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>41 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>42 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>43 <li><BTListCell linkto={this.props.linkto} title='èµäº§éæ±'/></li>44 </ul>45 </div>46 )47 }...
index.js
Source:index.js
1import React, { useState } from 'react'2import styled from '@emotion/styled'3import { NavLink } from 'react-router-dom'4import * as icons from './icons'5export const SupportedAssets = (props) => {6 const [assets] = useState(ASSETS)7 return (8 <AssetsContainer>9 <h2>Supported Assets</h2>10 <StyledAssets>11 {assets && assets.length && assets.map((asset, index) => <Asset asset={asset} key={`asset-${index}`}></Asset>)}12 </StyledAssets>13 </AssetsContainer>14 )15}16const Asset = ({asset}) => {17 const { linkTo, name } = asset18 return (19 <StyledAsset>20 <NavLink to={linkTo}>21 <div className='art'>22 <img src={icons[`${name.toLowerCase()}Coin`]} alt={name} />23 <span>{name}</span>24 </div>25 <div className='name'>26 {name}27 </div>28 </NavLink>29 </StyledAsset>30 )31}32const AssetsContainer = styled.div`33 > h2 {34 margin-bottom: 6rem;35 }36`37const StyledAssets = styled.div`38 display: grid;39 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));40 grid-gap: 2rem;41`42const StyledAsset = styled.div`43 a {44 transition: all 120ms ease-in-out;45 display: inline-block;46 filter: grayscale(100%);47 transition: all 120ms ease-in-out;48 .art {49 width: 120px;50 height: 120px;51 border-radius: 22px;52 background: #f1f1f1;53 display: flex;54 flex-direction: column;55 justify-content: center;56 align-items: center;57 margin-bottom: .75rem; 58 transition: all 680ms ease-out;59 img {60 transition: all 120ms ease-in-out;61 transform: scale(0.8);62 display: block;63 width: 40%;64 height: 40%;65 }66 span {67 display: block;68 text-align: center;69 font-weight: strong;70 font-family: "Clan Offc Pro Medium";71 font-size: 18px;72 margin-top: .5rem;73 }74 }75 &:hover {76 text-decoration: none;77 filter: grayscale(23%);78 79 img {80 transform: scale(1);81 }82 }83 84 }85`86const ASSETS = [87 { name: 'BCH', linkTo: '/convert/BCH-to-EUR' },88 { name: 'BNB', linkTo: '/convert/BNB-to-EUR' },89 { name: 'BNT', linkTo: '/convert/BNT-to-EUR' },90 { name: 'BTC', linkTo: '/convert/BTC-to-EUR' },91 { name: 'DOGE', linkTo: '/convert/DOGE-to-EUR' },92 { name: 'EOS', linkTo: '/convert/EOS-to-EUR' },93 { name: 'ETH', linkTo: '/convert/ETH-to-EUR' },94 { name: 'EUR', linkTo: '/convert/EUR-to-BTC' },95 { name: 'GBP', linkTo: '/convert/GBP-to-BTC' },96 { name: 'KCS', linkTo: '/convert/KCS-to-EUR' },97 { name: 'KNC', linkTo: '/convert/KNC-to-EUR' },98 { name: 'LTC', linkTo: '/convert/LTC-to-EUR' },99 { name: 'NANO', linkTo: '/convert/NANO-to-EUR' },100 { name: 'OMG', linkTo: '/convert/OMG-to-EUR' },101 { name: 'USD', linkTo: '/convert/USD-to-BTC' },102 { name: 'USDT', linkTo: '/convert/USDT-to-EUR' },103 { name: 'XMR', linkTo: '/convert/XMR-to-EUR' },104 { name: 'XVG', linkTo: '/convert/XVG-to-EUR' },105 { name: 'ZEC', linkTo: '/convert/ZEC-to-EUR' }106]...
Using AI Code Generation
1import { LinkTo } from '@storybook/addon-links/react';2import { linkTo } from '@storybook/addon-links';3import { action } from '@storybook/addon-actions';4<button onClick={linkTo('Button', 'with text')}>Go to Button story</button>5<button onClick={action('clicked')}>Go to Button story</button>6import React from 'react';7import { storiesOf } from '@storybook/react';8import { action } from '@storybook/addon-actions';9import { Button } from './Button';10storiesOf('Button', module)11 .add('with text', () => (12 <Button onClick={action('clicked')}>Hello Button</Button>13 .add('with some emoji', () => (14 <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>15 ));16import React from 'react';17import { storiesOf } from '@storybook/react';18import { linkTo } from '@storybook/addon-links';19import { Button } from './Button';20storiesOf('Button', module)21 .add('with text', () => (22 <Button onClick={linkTo('Button', 'with some emoji')}>Hello Button</Button>23 .add('with some emoji', () => (24 <Button onClick={linkTo('Button', 'with text')}>😀 😎 👍 💯</Button>25 ));26import React from 'react';27import { storiesOf } from '@storybook/react';28import { action } from '@storybook/addon-actions';29import { Button } from './Button';30storiesOf('Button', module)31 .add('with text', () => (32 <Button onClick={action('clicked')}>Hello Button</Button>33 .add('with some emoji', () => (34 <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
Using AI Code Generation
1const LinkTo = require('@storybook/addon-links/react').LinkTo;2const Test = () => {3 return (4 );5};6export default Test;
Using AI Code Generation
1import LinkTo from 'storybook-root';2class Test extends React.Component {3 render() {4 }5}6export default Test;7import React from 'react';8import { storiesOf } from '@storybook/react';9import Test from 'test-root';10storiesOf('LinkTo', module).add('default', () => <Test />);11import React from 'react';12import { storiesOf } from '@storybook/react';13import LinkTo from 'storybook-root';
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
