Add e2e tests for Editor

- Some very basic tests of creating an element and changing some 
properties
- Reference check for button with page navigation

cypress.config.ts

@@ -5,9 +5,9 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
-    baseUrl: 'http://localhost:4202',
+    // baseUrl: 'http://localhost:4202',
     fixturesFolder: 'e2e/fixtures',
     supportFile: 'e2e/support/e2e.ts',
-    specPattern: 'e2e/tests/*.spec.cy.ts'
+    specPattern: 'e2e/tests/**/*.spec.cy.ts'
   }
 });

e2e/support/commands.ts

@@ -37,7 +37,11 @@
 // }
 
 Cypress.Commands.add('openPlayer', () => {
-  cy.visit('/');
+  cy.visit('http://localhost:4202/');
+});
+
+Cypress.Commands.add('openEditor', () => {
+  cy.visit('http://localhost:4201/');
 });
 
 Cypress.Commands.add('loadUnit', (filename: string) => {

e2e/support/index.ts

@@ -5,6 +5,7 @@ declare global {
     interface Chainable {
       loadUnit(value: string): Chainable<JQuery<HTMLElement>>;
       openPlayer(): Chainable<JQuery<HTMLElement>>;
+      openEditor(): Chainable<JQuery<HTMLElement>>;
     }
   }
 }

e2e/tests/editor/editor.spec.cy.ts

+describe('Basic Unit', () => {
+  beforeEach(() => {
+    cy.viewport(1300, 800);
+    cy.openEditor();
+  });
+
+  function addPage() {
+    cy.contains('add').click();
+  }
+
+  function navigateToPage(pageIndex: number) {
+    cy.contains(`Seite ${pageIndex}`).click();
+  }
+
+  function selectFromDropdown(dropdownName: string, optionName: string) {
+    cy.contains('div', dropdownName).find('mat-select').click();
+    cy.get('.cdk-overlay-container').contains(optionName).click();
+  }
+
+  function addButton() {
+    cy.contains('Sonstige').click();
+    cy.contains('Knopf').scrollIntoView().click();
+  }
+
+  /* Check for any false-positives */
+  it('pass some basic crosschecks', () => {
+    cy.contains('Knopf-not-existing').should('not.exist');
+    cy.contains('Seite 1').should('exist');
+  });
+
+  it('opens an expansion panel and adds element from formerly hidden panel', () => {
+    cy.contains('Text').should('be.visible');
+    cy.contains('Knopf').should('not.be.visible');
+    cy.contains('Sonstige').click();
+    cy.contains('Knopf').scrollIntoView().should('be.visible');
+    cy.contains('Knopf').click();
+    cy.get('aspect-page-canvas').contains('Knopf').should('exist');
+  });
+
+  it('creates a button element with label text', () => {
+    cy.get('aspect-page-canvas').contains('Knopf').should('not.exist');
+
+    addButton();
+    cy.contains('div', 'Beschriftung').find('input').clear().type('Neue Beschriftung');
+    cy.get('aspect-page-canvas').contains('Neue Beschriftung').should('exist');
+  });
+
+  it('creates a new page', () => {
+    addPage();
+    cy.contains('Seite 2').should('exist');
+  });
+
+  it('creates a button element with page ref and tries to delete the referenced page', () => {
+    addPage();
+    addPage();
+    navigateToPage(1);
+    addButton();
+    addButton();
+    cy.contains('div', 'Beschriftung').find('input').clear().type('PageRef');
+    selectFromDropdown('Aktion', 'Seitennavigation');
+    selectFromDropdown('Aktionsparameter', '2');
+
+    // Crosscheck: Delete not referenced page
+    navigateToPage(3);
+    cy.contains('div', 'Seite 3').find('button').click();
+    cy.contains('Löschen').click();
+    cy.get('.cdk-overlay-container').contains('Element wird referenziert').should('not.exist');
+    cy.get('.cdk-overlay-container').contains('Seite löschen?');
+    cy.contains('button', 'Bestätigen').click();
+
+    navigateToPage(2);
+    cy.contains('div', 'Seite 2').find('button').click();
+    cy.contains('Löschen').click();
+
+    cy.get('.cdk-overlay-container').contains('Element wird referenziert');
+    cy.get('.cdk-overlay-container').contains('button_2');
+    cy.get('.cdk-overlay-container').contains('button_1').should('not.exist');
+  });
+});