Add Front End Testing:

1. Added JEST test support

2. Upgraded some dependencies (mainly typescript and eslint-typescript)

3. Replaced mocha with jest (as jest works better with TS)

4. Fixed .eslintrc to match the new eslint-typescript version

5. ADD two sample tests (footer.test.tsx and shortener.test.tsx)

Author: dependabot[bot]

.eslintrc

@@ -1,7 +1,7 @@
 {
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
     "plugin:prettier/recommended"
   ],
   "parser": "@typescript-eslint/parser",
@@ -14,6 +14,7 @@
     "no-useless-return": "warn",
     "no-var": "warn",
     "no-console": "warn",
+    "no-unused-vars": "off",
     "max-len": ["warn", { "comments": 80 }],
     "no-param-reassign": 0,
     "require-atomic-updates": 0,

client/components/Input.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Flex, BoxProps } from "reflexbox/styled-components";
 import styled, { css, keyframes } from "styled-components";
 import { withProp, prop, ifProp } from "styled-tools";

client/components/Layout.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Flex } from "reflexbox/styled-components";
 import { FC } from "react";
 

client/components/Shortener.tsx

@@ -204,6 +204,7 @@ const Shortener = () => {
           placeholder="Paste your long URL"
           placeholderSize={[16, 17, 18]}
           fontSize={[18, 20, 22]}
+          aria-label="target"
           width={1}
           height={[58, 64, 72]}
           px={0}
@@ -212,7 +213,7 @@ const Shortener = () => {
           autoFocus
           data-lpignore
         />
-        <SubmitIconWrapper onClick={onSubmit}>
+        <SubmitIconWrapper onClick={onSubmit} role="button" aria-label="submit">
           <Icon
             name={loading ? "spinner" : "send"}
             size={[22, 26, 28]}

client/components/Text.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { switchProp, ifNotProp, ifProp } from "styled-tools";
 import { Box, BoxProps } from "reflexbox/styled-components";
 import styled, { css } from "styled-components";

client/components/__tests__/footer.test.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { StoreProvider } from "easy-peasy";
+import { initializeStore } from "../../store";
+import Footer from "../Footer";
+import getConfig from "next/config";
+
+describe("<Footer /> component test", () => {
+  let app;
+
+  beforeEach(() => {
+    const store = initializeStore();
+    app = (
+      <StoreProvider store={store}>
+        <Footer />
+      </StoreProvider>
+    );
+  });
+
+  it("should contain a github link", () => {
+    const screen = render(app);
+    const githubLink = screen.getByRole("link", { name: "GitHub" });
+    expect(githubLink).toHaveAttribute("href", "https://github.com/thedevs-network/kutt");
+  });
+
+  it("should contain a TOS link", () => {
+    const config = getConfig();
+    const screen = render(app);
+    const tosLink = screen.getByRole("link", { name: "Terms of Service" });
+
+    expect(tosLink).toHaveAttribute("href", "/terms");
+  });
+
+  it("should show contact email if defined", () => {
+    const config = getConfig();
+    config.publicRuntimeConfig.CONTACT_EMAIL = 'foobar';
+    const screen = render(app);
+    const emailLink = screen.getByRole("link", { name: "Contact us" });
+
+    expect(emailLink).toHaveAttribute("href", "mailto:foobar");
+  });
+
+  it("should NOT show contact email if none is defined", () => {
+    const config = getConfig();
+    delete(config.publicRuntimeConfig.CONTACT_EMAIL);
+    const screen = render(app);
+    const emailLink= screen.queryByRole("link", { name: "Contact us" });
+
+    expect(emailLink).toBeNull();
+  });
+})
+

client/components/__tests__/shortener.test.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { StoreProvider, createStore, thunk } from "easy-peasy";
+import userEvent from "@testing-library/user-event"
+import { store } from "../../store";
+import Shortener from "../Shortener";
+
+describe("<Shortener /> component test", () => {
+  let app;
+
+  beforeEach(() => {
+    store.links = {
+      ...store.links,
+      submit: thunk(async (actions, payload) => {
+        return {
+          id: "0",
+          address: "localhost:3000/foobar",
+          banned: false,
+          created_at: "now",
+          link: "localhost:3000/foobar",
+          target: "",
+          updated_at: "now",
+          visit_count: 0
+        };
+      })
+    };
+    const testStore = createStore(store);
+    app = (
+      <StoreProvider store={testStore}>
+        <Shortener />
+      </StoreProvider>
+    );
+  });
+
+  it("Should show the short URL", async () => {
+    const screen = render(app);
+    const urlInput = screen.getByRole("textbox", { name: "target" });
+    userEvent.type(urlInput, "https://easy-peasy.now.sh/docs/api/thunk.html");
+    const submitButton = screen.getByRole("button", { name: "submit" });
+    userEvent.click(submitButton);
+    const msg = await screen.findByText(/localhost:3000\/foobar/i);
+    expect(msg).toBeInTheDocument();
+  });
+
+  it("Should empty target input", async () => {
+    const screen = render(app);
+    let urlInput: HTMLInputElement = screen.getByRole("textbox", {
+      name: "target"
+    }) as HTMLInputElement;
+    userEvent.type(urlInput, "https://easy-peasy.now.sh/docs/api/thunk.html");
+    const submitButton = screen.getByRole("button", { name: "submit" });
+    userEvent.click(submitButton);
+    await screen.findByText(/localhost:3000\/foobar/i);
+    urlInput = screen.getByRole("textbox", {
+      name: "target"
+    }) as HTMLInputElement;
+    expect(urlInput.value).toEqual("");
+  });
+});

client/pages/stats.tsx

@@ -26,7 +26,7 @@ const StatsPage: NextPage<Props> = ({ id }) => {
   const { isAuthenticated } = useStoreState(s => s.auth);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
-  const [data, setData] = useState();
+  const [data, setData] = useState<Record<string, any> | undefined>();
   const [period, setPeriod] = useState("lastDay");
 
   const stats = data && data[period];

client/store/store.ts

@@ -10,7 +10,7 @@ export interface StoreModel {
   links: Links;
   loading: Loading;
   settings: Settings;
-  reset: Action;
+  reset: Action<StoreModel>;
 }
 
 let initState: any = {};

jest-setup.ts

@@ -0,0 +1,5 @@
+import "@testing-library/jest-dom";
+import nextConfig from "./next.config";
+
+jest.mock('next/config', () => () => nextConfig);
+

jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
+  "preset": "ts-jest",
+  "transform": {
+    "^.+\\.js$": "babel-jest"
+  },
+  "testEnvironment": "jsdom",
+  "globals": {
+    "ts-jest": {
+      "tsconfig": "<rootDir>/tsconfig.test.json"
+    }
+  }
+};