Add new project cypress test

client/cypress/integration/new-project.spec.js

@@ -0,0 +1,13 @@
+describe('New project', () => {
+  it('creates a new project and displays it', () => {
+    cy.login('rahel.cueni', 'test');
+
+    cy.visit('/portfolio');
+    cy.get('[data-cy=add-project-button]').click();
+    cy.get('[data-cy=page-form-input-titel]').type('Some random title');
+    cy.get('[data-cy=page-form-input-beschreibung]').type('This description rocks');
+    cy.get('[data-cy=page-form-input-ziele]').type('Git gud');
+    cy.get('[data-cy=save-project-button]').click();
+    cy.get('.project-widget:first-of-type').contains('rocks');
+  })
+});

client/src/components/page-form/PageFormInput.vue

@@ -3,6 +3,7 @@
     <label class="page-form-input__label" :for="id">{{label}}</label>
     <component :is="type" :class="classes"
                :value.prop="value"
+               :data-cy="cyId"
                :id="id" @input="$emit('input', $event.target.value)"></component>
   </div>
 </template>
@@ -29,6 +30,9 @@
     computed: {
       classes() {
         return `page-form-input__${this.type} skillbox-${this.type}`;
+      },
+      cyId() {
+        return `page-form-input-${this.label.toLowerCase()}`
       }
     },
 

client/src/components/portfolio/AddProject.vue

@@ -1,5 +1,5 @@
 <template>
-  <add-widget route="/new-project"></add-widget>
+  <add-widget route="/new-project" data-cy="add-project-button"></add-widget>
 </template>
 
 <script>