@servicetitan/dte-unlayer 0.155.0 → 0.157.0

package/src/__tests__/store.image-upload.test.ts

@@ -0,0 +1,132 @@
+import { ImageUploadError } from '../image-upload-error';
+import { UnlayerStore } from '../store';
+
+const editorMock = {
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    registerCallback: jest.fn(),
+    unregisterCallback: jest.fn(),
+};
+
+jest.mock('../loadScript', () => ({ loadScript: jest.fn().mockResolvedValue(undefined) }));
+jest.mock('../unlayer', () => ({
+    ...jest.requireActual('../unlayer'),
+    createUnlayerEditor: jest.fn(() => editorMock),
+}));
+
+class LoadedImageMock {
+    width = 100;
+    height = 100;
+    onload?: () => void;
+    onerror?: () => void;
+
+    set src(_: string) {
+        setTimeout(() => this.onload?.());
+    }
+}
+
+const GENERIC_DESCRIPTION =
+    'Something went wrong while uploading the image. Please try again or select another image.';
+
+describe('UnlayerStore image upload', () => {
+    const originalImage = window.Image;
+    const originalCreateObjectURL = URL.createObjectURL;
+    const originalRevokeObjectURL = URL.revokeObjectURL;
+
+    let store: UnlayerStore;
+    let onError: jest.Mock;
+    let done: jest.Mock;
+
+    const uploadImage = () => {
+        const [, handler] = editorMock.registerCallback.mock.calls.find(
+            ([name]) => name === 'image',
+        );
+        const file = new File(['img'], 'logo.png', { type: 'image/png' });
+
+        return handler({ attachments: [file] }, done);
+    };
+
+    beforeEach(async () => {
+        jest.clearAllMocks();
+        jest.spyOn(console, 'error').mockImplementation(() => undefined);
+        window.Image = LoadedImageMock as unknown as typeof Image;
+        URL.createObjectURL = jest.fn(() => 'blob:logo');
+        URL.revokeObjectURL = jest.fn();
+        (window as any).unlayer = {};
+
+        onError = jest.fn();
+        done = jest.fn();
+        store = new UnlayerStore({ tools: [] });
+        store.setOnError(onError);
+
+        const container = document.createElement('div');
+        container.appendChild(document.createElement('iframe'));
+        await store.init(container);
+    });
+
+    afterEach(() => {
+        store.destroy();
+        window.Image = originalImage;
+        URL.createObjectURL = originalCreateObjectURL;
+        URL.revokeObjectURL = originalRevokeObjectURL;
+        jest.restoreAllMocks();
+    });
+
+    describe('when the host resolves with a url', () => {
+        beforeEach(async () => {
+            store.setOnImage(jest.fn().mockResolvedValue({ url: 'https://cdn/logo.png' }));
+            await uploadImage();
+        });
+
+        test('completes the upload with the url only', () => {
+            expect(done.mock.calls).toEqual([[{ progress: 100, url: 'https://cdn/logo.png' }]]);
+        });
+
+        test('does not report an error', () => {
+            expect(onError).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('when the host rejects with an ImageUploadError', () => {
+        beforeEach(async () => {
+            store.setOnImage(
+                jest
+                    .fn()
+                    .mockRejectedValue(
+                        new ImageUploadError(
+                            'Image dimensions 4320x2144 exceed maximum allowed 4000px',
+                        ),
+                    ),
+            );
+            await uploadImage();
+        });
+
+        test('reports the host message', () => {
+            expect(onError).toHaveBeenCalledWith(
+                'Image upload failed',
+                'Image dimensions 4320x2144 exceed maximum allowed 4000px',
+            );
+        });
+
+        test('does not report upload progress', () => {
+            expect(done).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('when the host rejects with any other error', () => {
+        beforeEach(async () => {
+            store.setOnImage(
+                jest.fn().mockRejectedValue(new Error('Request failed with status code 500')),
+            );
+            await uploadImage();
+        });
+
+        test('reports the generic message', () => {
+            expect(onError).toHaveBeenCalledWith('Image upload failed', GENERIC_DESCRIPTION);
+        });
+
+        test('does not report upload progress', () => {
+            expect(done).not.toHaveBeenCalled();
+        });
+    });
+});