如何创建假路由测试导航栏组件的link-to链接与标签渲染？

Got it, let's walk through how to set up fake routes for your main-menu component integration test in Ember, so you can properly verify link URLs and label rendering. Here's a practical, step-by-step approach:

First, update your test setup to reset and define fake routes before initializing the router. This isolates your test from the app's real routing configuration:

moduleForComponent('main-menu', 'Integration | Component | main menu', {
  integration: true,
  setup() {
    const router = getOwner(this).lookup('router:main');
    
    // Reset the router map to avoid conflicts with app routes
    router.map(() => {});
    
    // Define your fake test routes
    router.map(function() {
      this.route('dashboard');
      this.route('user-profile');
      this.route('app-settings');
    });
    
    router.setupRouter();
  }
});

Next, create test-specific menu items that map to your fake routes, then render the component and verify its output:

test('renders links with correct hrefs and labels', function(assert) {
  // Mock the menu items your component expects
  const mockMenuItems = [
    { route: 'dashboard', label: 'Dashboard' },
    { route: 'user-profile', label: 'My Profile' },
    { route: 'app-settings', label: 'Settings' }
  ];

  // Pass the mock data to the component
  this.set('menuItems', mockMenuItems);
  this.render(hbs`{{main-menu items=menuItems}}`);

  // Verify labels are rendered correctly
  assert.equal(this.$('nav a').eq(0).text().trim(), 'Dashboard', 'First menu label matches expected text');
  assert.equal(this.$('nav a').eq(1).text().trim(), 'My Profile', 'Second menu label matches expected text');
  assert.equal(this.$('nav a').eq(2).text().trim(), 'Settings', 'Third menu label matches expected text');

  // Verify href attributes are generated correctly
  assert.equal(this.$('nav a').eq(0).attr('href'), '/dashboard', 'First link has correct route URL');
  assert.equal(this.$('nav a').eq(1).attr('href'), '/user-profile', 'Second link has correct route URL');
  assert.equal(this.$('nav a').eq(2).attr('href'), '/app-settings', 'Third link has correct route URL');
});

If your component adds an active state to the current route's link, you can extend the test to validate this behavior:

test('applies active class to current route link', function(assert) {
  const mockMenuItems = [
    { route: 'dashboard', label: 'Dashboard' },
    { route: 'user-profile', label: 'My Profile' }
  ];

  this.set('menuItems', mockMenuItems);
  this.render(hbs`{{main-menu items=menuItems}}`);

  // Transition to the profile route to trigger active state
  this.owner.lookup('router:main').transitionTo('user-profile');

  // Check active class presence
  assert.notOk(this.$('nav a:contains("Dashboard")').hasClass('active'), 'Inactive link does not have active class');
  assert.ok(this.$('nav a:contains("My Profile")').hasClass('active'), 'Active route link has active class');
});

This approach ensures your test is fully isolated, and you can confidently validate that your component behaves as expected with routing.

内容的提问来源于stack exchange，提问作者Alexander Koltunov