From ac9cd8e439544b4e791cecc6a776687cde761d97 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Mon, 22 Jul 2024 17:26:56 +0200
Subject: [PATCH] e2e(me): write basic test for editor form

---
 apps/metadata-editor-e2e/src/e2e/edit.cy.ts   | 60 +++++++++++++++++++
 .../top-toolbar/top-toolbar.component.html    |  2 +
 tools/e2e/commands.ts                         | 13 ++++
 3 files changed, 75 insertions(+)
 create mode 100644 apps/metadata-editor-e2e/src/e2e/edit.cy.ts

diff --git a/apps/metadata-editor-e2e/src/e2e/edit.cy.ts b/apps/metadata-editor-e2e/src/e2e/edit.cy.ts
new file mode 100644
index 0000000000..ed249ca863
--- /dev/null
+++ b/apps/metadata-editor-e2e/src/e2e/edit.cy.ts
@@ -0,0 +1,60 @@
+describe('editor form', () => {
+  beforeEach(() => {
+    cy.login('admin', 'admin', false)
+
+    // Alpine convention record
+    cy.visit('/edit/8698bf0b-fceb-4f0f-989b-111e7c4af0a4')
+
+    cy.clearRecordDrafts()
+
+    // aliases
+    cy.get('gn-ui-form-field[ng-reflect-model=abstract] textarea').as(
+      'abstractField'
+    )
+    cy.get('@abstractField').invoke('val').as('abstractFieldInitialValue')
+    cy.get('[data-cy=save-status]')
+      .invoke('attr', 'data-cy-value')
+      .as('saveStatus')
+  })
+
+  it('form shows correctly', () => {
+    cy.get('gn-ui-record-form').should('be.visible')
+    cy.get('gn-ui-record-form gn-ui-form-field').should('have.length.gt', 0)
+    cy.get('@abstractField')
+      .invoke('val')
+      .should('contain', 'Perimeter der Alpenkonvention in der Schweiz.')
+    cy.get('@saveStatus').should('eq', 'record_up_to_date')
+    cy.screenshot({ capture: 'fullPage' })
+  })
+
+  it('draft record is kept', () => {
+    cy.get('@abstractField').clear()
+    cy.get('@abstractField').type('modified abstract')
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1000) // waiting for draft saving to kick in
+    cy.reload()
+    cy.get('@abstractField').invoke('val').should('eq', 'modified abstract')
+    cy.get('@saveStatus').should('eq', 'draft_changes_pending')
+
+    cy.clearRecordDrafts()
+
+    cy.get('@saveStatus').should('eq', 'record_up_to_date')
+    cy.get('@abstractField')
+      .invoke('val')
+      .should('contain', 'Perimeter der Alpenkonvention in der Schweiz.')
+  })
+
+  it('saving record works', () => {
+    cy.get('@abstractField').clear()
+    cy.get('@abstractField').type('modified abstract before saving')
+    cy.get('md-editor-publish-button').click()
+    cy.get('@saveStatus').should('eq', 'record_up_to_date')
+
+    // restore abstract
+    cy.get('@abstractField').clear()
+    cy.get('@abstractField').then(function (field) {
+      cy.wrap(field).type(this.abstractFieldInitialValue)
+    })
+    cy.get('md-editor-publish-button').click()
+  })
+})
diff --git a/apps/metadata-editor/src/app/edit/components/top-toolbar/top-toolbar.component.html b/apps/metadata-editor/src/app/edit/components/top-toolbar/top-toolbar.component.html
index aab1948240..6bc5f71766 100644
--- a/apps/metadata-editor/src/app/edit/components/top-toolbar/top-toolbar.component.html
+++ b/apps/metadata-editor/src/app/edit/components/top-toolbar/top-toolbar.component.html
@@ -13,6 +13,8 @@
   </gn-ui-button>
   <div
     class="grow flex flex-row items-center justify-center gap-1 text-[14px]"
+    data-cy="save-status"
+    [attr.data-cy-value]="saveStatus$ | async"
     [ngSwitch]="saveStatus$ | async"
   >
     <ng-container *ngSwitchCase="'draft_only'">
diff --git a/tools/e2e/commands.ts b/tools/e2e/commands.ts
index 0c06e446e3..736b225890 100644
--- a/tools/e2e/commands.ts
+++ b/tools/e2e/commands.ts
@@ -15,6 +15,7 @@ declare namespace Cypress {
     login(username?: string, password?: string, redirect?: boolean): void
     signOut(): void
     clearFavorites(): void
+    clearRecordDrafts(): void
 
     // interaction with gn-ui-dropdown-selector
     openDropdown(): Chainable<JQuery<HTMLElement>>
@@ -139,6 +140,18 @@ Cypress.Commands.add(
   }
 )
 
+Cypress.Commands.add('clearRecordDrafts', () => {
+  cy.window().then((window) => {
+    const items = { ...window.localStorage }
+    const draftKeys = Object.keys(items).filter((key) =>
+      key.startsWith('geonetwork-ui-draft-')
+    )
+    draftKeys.forEach((key) => window.localStorage.removeItem(key))
+    cy.log(`Cleared ${draftKeys.length} draft(s).`)
+  })
+  cy.reload()
+})
+
 // -- This is a parent command --
 // Cypress.Commands.add('login', (email, password) => { ... })
 //