Installed mock router, broken

nci/app/components/nci-anchor/index.vue

@@ -26,33 +26,31 @@ const nciAnchor = defineComponent({
       type: String as PropType<string>,
       required: false,
     },
-    size: {
+    active: {
       type: String as PropType<string>,
       required: false,
+      default: "",
     },
   },
   setup: (props) => {
-    let componentType = "nuxt-link";
-    let attrs = {
-      to: props.href,
-    } as { [name: string]: string };
-    let pointer = "to";
-
-    if (props.href.includes("http")) {
-      componentType = "a";
-      attrs = {
-        href: props.href,
-      };
-      pointer = "href";
-    }
+    let componentType: string = "";
+    let pointer: string = "";
+    let styles: string = "";
+    props.href.includes("http")
+      ? ((componentType = "a"), (pointer = "href"))
+      : ((componentType = "nuxt-link"), (pointer = "to"));
 
+    props.active
+      ? (styles = props.styles! + props.active)
+      : (styles = props.styles!);
+    console.log("componentType:", componentType, pointer, "styles:", styles);
     return () =>
       h(
         componentType,
         {
           attrs: {
             [pointer]: props.href,
-            class: props.styles,
+            class: styles,
           },
         },
         props.title

nci/app/components/nci-anchor/stories/button/index.stories.ts

@@ -11,7 +11,7 @@ import { storyItem } from '@/nci/storybook/';
 /** Import tailwind map config for defaults (e.g. image sizes) */
 import Theme from '@/nci/theme/default-light';
 
-import injectObject from '@/nci/app/injectors/inject-object'
+import injectObject from '@/nci/app/injectors/injectObject'
 
 /** Create a single component export and corresponding template and args */
 import generateProps from '@/nci/storybook/factories/generateProps'

nci/app/components/nci-image/stories/image/index.stories.ts

@@ -20,7 +20,7 @@ export default StoryMenuItem;
 /** Require the Placeholder Image to be used in the image component **/
 const imagePath = 'logo.svg';
 
-import injectObject from '@/nci/app/injectors/inject-object'
+import injectObject from '@/nci/app/injectors/injectObject'
 
 /** Create a single component export and corresponding template and args */
 import generateProps from '@/nci/storybook/factories/generateProps'

nci/app/components/nci-nav/index.vue

@@ -7,7 +7,7 @@ import { Route, ButtonCompiled } from "@/nci/app/interfaces/";
 /** NCI-SECTION COMPONENT */
 /**
  * Setup the component
- * @function nciNNav
+ * @function nciNav
  * @param {string} name Name of the component.
  * @param {object} props Props that are passed to the component.
  * @param {function} setup Setup data and methods and return to component.
@@ -28,6 +28,10 @@ const nciNav = defineComponent({
       type: Array as PropType<Array<Route>>,
       required: true,
     },
+    currentRoute: {
+      type: String as PropType<string>,
+      required: true,
+    },
   },
   setup(props) {
     const createComponent = (component: ButtonCompiled) => {
@@ -36,15 +40,24 @@ const nciNav = defineComponent({
       });
     };
 
+    let active: string;
+
     let navComponentArray = [] as object[];
     props.routes.map((route: Route) => {
-      navComponentArray.push(
-        createComponent({
-          href: route.path,
-          title: route.name,
-          styles: props.childStyles,
-        })
-      );
+      route.path === "/" + props.currentRoute
+        ? (active = "active")
+        : (active = "");
+
+      route.path !== "/:index"
+        ? navComponentArray.push(
+            createComponent({
+              href: route.path,
+              title: route.name,
+              styles: props.childStyles,
+              active: active,
+            })
+          )
+        : null;
     });
 
     return () =>

nci/app/components/nci-nav/stories/nav/index.stories.ts

@@ -0,0 +1,61 @@
+import nciNav from '@/nci/app/components/nci-nav/index.vue'
+
+import { Nav } from '@/nci/app/interfaces/'
+
+/** Import Storybook resources */
+import { Story } from '@storybook/vue';
+import { storyItem } from '@/nci/storybook/';
+
+/** Import tailwind map config for defaults (e.g. image sizes) */
+import Theme from '@/nci/theme/default-light';
+
+import recurseInject from '@/nci/app/injectors/recurseInject'
+
+import injectObject from '@/nci/app/injectors/injectObject'
+
+/** Create a single component export and corresponding template and args */
+import generateProps from '@/nci/storybook/factories/generateProps'
+
+import config from '@/nci/data/demo'
+
+const content = recurseInject(config.pages, Theme)
+const props = injectObject(Theme.anchor, config.nav)
+
+console.log('stylees', props.styles)
+/** Construct the sidebar Menu Item */
+const StoryMenuItem = storyItem('Components/Nav', nciNav);
+
+/** Export the sidebar Menu Item */
+export default StoryMenuItem;
+
+const Template: Story<Nav> = (args: Nav) => ({
+  components: { nciNav },
+  props: generateProps(args), /* dont need injectObject here? */
+  template: `<nci-nav v-bind="$props"/>`
+});
+
+
+/* Construct the routes object from the config.pages */
+
+const routes = [
+  {
+    path: "https://www.nuxt.org",
+    name: "Home"
+  },
+  {
+    path: "https://www.nuxt.org",
+    name: "About"
+  }
+]
+
+const data = {
+  styles: "nav",
+  childStyles: props.styles,
+  routes: routes,
+}
+
+console.log('generateprops', generateProps(data), data)
+/** Bind and export the Story */
+export const nav: Story<Nav> = Template.bind({});
+nav.args = data
+

nci/app/components/nci-page/__test__/index.test.ts

@@ -1,10 +1,20 @@
-import { mount } from '@vue/test-utils'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
 import nciPage from '@/nci/app/components/nci-page/index.vue';
+import VueRouter from 'vue-router'
 
 import { Pages, Page } from '@/nci/app/interfaces';
 import Config from '@/nci/data/demo';
 
 import registerComponents from '@/nci/app/testing/registerComponents'
+import { useRoute } from '@nuxtjs/composition-api';
+import createMemoryHistory from 'vue-router'
+
+
+const {
+  VueRouterMock,
+  createRouterMock,
+  injectRouterMock,
+} = require('vue-router-mock')
 
 /** Slide Component Tests */
 /**
@@ -13,12 +23,21 @@ import registerComponents from '@/nci/app/testing/registerComponents'
  * @test Check the title tag matches the leve e.g. h1, h2 etc.
  * @test Check the length of the title is above 0.
  */
+
+jest.mock('vue-router')
+
 describe('nci-page component', () => {
 
   beforeEach(() => {
     registerComponents();
   });
 
+  const router = createRouterMock({ value: { params: { index: '/home' } } })
+  beforeEach(() => {
+    // inject it globally to ensure `useRoute()`, `$route`, etc work
+    // properly and give you access to test specific functions
+    injectRouterMock(router)
+  })
 
   const pages = Config.pages as Pages;
   const nav = {
@@ -33,18 +52,23 @@ describe('nci-page component', () => {
       name: "route"
     }]
   }
-
   Object.keys(pages).forEach(key => {
     test('Testing page:' + key, () => {
 
-      let wrapper = mount(nciPage, {
+      /*jest.mock('vue-router', () => ({
+        useRoute: jest.fn(() => ({ value: { params: { index: '/home' } } }))
+      }))*/
+      let wrapper = shallowMount(nciPage, {
         propsData: {
           page: pages[key] as Page,
           nav: nav,
         },
-        stubs: ['nuxt-link']
+        stubs: ['nuxt-link'],
+        history: createMemoryHistory,
+        mocks: {
+          getCurrentRoute: jest.fn(() => ({ value: { params: { index: '/home' } } }))
+        }
       })
-
       /** Check the component mounted */
       expect(wrapper.vm).toBeTruthy();
     })

nci/app/components/nci-page/index.vue

@@ -6,7 +6,7 @@ import buildSections from "@/nci/app/factories/sections";
 
 import nav from "@/nci/app/factories/nav";
 
-//import buildPage from '@/nci/app/factories/page'
+import { useRoute } from "@nuxtjs/composition-api";
 
 /** NCI-PAGE */
 /**
@@ -27,10 +27,13 @@ export default defineComponent({
       required: true,
     },
   },
+  methods: {},
   setup(props) {
+    const getCurrentRoute = useRoute().value.params.index;
+
     return () =>
       h("div", { class: "page" }, [
-        nav(props.nav.routes, props.nav.design.styles),
+        nav(props.nav.routes, getCurrentRoute, props.nav.design.styles),
         buildSections(props.page.sections),
       ]);
   },

nci/app/components/nci-section/stories/index.stories.ts

@@ -2,8 +2,6 @@
 /** Import Storybook resources */
 import { storiesOf } from '@storybook/vue';
 
-import { Story } from '@storybook/vue';
-
 /** Import tailwind map config for defaults (e.g. image sizes) */
 import Theme from '@/nci/theme/default-light';
 

nci/app/components/nci-title/stories/title/index.stories.ts

@@ -11,7 +11,7 @@ import { storyItem, } from '@/nci/storybook/';
 /** Import tailwind map config for defaults (e.g. image sizes) */
 import Theme from '@/nci/theme/default-light';
 
-import injectObject from '@/nci/app/injectors/inject-object'
+import injectObject from '@/nci/app/injectors/injectObject'
 
 /** Create a single component export and corresponding template and args */
 import generateProps from '@/nci/storybook/factories/generateProps'

nci/app/factories/nav/index.ts

@@ -4,7 +4,7 @@ import {
 
 import { Routes } from '@/nci/app/interfaces'
 
-const nav = (routes: Routes, styles: string) => {
+const nav = (routes: Routes, currentRoute: string, styles: string) => {
   return h("nci-nav", {
     props: {
       routes: routes,

nci/app/injectors/recurseInject.ts

@@ -1,5 +1,5 @@
 import { Pages } from '@/nci/app/interfaces'
-import injectObject from '@/nci/app/injectors/inject-object'
+import injectObject from '@/nci/app/injectors/injectObject'
 /** recurseInject
  * A function that takes 2 objects and searches for a key in obj1 and finds the
  * corresponding key in obj2 and injects obj2 value into obj1

nci/app/interfaces/index.ts

@@ -121,7 +121,8 @@ interface Button {
 interface ButtonCompiled {
   href: string
   title: string,
-  styles: string
+  styles: string,
+  active?: string
 }
 
 /**

nci/data/demo.ts

@@ -54,6 +54,22 @@ const ConfigFile = {
               size: "sm",
               color: "primary",
               styles: "button"
+            },
+            buttonInfo: {
+              type: "anchor",
+              href: "/about",
+              title: "Contact Us",
+              size: "sm",
+              color: "primary",
+              styles: "button"
+            },
+            buttonInfoB: {
+              type: "anchor",
+              href: "/about",
+              title: "Contact Us",
+              size: "sm",
+              color: "primary",
+              styles: "button"
             }
           }
         }

nci/storybook/stories/story-list/index.ts

@@ -1,4 +1,4 @@
-import injectObject from '@/nci/app/injectors/inject-object'
+import injectObject from '@/nci/app/injectors/injectObject'
 import { ThemeObject, SimpleObject } from '@/nci/app/interfaces'
 
 export const storyList = (data: SimpleObject, themeObject: ThemeObject, property: string, component: string, decorator: string) => {

nci/theme/default-light.ts

@@ -85,6 +85,7 @@ const Theme = {
       primary: "bg-transparent uppercase rounded border border-primary text-primary hover:bg-gray-300 hover:border-transparent hover:text-white",
       secondary: "bg-transparent uppercase rounded text-green-700 border border-green-500 hover:bg-green-500 hover:border-transparent hover:text-white",
       tertiary: "bg-transparent uppercase rounded text-red-700 border border-red-500 hover:bg-red-500 hover:border-transparent hover:text-white",
+      nav: "text-primary hover:text-secondary"
     },
   }
 }

nuxt.config.ts

@@ -25,18 +25,15 @@ const config: NuxtConfig = {
   router: {
     extendRoutes(routes, resolve) {
       Object.keys(ConfigFile.pages).forEach(key => {
+        console.log('key:', key)
         routes.push({
           name: key,
           path: '/' + key,
           component: resolve(__dirname, 'pages/_index.vue')
         })
       })
-      routes.push({
-        name: "blah",
-        path: '/',
-        component: resolve(__dirname, 'pages/_index.vue')
-      })
     },
+
   },
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [

package.json

@@ -21,6 +21,7 @@
     "npm": "^7.14.0",
     "nuxt": "^2.15.3",
     "nuxt-typed-vuex": "^0.2.0",
+    "vue-router-mock": "^0.0.3",
     "vuex-composition-helpers": "^1.0.23"
   },
   "devDependencies": {