From 5bd2cfacdffafdcd39732657a9f64577117b4c13 Mon Sep 17 00:00:00 2001 From: Applebee's <80423742+appleseed-iii@users.noreply.github.com> Date: Wed, 30 Nov 2022 07:56:37 -0600 Subject: [PATCH 01/33] Migrate from CRA to Vite (#2252) * vite demo * updating test imports * updating tests * fixing build * update test commands * update gh workflow * process.env doesnt exist in vite * fixing ligui issues * remove unused files. fix tests * remove unused * --reporter flag * file location * merge alpha * resolve conflicts * updating tests * resolving test issues * fixing remaining tests * env var * add path to download report Co-authored-by: brightiron Co-authored-by: brightiron <95196612+brightiron@users.noreply.github.com> --- .github/workflows/coverageBadges.yml | 29 +- .github/workflows/main.yml | 59 +- public/index.html => index.html | 9 +- package.json | 41 +- src/App.tsx | 1 - src/Root.tsx | 21 +- src/__tests__/App.unit.test.jsx | 140 - src/__tests__/Root.unit.test.tsx | 10 - src/components/CallToAction/CallToAction.tsx | 7 +- .../__tests__/CallToAction.unit.test.tsx | 5 +- .../CallToAction.unit.test.tsx.snap | 137 +- src/components/Chart/ExpandedChart.tsx | 3 +- .../Chart/__tests__/Chart.unit.test.tsx | 1 + .../ConnectButton/ConnectButton.tsx | 5 +- src/components/Migration/MigrationModal.tsx | 53 +- .../Migration/MigrationModalSingle.tsx | 45 +- .../__tests__/MigrationModal.unit.test.jsx | 16 +- .../MigrationModalSingle.unit.test.tsx.snap | 17 +- src/components/Sidebar/NavContent.tsx | 27 +- .../__snapshots__/Sidebar.unit.test.tsx.snap | 1099 +- .../TokenAllowanceGuard.tsx | 3 +- src/components/TopBar/ThemeSwitch.tsx | 3 +- src/components/TopBar/Wallet/GetOhm.tsx | 25 +- .../TopBar/Wallet/Info/Proposals.tsx | 3 +- .../Wallet/__tests__/Info.unit.test.tsx | 9 +- .../Wallet/__tests__/News.unit.test.jsx | 7 +- .../Wallet/__tests__/Proposals.unit.test.jsx | 13 +- .../TransactionHistory.unit.test.jsx | 28 +- .../Wallet/__tests__/index.unit.test.tsx | 72 +- .../TopBar/Wallet/hooks/useFaucet.ts | 7 +- src/components/TopBar/Wallet/index.tsx | 18 +- .../DecimalBigNumber.unit.test.ts | 1 + src/helpers/Migration.unit.test.js | 3 +- .../environment/Environment/Environment.ts | 2 +- .../Environment/Environment.unit.test.ts | 16 +- src/helpers/index.unit.test.js | 27 - src/hooks/useGoogleAnalytics.ts | 2 +- src/hooks/useZapExecute.ts | 38 +- src/hooks/wagmi.ts | 2 +- src/lib/covalent.ts | 2 +- src/locales/.gitignore | 1 - src/locales/index.ts | 53 - src/locales/translations | 1 + src/setupTests.tsx | 68 + src/slices/PendingTxnsSlice.ts | 11 +- src/testHelpers.ts | 214 +- src/testUtils.tsx | 60 +- src/testWagmiUtils.ts | 140 + src/themes/fonts.js | 6 +- src/views/404/NotFound.tsx | 5 +- .../__snapshots__/NotFound.unit.test.tsx.snap | 47 +- src/views/Bond/Bond.tsx | 9 +- src/views/Bond/__tests__/Bond.unit.test.jsx | 153 +- .../Bond/__tests__/InverseBond.unit.test.jsx | 136 +- src/views/Bond/components/BondInfoText.tsx | 6 +- src/views/Bond/components/BondList.tsx | 70 +- .../Bond/components/BondModal/BondModal.tsx | 7 +- .../BondInputArea/BondInputArea.tsx | 28 +- .../BondInputArea/hooks/usePurchaseBond.ts | 24 +- .../components/BondSettingsModal.tsx | 13 +- .../Bond/components/ClaimBonds/ClaimBonds.tsx | 31 +- .../components/ClaimBonds/ClaimBondsV3.tsx | 23 +- .../ClaimBonds/hooks/useClaimBonds.ts | 11 +- .../ClaimBonds/hooks/useClaimBondsV3.ts | 11 +- src/views/Bond/hooks/useLiveBonds.ts | 1 - .../Bridge/__tests__/Bridge.unit.test.tsx | 4 +- src/views/Range/RangeConfirmationModal.tsx | 16 +- src/views/Range/RangeInputForm.tsx | 7 +- .../__tests__/{Range.tsx => Range.test.tsx} | 148 +- ...ondsLower.tsx => RangeBondsLower.test.tsx} | 54 +- .../Range/__tests__/RangeBondsUpper.test.tsx | 183 + src/views/Range/__tests__/RangeBondsUpper.tsx | 132 - src/views/Range/hooks.tsx | 7 +- src/views/Range/index.tsx | 7 +- src/views/Stake/__tests__/Stake.unit.test.tsx | 13 +- .../Stake/__tests__/StakeMobile.unit.test.jsx | 9 +- .../__snapshots__/Stake.unit.test.tsx.snap | 9216 ++++---- .../StakeMobile.unit.test.jsx.snap | 4618 ++-- .../ExternalStakePools/ExternalStakePools.tsx | 23 +- .../BalancerBasedPools.unit.test.jsx | 39 +- .../__tests__/UniswapBasedPools.unit.test.jsx | 18 +- .../__tests__/StakeArea.unit.test.jsx | 70 +- .../__tests__/StakeAreaHooks.unit.text.jsx | 38 +- .../StakeArea/__tests__/Wrap.unit.test.jsx | 38 +- .../__tests__/RebaseTimer.unit.test.tsx | 5 +- .../RebaseTimer.unit.test.tsx.snap | 25 +- .../StakeArea/components/StakeBalances.tsx | 31 +- .../components/StakeFiveDayYield.tsx | 3 +- .../StakeInputArea/StakeInputArea.tsx | 13 +- .../StakeInputArea/components/TokenModal.tsx | 3 +- .../StakeInputArea/hooks/useStakeToken.ts | 15 +- .../StakeInputArea/hooks/useUnstakeToken.ts | 15 +- .../components/StakeNextRebaseAmount.tsx | 3 +- .../StakeArea/components/StakeRebaseYield.tsx | 3 +- .../__tests__/StakeBalances.unit.test.jsx | 22 +- .../StakeBalances.unit.test.jsx.snap | 457 +- .../TreasuryDashboard.unit.test.tsx.snap | 2056 +- .../TreasuryMobile.unit.test.tsx.snap | 2056 +- .../components/Graph/ChartCard.tsx | 5 +- .../Graph/LiquidBackingComparisonGraph.tsx | 11 +- .../components/Graph/OwnedLiquidityGraph.tsx | 5 +- .../components/Graph/TreasuryAssets.tsx | 5 +- .../components/Graph/TreasuryAssetsGraph.tsx | 15 +- .../components/Graph/TreasuryAssetsTable.tsx | 31 +- .../components/KnownIssues/KnownIssues.tsx | 27 +- .../components/Metric/Metric.tsx | 51 +- src/views/V1-Stake/V1-Stake.jsx | 41 +- .../V1-Stake/__tests__/V1-Stake.unit.test.tsx | 4 +- .../__snapshots__/V1-Stake.unit.test.tsx.snap | 18967 ++++++++-------- .../WrapInputArea/hooks/useWrapSohm.tsx | 16 +- src/views/Zap/SlippageModal.tsx | 5 +- tsconfig.json | 5 +- vite-env.d.ts | 1 + vite.config.js | 59 + yarn.lock | 7055 ++---- 115 files changed, 22257 insertions(+), 26528 deletions(-) rename public/index.html => index.html (73%) delete mode 100755 src/__tests__/App.unit.test.jsx delete mode 100644 src/__tests__/Root.unit.test.tsx delete mode 100755 src/helpers/index.unit.test.js delete mode 100644 src/locales/.gitignore delete mode 100644 src/locales/index.ts create mode 160000 src/locales/translations create mode 100644 src/setupTests.tsx create mode 100644 src/testWagmiUtils.ts rename src/views/Range/__tests__/{Range.tsx => Range.test.tsx} (65%) rename src/views/Range/__tests__/{RangeBondsLower.tsx => RangeBondsLower.test.tsx} (69%) create mode 100644 src/views/Range/__tests__/RangeBondsUpper.test.tsx delete mode 100644 src/views/Range/__tests__/RangeBondsUpper.tsx create mode 100644 vite-env.d.ts create mode 100644 vite.config.js diff --git a/.github/workflows/coverageBadges.yml b/.github/workflows/coverageBadges.yml index d1b6c97e5f..e00bd61804 100644 --- a/.github/workflows/coverageBadges.yml +++ b/.github/workflows/coverageBadges.yml @@ -7,19 +7,19 @@ jobs: test-branch: runs-on: ubuntu-latest steps: - - name: Checkout front end code. - uses: actions/checkout@v3 - with: - ref: ${{ github.ref}} - - name: Build UI - run: yarn install --frozen-lockfile - - name: Run unit tests - run: yarn test:unit --silent --ci --json --coverage --testLocationInResults --maxWorkers=2 --outputFile=branch-report.json - - name: Upload Report - uses: actions/upload-artifact@v3 - with: - name: branch-report - path: branch-report.json + - name: Checkout front end code. + uses: actions/checkout@v3 + with: + ref: ${{ github.ref}} + - name: Build UI + run: yarn install --frozen-lockfile + - name: Run unit tests + run: yarn test:unit --reporter=json --outputFile=branch-report.json + - name: Upload Report + uses: actions/upload-artifact@v3 + with: + name: branch-report + path: branch-report.json prepareBadges: runs-on: ubuntu-latest needs: [test-branch] @@ -85,6 +85,3 @@ jobs: color: blue namedLogo: jest logoColor: lightblue - - - diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 654a5f4eae..d184dbd51b 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -8,50 +8,52 @@ jobs: test-base: runs-on: ubuntu-latest steps: - - name: Checkout front end code. - uses: actions/checkout@v3 - with: - ref: ${{ github.base_ref}} - - name: Build UI - run: yarn install --frozen-lockfile - - name: Run unit tests - run: yarn test:unit --silent --ci --json --coverage --testLocationInResults --maxWorkers=2 --outputFile=base-report.json - - name: Upload Report - uses: actions/upload-artifact@v3 - with: - name: base-report - path: base-report.json + - name: Checkout front end code. + uses: actions/checkout@v3 + with: + ref: ${{ github.base_ref}} + - name: Build UI + run: yarn install --frozen-lockfile + - name: Run unit tests + run: yarn test:unit --reporter=json --outputFile=base-report.json + - name: Upload Report + uses: actions/upload-artifact@v3 + with: + name: base-report + path: base-report.json test-branch: runs-on: ubuntu-latest steps: - - name: Checkout front end code. - uses: actions/checkout@v3 - with: - ref: ${{ github.ref}} - - name: Build UI - run: yarn install --frozen-lockfile - - name: Run unit tests - run: yarn test:unit --silent --ci --json --coverage --testLocationInResults --maxWorkers=2 --outputFile=branch-report.json - - name: Upload Report - uses: actions/upload-artifact@v3 - with: - name: branch-report - path: branch-report.json + - name: Checkout front end code. + uses: actions/checkout@v3 + with: + ref: ${{ github.ref}} + - name: Build UI + run: yarn install --frozen-lockfile + - name: Run unit tests + run: yarn test:unit --reporter=json --outputFile=branch-report.json + - name: Upload Report + uses: actions/upload-artifact@v3 + with: + name: branch-report + path: branch-report.json coverageReport: runs-on: ubuntu-latest needs: [test-base, test-branch] permissions: pull-requests: write contents: write - steps: + steps: - name: Download Base Report uses: actions/download-artifact@v3 with: name: base-report + path: base-report.json - name: Download Branch Report uses: actions/download-artifact@v3 with: name: branch-report + path: branch-report.json - name: Generate Coverage Report uses: ArtiomTr/jest-coverage-report-action@v2 with: @@ -61,6 +63,3 @@ jobs: coverage-file: branch-report.json base-coverage-file: base-report.json annotations: none - - - diff --git a/public/index.html b/index.html similarity index 73% rename from public/index.html rename to index.html index 49a7039b9d..2c783dcb1a 100644 --- a/public/index.html +++ b/index.html @@ -10,14 +10,14 @@ - + - + - + OlympusDAO @@ -25,9 +25,10 @@ - +
+ \ No newline at end of file diff --git a/package.json b/package.json index 77be79c9eb..a33c088a82 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,6 @@ "react-markdown": "^8.0.3", "react-redux": "^8.0.4", "react-router-dom": "^6.3.0", - "react-scripts": "^5.0.1", "react-step-progress-bar": "^1.0.3", "react-uid": "^2.3.2", "recharts": "^2.1.14", @@ -85,6 +84,8 @@ "@babel/plugin-transform-regenerator": "^7.18.6", "@babel/preset-react": "^7.18.6", "@babel/runtime": "^7.19.0", + "@esbuild-plugins/node-globals-polyfill": "^0.1.1", + "@esbuild-plugins/node-modules-polyfill": "^0.1.4", "@ethersproject/abi": "^5.7.0", "@ethersproject/bytes": "^5.6.1", "@graphql-codegen/cli": "2.13.6", @@ -92,13 +93,11 @@ "@graphql-codegen/typescript-operations": "^2.5.3", "@graphql-codegen/typescript-react-apollo": "3.3.6", "@graphql-codegen/typescript-react-query": "^4.0.4", - "@lingui/cli": "^3.14.0", - "@lingui/core": "^3.13.0", - "@lingui/macro": "^3.14.0", "@tanstack/react-query-devtools": "^4.2.3", "@testing-library/dom": "^8.18.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12.1.5", + "@testing-library/user-event": "^14.4.3", "@typechain/ethers-v5": "^10.1.0", "@types/css-mediaquery": "^0.1.1", "@types/get-value": "^3.0.3", @@ -113,6 +112,9 @@ "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^5.42.1", "@typescript-eslint/parser": "^5.39.0", + "@vitejs/plugin-react": "^2.0.1", + "@vitest/coverage-c8": "^0.23.2", + "@vitest/ui": "^0.23.1", "assert": "^2.0.0", "autoprefixer": "^10.4.13", "babel-plugin-macros": "^3.1.0", @@ -131,11 +133,13 @@ "eslint-plugin-simple-import-sort": "^8.0.0", "eslint-plugin-unused-imports": "^2.0.0", "fast-check": "^3.3.0", + "happy-dom": "^6.0.4", "https-browserify": "^1.0.0", "husky": "^8.0.1", "jest": "^29.0.3", "jest-extended": "^3.1.0", "jest-when": "^3.5.1", + "jsdom": "^20.0.0", "less-plugin-npm-import": "^2.1.0", "lint-staged": "^13.0.3", "node-watch": "^0.7.1", @@ -146,39 +150,36 @@ "prop-types": "^15.8.1", "react-app-rewired": "^2.2.1", "resize-observer-polyfill": "^1.5.1", + "rollup-plugin-polyfill-node": "^0.10.2", "sass": "^1.55.0", "shelljs": "^0.8.5", "stream-browserify": "^3.0.0", "stream-http": "^3.2.0", "type-graphql": "^1.1.1", "typechain": "^8.1.0", - "url": "^0.11.0" + "url": "^0.11.0", + "vite": "^3.0.9", + "vite-plugin-svgr": "^2.2.1", + "vite-tsconfig-paths": "^3.5.0", + "vitest": "^0.23.1" }, "scripts": { - "build": "yarn lingui:prepare && yarn lingui:extract && yarn lingui:compile && GENERATE_SOURCEMAP=false react-app-rewired build", + "build": "yarn vite build", "eject": "react-app-rewired eject", - "start": "yarn lingui:prepare && react-app-rewired start", - "test": "react-scripts test --maxWorkers=2 --transformIgnorePatterns \"node_modules/(?!@rainbow-me)/\"", - "test:unit": "react-scripts test --maxWorkers=2 --watchAll=false --bail --ci --coverage --transformIgnorePatterns \"node_modules/(?!@rainbow-me)/\" ", - "test:e2e": "react-scripts test --watchAll=false --bail --ci", + "start": "yarn vite dev", + "test": "vitest", + "test:unit": "vitest --coverage", + "test:e2e": "vitest --watchAll=false", "lint": "eslint --config ./.eslintrc.js ./src/ --ext .jsx,.js,.tsx,.ts", "lint:fix": "prettier --write ./src/ & yarn lint --fix", "theme": "npx gulp less", "watch": "node ./scripts/watch.js", - "snapshot": "react-scripts test --updateSnapshot --maxWorkers=2 --transformIgnorePatterns \"node_modules/(?!@rainbow-me)/\"", + "snapshot": "vitest -u ", "predocker-start": "docker build -t olympus-frontend -f Dockerfile .", "docker-start": "yarn run postinstall && docker run -it --rm -v `pwd`/src:/usr/src/app/src -v `pwd`/public:/usr/src/app/public -p 3000:3000 olympus-frontend", "stats": "yarn build --stats && npx webpack-bundle-analyzer ./build/bundle-stats.json", - "lingui:extract": "lingui extract", - "lingui:compile": "lingui compile", - "lingui:branch:main": "cd src/locales/translations && git checkout main && yarn lingui:fetch", - "lingui:branch:develop": "cd src/locales/translations && git checkout develop && yarn lingui:fetch", - "lingui:branch:translators": "cd src/locales/translations && git checkout translators && yarn lingui:fetch", - "lingui:fetch": "cd src/locales/translations && git pull", - "lingui:prepare": "pwd && if [ ! -d src/locales/translations ]; then git clone https://github.com/OlympusDAO/olympus-translations.git src/locales/translations; fi", "typechain:build": "yarn run typechain --target ethers-v5 --out-dir src/typechain src/abi/*.json src/abi/**/*.json", - "preinstall": "yarn lingui:prepare || exit 0", - "postinstall": "yarn typechain:build && yarn lingui:compile", + "postinstall": "yarn typechain:build", "prepare": "husky install", "graphql-codegen": "graphql-codegen --config codegen.yml" }, diff --git a/src/App.tsx b/src/App.tsx index 7971efb0ee..c169efcfee 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -103,7 +103,6 @@ if (DEBUG) console.log("📡 Connecting to Mainnet Ethereum"); const drawerWidth = 264; const transitionDuration = 969; - function App() { useGoogleAnalytics(); const location = useLocation(); diff --git a/src/Root.tsx b/src/Root.tsx index 863bf23ce7..2bc660bb9a 100644 --- a/src/Root.tsx +++ b/src/Root.tsx @@ -1,33 +1,24 @@ /* eslint-disable global-require */ -import { i18n } from "@lingui/core"; -import { I18nProvider } from "@lingui/react"; import { StyledEngineProvider } from "@mui/material/styles"; -import { FC, useEffect } from "react"; +import { FC } from "react"; import { Provider } from "react-redux"; import { HashRouter } from "react-router-dom"; import App from "src/App"; import { wagmiClient } from "src/hooks/wagmi"; import { ReactQueryProvider } from "src/lib/react-query"; -import { initLocale } from "src/locales"; import store from "src/store"; import { WagmiConfig } from "wagmi"; const Root: FC = () => { - useEffect(() => { - initLocale(); - }, []); - return ( - - - - - - - + + + + + diff --git a/src/__tests__/App.unit.test.jsx b/src/__tests__/App.unit.test.jsx deleted file mode 100755 index 88a22941ad..0000000000 --- a/src/__tests__/App.unit.test.jsx +++ /dev/null @@ -1,140 +0,0 @@ -import "src/helpers/index"; - -import * as EthersContract from "@ethersproject/contracts"; -import { BigNumber } from "ethers"; -import App from "src/App"; -import { connectWallet, createMatchMedia, disconnectedWallet } from "src/testHelpers"; -import { act, render, renderRoute, screen } from "src/testUtils"; -import * as Contract from "src/typechain"; - -jest.mock("src/helpers/index", () => ({ - ...jest.requireActual("src/helpers/index"), - // prevent safety check message from blocking wallet connect error message - shouldTriggerSafetyCheck: jest.fn().mockReturnValue(false), -})); - -beforeEach(() => { - jest.useFakeTimers(); -}); - -afterEach(() => { - jest.resetAllMocks(); - jest.useRealTimers(); -}); - -describe("", () => { - it("should render component", () => { - disconnectedWallet(); - renderRoute("/"); - expect(screen.getAllByText("Connect Wallet")[1]).toBeInTheDocument(); - }); - it("should not render an error message when user wallet is connected and cached but not locked", async () => { - // Workaround for long-running tasks - jest.setTimeout(60000); - connectWallet(); - - await act(async () => { - renderRoute("/"); - }); - const errorMessage = await screen.queryByText("Please check your Wallet UI for connection errors"); - expect(errorMessage).toBeNull(); // expect its not found - }); - it("should not render a connection error message when user wallet is not cached, i.e. user has not connected wallet yet", async () => { - connectWallet(); - await act(async () => { - renderRoute("/"); - }); - const errorMessage = await screen.queryByText("Please check your Wallet UI for connection errors"); - expect(errorMessage).toBeNull(); // expect its not found - }); -}); - -describe("Account Balances Slice", () => { - beforeEach(() => { - jest.mock("@ethersproject/contracts"); - }); - it("should load Account Balances with no error", async () => { - connectWallet(); - Contract.GOHM__factory.connect = jest.fn().mockReturnValue({ - balanceOf: jest.fn().mockReturnValue(BigNumber.from(10)), - allowance: jest.fn().mockReturnValue(BigNumber.from(10)), - balanceFrom: jest.fn().mockReturnValue(BigNumber.from(10)), - }); - Contract.IERC20__factory.connect = jest.fn().mockReturnValue({ - balanceOf: jest.fn().mockReturnValue(BigNumber.from(10)), - allowance: jest.fn().mockReturnValue(BigNumber.from(10)), - }); - EthersContract.Contract = jest.fn().mockReturnValue({ - allowance: jest.fn().mockReturnValue(BigNumber.from(10)), - callStatic: jest.fn().mockReturnValue({ - balanceOfUnderlying: jest.fn().mockReturnValue(BigNumber.from(10)), - underlying: jest.fn().mockReturnValue(BigNumber.from(10)), - }), - }); - - expect(() => render()).not.toThrowError(); - }); - - it("should load Account Balances and throw error", async () => { - connectWallet(); - Contract.GOHM__factory.connect = jest.fn().mockReturnValue({ - balanceOf: jest.fn().mockImplementation(() => { - throw Error("An Error!"); - }), - allowance: jest.fn().mockReturnValue(BigNumber.from(10)), - balanceFrom: jest.fn().mockReturnValue(BigNumber.from(10)), - }); - Contract.IERC20__factory.connect = jest.fn().mockReturnValue({ - balanceOf: jest.fn().mockReturnValue(BigNumber.from(10)), - allowance: jest.fn().mockReturnValue(BigNumber.from(10)), - }); - EthersContract.Contract = jest.fn().mockReturnValue({ - allowance: jest.fn().mockImplementation(() => { - throw Error("An Error!"); - }), - callStatic: jest.fn().mockReturnValue({ - balanceOfUnderlying: jest.fn().mockReturnValue(BigNumber.from(10)), - underlying: jest.fn().mockReturnValue(BigNumber.from(10)), - }), - }); - - //we should handle the error and not throw - expect(() => render()).not.toThrowError(); - }); -}); - -describe("Staging Notification Checks", () => { - beforeEach(() => { - process.env.REACT_APP_STAGING_ENV = true; - }); - it("Should display a notification banner when hostname = staging.olympusdao.finance", async () => { - connectWallet(); - render(); - expect(screen.getByTestId("staging-notification")).toHaveStyle({ marginLeft: "264px" }); - expect( - screen.getByText("You are on the staging site. Any interaction could result in loss of assets."), - ).toBeInTheDocument(); - }); - it("Should display no left Margin on Mobile", async () => { - connectWallet(); - window.matchMedia = createMatchMedia("300px"); - render(); - expect(screen.getByTestId("staging-notification")).toHaveStyle({ marginLeft: "0px" }); - - expect( - screen.getByText("You are on the staging site. Any interaction could result in loss of assets."), - ).toBeInTheDocument(); - }); -}); -describe("Production Notification Check", () => { - beforeEach(() => { - process.env.REACT_APP_STAGING_ENV = false; - }); - it("Should not display a notification when hostname not staging.olympusdao.finance", async () => { - connectWallet(); - render(); - expect( - screen.queryByText("You are on the staging site. Any interaction could result in loss of assets."), - ).not.toBeInTheDocument(); - }); -}); diff --git a/src/__tests__/Root.unit.test.tsx b/src/__tests__/Root.unit.test.tsx deleted file mode 100644 index c555ab2feb..0000000000 --- a/src/__tests__/Root.unit.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render, screen } from "@testing-library/react"; -import Root from "src/Root"; - -//We need to use @testing-library vs our custom render here, or else we'll have nested routers. -describe("", () => { - it("should render component", () => { - render(); - expect(screen.getByText("Safety Check: Always verify you're on app.olympusdao.finance!")); - }); -}); diff --git a/src/components/CallToAction/CallToAction.tsx b/src/components/CallToAction/CallToAction.tsx index b288537dd1..9bf30966ff 100644 --- a/src/components/CallToAction/CallToAction.tsx +++ b/src/components/CallToAction/CallToAction.tsx @@ -1,12 +1,11 @@ import "src/components/CallToAction/CallToAction.scss"; -import { t, Trans } from "@lingui/macro"; import { Box, Typography } from "@mui/material"; import { Paper, PrimaryButton, TertiaryButton } from "@olympusdao/component-library"; export const LearnMoreButton = () => ( - Learn More + Learn More ); @@ -34,11 +33,11 @@ const CallToAction = ({ setMigrationModalOpen }: CallToActionProps) => ( - You have assets ready to migrate to v2 + You have assets ready to migrate to v2
- +
diff --git a/src/components/CallToAction/__tests__/CallToAction.unit.test.tsx b/src/components/CallToAction/__tests__/CallToAction.unit.test.tsx index b4f3abb9d0..92671807d6 100644 --- a/src/components/CallToAction/__tests__/CallToAction.unit.test.tsx +++ b/src/components/CallToAction/__tests__/CallToAction.unit.test.tsx @@ -1,9 +1,12 @@ +import React from "react"; import CallToAction from "src/components/CallToAction/CallToAction"; import { render } from "src/testUtils"; +//import { render } from "src/testUtils"; +import { describe, expect, it } from "vitest"; describe("", () => { it("should render component", () => { - const { container } = render( console.log("setMigrationModalOpen")} />); + const container = render( console.log("setMigrationModalOpen")} />); expect(container).toMatchSnapshot(); }); }); diff --git a/src/components/CallToAction/__tests__/__snapshots__/CallToAction.unit.test.tsx.snap b/src/components/CallToAction/__tests__/__snapshots__/CallToAction.unit.test.tsx.snap index 3655c69d65..d404c2323f 100644 --- a/src/components/CallToAction/__tests__/__snapshots__/CallToAction.unit.test.tsx.snap +++ b/src/components/CallToAction/__tests__/__snapshots__/CallToAction.unit.test.tsx.snap @@ -1,13 +1,77 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1 -exports[` should render component 1`] = ` -
-
- +exports[` > should render component 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+
+
+
+
+
+
+ You have assets ready to migrate to v2 +
+
+ + Learn More + + + + + +
+
+
+
+
+
+
+ , + "container":
@@ -72,6 +136,57 @@ exports[` should render component 1`] = `
-
-
+ , + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} `; diff --git a/src/components/Chart/ExpandedChart.tsx b/src/components/Chart/ExpandedChart.tsx index cdbd898639..11c5c7e766 100644 --- a/src/components/Chart/ExpandedChart.tsx +++ b/src/components/Chart/ExpandedChart.tsx @@ -1,4 +1,3 @@ -import { t } from "@lingui/macro"; import { Grid, Link, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material"; import { Modal, Tooltip } from "@olympusdao/component-library"; import React, { useEffect } from "react"; @@ -79,7 +78,7 @@ const ExpandedChart = ({ {subgraphQueryUrl && ( - + diff --git a/src/components/Chart/__tests__/Chart.unit.test.tsx b/src/components/Chart/__tests__/Chart.unit.test.tsx index 9c5ce071ce..67845e580e 100644 --- a/src/components/Chart/__tests__/Chart.unit.test.tsx +++ b/src/components/Chart/__tests__/Chart.unit.test.tsx @@ -1,4 +1,5 @@ import { formatCurrencyTick, formatPercentTick } from "src/components/Chart/Chart"; +import { describe, expect, test } from "vitest"; describe("curency tick formatter", () => { test("shortens millions", () => { diff --git a/src/components/ConnectButton/ConnectButton.tsx b/src/components/ConnectButton/ConnectButton.tsx index df7186c8ab..9beac2a45e 100644 --- a/src/components/ConnectButton/ConnectButton.tsx +++ b/src/components/ConnectButton/ConnectButton.tsx @@ -1,4 +1,3 @@ -import { t } from "@lingui/macro"; import { Box, Button, Link, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material"; import { Icon, OHMButtonProps, PrimaryButton } from "@olympusdao/component-library"; import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit"; @@ -101,7 +100,7 @@ export const ConnectButton = () => { }} > - {t`Connect`} + {`Connect`} ); } else { @@ -116,7 +115,7 @@ export const ConnectButton = () => { {!mobile ? ( - {t`Connect Wallet`} + {`Connect Wallet`} ) : ( @@ -225,11 +222,9 @@ function MigrationModal({ open, handleClose }: { open: boolean; handleClose: any - - Pre-migration - + Pre-migration @@ -238,19 +233,15 @@ function MigrationModal({ open, handleClose }: { open: boolean; handleClose: any - - Post-migration - + Post-migration - - (includes rebase rewards) - + (includes rebase rewards) @@ -284,11 +275,11 @@ function MigrationModal({ open, handleClose }: { open: boolean; handleClose: any {isMigrationComplete || !oldAssetsDetected ? ( - Migrated + Migrated ) : row.fullApproval ? ( - Approved + Approved ) : ( @@ -327,7 +318,7 @@ function MigrationModal({ open, handleClose }: { open: boolean; handleClose: any {isMigrationComplete || !oldAssetsDetected ? "Close" - : txnButtonText(pendingTransactions, "migrate_all", t`Migrate all to ${isGOHM ? "gOHM" : "sOHM"}`)} + : txnButtonText(pendingTransactions, "migrate_all", `Migrate all to ${isGOHM ? "gOHM" : "sOHM"}`)} @@ -335,10 +326,8 @@ function MigrationModal({ open, handleClose }: { open: boolean; handleClose: any
- - Save on gas fees by migrating all your assets to the new gOHM or sOHM in one transaction. Each asset - asset above must be approved before all can be migrated. - + Save on gas fees by migrating all your assets to the new gOHM or sOHM in one transaction. Each asset + asset above must be approved before all can be migrated.
diff --git a/src/components/Migration/MigrationModalSingle.tsx b/src/components/Migration/MigrationModalSingle.tsx index ce9d597b23..94f4b13e3c 100644 --- a/src/components/Migration/MigrationModalSingle.tsx +++ b/src/components/Migration/MigrationModalSingle.tsx @@ -1,6 +1,5 @@ import "src/components/Migration/MigrationModal.scss"; -import { t, Trans } from "@lingui/macro"; import { Box, Button, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material"; import useMediaQuery from "@mui/material/useMediaQuery"; import { InfoTooltip, Modal, Tab, Tabs } from "@olympusdao/component-library"; @@ -109,13 +108,13 @@ function MigrationModalSingle({ open, handleClose }: { open: boolean; handleClos closePosition={"left"} onClose={handleClose} closeAfterTransition - headerText={!oldAssetsDetected ? t`Migration complete` : t`You have assets ready to migrate to v2`} + headerText={!oldAssetsDetected ? `Migration complete` : `You have assets ready to migrate to v2`} > <> {!oldAssetsDetected ? null : ( - {t`Olympus v2 introduces upgrades to on-chain governance and bonds to enhance decentralization and immutability.`}{" "} + {`Olympus v2 introduces upgrades to on-chain governance and bonds to enhance decentralization and immutability.`}{" "} - - Learn More - + Learn More )} - Migration Output + Migration Output @@ -167,7 +164,7 @@ function MigrationModalSingle({ open, handleClose }: { open: boolean; handleClos {!oldAssetsDetected ? ( - Migrated + Migrated ) : row.fullApproval ? ( ) : ( @@ -192,7 +189,7 @@ function MigrationModalSingle({ open, handleClose }: { open: boolean; handleClos {txnButtonText( pendingTransactions, `approve_migration_${row.initialAsset.toLowerCase()}`, - t`Approve`, + `Approve`, )} @@ -211,11 +208,9 @@ function MigrationModalSingle({ open, handleClose }: { open: boolean; handleClos - - Pre-migration - + Pre-migration @@ -224,19 +219,15 @@ function MigrationModalSingle({ open, handleClose }: { open: boolean; handleClos - - Post-migration - + Post-migration - - (includes rebase rewards) - + (includes rebase rewards) @@ -270,7 +261,7 @@ function MigrationModalSingle({ open, handleClose }: { open: boolean; handleClos {!oldAssetsDetected ? ( - Migrated + Migrated ) : row.fullApproval ? ( ) : ( @@ -295,7 +286,7 @@ function MigrationModalSingle({ open, handleClose }: { open: boolean; handleClos {txnButtonText( pendingTransactions, `approve_migration_${row.initialAsset.toLowerCase()}`, - t`Approve`, + `Approve`, )} @@ -310,10 +301,8 @@ function MigrationModalSingle({ open, handleClose }: { open: boolean; handleClos
- - Each asset type requires two transactions. First Approve, then Migrate each asset. Amounts less than - than 10$ are ignored. - + Each asset type requires two transactions. First Approve, then Migrate each asset. Amounts less than + than 10$ are ignored.
diff --git a/src/components/Migration/__tests__/MigrationModal.unit.test.jsx b/src/components/Migration/__tests__/MigrationModal.unit.test.jsx index 39e966035e..918bfe9f55 100644 --- a/src/components/Migration/__tests__/MigrationModal.unit.test.jsx +++ b/src/components/Migration/__tests__/MigrationModal.unit.test.jsx @@ -9,7 +9,7 @@ import { render, screen } from "src/testUtils"; describe("", () => { it("should render closed component", () => { render( console.log("handleClose")} />); - expect(screen.queryByText("Migration Output")).not.toBeInTheDocument(); + expect(screen.queryByText("Migration Output")).not; }); it("should render user account v1 assets and estimated v2 amounts", async () => { @@ -51,16 +51,16 @@ describe("", () => { render(migrationModal, store); // there should be a header inviting user to migrate v1 tokens to v2 - expect(await screen.getByText("You have assets ready to migrate to v2")).toBeInTheDocument(); + expect(await screen.getByText("You have assets ready to migrate to v2")); // there should be token details table headers - expect(await screen.getByText("Asset")).toBeInTheDocument(); - expect(await screen.getByText("Pre-migration")).toBeInTheDocument(); - expect(await screen.getByText("Post-migration")).toBeInTheDocument(); + expect(await screen.getByText("Asset")); + expect(await screen.getByText("Pre-migration")); + expect(await screen.getByText("Post-migration")); // there should be token details table data - expect(await screen.getByText("sOHM -> sOHM (v2)")).toBeInTheDocument(); - expect(await screen.getByText("12.0000 sOHM")).toBeInTheDocument(); + expect(await screen.getByText("sOHM -> sOHM (v2)")); + expect(await screen.getByText("12.0000 sOHM")); // verify that the dialog displays the correct conversion formula // prevent regression for bug report: @@ -68,7 +68,7 @@ describe("", () => { const sOHMv2Value = (preloadedState.account.balances.sohmV1 * preloadedState.app.currentIndex) / preloadedState.app.currentIndexV1; const trimmed = trim(sOHMv2Value, 4); - expect(await screen.getByText(`${trimmed} sOHM (v2)`)).toBeInTheDocument(); + expect(await screen.getByText(`${trimmed} sOHM (v2)`)); // screen.debug(undefined, 100000); // Approve button should appear as many times as there are v1 asset rows diff --git a/src/components/Migration/__tests__/__snapshots__/MigrationModalSingle.unit.test.tsx.snap b/src/components/Migration/__tests__/__snapshots__/MigrationModalSingle.unit.test.tsx.snap index bbd0d39f35..e7a48f66b2 100644 --- a/src/components/Migration/__tests__/__snapshots__/MigrationModalSingle.unit.test.tsx.snap +++ b/src/components/Migration/__tests__/__snapshots__/MigrationModalSingle.unit.test.tsx.snap @@ -1,17 +1,10 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1 -exports[` should render component 1`] = ` +exports[` > should render component 1`] = `
- -
-
-
+ style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;" + /> +
`; diff --git a/src/components/Sidebar/NavContent.tsx b/src/components/Sidebar/NavContent.tsx index dd879332d9..891589ab34 100644 --- a/src/components/Sidebar/NavContent.tsx +++ b/src/components/Sidebar/NavContent.tsx @@ -1,4 +1,3 @@ -import { t, Trans } from "@lingui/macro"; import { Box, Divider, Link, Paper, SvgIcon, Typography, useTheme } from "@mui/material"; import { styled } from "@mui/material/styles"; import { Icon, NavItem } from "@olympusdao/component-library"; @@ -52,27 +51,27 @@ const NavContent: React.VFC = () => {
- - - - + + + + @@ -140,7 +139,7 @@ const RangePrice = (props: { bidOrAsk: "bid" | "ask" }) => { {isFetched && ( - {props.bidOrAsk === "bid" ? t`Bid` : t`Ask`} + {props.bidOrAsk === "bid" ? `Bid` : `Ask`} @@ -169,7 +168,7 @@ const InverseBonds: React.VFC = () => { return ( - Inverse Bonds + Inverse Bonds diff --git a/src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap b/src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap index e1158cd353..6a30e2b707 100644 --- a/src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap +++ b/src/components/Sidebar/__tests__/__snapshots__/Sidebar.unit.test.tsx.snap @@ -1,691 +1,690 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1 -exports[` should render component 1`] = ` +exports[` > should render component 1`] = `
+