NavLink exact & strict tests (#4454)

Author: pshrmn

packages/react-router-dom/modules/__tests__/NavLink-test.js

@@ -74,15 +74,13 @@ describe('NavLink', () => {
   })
 
   describe('isActive', () => {
-    const activeExact = (match, location) => !!match && match.isExact
-
     it('applies active props when isActive returns true', () => {
       ReactDOM.render((
         <MemoryRouter initialEntries={['/pizza']}>
           <NavLink
             to='/pizza'
             activeClassName='active'
-            isActive={activeExact}
+            isActive={() => true}
             >
             Pizza!
           </NavLink>
@@ -96,9 +94,9 @@ describe('NavLink', () => {
       ReactDOM.render((
         <MemoryRouter initialEntries={['/pizza']}>
           <NavLink
-            to='/pizza/anchovies'
+            to='/pizza'
             activeClassName='active'
-            isActive={activeExact}
+            isActive={() => false}
             >
             Pizza!
           </NavLink>
@@ -109,4 +107,69 @@ describe('NavLink', () => {
     })
   })
 
+  describe('exact', () => {
+    it('does not do exact matching by default', () => {
+      ReactDOM.render((
+        <MemoryRouter initialEntries={['/pizza/anchovies']}>
+          <NavLink to='/pizza' activeClassName='active'>Pizza!</NavLink>
+        </MemoryRouter>
+      ), node)
+      const a = node.getElementsByTagName('a')[0]
+      expect(a.className).toContain('active')
+    })
+
+    it('sets active value only for exact matches', () => {
+      ReactDOM.render((
+        <MemoryRouter initialEntries={['/pizza']}>
+          <NavLink exact to='/pizza' exact activeClassName='active'>Pizza!</NavLink>
+        </MemoryRouter>
+      ), node)
+      const a = node.getElementsByTagName('a')[0]
+      expect(a.className).toContain('active')
+    })
+
+    it('does not set active value for partial matches', () => {
+      ReactDOM.render((
+        <MemoryRouter initialEntries={['/pizza/anchovies']}>
+          <NavLink exact to='/pizza' activeClassName='active'>Pizza!</NavLink>
+        </MemoryRouter>
+      ), node)
+      const a = node.getElementsByTagName('a')[0]
+      expect(a.className).toNotContain('active')
+    })
+  })
+
+  describe('strict (enforce path\'s trailing slash)', () => {
+    const PATH = '/pizza/'
+    it('does not do strict matching by default', () => {
+      ReactDOM.render((
+        <MemoryRouter initialEntries={['/pizza']}>
+          <NavLink to={PATH} activeClassName='active'>Pizza!</NavLink>
+        </MemoryRouter>
+      ), node)
+      const a = node.getElementsByTagName('a')[0]
+      expect(a.className).toContain('active')
+    })
+
+    it('does not set active value when location.pathname has no trailing slash', () => {
+      ReactDOM.render((
+        <MemoryRouter initialEntries={['/pizza']}>
+          <NavLink strict to={PATH} activeClassName='active'>Pizza!</NavLink>
+        </MemoryRouter>
+      ), node)
+      const a = node.getElementsByTagName('a')[0]
+      expect(a.className).toNotContain('active')
+    })
+
+    it('sets active when pathname has trailing slash', () => {
+      ReactDOM.render((
+        <MemoryRouter initialEntries={['/pizza/']}>
+          <NavLink strict to={PATH} activeClassName='active'>Pizza!</NavLink>
+        </MemoryRouter>
+      ), node)
+      const a = node.getElementsByTagName('a')[0]
+      expect(a.className).toContain('active')
+    })
+  })
+
 })