Add interaction tests for InboxScreen

Author: winkerVSbecks

.storybook/main.js

@@ -9,12 +9,16 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/preset-create-react-app',
+    '@storybook/addon-interactions',
   ],
   core: {
     builder: {
       name: 'webpack5',
     },
   },
+  features: {
+    interactionsDebugger: true,
+  },
   webpackFinal: async (config) => {
     return {
       ...config,

package.json

@@ -19,10 +19,11 @@
   "scripts": {
     "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
     "build": "SKIP_PREFLIGHT_CHECK=true react-scripts build",
-    "test": "react-scripts test",
+    "test": "SKIP_PREFLIGHT_CHECK=true react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "test-storybook": "test-storybook"
   },
   "eslintConfig": {
     "extends": [
@@ -55,12 +56,16 @@
   "devDependencies": {
     "@storybook/addon-actions": "^6.5.3",
     "@storybook/addon-essentials": "^6.5.3",
+    "@storybook/addon-interactions": "^6.5.3",
     "@storybook/addon-links": "^6.5.3",
     "@storybook/builder-webpack5": "^6.5.3",
+    "@storybook/jest": "^0.0.10",
     "@storybook/manager-webpack5": "^6.5.3",
     "@storybook/node-logger": "^6.5.3",
     "@storybook/preset-create-react-app": "^4.1.0",
     "@storybook/react": "^6.5.3",
+    "@storybook/test-runner": "^0.1.0",
+    "@storybook/testing-library": "^0.0.11",
     "msw": "^0.40.0",
     "msw-storybook-addon": "^1.6.3"
   },

src/InboxScreen.stories.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { rest } from 'msw';
+import { within, userEvent, findByRole } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import { InboxScreen } from './InboxScreen';
 import { Default as TaskListDefault } from './components/TaskList.stories';
 
@@ -34,3 +36,51 @@ Error.parameters = {
     ],
   },
 };
+
+export const PinTask = Template.bind({});
+PinTask.parameters = Default.parameters;
+PinTask.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const getTask = (name) => canvas.findByRole('listitem', { name });
+
+  // Find the task to pin
+  const itemToPin = await getTask('Export logo');
+
+  // Find the pin button
+  const pinButton = await findByRole(itemToPin, 'button', { name: 'pin' });
+
+  // Click the pin button
+  await userEvent.click(pinButton);
+
+  // Check that the pin button is now a unpin button
+  const unpinButton = within(itemToPin).getByRole('button', { name: 'unpin' });
+  await expect(unpinButton).toBeInTheDocument();
+};
+
+export const ArchiveTask = Template.bind({});
+ArchiveTask.parameters = Default.parameters;
+ArchiveTask.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const getTask = (name) => canvas.findByRole('listitem', { name });
+
+  const itemToArchive = await getTask('QA dropdown');
+  const archiveCheckbox = await findByRole(itemToArchive, 'checkbox');
+  await userEvent.click(archiveCheckbox);
+
+  await expect(archiveCheckbox.checked).toBe(true);
+};
+
+export const EditTask = Template.bind({});
+EditTask.parameters = Default.parameters;
+EditTask.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const getTask = (name) => canvas.findByRole('listitem', { name });
+
+  const itemToEdit = await getTask('Fix bug in input error state');
+  const taskInput = await findByRole(itemToEdit, 'textbox');
+
+  userEvent.type(taskInput, ' and disabled state');
+  await expect(taskInput.value).toBe(
+    'Fix bug in input error state and disabled state'
+  );
+};

src/InboxScreen.test.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import {
+  render,
+  waitFor,
+  cleanup,
+  within,
+  fireEvent,
+} from '@testing-library/react';
+import { composeStories } from '@storybook/testing-react';
+import { getWorker } from 'msw-storybook-addon';
+import * as stories from './InboxScreen.stories';
+
+describe('InboxScreen', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  // Clean up after all tests are done, preventing this
+  // interception layer from affecting irrelevant tests
+  afterAll(() => getWorker().close());
+
+  const { Default } = composeStories(stories);
+
+  it('should pin a task', async () => {
+    const { queryByText, getByRole } = render(<Default />);
+
+    await waitFor(() => {
+      expect(queryByText('You have no tasks')).not.toBeInTheDocument();
+    });
+
+    const getTask = () => getByRole('listitem', { name: 'Export logo' });
+
+    const pinButton = within(getTask()).getByRole('button', { name: 'pin' });
+
+    fireEvent.click(pinButton);
+
+    const unpinButton = within(getTask()).getByRole('button', {
+      name: 'unpin',
+    });
+
+    expect(unpinButton).toBeInTheDocument();
+  });
+
+  it('should archive a task', async () => {
+    const { queryByText, getByRole } = render(<Default />);
+
+    await waitFor(() => {
+      expect(queryByText('You have no tasks')).not.toBeInTheDocument();
+    });
+
+    const task = getByRole('listitem', { name: 'QA dropdown' });
+    const archiveCheckbox = within(task).getByRole('checkbox');
+    expect(archiveCheckbox.checked).toBe(false);
+
+    fireEvent.click(archiveCheckbox);
+    expect(archiveCheckbox.checked).toBe(true);
+  });
+
+  it('should edit a task', async () => {
+    const { queryByText, getByRole } = render(<Default />);
+
+    await waitFor(() => {
+      expect(queryByText('You have no tasks')).not.toBeInTheDocument();
+    });
+
+    const task = getByRole('listitem', {
+      name: 'Fix bug in input error state',
+    });
+    const taskInput = within(task).getByRole('textbox');
+
+    const updatedTaskName = 'Fix bug in the textarea error state';
+
+    fireEvent.change(taskInput, {
+      target: { value: 'Fix bug in the textarea error state' },
+    });
+    expect(taskInput.value).toBe(updatedTaskName);
+  });
+});

src/setupTests.js

@@ -3,3 +3,8 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+
+import { setGlobalConfig } from '@storybook/testing-react';
+import * as globalStorybookConfig from '../.storybook/preview';
+
+setGlobalConfig(globalStorybookConfig);