chore(content-picker): Add visual regression tests (#4000)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: greg-in-a-box

src/elements/content-picker/stories/tests/ContentPicker-visual.stories.js

@@ -1,7 +1,8 @@
+import React from 'react';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 import { http, HttpResponse } from 'msw';
 import ContentPicker from '../../ContentPicker';
-import { mockRootFolder } from '../../../common/__mocks__/mockRootFolder';
+import { mockRootFolder, mockEmptyRootFolder } from '../../../common/__mocks__/mockRootFolder';
 
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 
@@ -22,6 +23,95 @@ export const selectedEmptyState = {
     },
 };
 
+export const singleSelect = {
+    args: {
+        maxSelectable: 1,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await waitFor(() => {
+            expect(canvas.getByText('An Ordered Folder')).toBeInTheDocument();
+        });
+
+        const rows = canvas.getAllByRole('row');
+        await userEvent.click(rows[3]);
+        await waitFor(() => {
+            expect(canvas.getByRole('button', { name: 'Choose' })).not.toBeDisabled();
+        });
+    },
+};
+
+export const multipleSelect = {
+    args: {
+        maxSelectable: 3,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await waitFor(() => {
+            expect(canvas.getByText('An Ordered Folder')).toBeInTheDocument();
+        });
+
+        const rows = canvas.getAllByRole('row');
+        await userEvent.click(rows[3]);
+        await userEvent.click(rows[4]);
+
+        await waitFor(() => {
+            expect(canvas.getByText('2 Selected')).toBeInTheDocument();
+        });
+    },
+};
+
+export const fileTypeFilter = {
+    args: {
+        extensions: ['doc', 'docx'],
+    },
+};
+
+export const emptyState = {
+    args: {
+        rootFolderId: '74729718131',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await waitFor(() => {
+            expect(canvas.getByText('There are no items in this folder.')).toBeInTheDocument();
+        });
+    },
+};
+
+export const errorEmptyState = {
+    args: {
+        rootFolderId: '191354690948',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await waitFor(() => {
+            expect(canvas.getByText('A network error has occurred while trying to load.')).toBeInTheDocument();
+        });
+    },
+};
+
+export const searchEmptyState = {
+    args: {
+        rootFolderId: '74729718131',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const searchBar = canvas.getByRole('searchbox', { name: 'Search files and folders' });
+        await userEvent.type(searchBar, 'foo');
+
+        expect(canvas.getByText("Sorry, we couldn't find what you're looking for.")).toBeInTheDocument();
+    },
+};
+
+export const customActionButtons = {
+    args: {
+        renderCustomActionButtons: ({ selectedCount }) => (
+            <button type="button">Custom Action ({selectedCount} items)</button>
+        ),
+    },
+};
+
 export default {
     title: 'Elements/ContentPicker/tests/visual',
     component: ContentPicker,
@@ -36,6 +126,12 @@ export default {
                 http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/69083462919`, () => {
                     return HttpResponse.json(mockRootFolder);
                 }),
+                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/74729718131`, () => {
+                    return HttpResponse.json(mockEmptyRootFolder);
+                }),
+                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/191354690948`, () => {
+                    return new HttpResponse('Internal Server Error', { status: 500 });
+                }),
             ],
         },
     },