Merge pull request #17 from armancodv/unit-tests

unit tests

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(<Avatar src={testSrc} />);
+  const imageElement = screen.getByRole('img') as HTMLImageElement;
+  expect(imageElement.src).toContain(testSrc);
+});

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(<ExperienceItem experience={experience} />);
+  });
+
+  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();
+  });
+});

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(<HighlightItem highlight={highlight} />);
+  });
+
+  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();
+  });
+});

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(<State fetchState={FetchState.LOADING} />);
+    const element = screen.getByTestId('state-loading');
+    expect(element).toBeInTheDocument();
+  });
+
+  test('should fail show fail icon', () => {
+    render(<State fetchState={FetchState.FAIL} />);
+    const element = screen.getByTestId('state-fail');
+    expect(element).toBeInTheDocument();
+  });
+});

src/components/items/State/State.tsx

@@ -16,10 +16,11 @@ const State: React.FC<FetchStateProps> = (props) => {
     switch (fetchState) {
       case FetchState.LOADING:
         return <Spinner animation="border" variant={props?.variant ?? 'primary'}
-          size="sm"/>;
+          size="sm" data-testid="state-loading"/>;
       case FetchState.FAIL:
         return <FontAwesomeIcon icon={faExclamationTriangle}
-          className={`text-${props?.variant ?? 'primary'}`} size="sm" />;
+          className={`text-${props?.variant ?? 'primary'}`} size="sm"
+          data-testid="state-fail" />;
       default:
         return null;
     }

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(<EducationItem education={education} />);
+  });
+
+  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();
+  });
+});

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(<PortfolioItem portfolio={portfolio} />);
+  });
+
+  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();
+    });
+  });
+});

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(<PublicationItem publication={publication} />);
+  });
+
+  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();
+  });
+});

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

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

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 = {

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

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