Merge pull request #1334 from bancorprotocol/add-overlapping-tests

Add create overlapping integration tests

.github/workflows/build_test.yaml

@@ -3,7 +3,6 @@ name: Build
 on:
   pull_request:
     types: [opened, reopened, synchronize]
-  push:
 
 jobs:
   build:

.github/workflows/test.yaml

@@ -3,7 +3,6 @@ name: Test
 on:
   pull_request:
     types: [opened, reopened, synchronize]
-  push:
 
 jobs:
   build:

README.md

@@ -47,14 +47,20 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
 # Test
 
-## Unit tests
+## Unit/Integration tests & coverage
 
 To launch the test runner, run the following command:
 
 ```bash
 yarn test
 ```
 
+If you wish to check the test coverage, run the following command:
+
+```bash
+yarn coverage
+```
+
 ## E2E tests
 
 To run the E2E tests, you must have a Tenderly API key to create and delete forks. You can set it in the `.env` file. Please refer to the [E2E readme](/e2e/README) for more information.

package.json

@@ -33,6 +33,7 @@
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
     "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^1.6.0",
     "autoprefixer": "^10.4.12",
     "body-scroll-lock": "^4.0.0-beta.0",
     "buffer": "^6.0.3",
@@ -65,6 +66,7 @@
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "mipd": "^0.0.7",
+    "msw": "^2.3.1",
     "postcss": "^8.4.31",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
@@ -95,6 +97,7 @@
     "serve": "vite preview",
     "pretest": "yarn compile-abis",
     "test": "vitest run --mode production",
+    "coverage": "yarn test --coverage",
     "pree2e": "yarn playwright install --with-deps chromium",
     "e2e": "playwright test",
     "lint": "eslint --ext .tsx,.ts .",
@@ -116,4 +119,4 @@
   "devDependencies": {
     "@types/d3": "^7.4.3"
   }
-}
+}

src/components/strategies/common/StrategyGraph.tsx

@@ -14,6 +14,7 @@ export const StrategyGraph: FC<Props> = ({ setShowGraph, children }) => {
     <m.article
       variants={items}
       key="createStrategyGraph"
+      data-testid="strategy-chart"
       className="rounded-10 bg-background-900 flex h-[550px] flex-col gap-20 p-20 md:sticky md:top-80 md:flex-1"
     >
       <header className="flex items-center justify-between">
@@ -22,6 +23,7 @@ export const StrategyGraph: FC<Props> = ({ setShowGraph, children }) => {
           className="bg-background-800 hover:border-background-600 gap-12 self-end"
           variant="secondary"
           size="md"
+          data-testid="close-chart"
           onClick={() => {
             carbonEvents.strategy.strategyChartClose(undefined);
             setShowGraph(false);

src/components/strategies/create/CreateLayout.tsx

@@ -57,6 +57,7 @@ export const CreateLayout: FC<Props> = (props) => {
                 carbonEvents.strategy.strategyChartOpen(undefined);
                 setShowGraph(true);
               }}
+              data-testid="open-chart"
               className="bg-background-800 grid size-40 place-items-center rounded-full"
             >
               <IconCandles className="size-18" />

src/components/strategies/overlapping/OverlappingMarketPrice.tsx

@@ -29,6 +29,7 @@ export const OverlappingMarketPrice: FC<Props> = (props) => {
         'text-12 font-weight-500 bg-background-800 hover:bg-background-700 flex items-center justify-between gap-8 rounded-full px-16 py-8',
         props.className
       )}
+      data-testid="edit-market-price"
       type="button"
     >
       <IconEdit className="size-16" />
@@ -92,6 +93,7 @@ export const OverlappingInitMarketPrice = (props: FieldProps) => {
   return (
     <form
       className={cn(props.className, style.form, 'flex flex-col gap-16 p-16')}
+      data-testid="user-price-form"
       onSubmit={setPrice}
     >
       {!externalPrice && <SetPriceText base={base} />}
@@ -135,12 +137,15 @@ export const OverlappingInitMarketPrice = (props: FieldProps) => {
           id={checkboxId}
           type="checkbox"
           className="size-18"
+          data-testid="approve-price-warnings"
           checked={approved}
           onChange={(e) => setApproved(e.target.checked)}
         />
         I've reviewed the warning(s) but choose to proceed.
       </label>
-      <Button type="submit">Confirm</Button>
+      <Button type="submit" data-testid="set-overlapping-price">
+        Confirm
+      </Button>
     </form>
   );
 };

src/components/strategies/overlapping/OverlappingSpread.tsx

@@ -119,6 +119,7 @@ export const OverlappingSpread: FC<Props> = (props) => {
               tabIndex={spread === option ? 0 : -1}
               onChange={() => selectSpread(option)}
               onFocus={() => selectSpread(option)}
+              data-testid={'spread-' + option}
             />
             <label
               htmlFor={'spread-' + option}

src/libs/testing-library/drivers/CreateOverlappingDriver.tsx

@@ -0,0 +1,53 @@
+import { Screen, within } from '@testing-library/dom';
+
+export class CreateOverlappingDriver {
+  constructor(private screen: Screen) {}
+
+  getStrategyChart() {
+    return {
+      closeChart: () => this.screen.getByTestId('close-chart'),
+      openChart: () => this.screen.getByTestId('open-chart'),
+      chart: () => this.screen.queryByTestId('strategy-chart'),
+    };
+  }
+
+  getOverlappingForm() {
+    return this.screen.getByTestId('create-strategy-form');
+  }
+
+  getOverlappingInput() {
+    const form = this.getOverlappingForm();
+    return {
+      min: () => within(form).getByTestId('input-min'),
+      max: () => within(form).getByTestId('input-max'),
+      spread: {
+        input: () => within(form).getByTestId('spread-input'),
+        default: () => within(form).getByTestId('spread-0.05'),
+        option: (value: string) => within(form).getByTestId(`spread-${value}`),
+      },
+      anchorRequired: () => within(form).queryByTestId('require-anchor'),
+      anchor: (anchor: 'buy' | 'sell') =>
+        within(form).getByTestId(`anchor-${anchor}`),
+      budget: () => within(form).getByTestId('input-budget'),
+      marketPriceIndicators: () =>
+        within(form).getAllByTestId('market-price-indication'),
+      approveWarnings: () => within(form).queryByTestId('approve-warnings'),
+    };
+  }
+
+  getUserPriceForm() {
+    return this.screen.getByTestId('user-price-form');
+  }
+
+  getUserPriceInput() {
+    return {
+      open: () => this.screen.getByTestId('edit-market-price'),
+      editPrice: () =>
+        within(this.getUserPriceForm()).getByTestId('input-price'),
+      approveWarning: () =>
+        within(this.getUserPriceForm()).getByTestId('approve-price-warnings'),
+      confirm: () =>
+        within(this.getUserPriceForm()).getByTestId('set-overlapping-price'),
+    };
+  }
+}

src/libs/testing-library/drivers/index.ts

@@ -0,0 +1 @@
+export { CreateOverlappingDriver } from './CreateOverlappingDriver';

src/libs/testing-library/index.tsx

@@ -3,9 +3,8 @@ import { render, RenderOptions } from '@testing-library/react';
 import { WagmiReactWrapper } from 'libs/wagmi';
 import { StoreProvider } from 'store';
 import { QueryProvider } from 'libs/queries';
-import { loadRouter } from './utils';
+import { loadRouter, type RouterRenderParams } from './utils';
 import { RouterProvider } from '@tanstack/react-router';
-import { RouterRenderParams } from './types';
 
 const AllTheProviders = ({ children }: { children: ReactNode }) => {
   return (
@@ -17,7 +16,19 @@ const AllTheProviders = ({ children }: { children: ReactNode }) => {
   );
 };
 
-const customRender = (
+/**
+ * Custom render function that wraps the component with predefined providers.
+ * This function is an extension of the `render` method from `@testing-library/react`.
+ * All the render options are provided for `wrapper`, which is predefined in this function.
+ *
+ * @param {ReactElement} ui The React element to render.
+ * @param {Omit<RenderOptions, 'wrapper'>} [options] Optional rendering options, excluding `wrapper`.
+ * @returns {RenderResult} The result of rendering the given React element.
+ *
+ * @example
+ * renderWithProviders(<MyComponent />);
+ */
+export const renderWithProviders = (
   ui: ReactElement,
   options?: Omit<RenderOptions, 'wrapper'>
 ) =>
@@ -39,14 +50,27 @@ const customRender = (
  * @param params.search - The optional search parameters to be included in the route. Object keys and values are encoded into a query string.
  
  * @returns {Promise<{container: RenderResult, router: Router}>} A promise that resolves to an object containing the `container` with the rendered output and the `router` instance.
+ * 
+ * @example
+ * // Render page
+ * const { router } = await renderWithRouter({
+ *   component: () => <CreateOverlappingStrategyPage />,
+ *   basePath: '/strategies/create/overlapping',
+ *   search: {
+ *     base: 'ETH',
+ *     quote: 'USDC',
+ *   },
+ * });
  */
 export const renderWithRouter = async (params: RouterRenderParams) => {
   const customRouter = await loadRouter(params);
   return {
-    container: customRender(<RouterProvider router={customRouter} />),
+    container: renderWithProviders(<RouterProvider router={customRouter} />),
     router: customRouter,
   };
 };
 
 export * from '@testing-library/react';
-export { customRender as render };
+export { userEvent } from '@testing-library/user-event';
+export * from './utils';
+export * from './drivers';

src/libs/testing-library/setup.ts

@@ -3,11 +3,13 @@ import { afterEach, vitest } from 'vitest';
 import { tokens } from './utils';
 import { cleanup } from '@testing-library/react';
 
-// Set up clean-up after each test. See issue https://github.com/vitest-dev/vitest/issues/1430
-afterEach(() => cleanup());
+afterEach(() => {
+  // Set up clean-up after each test. See issue https://github.com/vitest-dev/vitest/issues/1430
+  window.history.replaceState(null, 'root', '/');
+  cleanup();
+});
 
 // MOCK STORE PROVIDER CONTEXTS
-
 vitest.mock('store/useTokensStore.ts', async (importOriginal) => {
   const mod = await importOriginal<typeof import('store/useTokensStore.ts')>();
   const tokensMap = new Map(
@@ -30,7 +32,6 @@ vitest.mock('store/useTokensStore.ts', async (importOriginal) => {
 });
 
 // MOCK CARBON SDK
-
 vitest.mock('libs/sdk/index.ts', () => {
   return {
     carbonSDK: {
@@ -45,13 +46,6 @@ vitest.mock('libs/sdk/index.ts', () => {
   };
 });
 
-vitest.mock('@bancor/carbon-sdk/strategy-management', () => ({
-  MarginalPriceOptions: {
-    reset: 'RESET',
-    maintain: 'MAINTAIN',
-  },
-}));
-
 // MOCK WAGMI WALLET
 const mockedWallet = await vitest.hoisted(async () => {
   const { mock } = await import('wagmi/connectors');

src/libs/testing-library/utils/index.ts

@@ -0,0 +1,8 @@
+export {
+  marketRateHandler,
+  tokenListHandlers,
+  MockServer,
+  tokens,
+} from './mock';
+export { loadRouter } from './routing';
+export { type RouterRenderParams } from './types';