fix: do not set padding on svg elements and remove list-style on errors

bcgov · Jul 23, 2020 · 9f5581b · 9f5581b
1 parent 8e52273
commit 9f5581b
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/app/containers/Forms/SummaryFormFieldTemplate.tsx b/app/containers/Forms/SummaryFormFieldTemplate.tsx
@@ -81,6 +81,18 @@ const FormFieldTemplate: React.FunctionComponent<FieldTemplateProps> = ({
           padding: 5px 10px;
         }
 
+        .summary-item > svg {
+          // padding on an svg element (e.g. icons) may make its height/width 0 and render the svg invisible (or giant on chrome)
+          padding: 0;
+          margin-top: 10px;
+        }
+
+        .summary-item ul.error-detail {
+          padding: 0;
+          margin: 0;
+          list-style: none;
+        }
+
         .summary-item > source-field-heading {
           padding: 0;
         }

diff --git a/app/cypress/integration/application-form-validation.spec.js b/app/cypress/integration/application-form-validation.spec.js
@@ -90,6 +90,13 @@ describe('When reviewing a submitted application as an analyst', () => {
       '#root_operationalRepresentative_mailingAddress_postalCode +div .error-detail'
     ).contains('Format should be A1A 1A1');
 
+    cy.visit(summaryPageUrl);
+    cy.get('.admin.summary-card').happoScreenshot({
+      component: 'Admin Summary Card',
+      variant: 'with errors'
+    });
+    cy.visit(adminFormUrl);
+
     // Fix invalid data
     cy.get('#root_operationalRepresentative_mailingAddress_postalCode')
       .clear()
@@ -102,7 +109,8 @@ describe('When reviewing a submitted application as an analyst', () => {
     cy.get('#page-content h1').contains('Emission');
     cy.visit(summaryPageUrl);
     cy.get('.admin.summary-card').happoScreenshot({
-      component: 'Admin Summary Card'
+      component: 'Admin Summary Card',
+      variant: 'no errors'
     });
   });
 
@@ -116,14 +124,22 @@ describe('When reviewing a submitted application as an analyst', () => {
       '#root_sourceTypes_0_gases_0_annualEmission +div .error-detail'
     ).contains('is a required property');
 
+    cy.visit(summaryPageUrl);
+    cy.get('.emission.summary-card').happoScreenshot({
+      component: 'Emission Summary Card',
+      variant: 'with errors'
+    });
+    cy.visit(emissionFormUrl);
+
     // Fix invalid data
     cy.get('#root_sourceTypes_0_gases_0_annualEmission').type('42');
     cy.get('form.rjsf').happoScreenshot({component: 'Emissions form'});
     cy.contains('Next Page').click();
     cy.get('#page-content h1').contains('Fuel');
     cy.visit(summaryPageUrl);
     cy.get('.emission.summary-card').happoScreenshot({
-      component: 'Emission Summary Card'
+      component: 'Emission Summary Card',
+      variant: 'no errors'
     });
   });
 
@@ -142,6 +158,13 @@ describe('When reviewing a submitted application as an analyst', () => {
       'is a required property'
     );
 
+    cy.visit(summaryPageUrl);
+    cy.get('.fuel.summary-card').happoScreenshot({
+      component: 'Fuel Summary Card',
+      variant: 'with errors'
+    });
+    cy.visit(fuelFormUrl);
+
     // Fix invalid data
     cy.get('#root_0_fuelRowId').type('Diesel');
     cy.get('#root_0_fuelRowId-item-1 > .dropdown-item').click();
@@ -154,7 +177,8 @@ describe('When reviewing a submitted application as an analyst', () => {
     cy.get('#page-content h1').contains('Production');
     cy.visit(summaryPageUrl);
     cy.get('.fuel.summary-card').happoScreenshot({
-      component: 'Fuel Summary Card'
+      component: 'Fuel Summary Card',
+      variant: 'no errors'
     });
   });
 
@@ -173,6 +197,13 @@ describe('When reviewing a submitted application as an analyst', () => {
       'is a required property'
     );
 
+    cy.visit(summaryPageUrl);
+    cy.get('.production.summary-card').happoScreenshot({
+      component: 'Production Summary Card',
+      variant: 'with errors'
+    });
+    cy.visit(productionFormUrl);
+
     // Fix invalid data
     cy.get('#root_0_productRowId').clear().type('Aluminum');
     cy.get('.dropdown-item').click();
@@ -185,7 +216,8 @@ describe('When reviewing a submitted application as an analyst', () => {
     cy.contains('Next Page').click();
     cy.get('#page-content h1').contains('Summary');
     cy.get('.production.summary-card').happoScreenshot({
-      component: 'Production Summary Card'
+      component: 'Production Summary Card',
+      variant: 'no errors'
     });
   });
 });