From f8b40d9e9fa7fad3de782554a2f67c57d5ab2e62 Mon Sep 17 00:00:00 2001
From: Zak Henry <zak@cloudnc.com>
Date: Tue, 3 Mar 2020 14:25:24 +0000
Subject: [PATCH] test(Form Status): Add failing test for form status

---
 cypress/helpers/data.helper.ts                     |  2 +-
 cypress/helpers/dom.helper.ts                      | 14 ++++++++++++--
 src/app/app.spec.e2e.ts                            | 10 ++++++++++
 .../listing-form/listing-form.component.html       | 10 ++++++++++
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/cypress/helpers/data.helper.ts b/cypress/helpers/data.helper.ts
index 34645121..539302c0 100644
--- a/cypress/helpers/data.helper.ts
+++ b/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()));
diff --git a/cypress/helpers/dom.helper.ts b/cypress/helpers/dom.helper.ts
index 1945478c..317145cc 100644
--- a/cypress/helpers/dom.helper.ts
+++ b/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);
           },
         };
       },
diff --git a/src/app/app.spec.e2e.ts b/src/app/app.spec.e2e.ts
index 6e6b79f2..8be39adc 100644
--- a/src/app/app.spec.e2e.ts
+++ b/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.status.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();
 
diff --git a/src/app/main/listing/listing-form/listing-form.component.html b/src/app/main/listing/listing-form/listing-form.component.html
index 008d6823..6100ed2f 100644
--- a/src/app/main/listing/listing-form/listing-form.component.html
+++ b/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>