diff --git a/src/components/Captures/CaptureGallery.js b/src/components/Captures/CaptureGallery.js index 41978dc81..f3bba34f2 100644 --- a/src/components/Captures/CaptureGallery.js +++ b/src/components/Captures/CaptureGallery.js @@ -12,7 +12,7 @@ import TablePagination from '@material-ui/core/TablePagination'; import TableChartIcon from '@material-ui/icons/TableChart'; import CaptureImageCard from './CaptureImageCard'; import SidePanel from './../SidePanel'; -import styles from './CaptureGalllery.styles'; +import styles from './CaptureGallery.styles'; import { countToLocaleString } from '../../common/numbers'; import { CapturesContext } from '../../context/CapturesContext'; import { SpeciesContext } from '../../context/SpeciesContext'; @@ -28,6 +28,8 @@ const CaptureGallery = ({ handleShowGrowerDetail, }) => { const { + captures, + captureCount, capturesSelected, capturesUndo, isLoading, @@ -35,8 +37,6 @@ const CaptureGallery = ({ isBulkApproving, rowsPerPage, page, - captures, - captureCount, approveAllComplete, approveAll, clickCapture, @@ -205,7 +205,12 @@ const CaptureGallery = ({ - + {captureImageItems} @@ -236,7 +241,7 @@ const CaptureGallery = ({ )} {isApproveAllProcessing && ( -
isApproveAllProcessing is true
+
)} {false && !isApproveAllProcessing && capturesUndo.length > 0 && ( diff --git a/src/components/Captures/CaptureGallery.test.js b/src/components/Captures/CaptureGallery.test.js new file mode 100644 index 000000000..ec0d23f60 --- /dev/null +++ b/src/components/Captures/CaptureGallery.test.js @@ -0,0 +1,177 @@ +import React from 'react'; +import { BrowserRouter } from 'react-router-dom'; +import { + act, + render, + screen, + within, + cleanup, + waitForElementToBeRemoved, +} from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import captureApi from '../../api/treeTrackerApi'; +import theme from '../common/theme'; +import { ThemeProvider } from '@material-ui/core/styles'; +import { AppProvider } from '../../context/AppContext'; +import { CapturesContext } from '../../context/CapturesContext'; +import { GrowerContext } from '../../context/GrowerContext'; +import { SpeciesContext } from '../../context/SpeciesContext'; +import { TagsContext } from '../../context/TagsContext'; +import CaptureGallery from './CaptureGallery'; +import { + CAPTURE, + CAPTURES, + GROWER, + ORGS, + TAG, + TAGS, + SPECIES, + capturesValues, + growerValues, + tagsValues, + speciesValues, +} from '../tests/fixtures'; + +import * as loglevel from 'loglevel'; +const log = loglevel.getLogger('../tests/verify.test'); + +jest.setTimeout(7000); +jest.mock('../../api/treeTrackerApi'); + +describe('Captures', () => { + // mock captures context api methods + const getCaptures = () => { + log.debug('mock getCaptures:'); + return Promise.resolve(CAPTURES); + }; + const getCaptureCount = () => { + log.debug('mock getCaptureCount:'); + return Promise.resolve({ count: 4 }); + }; + + // mock the treeTrackerApi + // let captureApi = require('../../api/treeTrackerApi').default; + + // captureApi.getCaptureById = (_id) => { + // log.debug('mock getCaptureById:'); + // return Promise.resolve(CAPTURE); + // }; + // captureApi.getSpecies = () => { + // log.debug('mock getSpecies:'); + // return Promise.resolve(SPECIES); + // }; + // captureApi.getSpeciesById = (_id) => { + // log.debug('mock getSpeciesById:'); + // return Promise.resolve(SPECIES[0]); + // }; + // captureApi.getCaptureCountPerSpecies = () => { + // log.debug('mock getCaptureCountPerSpecies:'); + // return Promise.resolve({ count: 7 }); + // }; + // captureApi.getTags = () => { + // log.debug('mock getTags:'); + // return Promise.resolve(TAGS); + // }; + // captureApi.getTagById = (_id) => { + // log.debug('mock getTagById:'); + // return Promise.resolve(TAG); + // }; + // captureApi.getOrganizations = () => { + // log.debug('mock getOrganizations:'); + // return Promise.resolve(ORGS); + // }; + + describe('with default values', () => { + beforeEach(async () => { + render( + + {/* */} + {/* */} + {/* */} + + + + {}} + handleShowGrowerDetail={() => {}} + /> + + + + {/* */} + {/* */} + {/* */} + + ); + + await act(() => getCaptures()); + await act(() => getCaptureCount()); + }); + + afterEach(cleanup); + + it('should show captures per page at top and bottom', () => { + const pageNums = screen.getAllByRole('button', { + name: /captures per page: 24/i, + }); + expect(pageNums).toHaveLength(2); + }); + + it('should show page # and capture count', () => { + const counts = Array.from( + document.querySelectorAll('.MuiTablePagination-caption') + ); + const arr = counts.map((count) => count.firstChild.textContent); + expect(arr[1]).toBe('1-4 of 4'); + }); + + it('renders side panel', () => { + expect(screen.getByText(/approve/i)); + expect(screen.getByText(/reject/i)); + expect(screen.getByText(/morphology/i)); + expect(screen.getByText(/additional tags/i)); + }); + + it('renders captures cards', () => { + const cards = screen.getAllByTestId('capture-card'); + expect(cards).toHaveLength(4); + }); + + it('renders capture detail buttons for each card', () => { + const gallery = screen.getByTestId('captures-gallery'); + const captureDetailBtns = within(gallery).getAllByRole('button', { + name: /capture details/i, + }); + const arr = captureDetailBtns.map((link) => link.title); + expect(arr).toHaveLength(4); + }); + + it('renders grower detail buttons for each card', () => { + const gallery = screen.getByTestId('captures-gallery'); + const growerDetailBtns = within(gallery).getAllByRole('button', { + name: /grower details/i, + }); + const arr = growerDetailBtns.map((link) => link.title); + expect(arr).toHaveLength(4); + }); + + it('renders capture location buttons for each card', () => { + const gallery = screen.getByTestId('captures-gallery'); + const captureDetailBtns = within(gallery).getAllByRole('link', { + name: /capture location/i, + }); + const arr = captureDetailBtns.map((link) => link.title); + expect(arr).toHaveLength(4); + }); + + it('renders grower map buttons for each card', () => { + const gallery = screen.getByTestId('captures-gallery'); + const growerDetailBtns = within(gallery).getAllByRole('link', { + name: /grower map/i, + }); + const arr = growerDetailBtns.map((link) => link.title); + expect(arr).toHaveLength(4); + }); + }); +}); diff --git a/src/components/Captures/CaptureGalllery.styles.js b/src/components/Captures/CaptureGalllery.styles.js deleted file mode 100644 index 5dfce813b..000000000 --- a/src/components/Captures/CaptureGalllery.styles.js +++ /dev/null @@ -1,128 +0,0 @@ -import { - selectedHighlightColor, - SIDE_PANEL_WIDTH, -} from '../../common/variables.js'; - -const styles = (theme) => ({ - wrapper: { - padding: theme.spacing(2, 8, 4, 8), - }, - cornerTable: { - margin: theme.spacing(1), - '&>*': { - display: 'inline-flex', - margin: theme.spacing(1, 1), - }, - }, - cardImg: { - width: '100%', - height: 'auto', - }, - cardTitle: { - color: '#f00', - }, - card: { - cursor: 'pointer', - '&:hover $cardMedia': { - transform: 'scale(1.04)', - }, - }, - cardCheckbox: { - position: 'absolute', - height: '1.2em', - width: '1.2em', - top: '0.2rem', - left: '0.3rem', - pointerEvents: 'none', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - zIndex: 1, - }, - cardSelected: { - backgroundColor: theme.palette.action.selected, - }, - cardContent: { - padding: '87% 0 0 0', - position: 'relative', - overflow: 'hidden', - }, - selected: { - border: `2px ${selectedHighlightColor} solid`, - }, - cardMedia: { - position: 'absolute', - top: 0, - bottom: 0, - left: 0, - right: 0, - transform: 'scale(1)', - transition: theme.transitions.create('transform', { - easing: theme.transitions.easing.easeInOut, - duration: '0.2s', - }), - }, - cardWrapper: { - position: 'relative', - padding: theme.spacing(2), - }, - placeholderCard: { - pointerEvents: 'none', - '& $card': { - background: '#eee', - '& *': { - opacity: 0, - }, - }, - }, - title: { - padding: theme.spacing(2, 8), - }, - snackbar: { - bottom: 20, - }, - snackbarContent: { - backgroundColor: theme.palette.action.active, - }, - cardActions: { - display: 'flex', - padding: theme.spacing(0, 2), - }, - button: { - marginRight: '8px', - }, - body: { - width: `calc(100% - ${SIDE_PANEL_WIDTH}px)`, - display: 'flex', - flexDirection: 'column', - overflow: 'auto', - height: '100%', - }, - bodyInner: { - display: 'flex', - flexDirection: 'column', - }, - tooltip: { - maxWidth: 'none', - }, - MuiDialogActionsSpacing: { - paddingLeft: '16px', - paddingRight: '16px', - }, - sidePanelSubmitButton: { - width: '128px', - }, - mb: { - marginBottom: '1rem', - }, - activeFilters: { - width: theme.spacing(5), - height: theme.spacing(5), - marginLeft: '0.75rem', - backgroundColor: theme.palette.stats.green, - fontSize: 'smaller', - fontWeight: 'bold', - }, -}); - -export default styles; diff --git a/src/components/Captures/CaptureImageCard.js b/src/components/Captures/CaptureImageCard.js index 9bed0a5bf..c8453c859 100644 --- a/src/components/Captures/CaptureImageCard.js +++ b/src/components/Captures/CaptureImageCard.js @@ -83,7 +83,7 @@ const CaptureImageCard = ({ const classes = useStyles(); return ( - +
- +
{columns.map(({ attr, label, noSort }) => ( diff --git a/src/components/Captures/CaptureTable.test.js b/src/components/Captures/CaptureTable.test.js index aeb8c8e58..909f8dfb3 100644 --- a/src/components/Captures/CaptureTable.test.js +++ b/src/components/Captures/CaptureTable.test.js @@ -1,13 +1,5 @@ import React from 'react'; -import ReactDOM from 'react-dom'; -import { - act, - render, - screen, - within, - waitFor, - cleanup, -} from '@testing-library/react'; +import { act, render, screen, within, cleanup } from '@testing-library/react'; import axios from 'axios'; import theme from '../common/theme'; import { ThemeProvider } from '@material-ui/core/styles'; @@ -52,7 +44,11 @@ describe('Captures', () => { - + {}} + handleShowGrowerDetail={() => {}} + /> @@ -122,13 +118,30 @@ describe('Captures', () => { expect(rows).toHaveLength(4); }); - it('renders links for planter ids (10-12)', () => { + it('renders map links for capture and grower ids', () => { const table = screen.getByTestId('captures-table-body'); const links = within(table).getAllByRole('link'); const arr = links.map((link) => link.textContent); - expect(arr.includes('10')).toBeTruthy(); - expect(arr.includes('11')).toBeTruthy(); - expect(arr.includes('12')).toBeTruthy(); + expect(arr.includes('Map')).toBeTruthy(); + expect(arr).toHaveLength(8); // 2 for each row + }); + + it('renders capture detail buttons for capture ids', () => { + const table = screen.getByTestId('captures-table-body'); + const captureDetailBtns = within(table).getAllByRole('button', { + name: /view\/edit capture details/i, + }); + const arr = captureDetailBtns.map((link) => link.title); + expect(arr).toHaveLength(4); + }); + + it('renders grower detail buttons for grower ids', () => { + const table = screen.getByTestId('captures-table-body'); + const growerDetailBtns = within(table).getAllByRole('button', { + name: /view\/edit grower details/i, + }); + const arr = growerDetailBtns.map((link) => link.title); + expect(arr).toHaveLength(4); }); it('displays captures data', () => { @@ -237,6 +250,16 @@ describe('Captures', () => { deviceIdentifier: true, speciesId: true, tokenId: true, + age: true, + morphology: true, + captureApprovalTag: true, + rejectionReason: true, + uuid: true, + imageUrl: true, + lat: true, + lon: true, + timeUpdated: true, + note: true, }, }); diff --git a/src/components/tests/fixtures.js b/src/components/tests/fixtures.js index 3e7614d49..fa9d74c6c 100644 --- a/src/components/tests/fixtures.js +++ b/src/components/tests/fixtures.js @@ -214,20 +214,36 @@ const SPECIES = [ const capturesValues = { captures: CAPTURES, captureCount: 4, - selected: [], capture: {}, - numSelected: 0, + capturesSelected: [], + captureAnchor: undefined, + capturesUndo: [], + isLoading: false, + isApproveAllProcessing: false, + approveAllComplete: 0, page: 0, rowsPerPage: 24, order: 'asc', orderBy: 'id', allIds: [], byId: {}, - filter: new FilterModel(), + filter: new FilterModel({ + verifyStatus: [ + { active: true, approved: true }, + { active: true, approved: false }, + ], + }), + invalidateCaptureCount: true, queryCapturesApi: () => {}, getCaptureCount: () => {}, getCaptures: () => {}, getCaptureById: () => {}, + approve: () => {}, + // undoCaptureImage: () => {}, + approveAll: () => {}, + undoAll: () => {}, + updateFilter: () => {}, + clickCapture: () => {}, }; const growerValues = { growers: GROWERS, @@ -258,8 +274,10 @@ const verifyValues = { pageSize: 12, currentPage: 0, filter: new FilterModel({ - approved: false, - active: true, + verifyStatus: [ + { active: true, approved: true }, + { active: true, approved: false }, + ], }), invalidateCaptureCount: true, captureCount: null, diff --git a/src/components/tests/verify.test.js b/src/components/tests/verify.test.js index 3ca27b2cc..962246ccb 100644 --- a/src/components/tests/verify.test.js +++ b/src/components/tests/verify.test.js @@ -18,19 +18,15 @@ import { VerifyContext, VerifyProvider } from '../../context/VerifyContext'; import { GrowerContext, GrowerProvider } from '../../context/GrowerContext'; import { SpeciesProvider } from '../../context/SpeciesContext'; import { TagsContext, TagsProvider } from '../../context/TagsContext'; -import FilterGrower from '../../models/FilterGrower'; -import FilterModel from '../../models/Filter'; import Verify from '../Verify'; import { CAPTURE, CAPTURES, GROWER, - GROWERS, ORGS, TAG, TAGS, SPECIES, - capturesValues, growerValues, verifyValues, tagsValues, @@ -124,7 +120,7 @@ describe('Verify', () => { - , + ); await act(() => captureApi.getCaptureImages()); @@ -137,7 +133,6 @@ describe('Verify', () => { it('renders filter top', () => { const filter = screen.getByRole('button', { name: /filter/i }); userEvent.click(filter); - // screen.logTestingPlaygroundURL(); const verifyStatus = screen.getByLabelText(/awaiting verification/i); expect(verifyStatus).toBeInTheDocument(); @@ -147,12 +142,13 @@ describe('Verify', () => { }); it('renders number of applied filters', async () => { - const filter = screen.getByRole('button', { name: /filter 1/i }); + const filter = screen.getByRole('button', { + name: /filter 1/i, + }); userEvent.click(filter); expect(screen.getByText(/awaiting verification/i)).toBeInTheDocument(); - //data won't actually be filtered but filters should be selected - //why was this set to expect 2 filters? - expect(verifyValues.filter.countAppliedFilters()).toBe(1); + + // screen.logTestingPlaygroundURL(); let dropdown = screen.getByTestId('org-dropdown'); expect(dropdown).toBeInTheDocument(); @@ -160,26 +156,21 @@ describe('Verify', () => { name: /all/i, }); userEvent.click(button); - // the actual list of orgs is displayed in a popup that is not part of FilterTop - // this list is the default list + // the actual list of orgs is displayed in a popup that is not part of FilterTop, this list is the default list const orglist = screen.getByRole('listbox'); - - const orgSelected = screen.getByRole('option', { name: /not set/i }); + const orgSelected = screen.getByRole('option', { + name: /not set/i, + }); userEvent.selectOptions(orglist, orgSelected); - userEvent.click(screen.getByText(/apply/i)); - // screen.logTestingPlaygroundURL(); - expect(screen.getByRole('button', { name: /filter 2/i })).toBeTruthy(); - //this function is still returning 1 - // expect(verifyValues.filter.countAppliedFilters()).toBe(2); + expect( + screen.getByRole('button', { + name: /filter 2/i, + }) + ).toBeTruthy(); }); - // it('renders side panel', () => { - // // screen.logTestingPlaygroundURL(); - // // expect(screen.getByText(/planters per page: 24/i)); - // }); - it('renders captures gallery', () => { // screen.logTestingPlaygroundURL(); const pageSize = screen.getAllByText(/captures per page:/i); @@ -194,7 +185,6 @@ describe('Verify', () => { }); expect(captureDetails).toHaveLength(4); userEvent.click(captureDetails[0]); - // screen.logTestingPlaygroundURL(); expect(screen.getByText(/capture data/i)).toBeInTheDocument(); expect(screen.getByText(/grower identifier/i)).toBeInTheDocument(); expect(screen.getByText(/grower1@some.place/i)).toBeInTheDocument(); @@ -210,7 +200,6 @@ describe('Verify', () => { }); expect(growerDetails).toHaveLength(4); userEvent.click(growerDetails[0]); - screen.logTestingPlaygroundURL(); expect(screen.getByText(/country/i)).toBeInTheDocument(); expect(screen.getByText(/organization ID/i)).toBeInTheDocument(); @@ -220,19 +209,6 @@ describe('Verify', () => { expect(screen.getByText(/phone number/i)).toBeInTheDocument(); expect(screen.getByText(/registered/i)).toBeInTheDocument(); }); - - // it('renders edit planter', () => { - // const planterDetails = screen.getAllByRole('button', { - // name: /planter details/i, - // }); - // userEvent.click(planterDetails[0]); - - // screen.logTestingPlaygroundURL(); - // // - // const editPlanter = screen.getByTestId(/edit-planter/i); - // expect(editPlanter).toBeInTheDocument(); - // userEvent.click(editPlanter); - // }); }); }); diff --git a/src/context/CapturesContext.js b/src/context/CapturesContext.js index e34547d93..b0fcfad55 100644 --- a/src/context/CapturesContext.js +++ b/src/context/CapturesContext.js @@ -78,7 +78,7 @@ export function CapturesProvider(props) { /* EVENT HANDLERS */ const getWhereCondition = () => { const { verifyStatus, ...restFilter } = filter ? filter.getWhereObj() : {}; - console.log('verifyStatus', verifyStatus); + let orCondition = false; let where; if (verifyStatus.length == 1) { diff --git a/src/views/CapturesView.test.js b/src/views/CapturesView.test.js new file mode 100644 index 000000000..cd28a16fb --- /dev/null +++ b/src/views/CapturesView.test.js @@ -0,0 +1,315 @@ +import React from 'react'; +import { BrowserRouter } from 'react-router-dom'; +import { act, render, screen, within, cleanup } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import theme from '../components/common/theme'; +import { ThemeProvider } from '@material-ui/core/styles'; +import { AppProvider } from '../context/AppContext'; +import { CapturesContext } from '../context/CapturesContext'; +import { GrowerContext } from '../context/GrowerContext'; +import { SpeciesContext } from '../context/SpeciesContext'; +import { TagsContext } from '../context/TagsContext'; +import CaptureView from './CapturesView'; +import { + CAPTURE, + CAPTURES, + GROWER, + ORGS, + TAG, + TAGS, + SPECIES, + capturesValues, + growerValues, + tagsValues, + speciesValues, +} from '../components/tests/fixtures'; + +import * as loglevel from 'loglevel'; +const log = loglevel.getLogger('../tests/verify.test'); + +jest.setTimeout(7000); +jest.mock('../api/growers'); +jest.mock('../api/treeTrackerApi'); + +describe.skip('Captures View', () => { + //mock the growers api + // let growerApi = require('../api/growers').default; + + // growerApi.getCount = () => { + // log.debug('mock getCount:'); + // return Promise.resolve({ count: 2 }); + // }; + // growerApi.getGrower = () => { + // log.debug('mock getGrower:'); + // return Promise.resolve(GROWER); + // }; + // growerApi.getGrowerRegistrations = () => { + // log.debug('mock getGrowerRegistrations:'); + // return Promise.resolve([]); + // }; + // growerApi.getGrowerSelfies = (id) => { + // log.debug('mock getGrowerSelfies:'); + // return Promise.resolve([{ planterPhotoUrl: '' }, { planterPhotoUrl: '' }]); + // }; + + // mock the treeTrackerApi + let captureApi = require('../api/treeTrackerApi').default; + + const getCaptures = () => { + log.debug('mock getCaptures:'); + return Promise.resolve(CAPTURES); + }; + const getCaptureCount = () => { + log.debug('mock getCaptureCount:'); + return Promise.resolve({ count: 4 }); + }; + captureApi.getCaptureById = (_id) => { + log.debug('mock getCaptureById:'); + return Promise.resolve(CAPTURE); + }; + captureApi.getSpecies = () => { + log.debug('mock getSpecies:'); + return Promise.resolve(SPECIES); + }; + captureApi.getSpeciesById = (_id) => { + log.debug('mock getSpeciesById:'); + return Promise.resolve(SPECIES[0]); + }; + captureApi.getCaptureCountPerSpecies = () => { + log.debug('mock getCaptureCountPerSpecies:'); + return Promise.resolve({ count: 7 }); + }; + captureApi.getTags = () => { + log.debug('mock getTags:'); + return Promise.resolve(TAGS); + }; + captureApi.getTagById = (_id) => { + log.debug('mock getTagById:'); + return Promise.resolve(TAG); + }; + captureApi.getOrganizations = () => { + log.debug('mock getOrganizations:'); + return Promise.resolve(ORGS); + }; + + describe('render CaptureView with CaptureGallery', () => { + beforeEach(async () => { + render( + + + + + + + + + + + + + + + + ); + + await act(() => getCaptures()); + await act(() => getCaptureCount()); + }); + + afterEach(cleanup); + + it.skip('renders filter', () => { + screen.logTestingPlaygroundURL(); + const filter = screen.getByRole('button', { + name: /filter/i, + }); + userEvent.click(filter); + // screen.logTestingPlaygroundURL(); + + const verifyStatus = screen.getByLabelText(/awaiting verification/i); + expect(verifyStatus).toBeInTheDocument(); + + const orgFilter = screen.getByLabelText(/organization/i); + expect(orgFilter).toBeInTheDocument(); + }); + + it.skip('renders number of applied filters', async () => { + const filter = screen.getByRole('button', { + name: /filter 1/i, + }); + userEvent.click(filter); + expect(screen.getByText(/awaiting verification/i)).toBeInTheDocument(); + //data won't actually be filtered but filters should be selected + // expect(capturesValues.filter.countAppliedFilters()).toBe(1); + + let dropdown = screen.getByTestId('org-dropdown'); + expect(dropdown).toBeInTheDocument(); + let button = within(dropdown).getByRole('button', { + name: /all/i, + }); + userEvent.click(button); + // the actual list of orgs is displayed in a popup that is not part of FilterTop, this list is the default list + const orglist = screen.getByRole('listbox'); + + const orgSelected = screen.getByRole('option', { + name: /not set/i, + }); + + userEvent.selectOptions(orglist, orgSelected); + + userEvent.click(screen.getByText(/apply/i)); + // screen.logTestingPlaygroundURL(); + expect( + screen.getByRole('button', { + name: /filter 2/i, + }) + ).toBeTruthy(); + + // expect(capturesValues.filter.countAppliedFilters()).toBe(2); + }); + + it('renders gallery view', () => { + screen.logTestingPlaygroundURL(); + const pageSize = screen.getAllByText(/captures per page:/i); + expect(pageSize).toHaveLength(2); + expect(screen.getByText(/4 captures/i)); + }); + + it('renders buttons to view table', () => { + const tableBtns = screen.getAllByText(/table view/i); + expect(tableBtns).toHaveLength(2); + }); + + it('renders button to view gallery as disabled', () => { + const galleryBtns = screen.getByText(/gallery view/i); + expect(galleryBtns).toHaveLength(1); + }); + + it('renders capture details', () => { + const captureDetails = screen.getAllByRole('button', { + name: /capture details/i, + }); + expect(captureDetails).toHaveLength(4); + userEvent.click(captureDetails[0]); + + expect(screen.getByText(/capture data/i)).toBeInTheDocument(); + expect(screen.getByText(/grower identifier/i)).toBeInTheDocument(); + expect(screen.getByText(/grower1@some.place/i)).toBeInTheDocument(); + expect(screen.getByText(/device identifier/i)).toBeInTheDocument(); + // expect(screen.getByText(/1 - abcdef123456/i)).toBeInTheDocument(); + expect(screen.getByText(/verification status/i)).toBeInTheDocument(); + expect(screen.getByText(/token status/i)).toBeInTheDocument(); + }); + + it('renders grower details', () => { + const growerDetails = screen.getAllByRole('button', { + name: /grower details/i, + }); + expect(growerDetails).toHaveLength(4); + userEvent.click(growerDetails[0]); + screen.logTestingPlaygroundURL(); + + expect(screen.getByText(/country/i)).toBeInTheDocument(); + expect(screen.getByText(/organization ID/i)).toBeInTheDocument(); + expect(screen.getByText(/person ID/i)).toBeInTheDocument(); + expect(screen.getByText(/ID:/i)).toBeInTheDocument(); + expect(screen.getByText(/email address/i)).toBeInTheDocument(); + expect(screen.getByText(/phone number/i)).toBeInTheDocument(); + expect(screen.getByText(/registered/i)).toBeInTheDocument(); + }); + + // it('renders edit planter', () => { + // const planterDetails = screen.getAllByRole('button', { + // name: /planter details/i, + // }); + // userEvent.click(planterDetails[0]); + + // screen.logTestingPlaygroundURL(); + // // + // const editPlanter = screen.getByTestId(/edit-planter/i); + // expect(editPlanter).toBeInTheDocument(); + // userEvent.click(editPlanter); + // }); + }); + + describe.skip('render view with CaptureTable', () => { + beforeEach(async () => { + render( + + + + + + + + + + + + + + + + ); + + await act(() => getCaptures()); + await act(() => getCaptureCount()); + }); + + afterEach(cleanup); + + it('renders table view', () => { + // screen.logTestingPlaygroundURL(); + const pageSize = screen.getAllByText(/rows per page:/i); + expect(pageSize).toHaveLength(2); + expect(screen.getByText(/4 captures/i)); + }); + + it('renders buttons to view gallery', () => { + const galleryBtns = screen.getAllByText(/gallery view/i); + expect(galleryBtns).toBeInTheDocument(); + }); + + it('renders button to view table as disabled', () => { + const tableBtns = screen.getAllByText(/table view/i); + expect(tableBtns).toHaveLength(1); + }); + + it('renders capture details', () => { + const captureDetails = screen.getAllByRole('button', { + name: /capture details/i, + }); + expect(captureDetails).toHaveLength(4); + userEvent.click(captureDetails[0]); + + expect(screen.getByText(/capture data/i)).toBeInTheDocument(); + expect(screen.getByText(/grower identifier/i)).toBeInTheDocument(); + expect(screen.getByText(/grower1@some.place/i)).toBeInTheDocument(); + expect(screen.getByText(/device identifier/i)).toBeInTheDocument(); + // expect(screen.getByText(/1 - abcdef123456/i)).toBeInTheDocument(); + expect(screen.getByText(/verification status/i)).toBeInTheDocument(); + expect(screen.getByText(/token status/i)).toBeInTheDocument(); + }); + + it('renders grower details', () => { + const growerDetails = screen.getAllByRole('button', { + name: /grower details/i, + }); + expect(growerDetails).toHaveLength(4); + userEvent.click(growerDetails[0]); + screen.logTestingPlaygroundURL(); + + expect(screen.getByText(/country/i)).toBeInTheDocument(); + expect(screen.getByText(/organization ID/i)).toBeInTheDocument(); + expect(screen.getByText(/person ID/i)).toBeInTheDocument(); + expect(screen.getByText(/ID:/i)).toBeInTheDocument(); + expect(screen.getByText(/email address/i)).toBeInTheDocument(); + expect(screen.getByText(/phone number/i)).toBeInTheDocument(); + expect(screen.getByText(/registered/i)).toBeInTheDocument(); + }); + }); +});