box-ui-elements/src/elements/content-explorer/stories/tests/ContentExplorer-visual.stories.js

Box UI Elements

import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
import { http, HttpResponse } from 'msw';
import ContentExplorer from '../../ContentExplorer';
import { mockEmptyRootFolder, mockRootFolder } from '../../../common/__mocks__/mockRootFolder';
import mockSubfolder from '../../../common/__mocks__/mockSubfolder';
import mockRecentItems from '../../../common/__mocks__/mockRecentItems';
import { mockUserRequest } from '../../../common/__mocks__/mockRequests';

import { DEFAULT_HOSTNAME_API } from '../../../../constants';

export const basic = {
    play: async ({ canvasElement }) => {
        const canvas = within(canvasElement);
        await waitFor(async () => {
            const folder = await canvas.findByText('An Ordered Folder');
            expect(folder).toBeInTheDocument();
            expect(canvas.getByText('Apr 16, 2019 by Preview')).toBeInTheDocument();

            expect(canvas.getByText('Archive')).toBeInTheDocument();
            expect(canvas.getByText('Dec 16, 2020 by Preview')).toBeInTheDocument();

            expect(canvas.getByText('Archived Folder')).toBeInTheDocument();
            expect(canvas.getByText('Dec 17, 2020 by Preview')).toBeInTheDocument();

            expect(canvas.getByText('Book Sample.pdf')).toBeInTheDocument();
            expect(canvas.getByText('Dec 8, 2022 by Preview')).toBeInTheDocument();
        });
    },
};

export const openExistingFolder = {
    play: async ({ canvasElement }) => {
        const canvas = within(canvasElement);

        const subFolder = await canvas.findByText('An Ordered Folder');
        await userEvent.click(subFolder);

        expect(await canvas.findByText('Audio.mp3')).toBeInTheDocument();
    },
};

export const openCreateFolderDialog = {
    play: async ({ canvasElement }) => {
        const canvas = within(canvasElement);

        const addButton = await canvas.findByRole('button', { name: 'Add' });
        await userEvent.click(addButton);

        const dropdown = await screen.findByRole('menu');
        const newFolderButton = await within(dropdown).findByRole('menuitem', { name: 'New Folder' });
        expect(newFolderButton).toBeInTheDocument();
        await userEvent.click(newFolderButton);

        expect(await screen.findByText('Please enter a name.')).toBeInTheDocument();
    },
};

export const closeCreateFolderDialog = {
    play: async ({ canvasElement }) => {
        const canvas = within(canvasElement);

        const addButton = await canvas.findByRole('button', { name: 'Add' });
        await userEvent.click(addButton);

        const dropdown = await screen.findByRole('menu');
        const newFolderButton = await within(dropdown).findByRole('menuitem', { name: 'New Folder' });
        expect(newFolderButton).toBeInTheDocument();
        await userEvent.click(newFolderButton);

        expect(await screen.findByText('Please enter a name.')).toBeInTheDocument();

        const cancelButton = screen.getByText('Cancel');
        await userEvent.click(cancelButton);

        await waitFor(() => {
            expect(screen.queryByText('Please enter a name.')).not.toBeInTheDocument();
        });
    },
};

// export const openDeleteConfirmationDialog = {
//     play: async ({ canvasElement }) => {
//         const canvas = within(canvasElement);

//         await waitFor(async () => {
//             await canvas.findByRole('grid', { name: 'List view' });

//             const moreOptionsButton = await canvas.findAllByRole('button', { name: 'More options' });
//             await userEvent.hover(moreOptionsButton[0]);
//             await userEvent.click(moreOptionsButton[0]);

//             const deleteButton = await screen.findByRole('menuitem', { name: 'Delete' });
//             await userEvent.hover(deleteButton);
//             await userEvent.click(deleteButton);
//         });

//         expect(
//             await screen.findByText('Are you sure you want to delete An Ordered Folder and all its contents?'),
//         ).toBeInTheDocument();
//     },
// };

// export const closeDeleteConfirmationDialog = {
//     play: async ({ canvasElement }) => {
//         const canvas = within(canvasElement);

//         await waitFor(async () => {
//             await canvas.findByRole('grid', { name: 'List view' });

//             const moreOptionsButton = await canvas.findAllByRole('button', { name: 'More options' });
//             await userEvent.hover(moreOptionsButton[0]);
//             await userEvent.click(moreOptionsButton[0]);

//             const deleteButton = await screen.findByRole('menuitem', { name: 'Delete' });
//             await userEvent.hover(deleteButton);
//             await userEvent.click(deleteButton);
//         });

//         expect(
//             await screen.findByText('Are you sure you want to delete An Ordered Folder and all its contents?'),
//         ).toBeInTheDocument();

//         const cancelButton = screen.getByText('Cancel');
//         await userEvent.click(cancelButton);

//         await waitFor(() => {
//             expect(
//                 screen.queryByText('Are you sure you want to delete An Ordered Folder and all its contents?'),
//             ).not.toBeInTheDocument();
//         });
//     },
// };

// export const openRenameDialog = {
//     play: async ({ canvasElement }) => {
//         const canvas = within(canvasElement);

//         await waitFor(async () => {
//             await canvas.findByRole('grid', { name: 'List view' });

//             const moreOptionsButton = await canvas.findAllByRole('button', { name: 'More options' });
//             await userEvent.hover(moreOptionsButton[0]);
//             await userEvent.click(moreOptionsButton[0]);

//             const renameButton = await screen.findByRole('menuitem', { name: 'Rename' });
//             await userEvent.hover(renameButton);
//             await userEvent.click(renameButton);
//         });

//         expect(await screen.findByText('Please enter a new name for An Ordered Folder:')).toBeInTheDocument();
//     },
// };

// export const closeRenameDialog = {
//     play: async ({ canvasElement }) => {
//         const canvas = within(canvasElement);

//         await waitFor(async () => {
//             await canvas.findByRole('grid', { name: 'List view' });

//             const moreOptionsButton = await canvas.findAllByRole('button', { name: 'More options' });
//             await userEvent.hover(moreOptionsButton[0]);
//             await userEvent.click(moreOptionsButton[0]);

//             const renameButton = await screen.findByRole('menuitem', { name: 'Rename' });
//             await userEvent.hover(renameButton);
//             await userEvent.click(renameButton);
//         });

//         expect(await screen.findByText('Please enter a new name for An Ordered Folder:')).toBeInTheDocument();
//         const cancelButton = screen.getByText('Cancel');
//         await userEvent.click(cancelButton);

//         await waitFor(() => {
//             expect(screen.queryByText('Please enter a new name for An Ordered Folder:')).not.toBeInTheDocument();
//         });
//     },
// };

// export const openShareDialog = {
//     play: async ({ canvasElement }) => {
//         const canvas = within(canvasElement);

//         await waitFor(async () => {
//             await canvas.findByRole('grid', { name: 'List view' });

//             const moreOptionsButton = await canvas.findAllByRole('button', { name: 'More options' });
//             await userEvent.hover(moreOptionsButton[0]);
//             await userEvent.click(moreOptionsButton[0]);

//             const shareButton = await screen.findByRole('menuitem', { name: 'Share' });
//             await userEvent.hover(shareButton);
//             await userEvent.click(shareButton);
//         });

//         expect(await screen.findByText('Shared Link:')).toBeInTheDocument();

//         const inputElement = screen.getByDisplayValue('https://example.com/share-link');
//         expect(inputElement).toBeInTheDocument();
//     },
// };

// export const closeShareDialog = {
//     play: async ({ canvasElement }) => {
//         const canvas = within(canvasElement);

//         await waitFor(async () => {
//             await canvas.findByRole('grid', { name: 'List view' });

//             const moreOptionsButton = await canvas.findAllByRole('button', { name: 'More options' });
//             await userEvent.click(moreOptionsButton[0]);

//             const shareButton = await screen.findByRole('menuitem', { name: 'Share' });
//             await userEvent.hover(shareButton);
//             await userEvent.click(shareButton);
//         });

//         expect(await screen.findByText('Shared Link:')).toBeInTheDocument();
//         const closeButton = screen.getByText('Close');
//         await userEvent.click(closeButton);

//         await waitFor(() => {
//             expect(screen.queryByText('Shared Link:')).not.toBeInTheDocument();
//         });
//         const inputElement = screen.queryByDisplayValue('https://example.com/share-link');
//         expect(inputElement).not.toBeInTheDocument();
//     },
// };

const defaultHandlers = [
    http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/69083462919`, () => {
        return HttpResponse.json(mockRootFolder);
    }),
    http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/73426618530`, () => {
        return HttpResponse.json(mockSubfolder);
    }),
    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 });
    }),
    http.get(`${DEFAULT_HOSTNAME_API}/2.0/recent_items`, () => {
        return HttpResponse.json(mockRecentItems);
    }),
];

export const emptyState = {
    args: {
        rootFolderId: '74729718131',
    },
    parameters: {
        msw: {
            handlers: [
                ...defaultHandlers,
                http.get(mockUserRequest.url, () => {
                    return HttpResponse.json(mockUserRequest.response);
                }),
            ],
        },
    },
    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 withTheming = {
    play: async ({ canvasElement }) => {
        const canvas = within(canvasElement);

        await waitFor(async () => {
            expect(await canvas.getByText('Preview Test Folder')).toBeInTheDocument();
        });
    },
};

export default {
    title: 'Elements/ContentExplorer/tests/ContentExplorer/visual',
    component: ContentExplorer,
    args: {
        features: global.FEATURE_FLAGS,
        rootFolderId: global.FOLDER_ID,
        token: global.TOKEN,
    },
    parameters: {
        msw: {
            handlers: defaultHandlers,
        },
    },
};