From 032fc8dd376e9e8b876e06dd66c21c7fa759d359 Mon Sep 17 00:00:00 2001
From: Robin Metral <robin.metral@sumup.com>
Date: Fri, 13 Nov 2020 12:16:19 +0100
Subject: [PATCH] test(components): measure checkbox interaction performance

We're not server-side rendering components and I suspect that this is triggering exceptions when
the
storybook-addon-performance tries to run server tasks. Luckily there is a workaround, introduced
in
https://github.com/atlassian-labs/storybook-addon-performance/pull/40.
chore/storybook-performance-addon
diff
--git
a/.storybook/preview.js b/.storybook/preview.js
index c05206c8..c47272ba
100644
---
a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -79,6 +79,12 @@ const
withTrackingAction =
(Story) => (
</TrackingRoot>
);
+addParameters({
+  performance: {
+
allowedGroups:
['client'],
+  },
+});
+
export const decorators = [
withThemeProvider,

//
withStoryStyles,
chore/storybook-performance-addon

chore/storybook-performance-addon
---
 src/components/Checkbox/Checkbox.stories.tsx | 25 ++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index ee23a0b642..5c188e6508 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -15,15 +15,40 @@
 
 import React, { useState, ChangeEvent } from 'react';
 import { action } from '@storybook/addon-actions';
+import {
+  InteractionTaskArgs,
+  PublicInteractionTask,
+} from 'storybook-addon-performance';
+import { fireEvent, findByText, getByLabelText } from '@testing-library/dom';
 
 import { Checkbox, CheckboxProps } from './Checkbox';
 import docs from './Checkbox.docs.mdx';
 
+const interactionTasks: PublicInteractionTask[] = [
+  {
+    name: 'Tick checkbox',
+    description: 'Click the checkbox and wait for the label to change',
+    run: async ({ container }: InteractionTaskArgs): Promise<void> => {
+      const element: HTMLElement | null = getByLabelText(
+        container,
+        'Unchecked',
+      );
+      fireEvent.click(element);
+      await findByText(container, 'Checked', undefined, {
+        timeout: 20000,
+      });
+    },
+  },
+];
+
 export default {
   title: 'Forms/Checkbox',
   component: Checkbox,
   parameters: {
     docs: { page: docs },
+    performance: {
+      interactions: interactionTasks,
+    },
   },
   argTypes: {
     name: { control: 'text' },