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
atlassian-labs/storybook-addon-performance#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

@@ -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' },