BrianJenney

const ProductDetail = () => {
  const classes = useStyles();
  const cart = useSelector(state => state.cart);
  const { product } = useContext(ProductContext);

  return (
      <Card >
        <CardContent>
          <Box>
            {product.name}: {cart.count}

BrianJenney

import React from 'react';
import { cleanup, fireEvent, findByText } from '@testing-library/react';
import { renderWithRedux, createReduxStore } from '/testHelpers';
import ProductDetail from './ProductDetail';
import ProductContext from './ProductContext';

describe('Product Details', () => {

  afterEach(() => {
    cleanup();

BrianJenney

import {
  LoginReducer,
  CartsReducer
} from 'shared-state/lib/Reducers';

import { appSpecificReducer } from './localReducer'

const rootReducer = combineReducers({
  appSpecificReducer,
  LoginReducer,

BrianJenney

import React from 'react'
import {
  Provider,
  createStoreHook,
  createDispatchHook,
  createSelectorHook
} from 'react-redux'

const MyContext = React.createContext(null)
const MyOtherContext = React.createContext(null)

BrianJenney

/* logic for determing a button color based on the page location: */

// using conditional logic

const location = window.location.pathname;

let buttonColor = 'red';

if(location === 'signIn'){
  buttonColor = 'yellow';

BrianJenney

const https = require('https');
//////////// UPDATE THESE VALUES /////////////
const releaseBranch = 'release_branch';
const masterBranch = 'main';
const githubUsername = 'username';
const githubPassword = 'pw';
//////////////////////////////////////////////

// let's use a set so we don't count the same story/repo more than once
const stories = new Set();

BrianJenney

const path = require('path');
const { useBabelRc, override } = require('customize-cra');
module.exports = override((config) => {
  // we need the display names to NOT be mangled in order for our component library to work
  // it uses the display name of a component to map it to the correct style rules
  const updatedConfig = { ...config };

  // use our node_modules and avoid duplicate react errors from deps that also use react
  // when npm-linking
  const npmLinkPaths = {

BrianJenney

export function renderWithRedux(component, { store } = {}) {
  const rendered = render(
    <BrowserRouter>
      <ThemeProvider theme="bri">
        <Provider store={store}>{component}</Provider>
      </ThemeProvider>
    </BrowserRouter>
  );

  // return the methods and properties from our custom render

BrianJenney

import React from 'react';
import { renderWithRedux, createReduxStore } from './tests/testHelpers';
import Cart from './Cart';

describe('Cart', () => {
  it('displays the monetary value of the cart items', () => {
    const cart = {
      items: [
        {
          variant_name: 'Water Jug',

BrianJenney

import { createMemoryHistory } from 'history';

export const renderWithRouterMatch = (
  Component,
  { path = '/', route = '/', history = createMemoryHistory({ initialEntries: [route] }) } = {},
  { store } = {}
) => ({
  ...render(
    <BrowserRouter>
      <Router history={history}>