Resolve TMSS-2871 "Front end only"

.gitlab-ci.yml

@@ -509,6 +509,7 @@ integration_test_LTAIngest:
 
 unit_and_integration_and_regression_test_TMSS:
   # for speed reasons, we just run all TMSS related unit/integration&regression tests in one job
+  # Skip item based upon only match
   stage: integration_test
   image: ci_tmss:$CI_COMMIT_SHORT_SHA
   services:
@@ -528,6 +529,8 @@ unit_and_integration_and_regression_test_TMSS:
     - SKIP_PYTHON_COVERAGE=true SKIP_INTEGRATION_TESTS=false SKIP_UNIT_TESTS=false SKIP_REGRESSION_TESTS=false ctest --output-on-failure
   interruptible: true
   allow_failure: true
+  rules:
+  - if: '$CI_COMMIT_BRANCH !~ /Front-End-Only/'
   needs:
     - build_TMSS
   artifacts:

SAS/TMSS/frontend/tmss_webapp/src/routes/Report/failure/failure.report.js

 import { useEffect, useState } from 'react';
 import { Chart } from 'primereact/chart';
-
+import moment from 'moment';
 import { Calendar } from 'primereact/calendar';
 import { Button } from 'primereact/button';
 import { ProgressBar } from 'primereact/progressbar';
@@ -190,6 +190,9 @@ export default function FailureReport() {
     }
 
 
+
+
+
     useEffect(() => {
         const documentStyle = getComputedStyle(document.documentElement);
         const textColor = documentStyle.getPropertyValue('--text-color');
@@ -254,6 +257,10 @@ export default function FailureReport() {
             <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput className='FailureCalender' />
             <Button label="Generate Failure Report" icon={checked} iconPos="right" disabled={checked.length == 0} onClick={() => generateReport()} />
             <Button label="Download Pdf" icon="pi pi-file-pdf" iconPos="right" disabled={!failureReport||isLoading} onClick={() => generatePdf()} />
+
+            <a      href={`data:text/json;charset=utf-8,${encodeURIComponent( JSON.stringify(failureReport) )}`}      download={`${moment(dates[0]).format("DD MMM YYYY")} - ${moment(dates[1]).format("DD MMM YYYY")} failrereport.json`} > 
+            <Button label="Download Json" icon="pi pi-file-export" iconPos="right" disabled={!failureReport||isLoading}
+           />          </a>
         </div>
         {isLoading && <ProgressBar mode="indeterminate" style={{ height: '6px' }} className='failureProgress'> </ProgressBar>}
 

SAS/TMSS/frontend/tmss_webapp/src/tests/report.failure.test.js

@@ -74,15 +74,11 @@ describe('Failure Report Render With Contents', () => {
 
 
 
-describe('Failure Report Generates PDF', () => {
+describe('Failure Report Generates exports', () => {
 
 
 
     it('Failure Report  renders correctly when clicking generate', async () => {
-
-
-
-
         MakePrimaryMock();
         let component
         await act(async () => { component = render(<FailureReport />); });
@@ -99,6 +95,25 @@ describe('Failure Report Generates PDF', () => {
 
         component.unmount();
     });
+
+    it('Failure Report  renders correctly when clicking json', async () => {
+        MakePrimaryMock();
+        let component
+        await act(async () => { component = render(<FailureReport />); });
+        const generateButton = component.getByLabelText('Generate Failure Report');
+        fireEvent.click(generateButton);
+        await waitFor(() => { expect(component.container.querySelector('.failureProgress')).toBeNull(); }, { timeout: 5000 });
+
+        const generateJsonButton = component.getByLabelText('Download Json');
+        fireEvent.click(generateJsonButton);
+
+        // Assert that json download  was called
+        const componentSnapshotAfterDataLoading = component.asFragment();
+        expect(componentSnapshotAfterDataLoading).toMatchSnapshot("After json generating");
+
+        component.unmount();
+    });
+
 });