Fix Vue Test Utils Warnings [Ticket: NCI-9]

ryanmstokes · Jul 14, 2021 · 51e59dd · 51e59dd
1 parent 453bbba
commit 51e59dd
Show file tree

Hide file tree

Showing 33 changed files with 47 additions and 53 deletions.
diff --git a/.babelrc b/.babelrc
@@ -12,13 +12,5 @@
         ]
       ]
     }
-  },
-  "plugins": [
-    [
-      "@babel/plugin-proposal-private-property-in-object",
-      {
-        "loose": true
-      }
-    ]
-  ]
+  }
 }
diff --git a/babel.config.js b/babel.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   presets: ['@babel/preset-env'],
-  "plugins": [
+  plugins: [
     [
       "@babel/plugin-proposal-private-property-in-object",
       {

diff --git a/jest.config.ts b/jest.config.ts
@@ -26,12 +26,13 @@ export default {
   ],
   collectCoverage: true,
   collectCoverageFrom: [
-    '<rootDir>/nci/components/**/*.{js,vue,ts}',
+    '<rootDir>/nci/app/components/**/*.{js,vue,ts}',
     '<rootDir>/nci/storybook/**/*.{js,vue,ts}',
     '<rootDir>/nci/app/factories/**/*.{js,vue,ts}',
     '<rootDir>/pages/**/*.{js,vue,ts}',
     '<rootDir>/store/**/*.{js,vue,ts}',
     "!**/node_modules/**"
   ],
-  testEnvironment: "jsdom"
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ['./nci/app/testing/registerComponents.ts']
 }
diff --git a/nci.config.ts b/nci.config.ts
@@ -7,9 +7,8 @@ import Theme from "./nci/theme/default-light";
 /** Import App Config Type */
 import { AppConfig } from '@/nci/app/interfaces'
 
-const nciConfig = {
+export const nciConfig = {
   config: Config,
   theme: Theme,
 } as AppConfig;
 
-export default nciConfig;
diff --git a/nci/app/appConfig.ts b/nci/app/appConfig.ts
@@ -1,4 +1,4 @@
-import nciConfig from "../../nci.config"
+import { nciConfig } from "../../nci.config"
 
 /** Import App Config Type */
 import { AppConfig } from '@/nci/app/interfaces'

diff --git a/...ponents/nci-anchor/__test__/index.test.ts → ...ponents/nci-anchor/__test__/index.test.ts b/...ponents/nci-anchor/__test__/index.test.ts → ...ponents/nci-anchor/__test__/index.test.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import nciAnchor from '@/nci/components/nci-anchor/index.vue'
+import nciAnchor from '@/nci/app/components/nci-anchor/index.vue'
 import { Button } from '@/nci/app/interfaces';
 
 /** Button Component Tests */
@@ -22,7 +22,6 @@ describe('nci-anchor component', () => {
       } as Button,
       stubs: ['nuxt-link']
     })
-
     /** Check the component mounted */
     expect(wrapper.vm).toBeTruthy();
 

diff --git a/nci/components/nci-anchor/index.vue → nci/app/components/nci-anchor/index.vue b/nci/components/nci-anchor/index.vue → nci/app/components/nci-anchor/index.vue
diff --git a/...hor/stories/button/__test__/index.test.ts → ...hor/stories/button/__test__/index.test.ts b/...hor/stories/button/__test__/index.test.ts → ...hor/stories/button/__test__/index.test.ts
@@ -2,15 +2,16 @@
 
 import { mount } from '@vue/test-utils';
 
-import nciAnchor from '@/nci/components/nci-anchor/index.vue';
+import nciAnchor from '@/nci/app/components/nci-anchor/index.vue';
 
 //👇 Imports a specific story for the test
-import { button } from '@/nci/components/nci-anchor/stories/button/index.stories';
+import { button } from '@/nci/app/components/nci-anchor/stories/button/index.stories';
 
 it('renders the button in the primary state', () => {
   const wrapper = mount(nciAnchor, {
     propsData: button.args,
     stubs: ['nuxt-link']
   });
+
   expect(wrapper).toBeTruthy();
 });
diff --git a/...ci-anchor/stories/button/index.stories.ts → ...ci-anchor/stories/button/index.stories.ts b/...ci-anchor/stories/button/index.stories.ts → ...ci-anchor/stories/button/index.stories.ts
@@ -1,5 +1,5 @@
 /** Import the Nuxt Image component  */
-import nciAnchor from '@/nci/components/nci-anchor/index.vue';
+import nciAnchor from '@/nci/app/components/nci-anchor/index.vue';
 
 /** Import shared Typeface interfaces */
 import { Button } from '@/nci/app/interfaces';
@@ -47,5 +47,4 @@ const datab = {
 export const button: Story<Button> = Templateb.bind({})
 button.args = injectObject(Theme.anchor, datab)
 button.decorators = [() => ({ template: '<div class="mt-10"><story /></div>' })];
-//console.log(injectObject(Theme.anchor, datab))
-export { Sizes } from '@/nci/components/nci-anchor/stories/list/index.stories'
+export { Sizes } from '@/nci/app/components/nci-anchor/stories/list/index.stories'
diff --git a/...nchor/stories/list/__test__/index.test.ts → ...nchor/stories/list/__test__/index.test.ts b/...nchor/stories/list/__test__/index.test.ts → ...nchor/stories/list/__test__/index.test.ts
@@ -2,8 +2,8 @@
 
 import { mount } from '@vue/test-utils';
 
-import { Sizes } from '@/nci/components/nci-anchor/stories/list/index.stories';
-import nciAnchor from '@/nci/components/nci-anchor/index.vue';
+import { Sizes } from '@/nci/app/components/nci-anchor/stories/list/index.stories';
+import nciAnchor from '@/nci/app/components/nci-anchor/index.vue';
 import { Button } from '@/nci/app/interfaces'
 
 //👇 Imports a specific story for the test

diff --git a/.../nci-anchor/stories/list/index.stories.ts → .../nci-anchor/stories/list/index.stories.ts b/.../nci-anchor/stories/list/index.stories.ts → .../nci-anchor/stories/list/index.stories.ts
@@ -1,5 +1,5 @@
 /** Import the Nuxt Image component  */
-import nciAnchor from '@/nci/components/nci-anchor/index.vue';
+import nciAnchor from '@/nci/app/components/nci-anchor/index.vue';
 
 /** Import shared Typeface interfaces */
 import { Button } from '@/nci/app/interfaces';

diff --git a/...mponents/nci-image/__test__/index.test.ts → ...mponents/nci-image/__test__/index.test.ts b/...mponents/nci-image/__test__/index.test.ts → ...mponents/nci-image/__test__/index.test.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import nciImage from '@/nci/components/nci-image/index.vue'
+import nciImage from '@/nci/app/components/nci-image/index.vue'
 import { Image } from '@/nci/app/interfaces';
 
 describe('nci-image component', () => {

diff --git a/nci/components/nci-image/index.vue → nci/app/components/nci-image/index.vue b/nci/components/nci-image/index.vue → nci/app/components/nci-image/index.vue
diff --git a/...mage/stories/image/__test__/index.test.ts → ...mage/stories/image/__test__/index.test.ts b/...mage/stories/image/__test__/index.test.ts → ...mage/stories/image/__test__/index.test.ts
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
-import nciImage from '@/nci/components/nci-image/index.vue'
+import nciImage from '@/nci/app/components/nci-image/index.vue'
 
-import { image } from '@/nci/components/nci-image/stories/image/index.stories';
+import { image } from '@/nci/app/components/nci-image/stories/image/index.stories';
 
 /** Img Component Tests */
 /**

diff --git a/.../nci-image/stories/image/index.stories.ts → .../nci-image/stories/image/index.stories.ts b/.../nci-image/stories/image/index.stories.ts → .../nci-image/stories/image/index.stories.ts
@@ -1,5 +1,5 @@
 /** Import the Nuxt Image component  */
-import nciImage from '@/nci/components/nci-image/index.vue';
+import nciImage from '@/nci/app/components/nci-image/index.vue';
 
 /** Import shared Typeface interfaces */
 import { Image } from '@/nci/app/interfaces';
@@ -44,4 +44,4 @@ export const image: Story<Image> = Templateb.bind({});
 image.args = data
 
 
-export { Sizes } from '@/nci/components/nci-image/stories/list/index.stories'
+export { Sizes } from '@/nci/app/components/nci-image/stories/list/index.stories'
diff --git a/...image/stories/list/__test__/index.test.ts → ...image/stories/list/__test__/index.test.ts b/...image/stories/list/__test__/index.test.ts → ...image/stories/list/__test__/index.test.ts
@@ -2,8 +2,8 @@
 
 import { mount } from '@vue/test-utils';
 
-import { Sizes } from '@/nci/components/nci-image/stories/list/index.stories';
-import nciImage from '@/nci/components/nci-image/index.vue';
+import { Sizes } from '@/nci/app/components/nci-image/stories/list/index.stories';
+import nciImage from '@/nci/app/components/nci-image/index.vue';
 import { Image } from '@/nci/app/interfaces'
 
 // Imports a specific story for the test

diff --git a/...s/nci-image/stories/list/index.stories.ts → ...s/nci-image/stories/list/index.stories.ts b/...s/nci-image/stories/list/index.stories.ts → ...s/nci-image/stories/list/index.stories.ts
@@ -1,5 +1,5 @@
 /** Import the Nuxt Image component  */
-import nciImage from '@/nci/components/nci-image/index.vue';
+import nciImage from '@/nci/app/components/nci-image/index.vue';
 
 /** Import shared Typeface interfaces */
 import { Image } from '@/nci/app/interfaces';

diff --git a/...omponents/nci-page/__test__/index.test.ts → ...omponents/nci-page/__test__/index.test.ts b/...omponents/nci-page/__test__/index.test.ts → ...omponents/nci-page/__test__/index.test.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import nciPage from '@/nci/components/nci-page/index.vue';
+import nciPage from '@/nci/app/components/nci-page/index.vue';
 
 import { Pages, Page } from '@/nci/app/interfaces';
 import Config from '@/nci/data/demo';

diff --git a/nci/components/nci-page/index.vue → nci/app/components/nci-page/index.vue b/nci/components/nci-page/index.vue → nci/app/components/nci-page/index.vue
diff --git a/...onents/nci-section/__test__/index.test.ts → ...onents/nci-section/__test__/index.test.ts b/...onents/nci-section/__test__/index.test.ts → ...onents/nci-section/__test__/index.test.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import nciSection from '@/nci/components/nci-section/index.vue';
+import nciSection from '@/nci/app/components/nci-section/index.vue';
 
 import { Pages } from '@/nci/app/interfaces';
 import Config from '@/nci/data/demo';
@@ -32,6 +32,7 @@ describe('nci-section component', () => {
             propsData: pageSections[key2],
             stubs: ['nuxt-link']
           })
+
           /** Check the component mounted */
           expect(wrapper.vm).toBeTruthy();
         })

diff --git a/nci/components/nci-section/index.vue → nci/app/components/nci-section/index.vue b/nci/components/nci-section/index.vue → nci/app/components/nci-section/index.vue
diff --git a/...ci-section/stories/__test__/index.test.ts → ...ci-section/stories/__test__/index.test.ts b/...ci-section/stories/__test__/index.test.ts → ...ci-section/stories/__test__/index.test.ts
@@ -1,6 +1,6 @@
 import registerComponents from '@/nci/app/testing/registerComponents'
 
-import { story } from '@/nci/components/nci-section/stories/index.stories'
+import { story } from '@/nci/app/components/nci-section/stories/index.stories'
 
 /** Section Component Tests */
 /**

diff --git a/...ents/nci-section/stories/index.stories.ts → ...ents/nci-section/stories/index.stories.ts b/...ents/nci-section/stories/index.stories.ts → ...ents/nci-section/stories/index.stories.ts
diff --git a/...mponents/nci-title/__test__/index.test.ts → ...mponents/nci-title/__test__/index.test.ts b/...mponents/nci-title/__test__/index.test.ts → ...mponents/nci-title/__test__/index.test.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import nciTitle from '@/nci/components/nci-title/index.vue';
+import nciTitle from '@/nci/app/components/nci-title/index.vue';
 import { Title } from '@/nci/app/interfaces';
 
 /** Img Component Tests */
@@ -40,7 +40,6 @@ describe('nci-title component', () => {
     /** Check props match */
     expect(wrapper.props().value).toBe('My Awesome Website');
     expect(wrapper.props().tag).toBe("h1");
-
     /** Check an image exists in the DOM */
     expect(wrapper.find('h1').exists()).toBe(true);
 

diff --git a/nci/components/nci-title/index.vue → nci/app/components/nci-title/index.vue b/nci/components/nci-title/index.vue → nci/app/components/nci-title/index.vue
diff --git a/...title/stories/list/__test__/index.test.ts → ...title/stories/list/__test__/index.test.ts b/...title/stories/list/__test__/index.test.ts → ...title/stories/list/__test__/index.test.ts
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
-import nciTitle from '@/nci/components/nci-title/index.vue'
+import nciTitle from '@/nci/app/components/nci-title/index.vue'
 
-import { Sizes } from '@/nci/components/nci-title/stories/list/index.stories';
+import { Sizes } from '@/nci/app/components/nci-title/stories/list/index.stories';
 
 import { Title } from '@/nci/app/interfaces'
 

diff --git a/...s/nci-title/stories/list/index.stories.ts → ...s/nci-title/stories/list/index.stories.ts b/...s/nci-title/stories/list/index.stories.ts → ...s/nci-title/stories/list/index.stories.ts
@@ -1,5 +1,5 @@
 /** Import the Nuxt Image component  */
-import nciTitle from '@/nci/components/nci-title/index.vue';
+import nciTitle from '@/nci/app/components/nci-title/index.vue';
 
 /** Import shared Typeface interfaces */
 import { Title } from '@/nci/app/interfaces';

diff --git a/...itle/stories/title/__test__/index.test.ts → ...itle/stories/title/__test__/index.test.ts b/...itle/stories/title/__test__/index.test.ts → ...itle/stories/title/__test__/index.test.ts
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
-import nciTitle from '@/nci/components/nci-title/index.vue'
+import nciTitle from '@/nci/app/components/nci-title/index.vue'
 
-import { title } from '@/nci/components/nci-title/stories/title/index.stories';
+import { title } from '@/nci/app/components/nci-title/stories/title/index.stories';
 
 /** Title Component Tests */
 /**

diff --git a/.../nci-title/stories/title/index.stories.ts → .../nci-title/stories/title/index.stories.ts b/.../nci-title/stories/title/index.stories.ts → .../nci-title/stories/title/index.stories.ts
@@ -1,5 +1,5 @@
 /** Import the Nuxt Image component  */
-import nciTitle from '@/nci/components/nci-title/index.vue';
+import nciTitle from '@/nci/app/components/nci-title/index.vue';
 
 /** Import shared Typeface interfaces */
 import { Title } from '@/nci/app/interfaces';
@@ -53,4 +53,4 @@ const blah = injectObject(Theme.title, data)
 const result = blah;
 title.args = result
 
-export { Sizes } from '@/nci/components/nci-title/stories/list/index.stories'
+export { Sizes } from '@/nci/app/components/nci-title/stories/list/index.stories'
diff --git a/nci/app/helpers/math/floatToFixed/__test__/index.test.ts b/nci/app/helpers/math/floatToFixed/__test__/index.test.ts
@@ -0,0 +1,8 @@
+import { floatToFixed } from '@/nci/app/helpers/math/floatToFixed';
+
+describe('Set float decimal length', () => {
+  it('Should return a number with corresponding decimal place length', () => {
+    const checkNumber = floatToFixed(1.23945847584748, 2)
+    expect(checkNumber).toBe(1.24)
+  })
+})
diff --git a/nci/app/testing/registerComponents.ts b/nci/app/testing/registerComponents.ts
@@ -13,7 +13,7 @@ import Vue from 'vue';
 function registerComponents(): void {
 
   // Automatically register all components
-  const fileComponents = glob.sync(path.join(__dirname, '../../components/**/index.vue'));
+  const fileComponents = glob.sync(path.join(__dirname, '../components/**/index.vue'));
 
   // Iterate through components directory and add each file object to an array
   for (const file of fileComponents) {

diff --git a/nci/test/jest.setup.js b/nci/test/jest.setup.js
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -41,14 +41,14 @@ const config: NuxtConfig = {
       '@storybook/addon-controls',
       '@storybook/addon-notes',
     ],
-    stories: ['@/nci/components/**/*/index.stories.@(ts)']
+    stories: ['@/nci/app/components/**/*/index.stories.@(ts)']
   },
   tailwindcss: {
     cssPath: '@/assets/css/tailwind.css',
     configPath: '@/tailwind.config.ts',
   },
   // Auto import components: https://go.nuxtjs.dev/config-components
-  components: ['@/nci/components'/*'@/components'*/],
+  components: ['@/nci/app/components'/*'@/components'*/],
 
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [