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);
+});