Transform item's path to lowercase in navigator (#836)

Allows for the current technology to be selected in the navigator when
on the associated page for it, regardless of the URL path casing.

Resolves: rdar://122911237

Author: marinaaisa

src/components/Navigator/NavigatorCard.vue

@@ -36,7 +36,7 @@
           v-if="technology"
           :id="INDEX_ROOT_KEY"
           :url="technologyPath"
-          class="technology-title"
+          :class="['technology-title', { 'router-link-exact-active': isTechnologyRoute }]"
           @click.alt.native.prevent="toggleAllNodes"
         >
           <h2 class="card-link">
@@ -247,6 +247,8 @@ export default {
     };
   },
   computed: {
+    isTechnologyRoute: ({ technologyPath, $route }) => (
+      technologyPath.toLowerCase() === $route.path.toLowerCase()),
     politeAriaLive() {
       const { hasNodes, navigatorItems } = this;
       if (!hasNodes) return '';

tests/unit/components/Navigator/NavigatorCard.spec.js

@@ -189,6 +189,7 @@ const createWrapper = ({ propsData, ...others } = {}) => shallowMount(NavigatorC
     BaseNavigatorCard,
   },
   sync: false,
+  mocks: { $route: { path: defaultProps.technologyPath } },
   attachToDocument: true,
   ...others,
 });
@@ -370,6 +371,14 @@ describe('NavigatorCard', () => {
     });
   });
 
+  it('adds the "router-link-exact-active" class for case insensitive version of technologyPath', async () => {
+    const wrapper = createWrapper();
+    wrapper.setProps({
+      technologyPath: '/documentation/Testkit',
+    });
+    expect(wrapper.find('.technology-title').classes()).toContain('router-link-exact-active');
+  });
+
   it('focus the first item if there is no active item', async () => {
     const wrapper = createWrapper();
     await flushPromises();