Add tests & ESLint support

Author: Overk1lls

.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+  plugins: ['@typescript-eslint/eslint-plugin'],
+  extends: [
+    'react-app',
+    'react-app/jest',
+    'eslint-config-prettier',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  root: true,
+  env: {
+    browser: true,
+    jest: true,
+  },
+  rules: {
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      { vars: 'all', args: 'after-used', ignoreRestSiblings: false },
+    ],
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        printWidth: 100,
+        endOfLine: 'auto',
+      },
+    ],
+    eqeqeq: ['warn', 'always'],
+
+    // from https://reactjs.org/docs/hooks-rules.html#eslint-plugin
+    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+    'react-hooks/exhaustive-deps': 'error', // Checks effect dependencies
+  },
+};

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+  ],
+};

jest.config.js

@@ -0,0 +1,15 @@
+/** @type {import('jest').Config} */
+const config = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.ts|tsx?$': 'ts-jest',
+    '\\.js|jsx?$': '<rootDir>/node_modules/babel-jest',
+  },
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  coveragePathIgnorePatterns: ['<rootDir>/src/index.tsx'],
+  testRegex: 'src/.*\\.test\\.tsx?$',
+  setupFiles: ['<rootDir>/src/setupTests.ts'],
+};
+
+module.exports = config;

package-lock.json

@@ -25,11 +25,31 @@
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
+  "devDependencies": {
+    "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.0.3",
+    "eslint": "^8.23.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "msw": "^0.47.3",
+    "ts-jest": "^29.0.1"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{ts,tsx}",
+      "!src/index.tsx",
+      "!**/src/index.tsx"
+    ]
   },
   "eslintConfig": {
     "extends": [

package.json

@@ -1,15 +1,20 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { cleanup, render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
 import { store } from './app/store';
 import App from './App';
 
-test('renders learn react link', () => {
-  const { getByText } = render(
-    <Provider store={store}>
-      <App />
-    </Provider>
-  );
+describe('App component', () => {
+  test('should handle without signed in', async () => {
+    render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </Provider>
+    );
+    expect(screen.getByText('Sign up')).toBeInTheDocument();
 
-  expect(getByText(/learn/i)).toBeInTheDocument();
+    cleanup();
+  });
 });

src/App.test.tsx

@@ -1,4 +1,4 @@
 export enum LocalStorageKeys {
   AccessToken = 'access_token',
   Code = 'code',
-}
+}

src/app/const.ts

@@ -1,5 +1,5 @@
-import { createContext, PropsWithChildren } from "react";
-import { AxiosClient } from "./axios";
+import { createContext, PropsWithChildren } from 'react';
+import { AxiosClient } from './axios';
 
 export interface AppContextValue {
   axios: AxiosClient;
@@ -12,9 +12,5 @@ export interface AppProviderProps {
 export const AppContext = createContext<AppContextValue | null>(null);
 
 export default function AppProvider({ axios, children }: PropsWithChildren<AppProviderProps>) {
-  return (
-    <AppContext.Provider value={{ axios }}>
-      {children}
-    </AppContext.Provider>
-  );
-}
+  return <AppContext.Provider value={{ axios }}>{children}</AppContext.Provider>;
+}

src/app/context.tsx

@@ -0,0 +1,37 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from '../app/store';
+import { mockCommits } from '../test';
+import CommitsTable, { mapCommits } from './CommitsTable';
+
+describe('CommitsTable component', () => {
+  test('should handle loading without data', async () => {
+    render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <CommitsTable org="test" />
+        </BrowserRouter>
+      </Provider>
+    );
+    expect(screen.getByRole('grid')).toBeInTheDocument();
+
+    cleanup();
+  });
+
+  test('should handle mapping commits', () => {
+    const result = mapCommits(mockCommits);
+
+    expect(result).toEqual(
+      expect.arrayContaining([
+        {
+          id: 0,
+          author: mockCommits[0].commit.author.name,
+          committer: mockCommits[0].commit.committer.name,
+          message: mockCommits[0].commit.message,
+          date: mockCommits[0].commit.committer.date,
+        },
+      ])
+    );
+  });
+});

src/components/CommitsTable.test.tsx

@@ -0,0 +1,29 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { setAccessToken } from '../app/auth';
+import { store } from '../app/store';
+import { infoToDisplay } from './Navbar';
+import { mockUser } from '../test';
+import Navbar from './Navbar';
+
+describe('Navbar component', () => {
+  test('should handle user loading', async () => {
+    setAccessToken('token');
+
+    render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <Navbar />
+        </BrowserRouter>
+      </Provider>
+    );
+    screen.getByText('Loading...');
+
+    expect(await screen.findByText(/github react app/i)).toBeInTheDocument();
+    for (const key of infoToDisplay) {
+      expect(await screen.findByText(mockUser[key])).toBeInTheDocument();
+    }
+    cleanup();
+  });
+});