From 586672a30122c206e356685cf9350071c1a535b4 Mon Sep 17 00:00:00 2001 From: Arman Kolahan Date: Thu, 9 Dec 2021 16:44:27 +0100 Subject: [PATCH] unit tests --- src/components/items/Avatar/Avatar.test.tsx | 10 ++++ .../ExperienceItem/ExperienceItem.test.tsx | 54 +++++++++++++++++++ .../HighlightItem/HighlightItem.test.tsx | 26 +++++++++ src/components/items/State/State.test.tsx | 18 +++++++ src/components/items/State/State.tsx | 5 +- .../education-item/EducationItem.test.tsx | 38 +++++++++++++ .../portfolio-item/PortfolioItem.test.tsx | 36 +++++++++++++ .../publication-item/PublicationItem.test.tsx | 28 ++++++++++ .../experience/experienceReducers.test.ts | 32 +++++++++++ .../highlights/highlightsReducers.test.ts | 24 +++++++++ src/redux/highlights/models_d.ts | 2 +- src/redux/portfolio/portfolioReducers.test.ts | 34 ++++++++++++ src/redux/profile/profileReducers.test.ts | 24 +++++++++ 13 files changed, 328 insertions(+), 3 deletions(-) create mode 100644 src/components/items/Avatar/Avatar.test.tsx create mode 100644 src/components/items/ExperienceItem/ExperienceItem.test.tsx create mode 100644 src/components/items/HighlightItem/HighlightItem.test.tsx create mode 100644 src/components/items/State/State.test.tsx create mode 100644 src/components/items/education-item/EducationItem.test.tsx create mode 100644 src/components/items/portfolio-item/PortfolioItem.test.tsx create mode 100644 src/components/items/publication-item/PublicationItem.test.tsx create mode 100644 src/redux/experience/experienceReducers.test.ts create mode 100644 src/redux/highlights/highlightsReducers.test.ts create mode 100644 src/redux/portfolio/portfolioReducers.test.ts create mode 100644 src/redux/profile/profileReducers.test.ts diff --git a/src/components/items/Avatar/Avatar.test.tsx b/src/components/items/Avatar/Avatar.test.tsx new file mode 100644 index 0000000..c63cd05 --- /dev/null +++ b/src/components/items/Avatar/Avatar.test.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import {render, screen} from '@testing-library/react'; +import Avatar from './Avatar'; + +test('should avatar contains image', () => { + const testSrc = 'test.png'; + render(); + const imageElement = screen.getByRole('img') as HTMLImageElement; + expect(imageElement.src).toContain(testSrc); +}); diff --git a/src/components/items/ExperienceItem/ExperienceItem.test.tsx b/src/components/items/ExperienceItem/ExperienceItem.test.tsx new file mode 100644 index 0000000..8ec11c1 --- /dev/null +++ b/src/components/items/ExperienceItem/ExperienceItem.test.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import {render, screen} from '@testing-library/react'; +import ExperienceItem from './ExperienceItem'; +import {Experience} from '../../../redux/experience/models_d'; + +const experience: Experience = { + id: '1', + title: 'Title', + description: 'Description', + company: { + id: '2', + title: 'companyname', + image: 'image.png', + link: 'linktocompany', + }, + location: 'Here', + duration: '2 years', +}; + +describe('experience item', ()=> { + beforeEach(() => { + render(); + }); + + test('should experience contains image', () => { + const imageElement = screen.getByRole('img') as HTMLImageElement; + expect(imageElement.src).toContain(experience.company.image); + }); + + test('should experience contains title', () => { + const element = screen.getByText(experience.title); + expect(element).toBeInTheDocument(); + }); + + test('should experience contains description', () => { + const element = screen.getByText(experience.description); + expect(element).toBeInTheDocument(); + }); + + test('should experience contains location', () => { + const element = screen.getByText(experience.location); + expect(element).toBeInTheDocument(); + }); + + test('should experience contains duration', () => { + const element = screen.getByText(experience.duration); + expect(element).toBeInTheDocument(); + }); + + test('should experience contains company title', () => { + const element = screen.getByText(experience.company.title); + expect(element).toBeInTheDocument(); + }); +}); diff --git a/src/components/items/HighlightItem/HighlightItem.test.tsx b/src/components/items/HighlightItem/HighlightItem.test.tsx new file mode 100644 index 0000000..958bff2 --- /dev/null +++ b/src/components/items/HighlightItem/HighlightItem.test.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import {render, screen} from '@testing-library/react'; +import HighlightItem from './HighlightItem'; +import {Highlight} from '../../../redux/highlights/models_d'; + +const highlight: Highlight = { + id: '1', + title: 'Title', + description: 'Description', +}; + +describe('highlight item', ()=> { + beforeEach(() => { + render(); + }); + + test('should highlight contains title', () => { + const element = screen.getByText(highlight.title); + expect(element).toBeInTheDocument(); + }); + + test('should highlight contains description', () => { + const element = screen.getByText(highlight.description); + expect(element).toBeInTheDocument(); + }); +}); diff --git a/src/components/items/State/State.test.tsx b/src/components/items/State/State.test.tsx new file mode 100644 index 0000000..cd6b6c0 --- /dev/null +++ b/src/components/items/State/State.test.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import {render, screen} from '@testing-library/react'; +import State from './State'; +import {FetchState} from '../../../redux/models_d'; + +describe('state', ()=> { + test('should loading show spinner', () => { + render(); + const element = screen.getByTestId('state-loading'); + expect(element).toBeInTheDocument(); + }); + + test('should fail show fail icon', () => { + render(); + const element = screen.getByTestId('state-fail'); + expect(element).toBeInTheDocument(); + }); +}); diff --git a/src/components/items/State/State.tsx b/src/components/items/State/State.tsx index 3db37c1..d33e368 100644 --- a/src/components/items/State/State.tsx +++ b/src/components/items/State/State.tsx @@ -16,10 +16,11 @@ const State: React.FC = (props) => { switch (fetchState) { case FetchState.LOADING: return ; + size="sm" data-testid="state-loading"/>; case FetchState.FAIL: return ; + className={`text-${props?.variant ?? 'primary'}`} size="sm" + data-testid="state-fail" />; default: return null; } diff --git a/src/components/items/education-item/EducationItem.test.tsx b/src/components/items/education-item/EducationItem.test.tsx new file mode 100644 index 0000000..48d32a3 --- /dev/null +++ b/src/components/items/education-item/EducationItem.test.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import {render, screen} from '@testing-library/react'; +import EducationItem from './EducationItem'; +import {Education} from '../../../redux/profile/models_d'; + +const education: Education = { + id: '1', + level: 'Level', + university: 'University', + image: 'image.png', + duration: '2 years', +}; + +describe('education item', ()=> { + beforeEach(() => { + render(); + }); + + test('should education contains image', () => { + const imageElement = screen.getByRole('img') as HTMLImageElement; + expect(imageElement.src).toContain(education.image); + }); + + test('should education contains level', () => { + const element = screen.getByText(education.level); + expect(element).toBeInTheDocument(); + }); + + test('should education contains university', () => { + const element = screen.getByText(education.university); + expect(element).toBeInTheDocument(); + }); + + test('should education contains duration', () => { + const element = screen.getByText(education.duration); + expect(element).toBeInTheDocument(); + }); +}); diff --git a/src/components/items/portfolio-item/PortfolioItem.test.tsx b/src/components/items/portfolio-item/PortfolioItem.test.tsx new file mode 100644 index 0000000..c6f98ca --- /dev/null +++ b/src/components/items/portfolio-item/PortfolioItem.test.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import {render, screen} from '@testing-library/react'; +import PortfolioItem from './PortfolioItem'; +import {Portfolio} from '../../../redux/portfolio/models_d'; + +const portfolio: Portfolio = { + id: '1', + title: 'Title', + description: 'Description', + link: 'Link', + icon: 'github', + tags: ['tag_1', 'tag_2'], +}; + +describe('portfolio item', ()=> { + beforeEach(() => { + render(); + }); + + test('should portfolio contains title', () => { + const element = screen.getByText(portfolio.title); + expect(element).toBeInTheDocument(); + }); + + test('should portfolio contains description', () => { + const element = screen.getByText(portfolio.description); + expect(element).toBeInTheDocument(); + }); + + test('should portfolio contains tags', () => { + portfolio.tags.forEach((tag) => { + const element = screen.getByText(tag); + expect(element).toBeInTheDocument(); + }); + }); +}); diff --git a/src/components/items/publication-item/PublicationItem.test.tsx b/src/components/items/publication-item/PublicationItem.test.tsx new file mode 100644 index 0000000..9813bec --- /dev/null +++ b/src/components/items/publication-item/PublicationItem.test.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import {render, screen} from '@testing-library/react'; +import PublicationItem from './PublicationItem'; +import {Publication} from "../../../redux/profile/models_d"; + +const publication: Publication = { + id: '1', + title: 'Title', + journal: 'Journal', + date: 'Date', + link: 'github', +}; + +describe('publication item', ()=> { + beforeEach(() => { + render(); + }); + + test('should publication contains title', () => { + const element = screen.getByText(publication.title); + expect(element).toBeInTheDocument(); + }); + + test('should publication contains journal', () => { + const element = screen.getByText(publication.journal); + expect(element).toBeInTheDocument(); + }); +}); diff --git a/src/redux/experience/experienceReducers.test.ts b/src/redux/experience/experienceReducers.test.ts new file mode 100644 index 0000000..f582c85 --- /dev/null +++ b/src/redux/experience/experienceReducers.test.ts @@ -0,0 +1,32 @@ +import experienceReducers from './experienceReducers'; +import experienceActions from './experienceActions'; +import {Experience} from './models_d'; +import {FetchState} from '../models_d'; + +const experience: Experience = { + id: '1', + title: 'Title', + description: 'Description', + company: { + id: '2', + title: 'companyname', + image: 'image.png', + link: 'linktocompany', + }, + location: 'Here', + duration: '2 years', +}; + +test('set experience should update state', () => { + const experienceResponse = [experience]; + const action = experienceActions.setExperience(experienceResponse); + const state = experienceReducers(undefined, action); + expect(state.data).toEqual(experienceResponse); +}); + +test('set experience state should update state', () => { + const fetchState = FetchState.SUCCESS; + const action = experienceActions.setExperienceState(fetchState); + const state = experienceReducers(undefined, action); + expect(state.dataState).toEqual(fetchState); +}); diff --git a/src/redux/highlights/highlightsReducers.test.ts b/src/redux/highlights/highlightsReducers.test.ts new file mode 100644 index 0000000..6d014a3 --- /dev/null +++ b/src/redux/highlights/highlightsReducers.test.ts @@ -0,0 +1,24 @@ +import {Highlight} from './models_d'; +import {FetchState} from '../models_d'; +import highlightsActions from './highlightsActions'; +import highlightsReducers from './highlightsReducers'; + +const highlight: Highlight = { + id: '1', + title: 'Title', + description: 'Description', +}; + +test('set highlights should update state', () => { + const highlights = [highlight]; + const action = highlightsActions.setHighlights(highlights); + const state = highlightsReducers(undefined, action); + expect(state.data).toEqual(highlights); +}); + +test('set highlights state should update state', () => { + const fetchState = FetchState.SUCCESS; + const action = highlightsActions.setHighlightsState(fetchState); + const state = highlightsReducers(undefined, action); + expect(state.dataState).toEqual(fetchState); +}); diff --git a/src/redux/highlights/models_d.ts b/src/redux/highlights/models_d.ts index 8ae07db..48ab08d 100644 --- a/src/redux/highlights/models_d.ts +++ b/src/redux/highlights/models_d.ts @@ -3,7 +3,7 @@ import {FetchState} from '../models_d'; export type Highlight = { id: string; title: string; - description: number; + description: string; } export type HighlightsResponse = Highlight[] export type HighlightsState = { diff --git a/src/redux/portfolio/portfolioReducers.test.ts b/src/redux/portfolio/portfolioReducers.test.ts new file mode 100644 index 0000000..74e386b --- /dev/null +++ b/src/redux/portfolio/portfolioReducers.test.ts @@ -0,0 +1,34 @@ +import {Portfolio, PortfolioSection} from './models_d'; +import {FetchState} from '../models_d'; +import portfoliosActions from './portfolioActions'; +import portfoliosReducers from './portfolioReducers'; + +const portfolio: Portfolio = { + id: '1', + title: 'Title', + description: 'Description', + link: 'Link', + icon: 'github', + tags: ['tag_1', 'tag_2'], +}; + +const portfolioSection: PortfolioSection = { + id: '', + title: '', + description: '', + portfolio: [portfolio], +}; + +test('set portfolio should update state', () => { + const portfolioSections = [portfolioSection]; + const action = portfoliosActions.setPortfolios(portfolioSections); + const state = portfoliosReducers(undefined, action); + expect(state.data).toEqual(portfolioSections); +}); + +test('set portfolio state should update state', () => { + const fetchState = FetchState.SUCCESS; + const action = portfoliosActions.setPortfoliosState(fetchState); + const state = portfoliosReducers(undefined, action); + expect(state.dataState).toEqual(fetchState); +}); diff --git a/src/redux/profile/profileReducers.test.ts b/src/redux/profile/profileReducers.test.ts new file mode 100644 index 0000000..7db1a8a --- /dev/null +++ b/src/redux/profile/profileReducers.test.ts @@ -0,0 +1,24 @@ +import {ProfileResponse} from './models_d'; +import {FetchState} from '../models_d'; +import profileActions from './profileActions'; +import profileReducers from './profileReducers'; + +const profile: ProfileResponse = { + id: '1', + firstName: 'Title', + lastName: 'Description', + title: 'dev', +}; + +test('set profile should update state', () => { + const action = profileActions.setProfile(profile); + const state = profileReducers(undefined, action); + expect(state.data).toEqual(profile); +}); + +test('set profile state should update state', () => { + const fetchState = FetchState.SUCCESS; + const action = profileActions.setProfileState(fetchState); + const state = profileReducers(undefined, action); + expect(state.dataState).toEqual(fetchState); +});