[WIP] Tests and corresponding GitHub action.

.github/workflows/test.yml

@@ -0,0 +1,17 @@
+name: Test
+
+on: [push, pull_request]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - name: Install packages
+        run: |
+          yarn
+      - name: Run Test
+        run: yarn run test

__tests__/footer.test.tsx

@@ -0,0 +1,61 @@
+import { customRender as render, screen } from "../test-utils";
+import Footer from "../components/Footer";
+import { RouterContext } from "next/dist/shared/lib/router-context";
+
+const mockRouter: any = {
+  basePath: "",
+  pathname: "/",
+  route: "/",
+  asPath: "/",
+  query: {},
+  push: jest.fn(),
+  replace: jest.fn(),
+  reload: jest.fn(),
+  back: jest.fn(),
+  prefetch: jest.fn().mockResolvedValue(undefined),
+  beforePopState: jest.fn(),
+  events: {
+    on: jest.fn(),
+    off: jest.fn(),
+    emit: jest.fn(),
+  },
+  isFallback: false,
+};
+
+it("renders footer links", () => {
+  render(
+    <RouterContext.Provider value={mockRouter}>
+      <Footer />
+    </RouterContext.Provider>
+  );
+
+  const erc20Link = screen.getByRole("link", {
+    name: /\$VNL ERC-20 Contract on Etherscan/i,
+  });
+  expect(erc20Link).toBeInTheDocument();
+
+  const routerScanLink = screen.getByRole("link", {
+    name: /Vanilla Router on Etherscan/i,
+  });
+  expect(routerScanLink).toBeInTheDocument();
+
+  const daoScanLink = screen.getByRole("link", {
+    name: /VanillaDAO on Etherscan/i,
+  });
+  expect(daoScanLink).toBeInTheDocument();
+
+  const bountyLink = screen.getByRole("link", {
+    name: /Bug bounty/i,
+  });
+  expect(bountyLink).toBeInTheDocument();
+
+  const termsLink = screen.getByRole("link", {
+    name: /Terms of use/i,
+  });
+  expect(termsLink).toBeInTheDocument();
+
+  const privacyLink = screen.getByRole("link", {
+    name: /Privacy Policy/i,
+  });
+  expect(privacyLink).toBeInTheDocument();
+});

__tests__/index.test.tsx

@@ -0,0 +1,69 @@
+import { customRender as render, screen } from "../test-utils";
+import Home from "../pages/index";
+
+it("renders tag lines and links", () => {
+  render(<Home />);
+
+  const heading = screen.getByRole("heading", {
+    name: /Decentralized Asset Manager for Web3/i,
+  });
+  expect(heading).toBeInTheDocument();
+
+  const intro1 = screen.getByText(
+    "Vanilla is an on-chain investment pool managed by the best investors."
+  );
+  expect(intro1).toBeInTheDocument();
+
+  const earnLink = screen.getByRole("link", {
+    name: "Stake $JUICE to earn rewards",
+  });
+  expect(earnLink).toBeInTheDocument();
+
+  const investLink = screen.getByRole("link", {
+    name: "Invest in Vanilla Pool",
+  });
+  expect(investLink).toBeInTheDocument();
+
+  const getInformedHeading = screen.getByRole("heading", {
+    name: "GET INFORMED, WIN $JUICE",
+    level: 3,
+  });
+  expect(getInformedHeading).toBeInTheDocument();
+  // skipping sub-lines
+
+  const howItWorks = screen.getByRole("heading", {
+    name: "HOW VANILLA WORKS",
+    level: 3,
+  });
+  expect(howItWorks).toBeInTheDocument();
+
+  const faqLink = screen.getByRole("link", {
+    name: "Read the FAQ",
+  });
+  expect(faqLink).toBeInTheDocument();
+
+  // skipping stake and invest headlines
+  const stakingLink = screen.getByRole("link", {
+    name: "Start staking",
+  });
+  expect(stakingLink).toBeInTheDocument();
+
+  const investLink2 = screen.getByRole("link", {
+    name: "Invest in pool",
+  });
+  expect(investLink2).toBeInTheDocument();
+
+  const joinCommunity = screen.getByTestId("join-community");
+  // .getByText("JOIN THE COMMUNITY");
+  expect(joinCommunity).toHaveTextContent(/JOIN\s?THE COMMUNITY/);
+
+  const joinDiscussionLink = screen.getByRole("link", {
+    name: "Join the discussion",
+  });
+  expect(joinDiscussionLink).toBeInTheDocument();
+
+  const daoLink = screen.getByRole("link", {
+    name: "Read about VanillaDAO",
+  });
+  expect(daoLink).toBeInTheDocument();
+});

jest.config.js

@@ -0,0 +1,17 @@
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ["node_modules", "<rootDir>/"],
+  testEnvironment: "jest-environment-jsdom",
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";

package.json

@@ -7,6 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "codegen": "graphql-codegen --config codegen.yml"
   },
   "dependencies": {
@@ -40,13 +42,17 @@
     "@graphql-codegen/typescript-operations": "2.2.0",
     "@graphql-codegen/typescript-urql": "^3.4.0",
     "@graphql-codegen/urql-introspection": "2.1.0",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^14.0.0-beta",
     "@types/mailchimp__mailchimp_marketing": "^3.0.2",
     "@types/react": "17.0.30",
     "@types/react-table": "^7.7.7",
     "concurrently": "^6.4.0",
     "eslint": "7.32.0",
     "eslint-config-next": "11.1.2",
     "eslint-config-prettier": "^8.3.0",
+    "jest": "^27.4.7",
     "typescript": "4.4.4"
   }
 }

pages/index.tsx

@@ -175,7 +175,7 @@ const Home: NextPage = () => {
               },
             }}
           >
-            Decentra­lized Asset Manager for Web3
+            Decentralized Asset Manager for Web3
           </Heading>
         </Box>
 
@@ -244,7 +244,7 @@ const Home: NextPage = () => {
                 },
               }}
             >
-              <SectionHeading text="GET INFORMED, win $JUICE" />
+              <SectionHeading text="GET INFORMED, WIN $JUICE" />
               {/* <Divider /> */}
               <SectionDescription
                 muted
@@ -529,6 +529,7 @@ const Home: NextPage = () => {
                 css={{
                   flexDirection: "column",
                 }}
+                data-testid="join-community"
               >
                 <SectionHeading text="JOIN" muted topSegment />
                 <SectionHeading text="THE COMMUNITY" />

test-utils/index.tsx

@@ -0,0 +1,34 @@
+import React, { FC, ReactElement } from "react";
+import { render, RenderOptions } from "@testing-library/react";
+// import { Provider } from "urql";
+import { ThemeProvider } from "next-themes";
+import { darkTheme } from "../stitches.config";
+import "./mocks";
+import "@testing-library/jest-dom";
+// import { fetchingState } from "./urql-states";
+
+export const AllTheProviders: FC = ({ children }) => {
+  return (
+    // <Provider value={fetchingState as any}>
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="dark"
+      enableSystem={false}
+      value={{
+        dark: darkTheme.className,
+        light: "light",
+      }}
+    >
+      {children}
+    </ThemeProvider>
+    // </Provider>
+  );
+};
+
+const customRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, "wrapper">
+) => render(ui, { wrapper: AllTheProviders, ...options });
+
+export { customRender };
+export * from "@testing-library/react";

test-utils/mocks.tsx

@@ -0,0 +1,24 @@
+import { loadEnvConfig } from "@next/env";
+
+const setupEnv = async () => {
+  const projectDir = process.cwd();
+  loadEnvConfig(projectDir);
+};
+
+setupEnv()
+
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+export const mocked = true;

test-utils/urql-states.tsx

@@ -0,0 +1,26 @@
+import { CombinedError } from "urql";
+import { never, fromValue } from "wonka";
+
+export const fetchingState = {
+  executeQuery: () => never,
+};
+export const responseState = {
+  executeQuery: () =>
+    fromValue({
+      data: {
+        posts: [
+          { id: 1, title: "Post title", content: "This is a post" },
+          { id: 3, title: "Final post", content: "Final post here" },
+        ],
+      },
+    }),
+};
+
+export const errorState = {
+  executeQuery: () =>
+    fromValue({
+      error: new CombinedError({
+        networkError: Error("something went wrong!"),
+      }),
+    }),
+};

tsconfig.json

@@ -23,9 +23,11 @@
   "include": [
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    "__tests__/",
+    "test-utils"
   ],
   "exclude": [
     "node_modules"
   ]
-}
+}