[e2e] Add Dropdown tests

e2e/tests/e2e/dropdown.spec.cy.ts

+import {
+  addOption,
+  addPostMessageStub,
+  assertValueChanged,
+  setCheckbox,
+  setLabelText
+} from '../helper-functions';
+
+describe('Dropdown element', { testIsolation: false }, () => {
+  it('creates basic dropdown with 2 options', () => {
+    cy.openEditor();
+    cy.contains('Klappliste').click();
+    setLabelText('Klappliste mit Optionen');
+    addOption('AAA');
+    addOption('BBB');
+  });
+
+  it('creates dropdown with preset value and allowed deselection', () => {
+    cy.contains('Klappliste').click();
+    setLabelText('Klappliste-deselection');
+    addOption('AAA');
+    addOption('BBB');
+    cy.get('aspect-element-properties').contains('mat-form-field', 'Vorbelegung')
+      .find('mat-select').click();
+    cy.get('.cdk-overlay-container').contains('AAA').click();
+    setCheckbox('Deselektion erlauben');
+  });
+
+  it('saves unit definition', () => {
+    cy.saveUnit('e2e/downloads/dropdown.json');
+  });
+
+  // ### PLAYER ####
+
+  it('passes some basic checks', () => {
+    cy.openPlayer();
+    cy.loadUnit('../downloads/dropdown.json');
+    cy.contains('Dropdown-not-existing').should('not.exist');
+    cy.get('aspect-dropdown').should('have.length', 2);
+    cy.contains('aspect-dropdown', 'Klappliste mit Optionen').should('exist');
+  });
+
+  it('selects an option', () => {
+    addPostMessageStub();
+    cy.contains('aspect-dropdown', 'Klappliste mit Optionen').should('exist');
+    cy.contains('div', 'Klappliste mit Optionen').find('mat-select').click();
+    cy.get('.cdk-overlay-container').contains('BBB').click();
+
+    cy.contains('aspect-dropdown', 'Klappliste mit Optionen')
+      .find('mat-select')
+      .find('mat-select-trigger')
+      .should('have.text', 'BBB');
+
+    assertValueChanged('dropdown_1', 2);
+  });
+
+  it('deselects a preset option', () => {
+    cy.contains('aspect-dropdown', 'Klappliste-deselection')
+      .find('mat-select')
+      .find('mat-select-trigger')
+      .should('have.text', 'AAA');
+    cy.contains('div', 'Klappliste-deselection').find('mat-select').click();
+    cy.get('.cdk-overlay-container')
+      .find('mat-option')
+      .first()
+      .click();
+    cy.contains('aspect-dropdown', 'Klappliste-deselection')
+      .find('mat-select')
+      .find('mat-select-trigger')
+      .should('not.exist');
+  });
+});

e2e/tests/helper-functions.ts

@@ -11,6 +11,28 @@ export function selectFromDropdown(dropdownName: string, optionName: string) {
   cy.get('.cdk-overlay-container').contains(optionName).click();
 }
 
+export function addOption(optionName: string): void {
+  cy.contains('fieldset', 'Optionen')
+    .contains('mat-form-field', 'Neue Option')
+    .find('input')
+    .clear()
+    .type(`${optionName}{enter}`);
+}
+
+export function setLabelText(labelText: string): void {
+  cy.contains('fieldset', 'Eingabeelement')
+    .contains('div', 'Beschriftung').find('input')
+    .clear()
+    .type(labelText);
+}
+
+export function setCheckbox(labelText: string): void {
+  cy.get('aspect-element-model-properties-component')
+    .contains('mat-checkbox', labelText)
+    .find('[type="checkbox"]')
+    .click();
+}
+
 export function addButton() {
   // Check if expansion panel is already open; this is important for non-isolated tests
   cy.get('mat-expansion-panel').contains('Sonstige').then(expansionPanel => {