Brightiron/testing improvements

.github/workflows/main.yml

@@ -11,6 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          cache: 'yarn'
       - name: Build UI for production
         run: |
           yarn install --frozen-lockfile
@@ -19,8 +22,11 @@ jobs:
         env:
           CI: false
       - name: Run unit tests
-        run: |
-          yarn test:unit
+        uses: ArtiomTr/jest-coverage-report-action@v2.0.5
+        with:
+          test-script: yarn test:unit
+          skip-step: install
+          package-manager: yarn
       - name: Prepare coverage badges
         run: |
           echo "COVERAGE_BRANCHES_PCT=$(echo $(jq .total.branches.pct coverage/coverage-summary.json))" >> $GITHUB_ENV

package.json

@@ -141,8 +141,8 @@
     "eject": "react-scripts eject",
     "start": "react-scripts start",
     "test": "react-scripts test",
-    "test:unit": "react-scripts test --testPathPattern=\"(\\.|/|-)unit\\.(test|spec)\\.[jt]sx?$\" --watchAll=false --bail --ci --coverage --maxWorkers=50% --forceExit",
-    "test:e2e": "react-scripts test --testPathPattern=\"(\\.|/|-)e2e\\.(test|spec)\\.[jt]sx?$\" --watchAll=false --bail --ci --forceExit",
+    "test:unit": "react-scripts test --testPathPattern=\"(\\.|/|-)unit\\.(test|spec)\\.[jt]sx?$\" --watchAll=false --bail --ci --coverage",
+    "test:e2e": "react-scripts test --testPathPattern=\"(\\.|/|-)e2e\\.(test|spec)\\.[jt]sx?$\" --watchAll=false --bail --ci",
     "lint": "eslint --config ./.eslintrc.js ./src/ --ext .jsx,.js,.tsx,.ts",
     "lint:fix": "prettier --write ./src/ & yarn lint --fix",
     "theme": "npx gulp less",

src/__tests__/App.unit.test.jsx

@@ -27,7 +27,7 @@ describe("<App/>", () => {
     expect(screen.getByText("Connect your wallet to stake OHM")).toBeInTheDocument();
   });
 
-  it.only("should not render an error message when user wallet is connected and cached but not locked", async () => {
+  it("should not render an error message when user wallet is connected and cached but not locked", async () => {
     Web3Modal.prototype.connect = jest.fn().mockImplementation(async () => {
       // mock connection promise that never resolves
       return new Promise(function (resolve, reject) {
@@ -48,7 +48,7 @@ describe("<App/>", () => {
     });
   });
 
-  it.only("should not render a connection error message when user wallet is not cached, i.e. user has not connected wallet yet", async () => {
+  it("should not render a connection error message when user wallet is not cached, i.e. user has not connected wallet yet", async () => {
     Web3Modal.prototype.connect = jest.fn();
     // no cached provider
     Web3Modal.prototype.cachedProvider = undefined;
@@ -61,7 +61,7 @@ describe("<App/>", () => {
     expect(errorMessage).toBeNull(); // expect its not found
   });
 
-  it.only("should render an error message when user wallet is connected and cached then locked", async () => {
+  it("should render an error message when user wallet is connected and cached then locked", async () => {
     Web3Modal.prototype.connect = jest.fn().mockImplementation(async () => {
       throw Error("Wallet Locked");
     });

src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap

@@ -52,7 +52,7 @@ exports[`<Sidebar/> should render component 1`] = `
                   >
                     <a
                       class="MuiTypography-root MuiLink-root MuiLink-underlineNone button-dapp-menu  MuiTypography-colorPrimary"
-                      href="/#/dashboard"
+                      href="/dashboard"
                     >
                       <h6
                         class="MuiTypography-root MuiTypography-h6"
@@ -82,7 +82,7 @@ exports[`<Sidebar/> should render component 1`] = `
                   >
                     <a
                       class="MuiTypography-root MuiLink-root MuiLink-underlineNone button-dapp-menu  MuiTypography-colorPrimary"
-                      href="/#/bonds"
+                      href="/bonds"
                     >
                       <h6
                         class="MuiTypography-root MuiTypography-h6"
@@ -119,7 +119,7 @@ exports[`<Sidebar/> should render component 1`] = `
                   >
                     <a
                       class="MuiTypography-root MuiLink-root MuiLink-underlineNone button-dapp-menu  MuiTypography-colorPrimary"
-                      href="/#/stake"
+                      href="/stake"
                     >
                       <h6
                         class="MuiTypography-root MuiTypography-h6"
@@ -149,7 +149,7 @@ exports[`<Sidebar/> should render component 1`] = `
                   >
                     <a
                       class="MuiTypography-root MuiLink-root MuiLink-underlineNone button-dapp-menu  MuiTypography-colorPrimary"
-                      href="/#/zap"
+                      href="/zap"
                     >
                       <h6
                         class="MuiTypography-root MuiTypography-h6"
@@ -179,7 +179,7 @@ exports[`<Sidebar/> should render component 1`] = `
                   >
                     <a
                       class="MuiTypography-root MuiLink-root MuiLink-underlineNone button-dapp-menu  MuiTypography-colorPrimary"
-                      href="/#/give"
+                      href="/give"
                     >
                       <h6
                         class="MuiTypography-root MuiTypography-h6"
@@ -218,7 +218,7 @@ exports[`<Sidebar/> should render component 1`] = `
                   >
                     <a
                       class="MuiTypography-root MuiLink-root MuiLink-underlineNone button-dapp-menu  MuiTypography-colorPrimary"
-                      href="/#/wrap"
+                      href="/wrap"
                     >
                       <h6
                         class="MuiTypography-root MuiTypography-h6"

src/setupTests.js

@@ -2,13 +2,16 @@ import "@testing-library/jest-dom/extend-expect";
 
 import { i18n } from "@lingui/core";
 import * as matchers from "jest-extended";
+import { en } from "make-plural/plurals";
+import { messages } from "src/locales/translations/olympus-frontend/en/messages";
 
 expect.extend(matchers);
 
 global.CSS = { supports: jest.fn() };
 
 beforeAll(() => {
-  i18n.load("en", {});
+  i18n.loadLocaleData("en", { plurals: en });
+  i18n.load("en", messages);
   i18n.activate("en");
 });
 

src/testHelpers.ts

@@ -0,0 +1,22 @@
+//import { MockProvider } from "ethereum-waffle";
+import { ethers } from "ethers";
+import Web3Modal from "web3modal";
+
+jest.mock("web3modal");
+
+const provider = new ethers.providers.StaticJsonRpcProvider();
+
+export const mockWeb3Context = {
+  connected: true,
+  networkId: 1,
+  provider: provider,
+  connect: jest.fn(),
+  disconnect: jest.fn(),
+  address: "0x49aFdD21097eE0c6e40d69e3233a73Ed76eD43e4",
+  hasCachedProvider: jest.fn(() => true),
+  connectionError: null,
+  networkName: "mainnet",
+  providerUri: "http://localhost:8545",
+  providerInitialized: true,
+  web3Modal: new Web3Modal(),
+};

src/testUtils.tsx

@@ -20,7 +20,7 @@ const customRender = (ui: ReactElement, store = defaultStore, options?: RenderOp
       <ReactQueryProvider>
         <Provider store={store}>
           <I18nProvider i18n={i18n}>
-            <BrowserRouter basename={"/#"}>
+            <BrowserRouter basename={"/"}>
               <ThemeProvider theme={lightTheme}>
                 <CssBaseline />
                 {children}
@@ -42,7 +42,7 @@ const renderRoute = function (route: string, store = defaultStore) {
       <ReactQueryProvider>
         <Provider store={store}>
           <I18nProvider i18n={i18n}>
-            <BrowserRouter basename={"/#"}>
+            <BrowserRouter basename={"/"}>
               <App />
             </BrowserRouter>
           </I18nProvider>

src/views/Stake/components/StakeArea/__tests__/StakeArea.unit.test.jsx

@@ -1,17 +1,72 @@
-import { render, screen } from "src/testUtils";
+import { BigNumber } from "ethers";
+import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
+import { useContractAllowance } from "src/hooks/useContractAllowance";
+import * as Index from "src/hooks/useCurrentIndex";
+import * as useWeb3Context from "src/hooks/web3Context";
+import { mockWeb3Context } from "src/testHelpers";
+import { act, fireEvent, render, screen } from "src/testUtils";
 
 import { StakeArea } from "../StakeArea";
 
-describe("<StakeArea/>", () => {
+let container;
+jest.mock("src/hooks/useContractAllowance");
+let data;
+afterEach(() => {
+  jest.clearAllMocks();
+  jest.restoreAllMocks();
+});
+
+describe("<StakeArea/> Disconnected", () => {
+  beforeEach(async () => {
+    data = jest.spyOn(useWeb3Context, "useWeb3Context");
+    data.mockReturnValue({ ...mockWeb3Context, connected: false });
+    await act(async () => {
+      ({ container } = render(<StakeArea />));
+    });
+  });
   it("should ask user to connect wallet", () => {
-    render(<StakeArea />);
+    expect(screen.getByText("Connect Wallet")).toBeInTheDocument();
+  });
+});
 
-    // there should be a header inviting user to migrate v1 tokens to v2
+describe("<StakeArea/> Connected no Approval", () => {
+  beforeEach(async () => {
+    data = jest.spyOn(useWeb3Context, "useWeb3Context");
+    data.mockReturnValue(mockWeb3Context);
+    useContractAllowance.mockReturnValue({ data: BigNumber.from(0) });
+    await act(async () => {
+      ({ container } = render(<StakeArea />));
+    });
+  });
+  it("should render the stake input Area when connected", async () => {
+    expect(screen.getByText("Unstaked Balance")).toBeInTheDocument();
+  });
+  it("should display unstake approval message when clicking unstake", async () => {
+    fireEvent.click(screen.getByText("Unstake"));
+    expect(await screen.findByText("Approve")).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+});
 
-    expect(screen.getByText("Connect Wallet")).toBeInTheDocument();
+describe("<StakeArea/> Connected with Approval", () => {
+  beforeEach(async () => {
+    data = jest.spyOn(useWeb3Context, "useWeb3Context");
+    data.mockReturnValue(mockWeb3Context);
+    useContractAllowance.mockReturnValue({ data: BigNumber.from(1000) });
+    Index.useCurrentIndex = jest.fn().mockReturnValue({ data: new DecimalBigNumber("10", 9) });
+    await act(async () => {
+      ({ container } = render(<StakeArea />));
+    });
+  });
+  it("should switch to gOHM when toggle is selected", async () => {
+    fireEvent.click(await screen.findByRole("checkbox"));
+    expect(screen.getByText("Stake to gOHM")).toBeInTheDocument();
+  });
 
-    // When there is a testing library for wallets that allows simulating user interactions
-    // we can extend this integration test with more steps such as
-    // clicking on Connect, choosing a wallet account and network.
+  it("gOHM conversion should appear correctly when Staking to gOHM", async () => {
+    fireEvent.click(await screen.findByRole("checkbox"));
+    expect(screen.getByText("Stake to gOHM")).toBeInTheDocument();
+    fireEvent.input(await screen.findByRole("textbox"), { target: { value: "2" } });
+    expect(screen.getByText("Stake 2 OHM → 0.2 gOHM")).toBeInTheDocument();
   });
 });

src/views/Stake/components/StakeArea/__tests__/StakeAreaHooks.unit.text.jsx

@@ -0,0 +1,76 @@
+import { fireEvent } from "@testing-library/react";
+import { BigNumber } from "ethers";
+import Messages from "src/components/Messages/Messages";
+import { useContractAllowance } from "src/hooks/useContractAllowance";
+import * as useWeb3Context from "src/hooks/web3Context";
+import { mockWeb3Context } from "src/testHelpers";
+import { act, render, screen } from "src/testUtils";
+
+import { StakeArea } from "../StakeArea";
+
+jest.mock("src/hooks/useContractAllowance");
+let container;
+
+beforeEach(async () => {
+  const data = jest.spyOn(useWeb3Context, "useWeb3Context");
+  useContractAllowance.mockReturnValue({ data: BigNumber.from(10000) });
+  data.mockReturnValue({
+    ...mockWeb3Context,
+    networkId: 1,
+  });
+
+  await act(async () => {
+    ({ container } = render(
+      <>
+        <Messages />
+        <StakeArea />
+      </>,
+    ));
+  });
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+  jest.restoreAllMocks();
+});
+
+describe("Check Stake to sOHM Error Messages", () => {
+  it("Error message with no amount", async () => {
+    fireEvent.click(await screen.getByText("Stake to sOHM"));
+    expect(await screen.findByText("Please enter a number")).toBeInTheDocument();
+  });
+
+  it("Error message with amount <=0", async () => {
+    fireEvent.input(await screen.findByRole("textbox"), { target: { value: "-1" } });
+    fireEvent.click(await screen.getByText("Stake to sOHM"));
+    expect(await screen.findByText("Please enter a number greater than 0")).toBeInTheDocument();
+  });
+
+  it("Error message amount > 0 but no wallet balance", async () => {
+    fireEvent.input(await screen.findByRole("textbox"), { target: { value: "100" } });
+    fireEvent.click(await screen.getByText("Stake to sOHM"));
+    expect(await screen.findByText("Please refresh your page and try again")).toBeInTheDocument();
+  });
+});
+
+describe("Check Unstake sOHM Error Messages", () => {
+  beforeEach(() => {
+    fireEvent.click(screen.getByText("Unstake"));
+  });
+  it("Error message with no amount", async () => {
+    fireEvent.click(await screen.getByText("Unstake sOHM"));
+    expect(await screen.findByText("Please enter a number")).toBeInTheDocument();
+  });
+
+  it("Error message with amount <=0", async () => {
+    fireEvent.input(await screen.findByRole("textbox"), { target: { value: "-1" } });
+    fireEvent.click(await screen.getByText("Unstake sOHM"));
+    expect(await screen.findByText("Please enter a number greater than 0")).toBeInTheDocument();
+  });
+
+  it("Error message amount > 0 but no wallet balance", async () => {
+    fireEvent.input(await screen.findByRole("textbox"), { target: { value: "100" } });
+    fireEvent.click(await screen.getByText("Unstake sOHM"));
+    expect(await screen.findByText("Please refresh your page and try again")).toBeInTheDocument();
+  });
+});