box-ui-elements/es/elements/content-picker/stories/tests/ContentPicker-visual.stories.js

Box UI Elements

import React from 'react';
import { expect, userEvent, waitFor, within } from 'storybook/test';
import { http, HttpResponse } from 'msw';
import ContentPicker from '../../ContentPicker';
import { mockRootFolder, mockEmptyRootFolder } from '../../../common/__mocks__/mockRootFolder';
import { DEFAULT_HOSTNAME_API } from '../../../../constants';
export const basic = {};
export const withPagination = {
  args: {
    initialPageSize: 1
  }
};
export const selectedEmptyState = {
  play: async ({
    canvasElement
  }) => {
    const canvas = within(canvasElement);
    await waitFor(() => {
      expect(canvas.getByText('An Ordered Folder')).toBeInTheDocument();
    });
    const selectedButton = canvas.getByRole('button', {
      name: '0 Selected'
    });
    await userEvent.click(selectedButton);
    await waitFor(() => {
      expect(canvas.getByText("You haven't selected any items yet.")).toBeInTheDocument();
    });
  }
};
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
    }) => /*#__PURE__*/React.createElement("button", {
      type: "button"
    }, "Custom Action (", selectedCount, " items)")
  }
};
export default {
  title: 'Elements/ContentPicker/tests/visual',
  component: ContentPicker,
  args: {
    features: global.FEATURE_FLAGS,
    rootFolderId: global.FOLDER_ID,
    token: global.TOKEN
  },
  parameters: {
    msw: {
      handlers: [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
        });
      })]
    }
  }
};
//# sourceMappingURL=ContentPicker-visual.stories.js.map