[e2e] Improve buttons tests

e2e/tests/e2e/button.spec.cy.ts

 import {
-  addPage, navigateToPage, selectFromDropdown
+  addPage, addPostMessageStub, navigateToPage, selectFromDropdown
 } from '../helper-functions';
 
-describe('Basic Unit', { testIsolation: false }, () => {
+describe('Button element', { testIsolation: false }, () => {
   it('creates basic buttons in editor', () => {
     cy.openEditor();
     cy.contains('Sonstige').click();
@@ -64,12 +64,13 @@ describe('Basic Unit', { testIsolation: false }, () => {
     cy.contains('button', 'Knopf-next-unit').click();
     cy.get('@postMessage')
       .should('be.calledWithMatch',
-        Cypress.sinon.match(message => message.type === 'vopUnitNavigationRequestedNotification' &&
-          message.target === 'next'));
+        Cypress.sinon.match({
+          type: 'vopUnitNavigationRequestedNotification',
+          target: 'next'
+        }));
   });
 
   it('finds and uses a button with page nav', () => {
-    addPostMessageStub();
     cy.contains('button', 'Knopf-page-2').click();
     cy.contains('Knopf-seite-2');
   });
@@ -78,13 +79,4 @@ describe('Basic Unit', { testIsolation: false }, () => {
     cy.get('input[type="image"').should('have.attr', 'alt', 'Bild nicht gefunden');
     cy.get('[src^="data:image"]');
   });
-
-  function addPostMessageStub() {
-    const postMessageStub = cy.stub().as('postMessage');
-    cy.window().then(window => {
-      window.parent.addEventListener('message', e => {
-        postMessageStub(e.data);
-      });
-    });
-  }
 });

e2e/tests/helper-functions.ts

@@ -20,3 +20,36 @@ export function addButton() {
   });
   cy.contains('Knopf').click();
 }
+
+export function addPostMessageStub() {
+  const postMessageStub = cy.stub().as('postMessage');
+  cy.window().then(window => {
+    window.parent.addEventListener('message', e => {
+      postMessageStub(e.data);
+    });
+  });
+}
+
+export function assertValueChanged(id: string, value: any): void {
+  cy.get('@postMessage')
+    .should('be.calledWithMatch',
+      Cypress.sinon.match.has('unitState',
+        Cypress.sinon.match.has(
+          'dataParts', Cypress.sinon.match.has('elementCodes',
+            Cypress.sinon.match(
+              `{"id":"${id}","value":${value},"status":"VALUE_CHANGED"}`))
+        )));
+
+  // alternative without 'has'
+  // -------------------------
+  // cy.get('@postMessage')
+  //   .should('be.calledWithMatch',
+  //     Cypress.sinon.match({
+  //       type: 'vopStateChangedNotification',
+  //       unitState: Cypress.sinon.match({
+  //         dataParts: Cypress.sinon.match({
+  //           elementCodes: Cypress.sinon.match('{"id":"dropdown_2","value":2,"status":"VALUE_CHANGED"}')
+  //         })
+  //       })
+  //     }));
+}