[O2B-1196] Add formatting to Data Passes view (#1466)

* format

* correct test

Author: xsalonx

lib/public/views/DataPasses/ActiveColumns/dataPassesActiveColumns.js

@@ -14,6 +14,8 @@
 import { h } from '/js/src/index.js';
 import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
+import { formatSizeInBytes } from '../../../utilities/formatting/formatSizeInBytes.js';
+import { formatItemsCount } from '../../../utilities/formatting/formatItemsCount.js';
 
 /**
  * List of active columns for a generic data passes table
@@ -62,7 +64,7 @@ export const dataPassesActiveColumns = {
 
     reconstructedEventsCount: {
         name: 'Reconstructed Events',
-        format: (reconstructedEventsCount) => reconstructedEventsCount ? reconstructedEventsCount.toLocaleString('en-US') : '-',
+        format: (reconstructedEventsCount) => reconstructedEventsCount ? formatItemsCount(reconstructedEventsCount) : '-',
         visible: true,
         sortable: true,
         classes: 'w-10',
@@ -71,7 +73,7 @@ export const dataPassesActiveColumns = {
     outputSize: {
         name: 'Output Size (B)',
         visible: true,
-        format: (outputSize) => outputSize ? outputSize.toLocaleString('en-US') : '-',
+        format: (outputSize) => outputSize ? formatSizeInBytes(outputSize) : '-',
         sortable: true,
         classes: 'w-10',
     },

test/public/dataPasses/overviewPerLhcPeriod.test.js

@@ -19,6 +19,7 @@ const {
     getAllDataFields,
     fillInput,
     waitForTimeout,
+    validateTableData,
 } = require('../defaults');
 
 const { expect } = chai;
@@ -49,39 +50,23 @@ module.exports = () => {
     });
 
     it('shows correct datatypes in respective columns', async () => {
-        // Expectations of header texts being of a certain datatype
-        const headerDatatypes = {
+        await goToPage(page, 'data-passes-per-lhc-period-overview', { queryParameters: { lhcPeriodId: 2 } });
+
+        const dataSizeUnits = new Set(['B', 'KB', 'MB', 'GB', 'TB']);
+        const tableDataValidators = {
             name: (name) => periodNameRegex.test(name),
             associatedRuns: (display) => /(No runs)|(\d+\nRuns)/.test(display),
             anchoredSimulationPasses: (display) => display === 'Anchored',
             description: (description) => /(-)|(.+)/.test(description),
             reconstructedEventsCount: (reconstructedEventsCount) => !isNaN(reconstructedEventsCount.replace(/,/g, ''))
                 || reconstructedEventsCount === '-',
-            outputSize: (outputSize) => !isNaN(outputSize.replace(/,/g, '')) || outputSize === '-',
+            outputSize: (outpuSize) => {
+                const [number, unit] = outpuSize.split(' ');
+                return !isNaN(number) && dataSizeUnits.has(unit.trim());
+            },
         };
 
-        // We find the headers matching the datatype keys
-        const headers = await page.$$('th');
-        const headerIndices = {};
-        for (const [index, header] of headers.entries()) {
-            const headerContent = await page.evaluate((element) => element.id, header);
-            const matchingDatatype = Object.keys(headerDatatypes).find((key) => headerContent === key);
-            if (matchingDatatype !== undefined) {
-                headerIndices[index] = matchingDatatype;
-            }
-        }
-
-        // We expect every value of a header matching a datatype key to actually be of that datatype
-
-        // Use the third row because it is where statistics are present
-        const firstRowCells = await page.$$('tr:nth-of-type(3) td');
-        for (const [index, cell] of firstRowCells.entries()) {
-            if (index in headerIndices) {
-                const cellContent = await page.evaluate((element) => element.innerText, cell);
-                const expectedDatatype = headerDatatypes[headerIndices[index]](cellContent);
-                expect(expectedDatatype).to.be.true;
-            }
-        }
+        await validateTableData(page, new Map(Object.entries(tableDataValidators)));
     });
 
     it('Should display the correct items counter at the bottom of the page', async () => {