diff --git a/.github/workflows/test-coverage-reoprt.yml b/.github/workflows/test-coverage-reoprt.yml
new file mode 100644
index 0000000..d042847
--- /dev/null
+++ b/.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/Jest-Coverage-Diff@V1.4
+ with:
+ fullCoverageDiff: true
+ delta: 0.5
\ No newline at end of file
diff --git a/.github/workflows/tests-coverage.yml b/.github/workflows/tests-coverage.yml
index 460539c..71cc8d3 100644
--- a/.github/workflows/tests-coverage.yml
+++ b/.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/CodeCoverageSummary@v1.3.0
+# 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
diff --git a/.gitignore b/.gitignore
index 436b302..fbabf1e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,10 @@
node_modules
+/coverage
/.cache
/build
/public/build
+/coverage
.env
package-lock.json
diff --git a/app/components/__test__/Button.test.tsx b/app/components/__test__/Button.test.tsx
new file mode 100644
index 0000000..6a4aa74
--- /dev/null
+++ b/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(
+
+ );
+ expect(getByText(btnText)).toBeInTheDocument();
+ });
+
+ it('renders with different sizes', () => {
+ const { getByText } = render(
+
+ );
+ 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(
+
+ );
+ 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(
+
+ );
+ });
+});
+
+describe('LinkButton', () => {
+ const btnText = 'Click me';
+ it('renders', () => {
+ const { getByText } = render(
+ Icon
} />
+ );
+ expect(getByText(btnText)).toBeInTheDocument();
+ });
+});
diff --git a/app/components/common/navbar/__test__/Navbar.test.tsx b/app/components/common/navbar/__test__/Navbar.test.tsx
new file mode 100644
index 0000000..42f5978
--- /dev/null
+++ b/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();
+ expect(container).toBeInTheDocument();
+ });
+
+ it('renders the slider', () => {
+ const props = {
+ showSlider: true,
+ setShowSlider: jest.fn(),
+ };
+ const { container } = render();
+ expect(container).toBeInTheDocument();
+ });
+
+ it('renders the dynamic hero icon', () => {
+ const props = {
+ name: 'random',
+ className: 'random',
+ };
+ const { container } = render();
+
+ 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();
+
+ 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]);
+ });
+});
diff --git a/app/components/common/navbar/index.tsx b/app/components/common/navbar/index.tsx
index 21f2c3a..3247855 100644
--- a/app/components/common/navbar/index.tsx
+++ b/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) {
diff --git a/app/components/common/userInput/index.test.tsx b/app/components/common/userInput/index.test.tsx
index 48e5dba..2a98f4e 100644
--- a/app/components/common/userInput/index.test.tsx
+++ b/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(
- {}}
- />
- );
- const userInput = screen.getByTestId('user-input');
- expect(userInput).toBeInTheDocument();
-});
+describe('UserInput', () => {
+ it('renders a input field', () => {
+ render(
+ {}}
+ />
+ );
+ const userInput = screen.getByTestId('user-input');
+ expect(userInput).toBeInTheDocument();
+ });
-it('checks added button in input field wrapper', () => {
- render(
- {}}
- />
- );
- 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(
+ {}}
+ />
+ );
+ 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( {}} />);
- const inputElement = screen.getByTestId('user-input');
- expect(inputElement).toHaveValue('');
-});
+ it('checks input value to be empty', () => {
+ render(
+ {}} />
+ );
+ const inputElement = screen.getByTestId('user-input');
+ expect(inputElement).toHaveValue('');
+ });
+
+ it('checks show password', () => {
+ render(
+ {}}
+ />
+ );
+ const passwordInput = screen.getByTestId('user-input');
+ const eyeIcon = screen.getByTestId('icon');
+ fireEvent.click(eyeIcon);
+ expect(passwordInput).toHaveAttribute('type', 'text');
+ });
-it('checks show password', () => {
- render(
- {}}
- />
- );
- const passwordInput = screen.getByTestId('user-input');
- const eyeIcon = screen.getByTestId('icon');
- fireEvent.click(eyeIcon);
- expect(passwordInput).toHaveAttribute('type', 'text');
+ it('should render error', () => {
+ render(
+ {}}
+ err="error"
+ />
+ );
+ const error = screen.getByText('error');
+ expect(error).toBeInTheDocument();
+ });
});
diff --git a/app/components/icons/Email.tsx b/app/components/icons/Email.tsx
index 7b7c48f..ecc28e4 100644
--- a/app/components/icons/Email.tsx
+++ b/app/components/icons/Email.tsx
@@ -1,33 +1,31 @@
import { IconProps } from '~/types/Icon';
-export const Email: React.FC = ({ className }) => {
- return (
-
- );
-};
+export const Email: React.FC = ({ className }) => (
+
+);
diff --git a/app/components/icons/__test__/Google.test.tsx b/app/components/icons/__test__/Google.test.tsx
new file mode 100644
index 0000000..2149cd8
--- /dev/null
+++ b/app/components/icons/__test__/Google.test.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { Google } from '../Google';
+
+describe('Google', () => {
+ it('should render Google svg icon', () => {
+ const { container } = render();
+ expect(container).toBeInTheDocument();
+ });
+});
diff --git a/app/components/icons/__test__/GoogleCalendar.test.tsx b/app/components/icons/__test__/GoogleCalendar.test.tsx
new file mode 100644
index 0000000..158ca62
--- /dev/null
+++ b/app/components/icons/__test__/GoogleCalendar.test.tsx
@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { GoogleCalendar } from '../GoogleCalendar';
+
+describe('GoogleCalendar', () => {
+ it('should render GoogleCalendar svg icon', () => {
+ const { container } = render();
+ expect(container).toBeInTheDocument();
+ });
+});
diff --git a/app/components/icons/__test__/Microsoft.test.tsx b/app/components/icons/__test__/Microsoft.test.tsx
new file mode 100644
index 0000000..720cd32
--- /dev/null
+++ b/app/components/icons/__test__/Microsoft.test.tsx
@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { Microsoft } from '../Microsoft';
+
+describe('Microsoft', () => {
+ it('should render Microsoft svg icon', () => {
+ const { container } = render();
+ expect(container).toBeInTheDocument();
+ });
+});
diff --git a/app/components/icons/__test__/MicrosoftCalendar.test.tsx b/app/components/icons/__test__/MicrosoftCalendar.test.tsx
new file mode 100644
index 0000000..e2ec920
--- /dev/null
+++ b/app/components/icons/__test__/MicrosoftCalendar.test.tsx
@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { MicrosoftCalendar } from '../MicrosoftCalendar';
+
+describe('MicrosoftCalendar', () => {
+ it('should render MicrosoftCalendar svg icon', () => {
+ const { container } = render();
+ expect(container).toBeInTheDocument();
+ });
+});
diff --git a/jest.config.js b/jest.config.js
index 1928e8d..c707b8f 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -6,12 +6,13 @@ module.exports = {
'^.+\\.(t|j)sx?$': 'ts-jest',
},
setupFilesAfterEnv: ['./jest.setup.js'],
+ coverageReporters: ['cobertura', 'json-summary', 'html'],
coverageThreshold: {
global: {
- branches: 100,
- functions: 100,
- lines: 100,
- statements: 100,
+ branches: 85,
+ functions: 85,
+ lines: 85,
+ statements: 85,
},
},
};
diff --git a/package.json b/package.json
index e9c8824..2edeaf4 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
"start": "remix-serve build",
"prepare": "husky install",
"test": "jest",
- "test:ci": "jest --coverage --silent --ci",
+ "test:ci": "jest --coverage --silent --ci --collectCoverage=true --coverageDirectory='./'",
"sb": "start-storybook -p 6006",
"build-sb": "build-storybook"
},