Merge pull request #39 from unimal-jp/fix/spec-failed

update spec files

jest.config.js

@@ -9,8 +9,14 @@ module.exports = {
       tsconfig: './tsconfig.test.json'
     }],
   },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
   transformIgnorePatterns: ['/node_modules/(?!(axios)/)'],
   testMatch: [
     '<rootDir>/src/**/*.spec.{js,ts}',
   ],
+  testEnvironmentOptions: {
+    customExportConditions: ['node', 'node-addons'],
+  }
 }

src/components/spearly-content/index.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import { defineProps, reactive, watch, onBeforeUnmount } from 'vue'
-import { useSpearly } from 'src/composables'
+import { useSpearly } from '../../composables'
 import type { Content, GetContentParams } from '@spearly/sdk-js'
 
 export type Props = {

src/composables/index.ts

@@ -1 +1 @@
-export * from './use-spearly'
+export { useSpearly } from './use-spearly'

src/spec/components/spearly-content-list.spec.ts

@@ -1,4 +1,6 @@
 import { mount, VueWrapper } from '@vue/test-utils'
+import { createUseSpearlyMock } from '../createMock'
+import * as composable from '../../composables'
 import SpearlyContentList from '../../components/spearly-content-list/index.vue'
 
 const mockResponse = {
@@ -24,7 +26,13 @@ const mockResponse = {
 describe('SpearlyContentList', () => {
   let wrapper: VueWrapper
   let getListMock = jest.fn().mockReturnValue(Promise.resolve(mockResponse))
+  jest.mock('../../composables')
 
+  jest.spyOn(composable, 'useSpearly').mockReturnValue(
+    createUseSpearlyMock({
+      getContentList: getListMock,
+    })
+  )
   beforeEach(() => {
     wrapper = mount(SpearlyContentList, {
       props: {
@@ -35,13 +43,6 @@ describe('SpearlyContentList', () => {
           template: '<h1>test</h1>',
         },
       },
-      global: {
-        provide: {
-          $spearly: {
-            getList: getListMock,
-          },
-        },
-      },
     })
   })
 

src/spec/components/spearly-content.spec.ts

@@ -1,5 +1,7 @@
 import { mount, VueWrapper } from '@vue/test-utils'
+import * as composable from '../../composables'
 import SpearlyContent from '../../components/spearly-content/index.vue'
+import { createUseSpearlyMock } from '../createMock'
 
 describe('SpearlyContent', () => {
   let wrapper: VueWrapper
@@ -13,22 +15,20 @@ describe('SpearlyContent', () => {
   const pageViewMock = jest.fn().mockResolvedValue({})
 
   beforeEach(() => {
+    jest.mock('../../composables')
+
+    jest.spyOn(composable, 'useSpearly').mockReturnValue(
+      createUseSpearlyMock({
+        getContent: getContentMock,
+        getContentPreview: getContentPreviewMock,
+      })
+    )
+
     wrapper = mount(SpearlyContent, {
       props: {
         contentTypeId: 'CONTENT_TYPE_ID',
         id: 'CONTENT_ID',
       },
-      global: {
-        provide: {
-          $spearly: {
-            getContent: getContentMock,
-            getContentPreview: getContentPreviewMock,
-          },
-          $spearlyAnalytics: {
-            pageView: pageViewMock,
-          },
-        },
-      },
     })
   })
 
@@ -55,17 +55,6 @@ describe('SpearlyContent', () => {
           id: 'CONTENT_ID',
           previewToken: 'TOKEN',
         },
-        global: {
-          provide: {
-            $spearly: {
-              getContent: getContentMock,
-              getContentPreview: getContentPreviewMock,
-            },
-            $spearlyAnalytics: {
-              pageView: pageViewMock,
-            },
-          },
-        },
       })
       expect(getContentPreviewMock).toHaveBeenCalledWith('CONTENT_TYPE_ID', 'CONTENT_ID', 'TOKEN')
     })

src/spec/components/spearly-form.spec.ts

@@ -1,4 +1,6 @@
 import { mount, flushPromises, VueWrapper } from '@vue/test-utils'
+import * as composable from '../../composables'
+import { createUseSpearlyMock } from '../createMock'
 import SpearlyForm from '../../components/spearly-form/index.vue'
 
 const getFormLatestMockData = {
@@ -88,16 +90,17 @@ const wrapperFactory = (
 ) => {
   const options: any = {
     props,
-    global: {
-      provide: {
-        $spearly: {
-          getFormLatest: getFormLatestMock,
-          postFormAnswers: postFormAnswersMock,
-        },
-      },
-    },
   }
 
+  jest.mock('../../composables')
+
+  jest.spyOn(composable, 'useSpearly').mockReturnValue(
+    createUseSpearlyMock({
+      getFormLatest: getFormLatestMock,
+      postFormAnswer: postFormAnswersMock,
+    })
+  )
+
   if (defaultSlots) options.slots = { default: defaultSlots }
 
   const wrapper = mount(SpearlyForm, options)
@@ -358,7 +361,7 @@ describe('SpearlyForm', () => {
       })
 
       it('postFormAnswers is called when clicked on the confirm screen', () => {
-        expect(postFormAnswersMock).toHaveBeenCalledWith(1, {
+        expect(postFormAnswersMock).toHaveBeenCalledWith({
           _spearly_gotcha: '',
           confirmation_email: 'test@example.com',
           name: 'example name',

src/spec/createMock.ts

@@ -167,3 +167,29 @@ export const createFormAnswerResponse = (publicUid = 'FORM_ID') => ({
   },
   createdAt: new Date('2021-08-01'),
 })
+
+type UseSpearlyMockParams = {
+  getContent?: jest.Mock
+  getContentList?: jest.Mock
+  getContentPreview?: jest.Mock
+  getFormLatest?: jest.Mock
+  postFormAnswer?: jest.Mock
+  pageView?: jest.Mock
+  conversion?: jest.Mock
+}
+
+export const createUseSpearlyMock = (mocks: UseSpearlyMockParams = {}) => {
+  return Object.assign(
+    {},
+    {
+      getContent: jest.fn().mockResolvedValue(createContentMock),
+      getContentList: jest.fn().mockResolvedValue(createContentListMock),
+      getContentPreview: jest.fn().mockResolvedValue(createContentMock),
+      getFormLatest: jest.fn().mockResolvedValue(createFormMock),
+      postFormAnswer: jest.fn().mockResolvedValue(createFormAnswerResponse),
+      pageView: jest.fn().mockResolvedValue(undefined),
+      conversion: jest.fn().mockResolvedValue(undefined),
+    },
+    mocks
+  )
+}

tsconfig.test.json

@@ -18,7 +18,7 @@
       "@types/node",
       "@types/jest",
       "jest"
-    ]
+    ],
   },
   "exclude": ["node_modules"]
 }