Merge pull request #457 from alovajs/feature/v3.0.0

chore: resolve merging problem

.changeset/sharp-frogs-wash.md

@@ -0,0 +1,7 @@
+---
+'@alova/vue-options': patch
+'@alova/shared': patch
+'alova': patch
+---
+
+fix scenes hooks using in vue options style such as usePagination

.github/workflows/release-next.yml

@@ -8,7 +8,6 @@ on:
 
 jobs:
   quality:
-    # server: ubuntu-latest
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -61,21 +60,14 @@ jobs:
       - name: Install deps
         run: pnpm install
 
-      # - name: Test SSR
-      #   run: npm run test:node
-
-      # This has contained test and upload coverage
-      # - name: Coverage
-      #   run: npm run test:coveralls
-
       - name: Create Release Pull Request or Publish
         id: changesets
         uses: changesets/action@v1
         with:
           # Note: pnpm install after versioning is necessary to refresh lockfile
           setupGitUser: true
           version: pnpm run changeset:version
-          publish: pnpm run release
+          publish: pnpm run test:coveralls && pnpm run release
           commit: 'ci: release next'
           title: 'ci: release next'
         env:

coveralls.yml

@@ -0,0 +1,2 @@
+service_name: github-action
+repo_token: k4mCwLORlEDAb7wQcYXgMbvAwx2CadBOE

jest.config.ts

@@ -6,15 +6,12 @@ const config: Config = {
 
   clearMocks: true,
 
-  maxWorkers: 2,
-  maxConcurrency: 2,
-
-  coveragePathIgnorePatterns: ['\\\\node_modules\\\\', '/node_modules/', 'internal/'],
+  coveragePathIgnorePatterns: ['\\\\node_modules\\\\', '/node_modules/', 'internal/', 'test/'],
   // Indicates which provider should be used to instrument code for coverage
-  // coverageProvider: 'v8',
+  coverageProvider: 'v8',
 
   // A list of reporter names that Jest uses when writing coverage reports
-  // coverageReporters: ['json', 'text', 'lcov', 'clover'],
+  coverageReporters: ['json', 'text', 'lcov', 'clover'],
 
   // An object that configures minimum threshold enforcement for coverage results
   // coverageThreshold: undefined,

package.json

@@ -38,17 +38,18 @@
     "test": "turbo run test",
     "test:coverage": "jest --coverage",
     "lint": "eslint . --ext .js,.ts ",
-    "lint:fix": "npm run lint -- --fix",
+    "lint:fix": "pnpm run lint -- --fix",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
     "prepare": "husky",
     "commit": "git-cz && git push",
+    "coveralls": "pnpm run test:coverage && coveralls < coverage/lcov.info",
     "changeset": "changeset",
     "changeset:alpha": "changeset pre enter alpha",
     "changeset:beta": "changeset pre enter beta",
     "changeset:pre.exit": "changeset pre exit",
     "changeset:version": "changeset version",
-    "release": "pnpm build && changeset publish"
+    "release": "pnpm run build && changeset publish"
   },
   "author": "Scott Hu",
   "license": "MIT",

packages/alova/typings/index.d.ts

@@ -245,16 +245,18 @@ export interface StatesHook<SE extends StatesExport<any>> {
    * @param initialValue 初始数据
    * @returns 状态值
    */
-  create: (initialValue: any, referingObject: ReferingObject) => SE['State'];
+  create: (initialValue: any, key: string, referingObject: ReferingObject) => SE['State'];
 
   /**
    * create computed state
    * @param initialValue initial data
+   * @param key attribute name
    * @param referingObject refering object
    */
   computed: (
     getter: () => any,
     deps: (SE['StateExport'] | SE['ComputedExport'])[],
+    key: string,
     referingObject: ReferingObject
   ) => SE['Computed'];
 
@@ -273,6 +275,7 @@ export interface StatesHook<SE extends StatesExport<any>> {
    * 更新状态值
    * @param newVal 新的数据集合
    * @param state 原状态值
+   * @param key attribute name
    * @param @param referingObject refering object
    */
   update: (newVal: any, state: SE['State'], key: string, referingObject: ReferingObject) => void;

packages/client/src/statesHook/vue.ts

@@ -44,9 +44,13 @@ export default {
     });
   },
   onMounted: callback => {
-    onMounted(callback);
+    if (getCurrentInstance()) {
+      onMounted(callback);
+    } else {
+      setTimeoutFn(callback, 10);
+    }
   },
   onUnmounted: callback => {
-    onUnmounted(callback);
+    getCurrentInstance() && onUnmounted(callback);
   }
 } as StatesHook<VueHookExportType<unknown>>;

packages/client/test/react/core/useRequest.spec.tsx

@@ -6,7 +6,7 @@ import { key } from '@alova/shared/function';
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React, { ReactElement, StrictMode } from 'react';
-import { Result, delay, untilCbCalled } from 'root/testUtils';
+import { Result, delay } from 'root/testUtils';
 
 const StrictModeReact = StrictMode as any;
 
@@ -76,11 +76,11 @@ describe('useRequest hook with react', () => {
 
     render((<Page />) as ReactElement<any, any>);
     expect(screen.getByRole('status')).toHaveTextContent('loading');
-    await untilCbCalled(setTimeout, 1000);
-    const loadingEl = await screen.findByText(/loaded/);
-    expect(loadingEl).toHaveTextContent('loaded');
-    expect(screen.getByRole('path')).toHaveTextContent('/unit-test');
-    expect(screen.getByRole('method')).toHaveTextContent('GET');
+    await waitFor(() => {
+      expect(screen.getByRole('status')).toHaveTextContent('loaded');
+      expect(screen.getByRole('path')).toHaveTextContent('/unit-test');
+      expect(screen.getByRole('method')).toHaveTextContent('GET');
+    });
   });
 
   test("shouldn't send request when set `immediate=false`", async () => {
@@ -344,23 +344,7 @@ describe('useRequest hook with react', () => {
       );
     }
     render((<Page />) as ReactElement<any, any>);
-    await delay(100);
-    fireEvent.click(screen.getByRole('btnUpd'));
-    await waitFor(() => {
-      expect(screen.getByRole('path')).toHaveTextContent('/abc0');
-    });
-    fireEvent.click(screen.getByRole('btnAbort'));
-    await waitFor(() => {
-      expect(screen.getByRole('error')).toHaveTextContent('The operation was aborted.');
-    });
-
-    // 再一次进行中断
-    fireEvent.click(screen.getByRole('btnSend'));
-    await delay(100);
-    fireEvent.click(screen.getByRole('btnUpd'));
-    await waitFor(() => {
-      expect(screen.getByRole('path')).toHaveTextContent('/abc1');
-    });
+    await delay(10);
     fireEvent.click(screen.getByRole('btnAbort'));
     await waitFor(() => {
       expect(screen.getByRole('error')).toHaveTextContent('The operation was aborted.');

packages/client/test/react/core/useWatcher.spec.tsx

@@ -130,11 +130,11 @@ describe('useWatcher hook with react', () => {
     expect(screen.getByRole('status')).toHaveTextContent('loaded');
     expect(screen.getByRole('path')).toHaveTextContent('');
 
-    await untilCbCalled(setTimeout); // 由于reactHook中异步更改触发条件，因此需要异步改变状态才可以触发请求
+    await delay(); // 由于reactHook中异步更改触发条件，因此需要异步改变状态才可以触发请求
     fireEvent.click(screen.getByRole('button1'));
-
-    await untilCbCalled(setTimeout);
-    fireEvent.click(screen.getByRole('button2'));
+    delay().then(() => {
+      fireEvent.click(screen.getByRole('button2'));
+    });
     await waitFor(() => {
       expect(screen.getByRole('status')).toHaveTextContent('loaded');
       expect(screen.getByRole('path')).toHaveTextContent('/unit-test');
@@ -214,11 +214,11 @@ describe('useWatcher hook with react', () => {
     expect(screen.getByRole('status')).toHaveTextContent('loaded');
     expect(screen.getByRole('path')).toHaveTextContent('');
 
-    await untilCbCalled(setTimeout); // 由于reactHook中异步更改触发条件，因此需要异步改变状态才可以触发请求
+    await delay(); // 由于reactHook中异步更改触发条件，因此需要异步改变状态才可以触发请求
     fireEvent.click(screen.getByRole('button1'));
-
-    await untilCbCalled(setTimeout);
-    fireEvent.click(screen.getByRole('button2'));
+    delay().then(() => {
+      fireEvent.click(screen.getByRole('button2'));
+    });
     await waitFor(() => {
       expect(screen.getByRole('status')).toHaveTextContent('loaded');
       expect(screen.getByRole('path')).toHaveTextContent('/unit-test');
@@ -289,12 +289,11 @@ describe('useWatcher hook with react', () => {
     expect(screen.getByRole('status')).toHaveTextContent('loaded');
     expect(screen.getByRole('path')).toHaveTextContent('');
 
-    await untilCbCalled(setTimeout); // 由于reactHook中异步更改触发条件，因此需要异步改变状态才可以触发请求
+    await delay(); // 由于reactHook中异步更改触发条件，因此需要异步改变状态才可以触发请求
     fireEvent.click(screen.getByRole('button1'));
-
-    await untilCbCalled(setTimeout);
-    fireEvent.click(screen.getByRole('button2'));
-    await delay(1000);
+    delay().then(() => {
+      fireEvent.click(screen.getByRole('button2'));
+    });
     await waitFor(() => {
       expect(screen.getByRole('status')).toHaveTextContent('loaded');
       expect(screen.getByRole('path')).toHaveTextContent('/unit-test-1s');

packages/client/test/react/useAutoRequest.spec.tsx

@@ -4,7 +4,7 @@ import { act, render, screen, waitFor } from '@testing-library/react';
 import { createAlova } from 'alova';
 import ReactHook from 'alova/react';
 import React, { ReactElement } from 'react';
-import { untilCbCalled } from 'root/testUtils';
+import { delay } from 'root/testUtils';
 import { mockRequestAdapter } from '~/test/mockData';
 
 const alovaInst = createAlova({
@@ -193,13 +193,11 @@ describe('react => useAutoRequest', () => {
     });
 
     tag = 'polling 1';
-    await untilCbCalled(setTimeout, 100);
     await waitFor(() => {
       expect(screen.getByRole('data')).toHaveTextContent(JSON.stringify({ tag }));
     });
 
     tag = 'polling 2';
-    await untilCbCalled(setTimeout, 100);
     await waitFor(() => {
       expect(screen.getByRole('data')).toHaveTextContent(JSON.stringify({ tag }));
     });
@@ -286,12 +284,16 @@ describe('react => useAutoRequest', () => {
     // 默认1000ms内只有第一次会触发请求
     tag = 'online';
     mockGlobalEventEmit('online');
-    await untilCbCalled(setTimeout, 100);
-    tag = 'visibilitychange';
-    mockGlobalEventEmit('visibilitychange');
-    await untilCbCalled(setTimeout, 100);
-    tag = 'focus';
-    mockGlobalEventEmit('focus');
+    delay(100)
+      .then(() => {
+        tag = 'visibilitychange';
+        mockGlobalEventEmit('visibilitychange');
+      })
+      .then(() => delay(100))
+      .then(() => {
+        tag = 'focus';
+        mockGlobalEventEmit('focus');
+      });
     await waitFor(() => {
       expect(screen.getByRole('data')).toHaveTextContent(JSON.stringify({ tag: 'online' }));
     });

packages/client/test/react/usePagination.spec.tsx

@@ -173,7 +173,6 @@ describe('react => usePagination', () => {
     });
 
     fireEvent.click(screen.getByRole('reload1'));
-    await delay(0);
     await waitFor(async () => {
       let cache = await queryCache(getter1(page + 1, pageSize));
       expect(cache?.list).toBeUndefined();
@@ -429,7 +428,6 @@ describe('react => usePagination', () => {
       expect(cache?.list).toEqual(generateContinuousNumbers(11, 8));
       expect(fetchMockFn).toHaveBeenCalledTimes(2);
     });
-    total;
 
     fireEvent.click(screen.getByRole('batchInsert1'));
     total += 2;
@@ -440,8 +438,9 @@ describe('react => usePagination', () => {
     });
 
     // 正在重新fetch下一页数据，但还没响应，此时翻页到下一页
-    await delay(20);
-    fireEvent.click(screen.getByRole('setPage'));
+    delay(20).then(() => {
+      fireEvent.click(screen.getByRole('setPage'));
+    });
     // 等待fetch
     await waitFor(() => {
       expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify(generateContinuousNumbers(9, 6))); // 有两项被挤到后面一页了
@@ -793,8 +792,9 @@ describe('react => usePagination', () => {
     );
 
     // 正在重新fetch下一页数据，但还没响应（响应有50ms延迟），此时翻页到下一页
-    await delay(10);
-    fireEvent.click(screen.getByRole('setPage'));
+    delay(10).then(() => {
+      fireEvent.click(screen.getByRole('setPage'));
+    });
     await waitFor(() => {
       // 有两项用于填补前一页数据了
       expect(screen.getByRole('response')).toHaveTextContent(JSON.stringify([10, 11]));