add addon-interactions to angular project

examples/angular-cli/.storybook/main.js

@@ -7,6 +7,7 @@ module.exports = {
     '@storybook/addon-storysource',
     '@storybook/addon-actions',
     '@storybook/addon-viewport',
+    '@storybook/addon-interactions',
     '@storybook/addon-links',
     '@storybook/addon-jest',
     '@storybook/addon-backgrounds',

examples/angular-cli/package.json

@@ -44,13 +44,16 @@
     "@storybook/addon-backgrounds": "6.4.0-beta.9",
     "@storybook/addon-controls": "6.4.0-beta.9",
     "@storybook/addon-docs": "6.4.0-beta.9",
+    "@storybook/addon-interactions": "6.4.0-beta.9",
     "@storybook/addon-jest": "6.4.0-beta.9",
     "@storybook/addon-links": "6.4.0-beta.9",
     "@storybook/addon-storyshots": "6.4.0-beta.9",
     "@storybook/addon-storysource": "6.4.0-beta.9",
     "@storybook/addons": "6.4.0-beta.9",
     "@storybook/angular": "6.4.0-beta.9",
+    "@storybook/jest": "0.0.0-alpha.3",
     "@storybook/source-loader": "6.4.0-beta.9",
+    "@storybook/testing-library": "0.0.0-alpha.3",
     "@types/core-js": "^2.5.4",
     "@types/jest": "^26.0.16",
     "@types/node": "^14.14.20",

examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts

@@ -0,0 +1,26 @@
+import { Story, Meta } from '@storybook/angular';
+import { expect } from '@storybook/jest';
+import { within, userEvent } from '@storybook/testing-library';
+
+import { CounterComponent } from './counter/counter.component';
+
+export default {
+  title: 'Addons/Interactions',
+  component: CounterComponent,
+} as Meta;
+
+const Template: Story = (args) => ({
+  props: args,
+});
+
+export const Default: Story = Template.bind({});
+
+Default.play = async ({ canvasElement }) => {
+  // TODO: Testing library does NOT support shadow dom. This will not work.
+  // We can try this instead: https://www.npmjs.com/package/testing-library__dom but it's in beta and hasn't been updated in 8 months
+  const canvas = within(canvasElement);
+  await userEvent.click(await canvas.findByText('Increment'));
+
+  const count = await canvas.findByTestId('count');
+  // await expect(count.textContent).toEqual('1');
+};

examples/angular-cli/src/stories/addons/interactions/counter/counter.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-counter',
+  template: `
+    <div>
+      <h1>Angular - Counter</h1>
+      <h2 data-testid="count">You clicked {{ count }} times</h2>
+      <button type="button" (click)="decrement()">Decrement</button>
+      <button type="button" (click)="increment()">Increment</button>
+    </div>
+  `,
+})
+export class CounterComponent {
+  count = 0;
+
+  increment() {
+    this.count += 1;
+  }
+
+  decrement() {
+    this.count -= 1;
+  }
+}