Adding GH Actions

Author: sivaprasadreddy

.github/workflows/build.yml

@@ -0,0 +1,45 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - '**'
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Test
+        run: CI=true yarn test
+
+      - name: Build
+        run: yarn build

package.json

@@ -4,25 +4,26 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.11.2",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.3.2",
+    "axios": ">=0.21.2",
     "@types/classnames": "^2.2.10",
-    "@types/jest": "^24.0.0",
     "@types/jquery": "^3.5.1",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-router-dom": "^5.1.5",
-    "axios": "^0.19.0",
     "bootstrap": "^5.1.3",
     "classnames": "^2.2.6",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.0.1",
     "typescript": "^4.1.2"
   },
   "scripts": {

src/App.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Link from './Link';
+import { LinkModel} from "../../models/LinkModels";
+import { MemoryRouter } from 'react-router-dom';
+
+test('Renders Link', () => {
+    const link : LinkModel= {id: 1, title: 'sivalabs', url: 'https://sivalabs.in', tags: ['java', 'spring']};
+
+    render(<MemoryRouter><Link  {...link}/></MemoryRouter>);
+    const linkElement = screen.getByText(/sivalabs/i);
+    expect(linkElement).toBeInTheDocument();
+});

src/components/links/Link.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Pagination from './Pagination';
+import {LinksModel, LinksPaginationModel} from "../../models/LinkModels";
+import {MemoryRouter} from "react-router-dom";
+
+test('Renders Pagination', () => {
+    const linksModel: LinksModel = {
+        data: [],
+        hasNext: false,
+        hasPrevious: false,
+        isLast: true,
+        isFirst: true,
+        pageNumber: 1,
+        totalPages: 2,
+        totalElements: 50
+    }
+    const paginationModel : LinksPaginationModel= { page:1, links:linksModel, tag: '', query: ''};
+
+    render(<MemoryRouter><Pagination  {...paginationModel}/></MemoryRouter>);
+    const firstLinkElement = screen.getByText(/First/i);
+    expect(firstLinkElement).toBeInTheDocument();
+});

src/components/links/Pagination.test.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import {NavLink} from "react-router-dom";
 import {LinksPaginationModel} from "../../models/LinkModels";
 
-const Pagination: React.FC<LinksPaginationModel> = (linksPagination) => {
+const Pagination: React.FC<LinksPaginationModel> = (linksPagination) : JSX.Element => {
     let links = linksPagination.links
     let firstPageUrl = "/links?page=1";
     let prevPageUrl = `/links?page=${links.pageNumber-1}`;

src/components/links/Pagination.tsx

@@ -13,8 +13,10 @@ import 'bootstrap/dist/js/bootstrap.bundle.min';
 import "./index.css";
 
 ReactDOM.render(
-    <Router>
-        <App/>
-    </Router>,
+    <React.StrictMode>
+        <Router>
+            <App/>
+        </Router>
+    </React.StrictMode>,
     document.getElementById("root")
 );

src/index.tsx

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

src/setupTests.ts

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"