title: Test angular component @Output using Storybook and Cypress
body: <p>I am trying to test the output of an angular component.</p>
  <p>I have a checkbox component that output its value using an EventEmitter. The checkbox component is wrapped in a storybook story for demo and testing purposes:</p>
  <pre><code>export const basic = () =&gt; ({
    moduleMetadata: {
      imports: [InputCheckboxModule],
    },
    template: `
  &lt;div style=&quot;color: orange&quot;&gt;
   &lt;checkbox (changeValue)=&quot;changeValue($event)&quot; [selected]=&quot;checked&quot; label=&quot;Awesome&quot;&gt;
   &lt;/checkbox&gt;
  &lt;/div&gt;`,
    props: {
      checked: boolean('checked', true),
      changeValue: action('Value Changed'),
    },
  });
  </code></pre>
  <p>I am using an action to capture the value change and log it to the screen.</p>
  <p>When writing a cypress e2e for this component however, I am only using the iFrame and not the whole storybook application.</p>
  <p>I would like to find a way to test is the output is working. I tried using a spy on the postMessage method in the iFrame but that does not work.</p>
  <pre><code> beforeEach(() =&gt; {
        cy.visit('/iframe.html?id=inputcheckboxcomponent--basic', {
          onBeforeLoad(win) {
            cy.spy(window, 'postMessage').as('postMessage');
          },
        });
      });
  </code></pre>
  <p>and then the assertions would be:</p>
  <pre><code>  cy.get('@postMessage').should('be.called');
  </code></pre>
  <p>Is there any other way how I could assert the <code>(changeValue)=&quot;changeValue($event)&quot;</code>
  has fired?</p>