add e2e tests for showcase

#JSO-22

Author: neferin12

vue-json-form/cypress.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
+  projectId: 'ecbo8x',
     component: {
         devServer: {
             framework: 'vue',

vue-json-form/cypress/e2e/showcase.cy.ts

@@ -15,11 +15,6 @@ describe('Structure', () => {
 
     beforeEach(() => {
         cy.visit('http://localhost:5173/');
-        cy.injectAxe();
-    });
-
-    it('Check entire page for a11y issues', () => {
-        cy.checkA11y();
     });
 
     it('Switch', () => {
@@ -53,4 +48,139 @@ describe('Structure', () => {
         cy.get(id).should('exist');
         cy.get(`${id} > label`).should('exist');
     });
+    describe('Group', () => {
+        it('dueDate', () => {
+            const id = 'input#vjf_control_for__properties_due_date';
+            cy.get(id).should('exist');
+            cy.get(id).should('have.attr', 'type', 'datetime-local');
+        });
+        it('Rating', () => {
+            const id = 'input#vjf_control_for__properties_rating';
+            cy.get(id).should('exist');
+            cy.get(id).should('have.attr', 'type', 'range');
+            cy.get(id).should('have.attr', 'min', '0');
+            cy.get(id).should('have.attr', 'max', '5');
+            cy.get(id).should('have.attr', 'step', '1');
+            cy.get(id).should('have.value', 3);
+        });
+        it('Description', () => {
+            const id = 'textarea#vjf_control_for__properties_description';
+            cy.get(id).should('exist');
+            cy.get(id).should(
+                'have.value',
+                'This good text was set as default'
+            );
+            cy.get(id).should('have.attr', 'rows', '2');
+        });
+        it('Teststring', () => {
+            const id = 'input#vjf_control_for__properties_teststring';
+            cy.get(id).should('exist');
+            cy.get(id).should('have.attr', 'type', 'text');
+        });
+        it('Weekdays', () => {
+            const id = 'div#vjf_control_for__properties_weekdays';
+            cy.get(id).should('exist');
+            cy.get(id).children().should('have.length', 7);
+
+            const weekdays = [
+                'Monday',
+                'Tuesday',
+                'Wednesday',
+                'Thursday',
+                'Friday',
+                'Saturday',
+                'Sunday',
+            ];
+            weekdays.forEach((day, index) => {
+                cy.get(id)
+                    .children()
+                    .eq(index)
+                    .children()
+                    .first()
+                    .should('have.value', day)
+                    .should('have.attr', 'type', 'checkbox');
+            });
+        });
+        it('RecurrenceInterval', () => {
+            const id = 'input#vjf_control_for__properties_recurrence_interval';
+            cy.get(id).should('exist');
+            cy.get(id).should('have.attr', 'type', 'number');
+            cy.get(id).should('have.attr', 'step', '1');
+            cy.get(id)
+                .parent()
+                .parent()
+                .siblings()
+                .eq(0)
+                .should('have.text', 'Weeks');
+        });
+        it('TestArray', () => {
+            const id = 'div[name="/properties/testArray"]';
+            cy.get(id).should('exist');
+            cy.get(`${id} input`).should('exist');
+            cy.get(`${id} input`).should(
+                'have.attr',
+                'placeholder',
+                'This is a placeholder'
+            );
+            cy.get(`${id} button[aria-label='Add Item']`).should('exist');
+        });
+    });
+    describe('Object', () => {
+        beforeEach(() => {
+            cy.get('#vjf_control_for__properties_group_selector')
+                .children()
+                .eq(3)
+                .click();
+        });
+
+        it('name', () => {
+            const id =
+                'input#vjf_control_for__properties_testObject_properties_petName';
+            cy.get(id).should('exist');
+            cy.get(id).should('have.attr', 'type', 'text');
+            cy.get(id)
+                .parent()
+                .parent()
+                .siblings()
+                .eq(0)
+                .should('have.text', 'Give me a name');
+        });
+
+        it('age', () => {
+            const id =
+                'input#vjf_control_for__properties_testObject_properties_age';
+            cy.get(id).should('exist');
+            cy.get(id).should('have.attr', 'type', 'number');
+            cy.get(id).should('have.attr', 'step', '1');
+            cy.get(id).should('have.attr', 'min', '0');
+            cy.get(id).should('have.attr', 'max', '100');
+            cy.get(id).should('have.value', 10);
+        });
+
+        it('flauschig', () => {
+            const id =
+                'input#vjf_control_for__properties_testObject_properties_flauschig';
+            cy.get(id).should('exist');
+            cy.get(id).should('have.attr', 'type', 'checkbox');
+        });
+    });
+
+    it('HTML text', () => {
+        const id = 'span.vjf_htmlRenderer > p ';
+        cy.get(id).should('exist');
+        cy.get(id).should(
+            'have.html',
+            'Ich bin ein <strong class="text-primary">HTML</strong> Text'
+        );
+    });
+
+    it('Tags', () => {
+        const id = 'div#vjf_control_for__properties_tags';
+        cy.get(id).should('exist');
+    });
+
+    it('Form Buttons', () => {
+        cy.get('button[type="submit"]').should('exist');
+        cy.get('button[type="reset"]').should('exist');
+    });
 });