ARTESCA-11259: useChainedQuery tests

.github/workflows/tests.yml

@@ -0,0 +1,31 @@
+name: basic tests
+
+on:
+  push:
+    branches:
+      - 'user/**'
+      - 'feature/**'
+      - 'improvement/**'
+      - 'bugfix/**'
+      - 'w/**'
+      - 'q/**'
+      - 'hotfix/**'
+      - 'dependabot/**'
+  pull_request:
+    types:
+      - opened
+    branches:
+      - 'feature/bump-react-chained-query-version-to-**'
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Install node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+      - run: npm ci
+      - run: npm run test

README.md

@@ -12,20 +12,11 @@ By managing a queue and executing the request one after another, it could give t
 
 This `useChainedMutations` hook takes an array of mutations and a function to compute the variables for the next mutation in the chain. It returns an object containing a `mutate` function that triggers the chain of mutations, a `computeVariablesForNext` function that computes the variables for the next mutation, and an array of `mutationsWithRetry` that includes a retry function for each mutation.
 
-## Dependencies
-
-```json
-{
-  "peerDependencies": {
-    "react": "^17.0.0",
-    "react-query": "^3.0.0"
-  }
-}
-```
-
 ## Install
 
-TBD
+```bash
+npm install @scality/react-chained-query
+```
 
 ## Quickstart
 

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/react-chained-query",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A wrapper of react-query useQuery hook allowing chained queries.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/tests/testUtils.tsx

@@ -0,0 +1,15 @@
+import React, { PropsWithChildren } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { ChainedQueryProvider } from '../useChainedQuery';
+
+const client = new QueryClient();
+
+const wrapper = ({ children }: PropsWithChildren<{}>) => {
+  return (
+    <QueryClientProvider client={client}>
+      <ChainedQueryProvider>{children}</ChainedQueryProvider>
+    </QueryClientProvider>
+  );
+};
+
+export { client, wrapper };

src/useChainedMutations.spec.ts → src/tests/useChainedMutations.spec.ts

@@ -1,11 +1,5 @@
-/**
- * @jest-environment jsdom
- * @jest-environment-options {"url": "https://jestjs.io/"}
- */
-
-import { waitFor } from '@testing-library/react';
-import { useChainedMutations } from './useChainedMutations';
 import { act, renderHook } from '@testing-library/react-hooks';
+import { useChainedMutations } from '../useChainedMutations';
 
 const fn1 = jest.fn();
 const fn2 = jest.fn();

src/useChainedQuery.spec.tsx → src/tests/useChainedQuery.spec.tsx

@@ -4,19 +4,10 @@ import {
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
-import { renderHook, act } from '@testing-library/react-hooks';
-import { PropsWithChildren, useEffect, useState } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { ChainedQueryProvider, useChainedQuery } from './useChainedQuery';
-
-const client = new QueryClient();
-const wrapper = ({ children }: PropsWithChildren<{}>) => {
-  return (
-    <QueryClientProvider client={client}>
-      <ChainedQueryProvider>{children}</ChainedQueryProvider>
-    </QueryClientProvider>
-  );
-};
+import { act, renderHook } from '@testing-library/react-hooks';
+import React, { useEffect, useState } from 'react';
+import { useChainedQuery } from '../useChainedQuery';
+import { client, wrapper } from './testUtils';
 
 describe('useChainedQuery', () => {
   beforeEach(() => {
@@ -158,26 +149,16 @@ describe('useChainedQuery', () => {
     };
 
     render(<Component />, { wrapper });
-    //E
 
-    await waitFor(() =>
-      expect(screen.getByText('component1 loading')).toBeInTheDocument(),
-    );
     //V
     expect(fn1).toHaveBeenCalledTimes(1);
     expect(fn2).toHaveBeenCalledTimes(0);
     expect(fn3).toHaveBeenCalledTimes(0);
-    expect(screen.getByText('component2 idle')).toBeInTheDocument();
-    expect(screen.getByText('component3 idle')).toBeInTheDocument();
     //E
     await waitForElementToBeRemoved(() => screen.getByText(/component2/));
-    await waitFor(() =>
-      expect(screen.getByText('component3 loading')).toBeInTheDocument(),
-    );
-    //V
     expect(fn1).toHaveBeenCalledTimes(1);
     expect(fn2).toHaveBeenCalledTimes(0);
-    expect(fn3).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(fn3).toHaveBeenCalledTimes(1));
   });
 
   it('should raise an error when using the hook outside the ChainedQueryProvider', () => {

src/useChainedQuery.tsx

@@ -4,7 +4,7 @@ import {
   useQueryClient,
   UseQueryOptions,
 } from 'react-query';
-import {
+import React, {
   createContext,
   PropsWithChildren,
   useContext,