diff --git a/react/src/__fixtures__/featuresFixture.ts b/react/src/__fixtures__/featuresFixture.ts index bdae0b49..5af397f2 100644 --- a/react/src/__fixtures__/featuresFixture.ts +++ b/react/src/__fixtures__/featuresFixture.ts @@ -288,56 +288,46 @@ export const mockVideoFeature: Feature = { ], }; -export const mockQuestionnaireFeature : Feature = { - "id": 2466139, - "project_id": 94, - "type": "Feature", - "geometry": { - "type": "Point", - "coordinates": [ - -122.306436952, - 47.653046488 - ] +export const mockQuestionnaireFeature: Feature = { + id: 2466139, + project_id: 94, + type: 'Feature', + geometry: { + type: 'Point', + coordinates: [-122.306436952, 47.653046488], }, - "properties": { - "_hazmapper": { - "questionnaire": { - "assets": [ + properties: { + _hazmapper: { + questionnaire: { + assets: [ { - "filename": "Q11-Photo-001.jpg", - "coordinates": [ - -122.30645555555556, - 47.65306388888889 - ] + filename: 'Q11-Photo-001.jpg', + coordinates: [-122.30645555555556, 47.65306388888889], }, { - "filename": "Q12-Photo-001.jpg", - "coordinates": [ - -122.30648611111111, - 47.65299722222222 - ] + filename: 'Q12-Photo-001.jpg', + coordinates: [-122.30648611111111, 47.65299722222222], }, { - "filename": "Q13-Photo-001.jpg", - "coordinates": [ - -122.3064611111111, - 47.652975 - ] - } - ] - } - } + filename: 'Q13-Photo-001.jpg', + coordinates: [-122.3064611111111, 47.652975], + }, + ], + }, + }, }, - "styles": {}, - "assets": [ + styles: {}, + assets: [ { - "id": 2037094, - "path": "94/816c47f4-b34d-4a30-b0d8-e92b11ba100c", - "uuid": "816c47f4-b34d-4a30-b0d8-e92b11ba100c", - "asset_type": "questionnaire", - "original_path": "project-3891343857756007955-242ac117-0001-012/RApp/asif27/Home/GNSS Base Station Setup (Copy 1) 1690582474191.rqa/GNSS Base Station Setup (Copy 1) 1690582474191.rq", - "original_name": null, - "display_path": "project-3891343857756007955-242ac117-0001-012/RApp/asif27/Home/GNSS Base Station Setup (Copy 1) 1690582474191.rqa/GNSS Base Station Setup (Copy 1) 1690582474191.rq" - } - ] -} + id: 2037094, + path: '94/816c47f4-b34d-4a30-b0d8-e92b11ba100c', + uuid: '816c47f4-b34d-4a30-b0d8-e92b11ba100c', + asset_type: 'questionnaire', + original_path: + 'project-3891343857756007955-242ac117-0001-012/RApp/asif27/Home/GNSS Base Station Setup (Copy 1) 1690582474191.rqa/GNSS Base Station Setup (Copy 1) 1690582474191.rq', + original_name: null, + display_path: + 'project-3891343857756007955-242ac117-0001-012/RApp/asif27/Home/GNSS Base Station Setup (Copy 1) 1690582474191.rqa/GNSS Base Station Setup (Copy 1) 1690582474191.rq', + }, + ], +}; diff --git a/react/src/components/AssetDetail/AssetDetail.module.css b/react/src/components/AssetDetail/AssetDetail.module.css index 3730c736..ea06ed06 100644 --- a/react/src/components/AssetDetail/AssetDetail.module.css +++ b/react/src/components/AssetDetail/AssetDetail.module.css @@ -89,6 +89,7 @@ th { .caption { color: #1f5c7a; font-size: 0.8em; + padding-bottom: 0.8em; } .questionnaireImage { width: 100%; diff --git a/react/src/components/AssetDetail/AssetDetail.test.tsx b/react/src/components/AssetDetail/AssetDetail.test.tsx index 7d387d7e..3bfa46fe 100644 --- a/react/src/components/AssetDetail/AssetDetail.test.tsx +++ b/react/src/components/AssetDetail/AssetDetail.test.tsx @@ -28,11 +28,7 @@ describe('AssetDetail', () => { const { getByText } = render(); const assetGeometry = screen.getByTestId('asset-geometry'); await act(async () => { - render( - - ); + render(); }); // Check for title, button, and tables expect(getByText('Photo 4.jpg')).toBeDefined(); diff --git a/react/src/components/AssetDetail/AssetGeometry.tsx b/react/src/components/AssetDetail/AssetGeometry.tsx index 7cc7b2fa..cb9513a3 100644 --- a/react/src/components/AssetDetail/AssetGeometry.tsx +++ b/react/src/components/AssetDetail/AssetGeometry.tsx @@ -2,6 +2,7 @@ import React from 'react'; import _ from 'lodash'; import * as turf from '@turf/turf'; import { Feature, FeatureType } from '@hazmapper/types'; +import styles from './AssetDetail.module.css'; interface AssetGeometryProps { selectedFeature: Feature; @@ -18,7 +19,7 @@ const AssetGeometry: React.FC = ({ selectedFeature }) => { const geometryType = selectedFeature.geometry.type; return ( - <> +
{geometryType === FeatureType.Point && ( @@ -111,7 +112,7 @@ const AssetGeometry: React.FC = ({ selectedFeature }) => {
)} - +
); }; diff --git a/react/src/components/AssetDetail/AssetQuestionnaire.test.tsx b/react/src/components/AssetDetail/AssetQuestionnaire.test.tsx index b992b782..f0bb8c9d 100644 --- a/react/src/components/AssetDetail/AssetQuestionnaire.test.tsx +++ b/react/src/components/AssetDetail/AssetQuestionnaire.test.tsx @@ -14,11 +14,7 @@ jest.mock('antd', () => ({ Carousel: forwardRef(({ children }: any, ref: any) => { // Assign the mock methods to the ref React.useImperativeHandle(ref, () => mockCarouselRef); - return ( -
- {children} -
- ); + return
{children}
; }), Space: ({ children }: any) =>
{children}
, Flex: ({ children }: any) =>
{children}
, @@ -26,10 +22,7 @@ jest.mock('antd', () => ({ jest.mock('@tacc/core-components', () => ({ Button: ({ children, onClick, iconNameBefore }: any) => ( - @@ -60,15 +53,24 @@ describe('AssetQuestionnaire', () => { }); const images = screen.getAllByRole('img'); - expect(images).toHaveLength(mockQuestionnaireFeature?.properties?._hazmapper.questionnaire.assets.length); - - mockQuestionnaireFeature?.properties?._hazmapper.questionnaire.assets.forEach((asset, index) => { - const image = images[index]; - const expectedPreviewPath = `${mockFeatureSource}/${asset.filename}`.replace(/\.([^.]+)$/, '.preview.$1'); - - expect(image.getAttribute('src')).toBe(expectedPreviewPath); - expect(image.getAttribute('alt')).toBe(asset.filename); - }); + expect(images).toHaveLength( + mockQuestionnaireFeature?.properties?._hazmapper.questionnaire.assets + .length + ); + + mockQuestionnaireFeature?.properties?._hazmapper.questionnaire.assets.forEach( + (asset, index) => { + const image = images[index]; + const expectedPreviewPath = + `${mockFeatureSource}/${asset.filename}`.replace( + /\.([^.]+)$/, + '.preview.$1' + ); + + expect(image.getAttribute('src')).toBe(expectedPreviewPath); + expect(image.getAttribute('alt')).toBe(asset.filename); + } + ); }); it('renders navigation buttons', async () => { @@ -78,7 +80,7 @@ describe('AssetQuestionnaire', () => { const prevButton = screen.getByTestId('button-push-left'); const nextButton = screen.getByTestId('button-push-right'); - + expect(prevButton).toBeTruthy(); expect(nextButton).toBeTruthy(); }); @@ -88,10 +90,12 @@ describe('AssetQuestionnaire', () => { setup(); }); - mockQuestionnaireFeature?.properties?._hazmapper.questionnaire.assets.forEach((asset) => { - const caption = screen.getByText(asset.filename); - expect(caption).toBeTruthy(); - }); + mockQuestionnaireFeature?.properties?._hazmapper.questionnaire.assets.forEach( + (asset) => { + const caption = screen.getByText(asset.filename); + expect(caption).toBeTruthy(); + } + ); }); it('handles carousel navigation', async () => {