test(Form Status): Add failing test for form status

Author: zak-cloudnc

cypress/helpers/data.helper.ts

@@ -140,4 +140,4 @@ export const hardcodedElementToTestElement = (item: OneListing): ListElement =>
 export const hardcodedElementsToTestList = (items: OneListing[]): ListElement[] =>
   items.map(item => hardcodedElementToTestElement(item));
 
-export const extractErrors = (errors: JQuery<HTMLElement>) => cy.wrap(JSON.parse(errors.text().trim()));
+export const extractPre = (preTag: JQuery<HTMLElement>) => cy.wrap(JSON.parse(preTag.text().trim()));

cypress/helpers/dom.helper.ts

@@ -3,7 +3,7 @@
 import { DroidType } from '../../src/app/interfaces/droid.interface';
 import { ListingType } from '../../src/app/interfaces/listing.interface';
 import { VehicleType } from '../../src/app/interfaces/vehicle.interface';
-import { extractErrors, FormElement, ListElement } from './data.helper';
+import { extractPre, FormElement, ListElement } from './data.helper';
 
 const getTextFromTag = (element: HTMLElement, tag: string): string =>
   Cypress.$(element)
@@ -90,7 +90,17 @@ export const DOM = {
             return cy.get(`*[data-errors]`);
           },
           get obj() {
-            return DOM.form.errors.cy.then(extractErrors);
+            return DOM.form.errors.cy.then(extractPre);
+          },
+        };
+      },
+      get status() {
+        return {
+          get cy() {
+            return cy.get(`*[data-status]`);
+          },
+          get obj() {
+            return DOM.form.status.cy.then(extractPre);
           },
         };
       },

src/app/app.spec.e2e.ts

@@ -257,6 +257,16 @@ context(`EJawa demo`, () => {
     DOM.form.noErrors.should('exist');
   });
 
+  it(`should be pristine and untouched on init when form is valid`, () => {
+    DOM.list.elements.cy.eq(0).click();
+
+    DOM.form.errors.obj.should('eql', {
+      dirty: false,
+      pristine: true,
+      touched: false,
+    });
+  });
+
   it(`should recursively disable the form when disabling the top formGroup`, () => {
     DOM.list.elements.cy.eq(0).click();
 

src/app/main/listing/listing-form/listing-form.component.html

@@ -166,3 +166,13 @@
     <pre>{{ formGroupValues | json }}</pre>
   </mat-card-content>
 </mat-card>
+
+<mat-card class="status">
+  <mat-card-title>Form status</mat-card-title>
+
+  <mat-card-content>
+    <pre data-status>{{
+      { dirty: formGroup.dirty, pristine: formGroup.pristine, touched: formGroup.touched } | json
+    }}</pre>
+  </mat-card-content>
+</mat-card>