Skip to content

Implemented snapshot tests #145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JoeyRivera01 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Implemented snapshot tests #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7b544db
Implemented snapshot tests
JoeyRivera01 Jun 19, 2021
0a118f7
Update README.md
JoeyRivera01 Aug 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# FEC
Front End Capstone for Hack Reactor
# FEC - Threads
An online clothing store application with a modern design and responsive UX

# Video Demo
https://bit.ly/3j5nzra

## Getting a Copy of the Repo
If you haven't already, fork the repository on GitHub and clone your newly created repo down to your computer.
Expand Down
26 changes: 24 additions & 2 deletions client/src/relatedItems/Carousel/__test__/Carousel.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ afterEach(() => {
cleanup();
});

it ('renders the Related Carousel without crashing', () => {
test('renders the Related Carousel without crashing', () => {
render(<Carousel
products={productsWithStyle}
productId={13023}
Expand All @@ -23,7 +23,7 @@ it ('renders the Related Carousel without crashing', () => {
expect(carouselElement).toBeInTheDocument();
});

it ('renders Outfit Carousel without crashing', () => {
test('renders Outfit Carousel without crashing', () => {
render(<Carousel
products={sampleOutfits}
productId={13023}
Expand All @@ -33,4 +33,26 @@ it ('renders Outfit Carousel without crashing', () => {
/>);
const carouselElement = screen.getByTestId('carousel-1');
expect(carouselElement).toBeInTheDocument();
});

test('related carousel matches snapshot', () => {
const relatedTree = renderer.create(<Carousel
products={productsWithStyle}
productId={13023}
related={true}
overviewProduct={products[0]}
overviewRating={4}
/>).toJSON();
expect(relatedTree).toMatchSnapshot();
});

test('outfit carousel matches snapshot', () => {
const outfitTree = renderer.create(<Carousel
products={sampleOutfits}
productId={13023}
related={false}
overviewProduct={products[0]}
overviewRating={4}
/>).toJSON();
expect(outfitTree).toMatchSnapshot();
});
14 changes: 14 additions & 0 deletions client/src/relatedItems/Carousel/__test__/__snapshots__/Carousel.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`related carousel matches snapshot 1`] = `
<section
className="carousel"
data-testid="carousel-1"
>
<div />
<div
className="cards-container"
/>
<div />
</section>
`;
2 changes: 1 addition & 1 deletion client/src/relatedItems/CompareModal/__test__/CompareModal.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import CompareModal from '../CompareModal.jsx';

it ('renders without crashing', () => {
test('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<CompareModal/>, div);
});
13 changes: 8 additions & 5 deletions client/src/relatedItems/OutfitCard/__test__/OutfitCard.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import React from 'react';
import { render, screen, cleanup } from '@testing-library/react';
import OutfitCard from '../OutfitCard.jsx';
import {renderer, act } from 'react-test-renderer';
import renderer from 'react-test-renderer';
import sampleOutfits from '../../../../../data/sampleOutfits.js';
import '@testing-library/jest-dom/extend-expect';

afterEach(() => {
cleanup();
});

it ('renders without crashing', () => {
act(() => {
render(<OutfitCard outfit={sampleOutfits[13023]}/>);
});
test('renders an outfit card without crashing', () => {
render(<OutfitCard outfit={sampleOutfits[13023]}/>);
const outfitElement = screen.getByTestId('outfit-13023');
expect(outfitElement).toBeInTheDocument();
});

test('outfit card matches snapshot', () => {
const outfitTree = renderer.create(<OutfitCard outfit={sampleOutfits[13023]}/>).toJSON();
expect(outfitTree).toMatchSnapshot();
});
203 changes: 203 additions & 0 deletions client/src/relatedItems/OutfitCard/__test__/__snapshots__/OutfitCard.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`outfit card matches snapshot 1`] = `
<div
className="card-container"
data-testid="outfit-13023"
>
<svg
className="action-btn"
fill="currentColor"
height="1em"
onClick={[Function]}
stroke="currentColor"
strokeWidth="0"
style={
Object {
"backgroundColor": "#fff",
"color": "#000",
}
}
viewBox="0 0 512 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M256 90c44.3 0 86 17.3 117.4 48.6C404.7 170 422 211.7 422 256s-17.3 86-48.6 117.4C342 404.7 300.3 422 256 422s-86-17.3-117.4-48.6C107.3 342 90 300.3 90 256s17.3-86 48.6-117.4C170 107.3 211.7 90 256 90m0-42C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"
/>
<path
d="M360 330.9L330.9 360 256 285.1 181.1 360 152 330.9l74.9-74.9-74.9-74.9 29.1-29.1 74.9 74.9 74.9-74.9 29.1 29.1-74.9 74.9z"
/>
</svg>
<div
className="card-inner-container"
onClick={[Function]}
>
<div
className="card-item"
>
<img
alt="outfit-card"
className="card-image"
loading="lazy"
src="https://images.unsplash.com/photo-1501088430049-71c79fa3283e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80"
/>
</div>
<div
className="card-item text category"
>
JACKETS
</div>
<div
className="card-item text name"
>
Camo Onesie
</div>
<div
className="card-item text"
>
$
</div>
<div
className="card-item text rating"
>
<div
style={
Object {
"overflow": "hidden",
"position": "relative",
}
}
>
<style
dangerouslySetInnerHTML={
Object {
"__html": "
.stars-rating-07095687728856404:before {
position: absolute;
overflow: hidden;
display: block;
z-index: 1;
top: 0; left: 0;
width: 50%;
content: attr(data-forhalf);
color: #ffd700;
}",
}
}
/>
<span
className=""
data-forhalf="★"
data-index={0}
onClick={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
style={
Object {
"color": "#ffd700",
"cursor": "default",
"display": "block",
"float": "left",
"fontSize": "15px",
"overflow": "hidden",
"position": "relative",
}
}
>
★
</span>
<span
className=""
data-forhalf="★"
data-index={1}
onClick={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
style={
Object {
"color": "#ffd700",
"cursor": "default",
"display": "block",
"float": "left",
"fontSize": "15px",
"overflow": "hidden",
"position": "relative",
}
}
>
★
</span>
<span
className=""
data-forhalf="★"
data-index={2}
onClick={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
style={
Object {
"color": "#ffd700",
"cursor": "default",
"display": "block",
"float": "left",
"fontSize": "15px",
"overflow": "hidden",
"position": "relative",
}
}
>
★
</span>
<span
className="stars-rating-07095687728856404"
data-forhalf="★"
data-index={3}
onClick={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
style={
Object {
"color": "gray",
"cursor": "default",
"display": "block",
"float": "left",
"fontSize": "15px",
"overflow": "hidden",
"position": "relative",
}
}
>
★
</span>
<span
className=""
data-forhalf="★"
data-index={4}
onClick={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
style={
Object {
"color": "gray",
"cursor": "default",
"display": "block",
"float": "left",
"fontSize": "15px",
"overflow": "hidden",
"position": "relative",
}
}
>
★
</span>
</div>
</div>
</div>
</div>
`;
9 changes: 7 additions & 2 deletions client/src/relatedItems/RelatedCard/__test__/RelatedCard.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { render, screen, cleanup } from '@testing-library/react';
import {renderer, act } from 'react-test-renderer';
import renderer from 'react-test-renderer';
import '@testing-library/jest-dom/extend-expect';
import RelatedCard from '../RelatedCard.jsx';
import productWithStyle from '../../../../../data/sampleRelatedProducts.js';
Expand All @@ -9,8 +9,13 @@ afterEach(() => {
cleanup();
});

it ('renders without crashing', () => {
test('renders a related card without crashing', () => {
render(<RelatedCard product={productWithStyle[0]} />);
const relatedElement = screen.getByTestId('related-13023');
expect(relatedElement).toBeInTheDocument();
});

test('related card matches snapshot', () => {
const relatedTree = renderer.create(<RelatedCard product={productWithStyle[0]} />).toJSON();
expect(relatedTree).toMatchSnapshot();
});
Loading