fragginwagon/pokemon-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rebuild admin image manager per-image controls
Quality / test (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
fragginwagon
2026-09-10 06:15:51 -04:00
parent 7d20aedd14
commit c9f6a58516
5 changed files with 130 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/organisms/AdminImageManager.stories.js
+27 -10
View File
@@ -3,27 +3,44 @@ 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 },
{ id: 'image-2', label: 'BACK', altText: 'Back of card', sortOrder: 1, isPrimary: false },
{ 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, processingStatus: 'COMPLETED' } };
export const EmptyUpload = { args: { images: [], processingStatus: 'COMPLETED' } };
export const Processing = { args: { images, processingStatus: 'PROCESSING' } };
export const Failed = { args: { images, processingStatus: 'FAILED', errorMessage: 'Derivative generation failed.' } };
export const Saving = { args: { images, processingStatus: 'COMPLETED', isSaving: true } };
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, processingStatus: 'COMPLETED' },
args: { images },
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.getByRole('button', { name: 'Edit alt text' }));
const input = canvas.getByLabelText('Alt text');
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();
},
};