chore(ci): fixed tests not working

Author: jsbroks

babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    '@babel/preset-typescript',
+    [
+      '@babel/preset-env',
+      {
+        useBuiltIns: 'entry'
+      }
+    ]
+  ]
+}

jest.config.js

@@ -17,5 +17,8 @@ module.exports = {
   coverageDirectory: 'coverage',
   coverageReporters: ['html', 'lcov', 'text'],
   collectCoverageFrom: ['src/**/*.ts', 'packages/*/src/**/*.ts'],
-  watchPathIgnorePatterns: ['/node_modules/']
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '(/__tests__/.*|(\\.|/)(test|spec))\\.d.ts$'
+  ]
 }

package.json

@@ -21,6 +21,8 @@
     "vue": "^2.6.11"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-typescript": "^7.10.4",
     "@types/jest": "^26.0.9",
     "@types/resize-observer-browser": "^0.1.3",
     "@vue/composition-api": "^1.0.0-beta.8",

packages/query/src/__test__/useQuery.spec.ts

@@ -1,13 +1,41 @@
+import Vue from 'vue'
 import { useQuery } from '../'
+import { renderHook } from '../../../testing/src'
+import { QueryStatus } from '../query'
 
 describe('useQuery', () => {
-  const fetch = () =>
-    Promise.resolve({
+  const mockFetch = jest.fn().mockResolvedValue({ mock: true })
+
+  const fetch = () => {
+    console.log('calling')
+    return Promise.resolve({
       idk: [{ id: 1 }, { id: 2 }]
     })
+  }
+
+  it('calls query function', async () => {
+    const wrapper = renderHook(() => {
+      const { data, status, isLoading, isSuccess, isError, query } = useQuery(
+        'fetch',
+        mockFetch
+      )
+
+      expect(mockFetch).toHaveBeenCalledTimes(1)
+      expect(data.value).toBe(undefined)
+      expect(isLoading.value).toBe(false)
+      expect(isSuccess.value).toBe(false)
+      expect(isError.value).toBe(false)
+      expect(status.value).toBe(QueryStatus.Idle)
+
+      return { data, query, status }
+    })
 
-  it('', async () => {
-    const { data } = useQuery('fetch', fetch)
-    expect(data).toBe(await fetch())
+    await Vue.nextTick()
+    await Vue.nextTick()
+    await Vue.nextTick()
+    await Vue.nextTick()
+    await Vue.nextTick()
+    console.log(wrapper.vm.status)
+    console.log(wrapper.vm.data)
   })
 })

packages/query/src/createCacheProvider.ts

@@ -0,0 +1,9 @@
+import { provide } from '@vue/composition-api'
+import { QueryCache, QueryCacheConfig } from './queryCache'
+
+export default function createCacheProvider(
+  config?: QueryCacheConfig & { name?: string }
+) {
+  const cache = new QueryCache(config)
+  provide(config?.name ?? 'cache', cache)
+}

packages/query/src/getQueryCache.ts

@@ -1,5 +1,6 @@
-import { defaultCache } from './queryCache'
+import { inject } from '@vue/composition-api'
+import { defaultCache, QueryCache } from './queryCache'
 
-export function getQueryCache() {
-  return defaultCache
+export function getQueryCache(name: string = 'cache'): QueryCache {
+  return inject(name, defaultCache)
 }

packages/query/src/injectCache.ts

@@ -79,6 +79,7 @@ export class Query<TResult, TError> {
 
         if (!this.config.isDataEqual!(this.state.data, data))
           this.dispatch({ status: QueryStatus.Success, data })
+
         delete this.promise
 
         return data

packages/query/src/query.ts

@@ -7,7 +7,6 @@ import { Query, QueryStatus } from './query'
 
 export interface BaseQueryResult<TResult, TError = unknown> {
   status: Ref<QueryStatus>
-  error?: TError
 
   isLoading: ComputedRef<boolean>
   isSuccess: ComputedRef<boolean>
@@ -27,4 +26,5 @@ export interface BaseQueryResult<TResult, TError = unknown> {
 export interface QueryResult<TResult, TError = unknown>
   extends BaseQueryResult<TResult, TError> {
   data: Ref<TResult | undefined>
+  error: Ref<TError | undefined>
 }

packages/query/src/types.ts

@@ -12,22 +12,27 @@ export function useBaseQuery<TResult, TError = unknown>(
 
   const query = cache.query<TResult, TError>(key, config)
   const data = ref<TResult>()
+  const error = ref<TError>()
   const status = ref(query.state.status)
 
   const handler: SubscriptionHandler<TResult, TError> = state => {
     data.value = state.data
+    error.value = state.error
     status.value = status.value
   }
 
   onMounted(() => query.subscribe(handler))
   onUnmounted(() => query.unsubscribe(handler))
 
+  query.fetch()
+
   const isLoading = computed(() => status.value === QueryStatus.Loading)
   const isError = computed(() => status.value === QueryStatus.Error)
   const isSuccess = computed(() => status.value === QueryStatus.Success)
 
   return {
     data,
+    error,
     status,
     isError,
     isLoading,