add code-coverage-report

.github/workflows/test-coverage-reoprt.yml

@@ -0,0 +1,34 @@
+name: Coverage Report CI
+
+on:
+  pull_request:
+    branches:
+      - develop
+      - main
+
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        node-version: [16.x]
+        platform: [ubuntu-latest]
+    name: Run Coverage Tests
+    runs-on: ${{ matrix.platform }}
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+    - name: Install packages
+      run: yarn install --prefer-offline --immutable
+    - name: Run Tests
+      run: yarn run test:ci
+    - name: Test Coverage report
+      id: testCoverage
+      uses: anuraag016/[email protected]
+      with:
+        fullCoverageDiff: true
+        delta: 0.5

.github/workflows/tests-coverage.yml

@@ -1,30 +1,46 @@
-# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+# # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
 
-name: Tests CI
+# name: Tests CI
 
-on:
-  pull_request:
-    branches: ['main', 'develop']
+# on:
+#   pull_request:
+#     branches: ['main', 'develop']
 
-jobs:
-  build:
-    name: Run Coverage Tests
-    runs-on: ubuntu-latest
+# jobs:
+#   build:
+#     name: Run Coverage Tests
+#     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x]
+#     strategy:
+#       matrix:
+#         node-version: [16.x]
+
+#     steps:
+#       - name: Checkout Branch To Runner
+#         uses: actions/checkout@v3
+#       - name: Use Node.js ${{ matrix.node-version }}
+#         uses: actions/setup-node@v3
+#         with:
+#           node-version: ${{ matrix.node-version }}
+#           cache: 'yarn'
+#       - name: Install Yarn
+#         run: yarn install --prefer-offline --immutable
+#       - name: Run Coverage Tests
+#         run: yarn run test:ci
+#       - name: Code Coverage Summary Report
+#         uses: irongut/[email protected]
+#         with:
+#           filename: coverage/cobertura-coverage.xml
+#           badge: true
+#           format: 'markdown'
+#           output: 'both'
+#       - name: Add Coverage PR Comment
+#         uses: marocchino/sticky-pull-request-comment@v2
+#         if: github.event_name == 'pull_request'
+#         with:
+#           recreate: true
+#           path: code-coverage-results.md
+#       - name: Write to Job Summary
+#         run: cat code-coverage-results.md >> $GITHUB_STEP_SUMMARY
 
-    steps:
-      - name: Checkout Branch To Runner
-        uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
-      - name: Install Yarn
-        run: yarn install --prefer-offline --immutable
-      - name: Run Coverage Tests
-        run: yarn run test:ci

.gitignore

@@ -1,8 +1,10 @@
 node_modules
+/coverage
 
 /.cache
 /build
 /public/build
+/coverage
 .env
 package-lock.json
 

app/components/__test__/Button.test.tsx

@@ -0,0 +1,61 @@
+import { fireEvent, render } from '@testing-library/react';
+
+import { Button, LinkButton } from '../Button';
+
+describe('Button', () => {
+  const btnText = 'Click me';
+  it('renders', () => {
+    const { getByText } = render(
+      <Button size="small" label="Click me" varient="primary" disabled={false} />
+    );
+    expect(getByText(btnText)).toBeInTheDocument();
+  });
+
+  it('renders with different sizes', () => {
+    const { getByText } = render(
+      <Button size="small" label="Click me" varient="primary" disabled={false} />
+    );
+    expect(getByText(btnText)).toHaveClass('py-1 px-2 text-sm gap-1');
+    expect(getByText(btnText).classList.contains('border-transparent')).toBeTruthy();
+    expect(getByText(btnText)).not.toBeDisabled();
+  });
+
+  it('renders with different varients', () => {
+    const handleClick = jest.fn(() => null);
+    const { getByText } = render(
+      <Button
+        size="medium"
+        label="Click me"
+        varient="primary"
+        disabled={false}
+        handleClick={handleClick}
+      />
+    );
+    const btnElement = getByText(btnText);
+    expect(getByText(btnText)).toHaveClass('bg-blue-600 text-white');
+    fireEvent.click(btnElement);
+    expect(handleClick).toHaveBeenCalled();
+
+    expect(getByText(btnText).classList.contains('border-transparent')).toBeTruthy();
+
+    render(
+      <Button
+        size="large"
+        label="Click me"
+        varient="secondary"
+        disabled={false}
+        handleClick={handleClick}
+      />
+    );
+  });
+});
+
+describe('LinkButton', () => {
+  const btnText = 'Click me';
+  it('renders', () => {
+    const { getByText } = render(
+      <LinkButton href="/" title="Click me" icon={() => <div>Icon</div>} />
+    );
+    expect(getByText(btnText)).toBeInTheDocument();
+  });
+});

app/components/common/navbar/__test__/Navbar.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import Slider from '../../slider';
+
+import Navbar, { DynamicHeroIcon } from '../index';
+
+describe('Navbar', () => {
+  it('renders', () => {
+    const { container } = render(<Navbar />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders the slider', () => {
+    const props = {
+      showSlider: true,
+      setShowSlider: jest.fn(),
+    };
+    const { container } = render(<Slider isOpen={props.showSlider} toggle={props.setShowSlider} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders the dynamic hero icon', () => {
+    const props = {
+      name: 'random',
+      className: 'random',
+    };
+    const { container } = render(<DynamicHeroIcon name={props.name} className={props.className} />);
+
+    expect(container).toBeInTheDocument();
+  });
+
+  // simulate click on li
+
+  it('should render list elements', () => {
+    const navbarElements = {
+      navbarPages: [
+        {
+          icon: 'Home',
+          text: 'Home',
+          href: '/',
+          id: 0,
+          visibleOnDesktop: true,
+        },
+      ],
+      navbarSettings: [
+        {
+          icon: 'Cog6Tooth',
+          text: 'Settings',
+          href: '/',
+          id: 3,
+          visibleOnDesktop: true,
+        },
+      ],
+    };
+    const { getByText } = render(<Navbar />);
+
+    const li = getByText(navbarElements.navbarPages[0].text);
+    expect(li).toBeInTheDocument();
+    fireEvent.click(li);
+
+    const listItems = document.querySelectorAll('li');
+    expect(listItems.length).toBe(6);
+
+    expect(listItems[1].classList.contains('md:hidden')).toBeFalsy();
+    expect(listItems[3].classList.contains('md:hidden')).toBeTruthy();
+
+    expect(listItems[0].classList.contains('md:flex-row')).toBeTruthy();
+    fireEvent.click(listItems[5]);
+  });
+});

app/components/common/navbar/index.tsx

@@ -14,7 +14,7 @@ interface NavItemType {
   visibleOnDesktop: boolean;
 }
 
-const DynamicHeroIcon = ({ name, className }: DynamicHeroIconType) => {
+export const DynamicHeroIcon = ({ name, className }: DynamicHeroIconType) => {
   const IconComponent = Icons[`${name}Icon` as keyof typeof Icons];
 
   if (!IconComponent) {

app/components/common/userInput/index.test.tsx

@@ -1,53 +1,71 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import UserInput from '.';
 
-it('renders a input field', () => {
-  render(
-    <UserInput
-      label="Username"
-      placeholder="enter your name"
-      link="hap.day/"
-      value=""
-      setValue={() => {}}
-    />
-  );
-  const userInput = screen.getByTestId('user-input');
-  expect(userInput).toBeInTheDocument();
-});
+describe('UserInput', () => {
+  it('renders a input field', () => {
+    render(
+      <UserInput
+        label="Username"
+        placeholder="enter your name"
+        link="hap.day/"
+        value=""
+        setValue={() => {}}
+      />
+    );
+    const userInput = screen.getByTestId('user-input');
+    expect(userInput).toBeInTheDocument();
+  });
 
-it('checks added button in input field wrapper', () => {
-  render(
-    <UserInput
-      label="Username"
-      placeholder="enter your name"
-      link="hap.day/"
-      value=""
-      setValue={() => {}}
-    />
-  );
-  const userInputWrapper = screen.getByTestId('user-input-wrapper');
-  const button = screen.getByTestId('url-btn');
-  expect(userInputWrapper).toContainElement(button);
-});
+  it('checks added button in input field wrapper', () => {
+    render(
+      <UserInput
+        label="Username"
+        placeholder="enter your name"
+        link="hap.day/"
+        value=""
+        setValue={() => {}}
+      />
+    );
+    const userInputWrapper = screen.getByTestId('user-input-wrapper');
+    const button = screen.getByTestId('url-btn');
+    expect(userInputWrapper).toContainElement(button);
+  });
 
-it('checks input value to be empty', () => {
-  render(<UserInput label="Username" placeholder="enter your name" value="" setValue={() => {}} />);
-  const inputElement = screen.getByTestId('user-input');
-  expect(inputElement).toHaveValue('');
-});
+  it('checks input value to be empty', () => {
+    render(
+      <UserInput label="Username" placeholder="enter your name" value="" setValue={() => {}} />
+    );
+    const inputElement = screen.getByTestId('user-input');
+    expect(inputElement).toHaveValue('');
+  });
+
+  it('checks show password', () => {
+    render(
+      <UserInput
+        type="password"
+        label="New Password"
+        description="Password must be 8 characters"
+        value=""
+        setValue={() => {}}
+      />
+    );
+    const passwordInput = screen.getByTestId('user-input');
+    const eyeIcon = screen.getByTestId('icon');
+    fireEvent.click(eyeIcon);
+    expect(passwordInput).toHaveAttribute('type', 'text');
+  });
 
-it('checks show password', () => {
-  render(
-    <UserInput
-      type="password"
-      label="New Password"
-      description="Password must be 8 characters"
-      value=""
-      setValue={() => {}}
-    />
-  );
-  const passwordInput = screen.getByTestId('user-input');
-  const eyeIcon = screen.getByTestId('icon');
-  fireEvent.click(eyeIcon);
-  expect(passwordInput).toHaveAttribute('type', 'text');
+  it('should render error', () => {
+    render(
+      <UserInput
+        label="Username"
+        placeholder="enter your name"
+        value=""
+        setValue={() => {}}
+        err="error"
+      />
+    );
+    const error = screen.getByText('error');
+    expect(error).toBeInTheDocument();
+  });
 });