import * as React from 'react' import { render, screen, findByRole, getByRole } from '@testing-library/react' import '@testing-library/jest-dom/extend-expect' import { act } from '@testing-library/react-hooks' import { DebugCart } from '../index' import { createWrapper, expectedInitialCartState } from './testHelpers' describe('<DebugCart>', () => { beforeEach(() => { const Wrapper = createWrapper() act(() => { render( <Wrapper> <DebugCart /> </Wrapper> ) return undefined }) }) it('should make a table of properties and values from the cart', async () => { const { cartDetails, ...remainingState } = expectedInitialCartState // console.log(cartDetails) const tableElement = await screen.findByRole('table') expect(tableElement).toBeVisible() const cartDetailsCell = await screen.findByRole('cell', { name: 'cartDetails' }) expect(cartDetailsCell).toBeVisible() const logButton = await findByRole( cartDetailsCell.parentElement, 'button', { name: /log value/i } ) expect(logButton).toBeVisible() for (const property in remainingState) { const keyCell = await screen.findByRole('cell', { name: property }) const valueCell = await getByRole(keyCell.parentElement, 'cell', { name: JSON.stringify(remainingState[property]) }) expect(keyCell).toBeVisible() expect(valueCell).toBeVisible() } }) })