|
1 | | -import { moduleFor, ApplicationTestCase, runLoopSettled, runTask } from 'internal-test-helpers'; |
| 1 | +import { |
| 2 | + ApplicationTestCase, |
| 3 | + ModuleBasedTestResolver, |
| 4 | + moduleFor, |
| 5 | + runLoopSettled, |
| 6 | + runTask, |
| 7 | +} from 'internal-test-helpers'; |
2 | 8 | import Controller, { inject as injectController } from '@ember/controller'; |
3 | 9 | import { A as emberA, RSVP } from '@ember/-internals/runtime'; |
4 | 10 | import { alias } from '@ember/-internals/metal'; |
5 | 11 | import { subscribe, reset } from '@ember/instrumentation'; |
6 | 12 | import { Route, NoneLocation } from '@ember/-internals/routing'; |
7 | 13 | import { EMBER_IMPROVED_INSTRUMENTATION } from '@ember/canary-features'; |
| 14 | +import Engine from '@ember/engine'; |
8 | 15 | import { DEBUG } from '@glimmer/env'; |
| 16 | +import { compile } from '../../../utils/helpers'; |
9 | 17 |
|
10 | 18 | // IE includes the host name |
11 | 19 | function normalizeUrl(url) { |
@@ -348,6 +356,209 @@ moduleFor( |
348 | 356 | ); |
349 | 357 | }); |
350 | 358 | } |
| 359 | + |
| 360 | + async ['@test Using <LinkTo> inside a non-routable engine errors'](assert) { |
| 361 | + this.add( |
| 362 | + 'engine:not-routable', |
| 363 | + class NotRoutableEngine extends Engine { |
| 364 | + Resolver = ModuleBasedTestResolver; |
| 365 | + |
| 366 | + init() { |
| 367 | + super.init(...arguments); |
| 368 | + this.register( |
| 369 | + 'template:application', |
| 370 | + compile(`<LinkTo @route='about'>About</LinkTo>`, { |
| 371 | + moduleName: 'non-routable/templates/application.hbs', |
| 372 | + }) |
| 373 | + ); |
| 374 | + } |
| 375 | + } |
| 376 | + ); |
| 377 | + |
| 378 | + this.addTemplate('index', `{{mount 'not-routable'}}`); |
| 379 | + |
| 380 | + await assert.rejectsAssertion( |
| 381 | + this.visit('/'), |
| 382 | + 'You attempted to use the <LinkTo> component within a routeless engine, this is not supported. ' + |
| 383 | + 'If you are using the ember-engines addon, use the <LinkToExternal> component instead. ' + |
| 384 | + 'See https://ember-engines.com/docs/links for more info.' |
| 385 | + ); |
| 386 | + } |
| 387 | + |
| 388 | + async ['@test Using <LinkTo> inside a routable engine link within the engine'](assert) { |
| 389 | + this.add( |
| 390 | + 'engine:routable', |
| 391 | + class RoutableEngine extends Engine { |
| 392 | + Resolver = ModuleBasedTestResolver; |
| 393 | + |
| 394 | + init() { |
| 395 | + super.init(...arguments); |
| 396 | + this.register( |
| 397 | + 'template:application', |
| 398 | + compile( |
| 399 | + ` |
| 400 | + <h2 id='engine-layout'>Routable Engine</h2> |
| 401 | + {{outlet}} |
| 402 | + <LinkTo @route='application' id='engine-application-link'>Engine Appliction</LinkTo> |
| 403 | + `, |
| 404 | + { |
| 405 | + moduleName: 'routable/templates/application.hbs', |
| 406 | + } |
| 407 | + ) |
| 408 | + ); |
| 409 | + this.register( |
| 410 | + 'template:index', |
| 411 | + compile( |
| 412 | + ` |
| 413 | + <h3 class='engine-home'>Engine Home</h3> |
| 414 | + <LinkTo @route='about' id='engine-about-link'>Engine About</LinkTo> |
| 415 | + <LinkTo @route='index' id='engine-self-link'>Engine Self</LinkTo> |
| 416 | + `, |
| 417 | + { |
| 418 | + moduleName: 'routable/templates/index.hbs', |
| 419 | + } |
| 420 | + ) |
| 421 | + ); |
| 422 | + this.register( |
| 423 | + 'template:about', |
| 424 | + compile( |
| 425 | + ` |
| 426 | + <h3 class='engine-about'>Engine About</h3> |
| 427 | + <LinkTo @route='index' id='engine-home-link'>Engine Home</LinkTo> |
| 428 | + <LinkTo @route='about' id='engine-self-link'>Engine Self</LinkTo> |
| 429 | + `, |
| 430 | + { |
| 431 | + moduleName: 'routable/templates/about.hbs', |
| 432 | + } |
| 433 | + ) |
| 434 | + ); |
| 435 | + } |
| 436 | + } |
| 437 | + ); |
| 438 | + |
| 439 | + this.router.map(function () { |
| 440 | + this.mount('routable'); |
| 441 | + }); |
| 442 | + |
| 443 | + this.add('route-map:routable', function () { |
| 444 | + this.route('about'); |
| 445 | + }); |
| 446 | + |
| 447 | + this.addTemplate( |
| 448 | + 'application', |
| 449 | + ` |
| 450 | + <h1 id='application-layout'>Application</h1> |
| 451 | + {{outlet}} |
| 452 | + <LinkTo @route='application' id='application-link'>Appliction</LinkTo> |
| 453 | + <LinkTo @route='routable' id='engine-link'>Engine</LinkTo> |
| 454 | + ` |
| 455 | + ); |
| 456 | + |
| 457 | + await this.visit('/'); |
| 458 | + |
| 459 | + assert.equal(this.$('#application-layout').length, 1, 'The application layout was rendered'); |
| 460 | + assert.strictEqual(this.$('#engine-layout').length, 0, 'The engine layout was not rendered'); |
| 461 | + assert.equal(this.$('#application-link.active').length, 1, 'The application link is active'); |
| 462 | + assert.equal(this.$('#engine-link:not(.active)').length, 1, 'The engine link is not active'); |
| 463 | + |
| 464 | + assert.equal(this.$('h3.home').length, 1, 'The application index page is rendered'); |
| 465 | + assert.equal(this.$('#self-link.active').length, 1, 'The application index link is active'); |
| 466 | + assert.equal( |
| 467 | + this.$('#about-link:not(.active)').length, |
| 468 | + 1, |
| 469 | + 'The application about link is not active' |
| 470 | + ); |
| 471 | + |
| 472 | + await this.click('#about-link'); |
| 473 | + |
| 474 | + assert.equal(this.$('#application-layout').length, 1, 'The application layout was rendered'); |
| 475 | + assert.strictEqual(this.$('#engine-layout').length, 0, 'The engine layout was not rendered'); |
| 476 | + assert.equal(this.$('#application-link.active').length, 1, 'The application link is active'); |
| 477 | + assert.equal(this.$('#engine-link:not(.active)').length, 1, 'The engine link is not active'); |
| 478 | + |
| 479 | + assert.equal(this.$('h3.about').length, 1, 'The application about page is rendered'); |
| 480 | + assert.equal(this.$('#self-link.active').length, 1, 'The application about link is active'); |
| 481 | + assert.equal( |
| 482 | + this.$('#home-link:not(.active)').length, |
| 483 | + 1, |
| 484 | + 'The application home link is not active' |
| 485 | + ); |
| 486 | + |
| 487 | + await this.click('#engine-link'); |
| 488 | + |
| 489 | + assert.equal(this.$('#application-layout').length, 1, 'The application layout was rendered'); |
| 490 | + assert.equal(this.$('#engine-layout').length, 1, 'The engine layout was rendered'); |
| 491 | + assert.equal(this.$('#application-link.active').length, 1, 'The application link is active'); |
| 492 | + assert.equal(this.$('#engine-link.active').length, 1, 'The engine link is active'); |
| 493 | + assert.equal( |
| 494 | + this.$('#engine-application-link.active').length, |
| 495 | + 1, |
| 496 | + 'The engine application link is active' |
| 497 | + ); |
| 498 | + |
| 499 | + assert.equal(this.$('h3.engine-home').length, 1, 'The engine index page is rendered'); |
| 500 | + assert.equal(this.$('#engine-self-link.active').length, 1, 'The engine index link is active'); |
| 501 | + assert.equal( |
| 502 | + this.$('#engine-about-link:not(.active)').length, |
| 503 | + 1, |
| 504 | + 'The engine about link is not active' |
| 505 | + ); |
| 506 | + |
| 507 | + await this.click('#engine-about-link'); |
| 508 | + |
| 509 | + assert.equal(this.$('#application-layout').length, 1, 'The application layout was rendered'); |
| 510 | + assert.equal(this.$('#engine-layout').length, 1, 'The engine layout was rendered'); |
| 511 | + assert.equal(this.$('#application-link.active').length, 1, 'The application link is active'); |
| 512 | + assert.equal(this.$('#engine-link.active').length, 1, 'The engine link is active'); |
| 513 | + assert.equal( |
| 514 | + this.$('#engine-application-link.active').length, |
| 515 | + 1, |
| 516 | + 'The engine application link is active' |
| 517 | + ); |
| 518 | + |
| 519 | + assert.equal(this.$('h3.engine-about').length, 1, 'The engine about page is rendered'); |
| 520 | + assert.equal(this.$('#engine-self-link.active').length, 1, 'The engine about link is active'); |
| 521 | + assert.equal( |
| 522 | + this.$('#engine-home-link:not(.active)').length, |
| 523 | + 1, |
| 524 | + 'The engine home link is not active' |
| 525 | + ); |
| 526 | + |
| 527 | + await this.click('#engine-application-link'); |
| 528 | + |
| 529 | + assert.equal(this.$('#application-layout').length, 1, 'The application layout was rendered'); |
| 530 | + assert.equal(this.$('#engine-layout').length, 1, 'The engine layout was rendered'); |
| 531 | + assert.equal(this.$('#application-link.active').length, 1, 'The application link is active'); |
| 532 | + assert.equal(this.$('#engine-link.active').length, 1, 'The engine link is active'); |
| 533 | + assert.equal( |
| 534 | + this.$('#engine-application-link.active').length, |
| 535 | + 1, |
| 536 | + 'The engine application link is active' |
| 537 | + ); |
| 538 | + |
| 539 | + assert.equal(this.$('h3.engine-home').length, 1, 'The engine index page is rendered'); |
| 540 | + assert.equal(this.$('#engine-self-link.active').length, 1, 'The engine index link is active'); |
| 541 | + assert.equal( |
| 542 | + this.$('#engine-about-link:not(.active)').length, |
| 543 | + 1, |
| 544 | + 'The engine about link is not active' |
| 545 | + ); |
| 546 | + |
| 547 | + await this.click('#application-link'); |
| 548 | + |
| 549 | + assert.equal(this.$('#application-layout').length, 1, 'The application layout was rendered'); |
| 550 | + assert.strictEqual(this.$('#engine-layout').length, 0, 'The engine layout was not rendered'); |
| 551 | + assert.equal(this.$('#application-link.active').length, 1, 'The application link is active'); |
| 552 | + assert.equal(this.$('#engine-link:not(.active)').length, 1, 'The engine link is not active'); |
| 553 | + |
| 554 | + assert.equal(this.$('h3.home').length, 1, 'The application index page is rendered'); |
| 555 | + assert.equal(this.$('#self-link.active').length, 1, 'The application index link is active'); |
| 556 | + assert.equal( |
| 557 | + this.$('#about-link:not(.active)').length, |
| 558 | + 1, |
| 559 | + 'The application about link is not active' |
| 560 | + ); |
| 561 | + } |
351 | 562 | } |
352 | 563 | ); |
353 | 564 |
|
|
0 commit comments