Skip to content

Add automated tests to React Ecommerce #59

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

Closed
wants to merge 18 commits into from
Closed

Add automated tests to React Ecommerce #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
263834a
fix sort button
sbmsr Feb 28, 2023
27ef2e6
[]
sbmsr Feb 28, 2023
dedfc55
sort products
sbmsr Feb 28, 2023
77ad98a
local storage
sbmsr Feb 28, 2023
bdafcc6
close on gry click
sbmsr Feb 28, 2023
a965352
nav cart size
sbmsr Feb 28, 2023
71f5d58
nav cart size
sbmsr Feb 28, 2023
794d6a5
subtotal
sbmsr Feb 28, 2023
abb7a4c
init tests
sbmsr Feb 28, 2023
d248d50
tests
sbmsr Mar 1, 2023
910c06d
add filters
sbmsr Mar 1, 2023
5d53d82
finish tests
sbmsr Mar 1, 2023
957be41
remove tests
sbmsr Mar 7, 2023
af5c048
Merge branch 'main' into tests
sbmsr Mar 7, 2023
e40fbc6
remove redirect
sbmsr Mar 8, 2023
dbd6eec
Revert "remove redirect"
sbmsr Mar 8, 2023
a48e1ae
Fix issue #1
sbmsr Mar 11, 2023
c7015eb
s
sbmsr Mar 11, 2023
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
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,5 @@ The best way to ask for help is to ask our Discord community.
## Want more challenges?

Browse our [list of challenges](https://jobsimulator.gumroad.com/) and [join our Discord](https://discord.gg/6VsSMZaM7q) to get notified when new challenges are released.


103 changes: 58 additions & 45 deletions src/Components/Cart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { Dialog, Transition } from "@headlessui/react";
import { XIcon } from "@heroicons/react/outline";
import { ShoppingCartIcon, XIcon } from "@heroicons/react/outline";
import React, { Fragment } from "react";

export default function Cart({ open, setOpen, cart, updateCart }) {
let subtotal = 0;
cart.forEach((p) => (subtotal += p.quantity * p.price));
return (
<Transition.Root show={open} as={Fragment}>
<Dialog
Expand All @@ -22,7 +24,12 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<Dialog.Overlay
className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
onClick={() => {
setOpen(false);
}}
/>
</Transition.Child>

<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
Expand Down Expand Up @@ -51,61 +58,67 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
</button>
</div>
</div>
{cart.length === 0 ? (
<div className="flex flex-col justify-center items-center h-full">
<ShoppingCartIcon className="w-10 h-10" />
<h3>Your Cart is Empty.</h3>
</div>
) : (
<div className="mt-8">
<div className="flow-root">
<ul role="list" className="-my-6 divide-y divide-gray-200">
{cart.map((product) => (
<li key={product.id} className="flex py-6">
<div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
<img
src={product.imageSrc}
alt={product.imageAlt}
className="h-full w-full object-cover object-center"
/>
</div>

<div className="mt-8">
<div className="flow-root">
<ul role="list" className="-my-6 divide-y divide-gray-200">
{cart.map((product) => (
<li key={product.id} className="flex py-6">
<div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
<img
src={product.imageSrc}
alt={product.imageAlt}
className="h-full w-full object-cover object-center"
/>
</div>

<div className="ml-4 flex flex-1 flex-col">
<div>
<div className="flex justify-between text-base font-medium text-gray-900">
<h3>{product.name}</h3>
<p className="ml-4">${product.price}</p>
<div className="ml-4 flex flex-1 flex-col">
<div>
<div className="flex justify-between text-base font-medium text-gray-900">
<h3>{product.name}</h3>
<p className="ml-4">${product.price}</p>
</div>
</div>
</div>
<div className="flex flex-1 items-end justify-between text-sm">
<p className="text-gray-500">Qty {product.quantity}</p>
<div className="flex flex-1 items-end justify-between text-sm">
<p className="text-gray-500">Qty {product.quantity}</p>

<div className="flex">
<button
onClick={() => {
let newCart = cart.filter((p) => {
if (p.id === product.id) {
p.quantity -= 1;
}
<div className="flex">
<button
onClick={() => {
let newCart = cart.filter((p) => {
if (p.id === product.id) {
p.quantity -= 1;
}

return p.quantity > 0;
});
updateCart(newCart);
}}
type="button"
className="font-medium text-gray-500 hover:text-black"
>
Remove
</button>
return p.quantity > 0;
});
updateCart(newCart);
}}
type="button"
className="font-medium text-gray-500 hover:text-black"
>
Remove
</button>
</div>
</div>
</div>
</div>
</li>
))}
</ul>
</li>
))}
</ul>
</div>
</div>
</div>
)}
</div>

<div className="border-t border-gray-200 py-6 px-4 sm:px-6">
<div className="flex justify-between text-base font-medium text-gray-900">
<p>Subtotal</p>
<p>$262.00</p>
<p>${subtotal}</p>
</div>
<p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
<div className="mt-6">
Expand Down
8 changes: 6 additions & 2 deletions src/Components/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { ShoppingBagIcon } from "@heroicons/react/outline";
import React from "react";

export default function NavBar({ setOpen }) {
export default function NavBar({ setOpen, cart }) {
let totalQuantity = 0;
cart.forEach((p) => (totalQuantity += p.quantity));
return (
<div className="bg-white">
<header className="relative">
Expand Down Expand Up @@ -41,7 +43,9 @@ export default function NavBar({ setOpen }) {
className="flex-shrink-0 h-6 w-6 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">
{totalQuantity}
</span>
<span className="sr-only">items in cart, view bag</span>
</button>
</div>
Expand Down
55 changes: 49 additions & 6 deletions src/Components/ProductFilters.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,33 @@ function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}

export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) {
function countFilters(filterOptions) {
let count = 0;

filterOptions["color"].map((color) => {
if (color.checked) {
count += 1;
}
});

filterOptions["price"].map((color) => {
if (color.checked) {
count += 1;
}
});

return count;
}

export default function ProductFilters({
filterOptions,
setFilterOptions,
sortOptions,
setSortOptions,
getDefaultFilterOptions,
}) {
let filterCount = countFilters(filterOptions);

return (
<Disclosure
as="section"
Expand All @@ -24,11 +50,11 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
className="flex-none w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
0 Filters
{filterCount} Filters
</Disclosure.Button>
</div>
<div className="pl-6">
<button type="button" className="text-gray-500">
<button type="button" onClick={() => setFilterOptions(getDefaultFilterOptions())} className="text-gray-500">
Clear all
</button>
</div>
Expand All @@ -46,9 +72,15 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
id={`price-${optionIdx}`}
name="price[]"
defaultValue={option.minValue}
checked={option.checked}
type="checkbox"
className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"
defaultChecked={option.checked}
onClick={() => {
let newFilterOptions = { ...filterOptions };
newFilterOptions.price[optionIdx].checked = !newFilterOptions.price[optionIdx].checked;
setFilterOptions(newFilterOptions);
}}
/>
<label htmlFor={`price-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
{option.label}
Expand All @@ -66,9 +98,15 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
id={`color-${optionIdx}`}
name="color[]"
defaultValue={option.value}
checked={option.checked}
type="checkbox"
className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"
defaultChecked={option.checked}
onClick={() => {
let newFilterOptions = { ...filterOptions };
newFilterOptions.color[optionIdx].checked = !newFilterOptions.color[optionIdx].checked;
setFilterOptions(newFilterOptions);
}}
/>
<label htmlFor={`color-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
{option.label}
Expand Down Expand Up @@ -102,19 +140,24 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
{sortOptions.map((option) => (
<Menu.Item key={option.name}>
{({ active }) => (
<button
onClick={() => {
// TODO
setSortOptions(
sortOptions.map((o) => {
if (o.name === option.name) return { ...o, current: true };
return { ...o, current: false };
})
);
}}
className={classNames(
option.current ? "font-medium text-gray-900" : "text-gray-500",
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm"
"block px-4 py-2 text-sm w-full text-left"
)}
>
{option.name}
Expand Down
Loading