From 72353753fcdcb97c61114938ea134259b8761e99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89lise=20Rubio?= <elise.rubio@4sh.fr>
Date: Tue, 14 Nov 2023 18:29:39 +0100
Subject: [PATCH] :white_check_mark: Add project creation & edition test
 scenario

---
 .../e2e/project-creation-and-edition.cy.ts    | 70 +++++++++++++++++++
 .../components/atoms/form/A_inputText.svelte  |  3 +-
 .../components/molecules/M_inputText.svelte   |  3 +-
 .../O_project/O_projectEdition.svelte         |  5 +-
 .../routes/projects/[project]/+page.svelte    |  2 +-
 5 files changed, 78 insertions(+), 5 deletions(-)
 create mode 100644 modules/ui/cypress/e2e/project-creation-and-edition.cy.ts

diff --git a/modules/ui/cypress/e2e/project-creation-and-edition.cy.ts b/modules/ui/cypress/e2e/project-creation-and-edition.cy.ts
new file mode 100644
index 00000000..759a0ab6
--- /dev/null
+++ b/modules/ui/cypress/e2e/project-creation-and-edition.cy.ts
@@ -0,0 +1,70 @@
+Cypress.Commands.add('getBySelectorId', (selectorId) => {
+    cy.get('[data-cy="' + selectorId + '"]');
+});
+
+function generateId(): string {
+    return Math.random().toString(16).slice(2);
+}
+
+function buildProjectName(id): string {
+    return 'project ' + id;
+}
+
+function buildProjectSmallName(id): string {
+    return id;
+}
+
+const projectId = generateId();
+const projectName = buildProjectName(projectId);
+const projectSmallName = buildProjectSmallName(projectId);
+
+const newProjectId = generateId();
+const projectNewName = buildProjectName(newProjectId)
+const projectNewSmallName = buildProjectSmallName(newProjectId);
+
+describe('project creation and edition afterwards', () => {
+    it('create project', () => {
+        cy.visit('/projects')
+        cy.getBySelectorId('name')
+            .type(projectName)
+            .should('have.value', projectName)
+        cy.getBySelectorId('smallName')
+            .type(projectSmallName)
+            .should('have.value', projectSmallName)
+        cy.get('button[type=submit]').click()
+    })
+
+    it('new project should appear in project hierarchies', () => {
+        cy.visit('/')
+        cy.contains(projectName);
+        cy.contains(projectSmallName);
+    })
+
+    it('edit newly created project', () => {
+        cy.visit('/')
+        cy.contains(projectName).click();
+        cy.getBySelectorId('editProject').click();
+
+        cy.getBySelectorId('name')
+            .clear()
+            .type(projectNewName)
+            .should('have.value', projectNewName)
+        cy.getBySelectorId('smallName')
+            .clear()
+            .type(projectNewSmallName)
+            .should('have.value', projectNewSmallName)
+        cy.get('button[type=submit]').click()
+    })
+
+    it('new name should appear in project hierarchies', () => {
+        cy.visit('/')
+        cy.contains(projectNewName);
+        cy.contains(projectNewSmallName);
+    })
+
+    it('old name should not appear anywhere',() => {
+        cy.visit('/')
+        cy.contains(projectName).should('not.exist');
+        cy.contains(projectSmallName).should('not.exist');
+    })
+})
\ No newline at end of file
diff --git a/modules/ui/src/lib/components/atoms/form/A_inputText.svelte b/modules/ui/src/lib/components/atoms/form/A_inputText.svelte
index 514beefc..a45879a5 100644
--- a/modules/ui/src/lib/components/atoms/form/A_inputText.svelte
+++ b/modules/ui/src/lib/components/atoms/form/A_inputText.svelte
@@ -2,9 +2,10 @@
     export let value;
     export let placeholder;
     export let required;
+    export let testId;
 </script>
 
-<input type="text" bind:value={value} {required} placeholder="{placeholder}" class="aInputText">
+<input type="text" bind:value={value} {required} placeholder="{placeholder}" class="aInputText" data-cy="{testId}">
 
 <style lang="scss">
     @import "src/app";
diff --git a/modules/ui/src/lib/components/molecules/M_inputText.svelte b/modules/ui/src/lib/components/molecules/M_inputText.svelte
index ec0ab0d5..48beb6f2 100644
--- a/modules/ui/src/lib/components/molecules/M_inputText.svelte
+++ b/modules/ui/src/lib/components/molecules/M_inputText.svelte
@@ -6,8 +6,9 @@
     export let value;
     export let required;
     export let placeholder;
+    export let testId;
 </script>
 
 <A_label {label}>
-    <A_inputText bind:value={value} {required} {placeholder}></A_inputText>
+    <A_inputText bind:value={value} {required} {placeholder} {testId}></A_inputText>
 </A_label>
diff --git a/modules/ui/src/lib/components/organisms/O_project/O_projectEdition.svelte b/modules/ui/src/lib/components/organisms/O_project/O_projectEdition.svelte
index fb81ddd2..45807bb0 100644
--- a/modules/ui/src/lib/components/organisms/O_project/O_projectEdition.svelte
+++ b/modules/ui/src/lib/components/organisms/O_project/O_projectEdition.svelte
@@ -5,6 +5,7 @@
     import type {Project} from "$lib/domain/Project";
     import {t} from "$lib/services/I18nService";
 
+    export const prerender = false;
     export let project: Project = {} as Project;
 
     function save() {
@@ -17,8 +18,8 @@
 </script>
 
 <form on:submit|preventDefault={save}>
-    <M_inputText label="{$t('project.name')}" bind:value={project.name} required="true" placeholder="{$t('project.name')}"/>
-    <M_inputText label="{$t('project.smallName')}" bind:value={project.smallName} required="true" placeholder="{$t('project.smallName')}"/>
+    <M_inputText label="{$t('project.name')}" bind:value={project.name} required="true" placeholder="{$t('project.name')}" testId="name"/>
+    <M_inputText label="{$t('project.smallName')}" bind:value={project.smallName} required="true" placeholder="{$t('project.smallName')}" testId="smallName"/>
 
     <A_button label="{$t('common.actions.save')}" type="submit"/>
 </form>
diff --git a/modules/ui/src/routes/projects/[project]/+page.svelte b/modules/ui/src/routes/projects/[project]/+page.svelte
index 4260b1a1..62c84b3e 100644
--- a/modules/ui/src/routes/projects/[project]/+page.svelte
+++ b/modules/ui/src/routes/projects/[project]/+page.svelte
@@ -26,7 +26,7 @@
     <a href="{project.id}/envs">Créer un nouvel environnement</a>
 
     <br>
-    <a href="{project.id}/edit">Editer</a>
+    <a href="{project.id}/edit" data-cy="editProject">Editer</a>
 
     {#if moduleEnvMatrix}
         <O_matrixModuleEnv projectRef="{project.id}" matrix="{moduleEnvMatrix}"></O_matrixModuleEnv>