Refactor component

client/cypress/components/InputWithLabel.cy.ts

@@ -0,0 +1,21 @@
+import InputWithLabel from '@/components/ui/InputWithLabel.vue';
+
+describe('InputWithLabel', () => {
+  it('renders', () => {
+    const inputSpy = cy.spy().as('inputSpy');
+    cy.mount(InputWithLabel, {
+      props: {
+        value: '',
+        label: 'Label',
+        placeholder: 'Placeholder',
+        onInput: inputSpy,
+      },
+    });
+    cy.getByDataCy('input-with-label-input')
+      .should('have.attr', 'placeholder', 'Placeholder')
+      .type('Hello')
+      .should('have.value', 'Hello');
+    cy.getByDataCy('input-with-label-label').should('contain.text', 'Label');
+    cy.get('@inputSpy').should('have.been.calledWith', 'Hello');
+  });
+});

client/cypress/components/SubmissionForm.cy.ts

@@ -19,5 +19,6 @@ describe('SubmissionForm', () => {
         onReopen: () => { },
       },
     });
+    cy.getByDataCy('submission-textarea').should('exist').should('have.attr', 'placeholder', 'placeholder');
   });
 });

client/src/components/content-block-form/ContentElementActions.vue

@@ -39,10 +39,10 @@
           @click="emitAndClose('move-down')"
         />
         <button-with-icon-and-text
+          icon="arrow-thin-bottom"
           class="content-element-actions__button"
           :large="true"
           :disabled="!actions.down"
-          icon="arrow-thin-bottom"
           text="Ganz nach unten verschieben"
           v-if="actions.extended"
           @click="emitAndClose('move-bottom')"

client/src/components/ui/InputWithLabel.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="input-with-label">
-    <label class="input-with-label__label">{{ label }}</label>
+    <label
+      data-cy="input-with-label-label"
+      class="input-with-label__label"
+      >{{ label }}</label
+    >
     <input
-      :model-value="value"
+      :value="value"
       :placeholder="placeholder"
       data-cy="input-with-label-input"
       class="skillbox-input"
-      @change:modelValue="$emit('input', $event.target.value)"
+      @input="$emit('input', $event.target.value)"
     />
   </div>
 </template>