diff --git a/modules/__tests__/IndexLink-test.js b/modules/__tests__/IndexLink-test.js index b78198e99d..31c133031d 100644 --- a/modules/__tests__/IndexLink-test.js +++ b/modules/__tests__/IndexLink-test.js @@ -4,9 +4,10 @@ import expect from 'expect' import React from 'react' import createHistory from 'history/lib/createMemoryHistory' import IndexRoute from '../IndexRoute' +import IndexLink from '../IndexLink' import Router from '../Router' import Route from '../Route' -import IndexLink from '../IndexLink' +import Link from '../Link' describe('An ', function () { @@ -15,8 +16,10 @@ describe('An ', function () { return (
    -
  • app
  • -
  • deep
  • +
  • overview
  • +
  • contact
  • +
  • products
  • +
  • specific product
{this.props.children}
@@ -24,25 +27,53 @@ describe('An ', function () { } } - class Parent extends React.Component { + class Website extends React.Component { + render() { + return
website wrapper {this.props.children}
+ } + } + + class WebsiteOverview extends React.Component { + render() { + return
website overview
+ } + } + + class WebsiteContact extends React.Component { + render() { + return
contact page
+ } + } + + class WebsiteProducts extends React.Component { + render() { + return
website products {this.props.children}
+ } + } + + class WebsiteProductsProduct extends React.Component { render() { - return
parent {this.props.children}
+ return
specific product {this.props.params.productId}
} } - class Child extends React.Component { + class WebsiteProductsIndex extends React.Component { render() { - return
child
+ return
list of products
} } const routes = ( - - - - + + + + + + + + - + ) let node @@ -54,25 +85,57 @@ describe('An ', function () { React.unmountComponentAtNode(node) }) - describe('when linking to the root', function () { - it("is active when the parent's route is active", function (done) { + describe('when linking to the overview', function () { + it('is active and other routes are not', function (done) { + React.render(( + + ), node, function () { + expect(node.querySelector('#overviewLink').className).toEqual('active') + expect(node.querySelector('#contactLink').className).toEqual('') + expect(node.querySelector('#productsLink').className).toEqual('') + expect(node.querySelector('#specificProductLink').className).toEqual('') + done() + }) + }) + }) + + describe('when linking to the contact', function () { + it('is active and other routes are not', function (done) { + React.render(( + + ), node, function () { + expect(node.querySelector('#overviewLink').className).toEqual('') + expect(node.querySelector('#contactLink').className).toEqual('active') + expect(node.querySelector('#productsLink').className).toEqual('') + expect(node.querySelector('#specificProductLink').className).toEqual('') + done() + }) + }) + }) + + describe('when linking to the products', function () { + it('is active and other routes are not', function (done) { React.render(( - + ), node, function () { - expect(node.querySelector('#appLink').className).toEqual('active') - expect(node.querySelector('#deepLink').className).toEqual('') + expect(node.querySelector('#overviewLink').className).toEqual('') + expect(node.querySelector('#contactLink').className).toEqual('') + expect(node.querySelector('#productsLink').className).toEqual('active') + expect(node.querySelector('#specificProductLink').className).toEqual('') done() }) }) }) - describe('when linking deep into the route hierarchy', function () { - it("is active when the parent's route is active", function (done) { + describe('when linking to a specific product', function () { + it("is active and it's parent is also active", function (done) { React.render(( - + ), node, function () { - expect(node.querySelector('#appLink').className).toEqual('') - expect(node.querySelector('#deepLink').className).toEqual('active') + expect(node.querySelector('#overviewLink').className).toEqual('') + expect(node.querySelector('#contactLink').className).toEqual('') + expect(node.querySelector('#productsLink').className).toEqual('active') + expect(node.querySelector('#specificProductLink').className).toEqual('active') done() }) })