Add tests

packages/website/package.json

@@ -76,7 +76,8 @@
       "axios": "axios/dist/node/axios.cjs",
       "^csv-stringify/browser/esm/sync": "<rootDir>/../../node_modules/csv-stringify/dist/cjs/sync.cjs"
     },
-    "globalSetup": "./src/global-setup.js"
+    "globalSetup": "./src/global-setup.js",
+    "resetMocks": false
   },
   "browserslist": {
     "production": [

packages/website/src/mocks/mockReefCheckSurvey.ts

@@ -0,0 +1,239 @@
+import { ReefCheckSurvey } from 'store/ReefCheckSurveys/types';
+
+export const mockReefCheckSurvey: ReefCheckSurvey = {
+  id: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+  siteId: 1748,
+  reefCheckSiteId: '6a8719bb-91fe-46c1-9635-37fb1f022ea9',
+  date: '2016-04-20T13:30:00.000Z',
+  errors: 'FALSE',
+  depth: 3,
+  timeOfDayWorkBegan: ' 1:30 pm',
+  timeOfDayWorkEnded: ' 2:15 pm',
+  methodUsedToDetermineLocation: null,
+  riverMouthWidth: '<10m',
+  weather: 'Sunny',
+  airTemp: 31,
+  waterTempAtSurface: 30,
+  waterTempAt3M: 28,
+  waterTempAt10M: 28,
+  approxPopnSizeX1000: 6,
+  horizontalVisibilityInWater: 8,
+  bestReefArea: 'Yes',
+  whyWasThisSiteSelected: 'outside proposed MPA',
+  shelteredOrExposed: 'Exposed',
+  anyMajorStormsInLastYears: 'Yes',
+  whenStorms: null,
+  overallAnthroImpact: 'High',
+  whatKindOfImpacts: null,
+  siltation: 'Always',
+  dynamiteFishing: 'Low',
+  poisonFishing: 'Low',
+  aquariumFishCollection: 'Low',
+  harvestOfInvertsForFood: 'Medium',
+  harvestOfInvertsForCurio: 'Medium',
+  touristDivingSnorkeling: 'None',
+  sewagePollution: 'Medium',
+  industrialPollution: 'None',
+  commercialFishing: 'Low',
+  liveFoodFishing: 'Low',
+  artisinalRecreational: 'Low',
+  otherFormsOfFishing: null,
+  otherFishing: null,
+  yachts: 'None',
+  levelOfOtherImpacts: null,
+  otherImpacts: null,
+  isSiteProtected: 'FALSE',
+  isProtectionEnforced: null,
+  levelOfPoaching: null,
+  spearfishing: null,
+  bannedCommercialFishing: null,
+  recreationalFishing: null,
+  invertebrateShellCollection: null,
+  anchoring: null,
+  diving: null,
+  otherSpecify: null,
+  natureOfProtection: null,
+  siteComments: 'COTs present',
+  substrateComments: null,
+  fishComments: 'Coral recruits observed in area.',
+  invertsComments: null,
+  commentsFromOrganismSheet: null,
+  grouperSize: null,
+  percentBleaching: null,
+  percentColoniesBleached: null,
+  percentOfEachColony: null,
+  suspectedDisease: null,
+  rareAnimalsDetails: null,
+  submittedBy: null,
+  satelliteTemperature: 28.2,
+  organisms: [
+    {
+      id: 1,
+      surveyId: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+      date: '2016-04-20T00:00:00.000Z',
+      organism: 'Butterflyfish',
+      type: 'Fish',
+      s1: 6,
+      s2: 10,
+      s3: 12,
+      s4: 0,
+      recordedBy: null,
+      errors: null,
+    },
+    {
+      id: 2,
+      surveyId: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+      date: '2016-04-20T00:00:00.000Z',
+      organism: 'Haemulidae',
+      type: 'Fish',
+      s1: 0,
+      s2: 1,
+      s3: 0,
+      s4: 0,
+      recordedBy: null,
+      errors: null,
+    },
+    {
+      id: 14,
+      surveyId: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+      date: '2016-04-20T00:00:00.000Z',
+      organism: 'Banded Coral Shrimp',
+      type: 'Invertebrate',
+      s1: 0,
+      s2: 0,
+      s3: 0,
+      s4: 1,
+      recordedBy: null,
+      errors: null,
+    },
+    {
+      id: 15,
+      surveyId: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+      date: '2016-04-20T00:00:00.000Z',
+      organism: 'Diadema',
+      type: 'Invertebrate',
+      s1: 8,
+      s2: 14,
+      s3: 64,
+      s4: 32,
+      recordedBy: null,
+      errors: null,
+    },
+    {
+      id: 16,
+      surveyId: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+      date: '2016-04-20T00:00:00.000Z',
+      organism: 'Pencil Urchin',
+      type: 'Invertebrate',
+      s1: 0,
+      s2: 0,
+      s3: 0,
+      s4: 0,
+      recordedBy: null,
+      errors: null,
+    },
+    {
+      id: 29,
+      surveyId: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+      date: '2016-04-20T00:00:00.000Z',
+      organism: 'Coral Damage Anchor',
+      type: 'Impact',
+      s1: 0,
+      s2: 0,
+      s3: 0,
+      s4: 1,
+      recordedBy: null,
+      errors: null,
+    },
+    {
+      id: 34,
+      surveyId: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+      date: '2016-04-20T00:00:00.000Z',
+      organism: 'Bleaching (% Of Population)',
+      type: 'Impact',
+      s1: 0,
+      s2: 0,
+      s3: 0,
+      s4: 0,
+      recordedBy: null,
+      errors: null,
+    },
+    {
+      id: 39,
+      surveyId: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+      date: '2016-04-20T00:00:00.000Z',
+      organism: 'Turtles',
+      type: 'Rare Animal',
+      s1: 0,
+      s2: 1,
+      s3: 0,
+      s4: 0,
+      recordedBy: null,
+      errors: null,
+    },
+    {
+      id: 40,
+      surveyId: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+      date: '2016-04-20T00:00:00.000Z',
+      organism: 'Mantas',
+      type: 'Rare Animal',
+      s1: 0,
+      s2: 0,
+      s3: 0,
+      s4: 0,
+      recordedBy: null,
+      errors: null,
+    },
+  ],
+  substrates: [
+    {
+      id: 501,
+      surveyId: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+      date: '2016-04-20T00:00:00.000Z',
+      substrateCode: 'HC',
+      s1: 22,
+      s2: 25,
+      s3: 27,
+      s4: 26,
+      recordedBy: null,
+      errors: null,
+    },
+    {
+      id: 502,
+      surveyId: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+      date: '2016-04-20T00:00:00.000Z',
+      substrateCode: 'HC/B',
+      s1: 0,
+      s2: 0,
+      s3: 0,
+      s4: 0,
+      recordedBy: null,
+      errors: null,
+    },
+    {
+      id: 503,
+      surveyId: '000887f9-b8c4-4c43-bc63-700c0e8b385b',
+      date: '2016-04-20T00:00:00.000Z',
+      substrateCode: 'HC/D',
+      s1: 0,
+      s2: 0,
+      s3: 0,
+      s4: 0,
+      recordedBy: null,
+      errors: null,
+    },
+  ],
+  reefCheckSite: {
+    id: '6a8719bb-91fe-46c1-9635-37fb1f022ea9',
+    siteId: 1748,
+    reefName: 'Masigasig/Esteban Reef',
+    orientation: 'SE-NW',
+    country: 'Philippines',
+    stateProvinceIsland: 'Palawan',
+    cityTown: 'Taytay',
+    region: 'Indo-Pacific',
+    distanceFromShore: 127,
+    distanceFromNearestRiver: 0.5,
+    distanceToNearestPopn: 3,
+  },
+};

packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveySummary.tsx

@@ -41,7 +41,7 @@ export const ReefCheckSurveySummaryComponent = ({
             formatDate(survey?.date ?? '')
           )}
         </Typography>
-        <img src={reefCheckLogo} width={180} alt="Reef Check" />
+        <img src={reefCheckLogo} width={180} alt="Reef Check Logo" />
       </Box>
       <Box className={classes.columnCenter} flexShrink={0}>
         <Typography variant="h4">
@@ -104,7 +104,7 @@ export const ReefCheckSurveySummaryComponent = ({
   );
 };
 
-const formatDate = (dateStr: string): string => {
+export const formatDate = (dateStr: string): string => {
   const date = new Date(dateStr);
   return date.toLocaleTimeString([], {
     year: 'numeric',

packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveyTable/ReefCheckSurveyTable.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ColumnDef, ReefCheckSurveyTable } from '.';
+
+jest.mock('@material-ui/lab', () => ({
+  Skeleton: 'mock-skeleton',
+}));
+
+describe('ReefCheckSurveyTable', () => {
+  type MockDataItem = {
+    id: number;
+    name: string;
+    age: string;
+  };
+  const mockTitle = 'title';
+  const mockDescription = 'description';
+  const mockColumns = [
+    { header: 'Name', field: 'name' },
+    { header: 'Age', field: 'age' },
+  ] as ColumnDef<MockDataItem>[];
+  const mockData = [
+    { id: 1, name: 'Joe', age: '30' },
+    { id: 2, name: 'Doe', age: '25' },
+  ];
+
+  function renderReefCheckSurveyTable({
+    loading,
+    data = mockData,
+  }: { loading?: boolean; data?: MockDataItem[] } = {}) {
+    return render(
+      <ReefCheckSurveyTable
+        title={mockTitle}
+        description={mockDescription}
+        columns={mockColumns}
+        data={data}
+        loading={loading}
+      />,
+    );
+  }
+
+  it('should render correctly', () => {
+    const { getByText, container } = renderReefCheckSurveyTable();
+    expect(getByText(mockTitle)).toBeInTheDocument();
+    expect(getByText(mockDescription)).toBeInTheDocument();
+
+    const rows = container.querySelectorAll<HTMLElement>('mock-tablerow');
+    expect(rows.length).toBe(3); // 1 header + 2 data
+    expect(
+      [...container.querySelectorAll('mock-tablecell').values()].map(
+        (el) => el.textContent,
+      ),
+    ).toEqual(['Name', 'Age', 'Joe', '30', 'Doe', '25']);
+  });
+
+  it('should render skeleton rows when loading', () => {
+    const { container } = renderReefCheckSurveyTable({
+      loading: true,
+      data: [],
+    });
+    const rows = container.querySelectorAll<HTMLElement>('mock-tablerow');
+    expect(rows.length).toBe(4); // 1 header + 3 skeleton rows
+    rows.forEach((row, i) => {
+      if (i === 0) {
+        // skip header
+        return;
+      }
+      const cells = row.querySelectorAll('mock-skeleton');
+      expect(cells.length).toBe(mockColumns.length);
+    });
+  });
+});

packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveyTable.tsx → packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveyTable/ReefCheckSurveyTable.tsx

@@ -23,7 +23,7 @@ export type ColumnDef<T> = {
 } & TableCellProps;
 
 type ObjectWithId = {
-  id: string;
+  id: string | number;
 };
 
 type ReefCheckSurveyTableIncomingProps<T extends ObjectWithId> = {

packages/website/src/routes/SiteRoutes/ReefCheckSurveys/ReefCheckSurveyTable/index.ts

@@ -0,0 +1 @@
+export * from './ReefCheckSurveyTable';