58 lines
2.4 KiB
JavaScript
58 lines
2.4 KiB
JavaScript
import { expect, userEvent, within } from '@storybook/test';
|
|
|
|
import AdminImageManager from './AdminImageManager.vue';
|
|
|
|
const images = [
|
|
{ id: 'image-1', label: 'FRONT', altText: 'Front of card', sortOrder: 0, isPrimary: true, processingStatus: 'COMPLETED' },
|
|
{ id: 'image-2', label: 'BACK', altText: 'Back of card', sortOrder: 1, isPrimary: false, processingStatus: 'COMPLETED' },
|
|
];
|
|
|
|
const failedImages = [
|
|
{ id: 'image-1', label: 'FRONT', altText: 'Front of card', sortOrder: 0, isPrimary: true, processingStatus: 'COMPLETED' },
|
|
{ id: 'image-2', label: 'BACK', altText: 'Back of card', sortOrder: 1, isPrimary: false, processingStatus: 'FAILED' },
|
|
];
|
|
|
|
const processingImages = [
|
|
{ id: 'image-1', label: 'FRONT', altText: 'Front of card', sortOrder: 0, isPrimary: true, processingStatus: 'PROCESSING' },
|
|
];
|
|
|
|
export default { title: 'Organisms/AdminImageManager', component: AdminImageManager };
|
|
|
|
export const Completed = { args: { images } };
|
|
export const EmptyUpload = { args: { images: [] } };
|
|
export const Processing = { args: { images: processingImages } };
|
|
export const Failed = { args: { images: failedImages } };
|
|
export const Saving = { args: { images, isSaving: true } };
|
|
|
|
export const EditAltTextWithKeyboard = {
|
|
args: { images },
|
|
play: async ({ canvasElement }) => {
|
|
const canvas = within(canvasElement);
|
|
await userEvent.click(canvas.getAllByRole('button', { name: 'Edit alt text' })[0]);
|
|
const input = canvas.getAllByLabelText('Alt text')[0];
|
|
await userEvent.clear(input);
|
|
await userEvent.type(input, 'Updated front image');
|
|
await userEvent.click(canvas.getByRole('button', { name: 'Save alt text' }));
|
|
await expect(canvas.getByDisplayValue('Updated front image')).toBeInTheDocument();
|
|
},
|
|
};
|
|
|
|
export const RetryFailedImage = {
|
|
args: { images: failedImages },
|
|
play: async ({ canvasElement }) => {
|
|
const canvas = within(canvasElement);
|
|
await expect(canvas.getByRole('button', { name: 'Retry processing' })).toBeInTheDocument();
|
|
},
|
|
};
|
|
|
|
export const DisabledAfterRefreshFailure = {
|
|
args: { images, disabled: true },
|
|
play: async ({ canvasElement }) => {
|
|
const canvas = within(canvasElement);
|
|
await expect(canvas.getByLabelText('Add images')).toBeDisabled();
|
|
for (const button of canvas.getAllByRole('button', { name: /Edit alt text|Make primary|Move up|Move down|Delete image/ })) {
|
|
await expect(button).toBeDisabled();
|
|
}
|
|
},
|
|
};
|