test: added cloud-image-editor

Author: egordidenko

src/abstract/__tests__/loadFileUploaderFrom.test.ts

@@ -0,0 +1,149 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponents } from '../defineComponents';
+import { loadFileUploaderFrom, UC_WINDOW_KEY } from '../loadFileUploaderFrom';
+
+vi.mock('../defineComponents', () => ({
+  defineComponents: vi.fn(),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+
+  delete (window as any)[UC_WINDOW_KEY];
+});
+
+afterEach(() => {
+  const scripts = document.querySelectorAll('script[src]');
+  for (const script of scripts) {
+    script.remove();
+  }
+
+  delete (window as any)[UC_WINDOW_KEY];
+});
+
+describe('loadFileUploaderFrom', async () => {
+  const { default: testUrl } = await import('~/web/file-uploader.iife.min.js?url');
+
+  describe('UC_WINDOW_KEY', () => {
+    it('should export UC_WINDOW_KEY as "UC"', () => {
+      expect(UC_WINDOW_KEY).toBe('UC');
+    });
+  });
+
+  describe('when window.UC already exists', () => {
+    it('should resolve with existing window.UC immediately', async () => {
+      const mockBlocks = { TestBlock: { reg: vi.fn() } };
+      (window as any)[UC_WINDOW_KEY] = mockBlocks;
+
+      const result = await loadFileUploaderFrom(testUrl);
+
+      expect(result).toBe(mockBlocks);
+    });
+
+    it('should not create a new script element', async () => {
+      const mockBlocks = { TestBlock: { reg: vi.fn() } };
+      (window as any)[UC_WINDOW_KEY] = mockBlocks;
+      const initialScriptCount = document.querySelectorAll('script').length;
+
+      await loadFileUploaderFrom(testUrl);
+
+      expect(document.querySelectorAll('script').length).toBe(initialScriptCount);
+    });
+
+    it('should not call defineComponents even if register is true', async () => {
+      const mockBlocks = { TestBlock: { reg: vi.fn() } };
+      (window as any)[UC_WINDOW_KEY] = mockBlocks;
+
+      await loadFileUploaderFrom(testUrl, true);
+
+      expect(defineComponents).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when loading script', () => {
+    it('should append script to document head', async () => {
+      const loadPromise = loadFileUploaderFrom(testUrl);
+
+      const script = document.head.querySelector(`script[src="${testUrl}"]`);
+      expect(script).not.toBeNull();
+
+      const mockBlocks = { TestBlock: { reg: vi.fn() } };
+      (window as any)[UC_WINDOW_KEY] = mockBlocks;
+      (script as HTMLScriptElement).onload?.(new Event('load'));
+
+      await loadPromise;
+    });
+
+    it('should resolve with window.UC on successful load', async () => {
+      const loadPromise = loadFileUploaderFrom(testUrl);
+      const mockBlocks = { TestBlock: { reg: vi.fn() }, AnotherBlock: { reg: vi.fn() } };
+
+      const script = document.querySelector(`script[src="${testUrl}"]`) as HTMLScriptElement;
+      (window as any)[UC_WINDOW_KEY] = mockBlocks;
+      script.onload?.(new Event('load'));
+
+      const result = await loadPromise;
+      expect(result).toBe(mockBlocks);
+    });
+
+    it('should call defineComponents when register is true', async () => {
+      const loadPromise = loadFileUploaderFrom(testUrl, true);
+      const mockBlocks = { TestBlock: { reg: vi.fn() } };
+
+      const script = document.querySelector(`script[src="${testUrl}"]`) as HTMLScriptElement;
+      (window as any)[UC_WINDOW_KEY] = mockBlocks;
+      script.onload?.(new Event('load'));
+
+      await loadPromise;
+      expect(defineComponents).toHaveBeenCalledWith(mockBlocks);
+    });
+
+    it('should not call defineComponents when register is false', async () => {
+      const loadPromise = loadFileUploaderFrom(testUrl, false);
+      const mockBlocks = { TestBlock: { reg: vi.fn() } };
+
+      const script = document.querySelector(`script[src="${testUrl}"]`) as HTMLScriptElement;
+      (window as any)[UC_WINDOW_KEY] = mockBlocks;
+      script.onload?.(new Event('load'));
+
+      await loadPromise;
+      expect(defineComponents).not.toHaveBeenCalled();
+    });
+
+    it('should not call defineComponents by default', async () => {
+      const loadPromise = loadFileUploaderFrom(testUrl);
+      const mockBlocks = { TestBlock: { reg: vi.fn() } };
+
+      const script = document.querySelector(`script[src="${testUrl}"]`) as HTMLScriptElement;
+      (window as any)[UC_WINDOW_KEY] = mockBlocks;
+      script.onload?.(new Event('load'));
+
+      await loadPromise;
+      expect(defineComponents).not.toHaveBeenCalled();
+    });
+
+    it('should reject on script error', async () => {
+      const loadPromise = loadFileUploaderFrom(testUrl);
+
+      const script = document.querySelector(`script[src="${testUrl}"]`) as HTMLScriptElement;
+      script.onerror?.(new Event('error'));
+
+      await expect(loadPromise).rejects.toBeUndefined();
+    });
+  });
+
+  describe('non-browser environment', () => {
+    it('should resolve with null when document is not an object', async () => {
+      const originalDocument = global.document;
+
+      // @ts-expect-error - intentionally setting to non-object for test
+      global.document = undefined;
+
+      const result = await loadFileUploaderFrom(testUrl);
+
+      expect(result).toBeNull();
+
+      global.document = originalDocument;
+    });
+  });
+});

src/blocks/CameraSource/CameraSource.ts

@@ -1028,6 +1028,7 @@ CameraSource.template = /* HTML */ `
         type="button"
         class="uc-switch uc-mini-btn"
         set="onclick: onClickTab;  @hidden: tabCameraHidden"
+        data-testid="tab-photo"
       >
         <uc-icon name="camera"></uc-icon>
       </button>
@@ -1036,6 +1037,7 @@ CameraSource.template = /* HTML */ `
         type="button"
         class="uc-switch uc-mini-btn"
         set="onclick: onClickTab; @hidden: tabVideoHidden"
+        data-testid="tab-video"
       >
         <uc-icon name="video-camera"></uc-icon>
       </button>
@@ -1044,6 +1046,7 @@ CameraSource.template = /* HTML */ `
     <button
       class="uc-secondary-btn uc-recording-timer"
       set="@hidden:timerHidden; onclick: onToggleRecording"
+      data-testid="recording-timer"
     >
       <uc-icon set="@name: currentTimelineIcon"></uc-icon>
       <span ref="timer"> 00:00 </span>
@@ -1054,7 +1057,7 @@ CameraSource.template = /* HTML */ `
       class="uc-camera-actions uc-camera-action"
       set="@hidden: cameraActionsHidden"
     >
-      <button type="button" class="uc-secondary-btn" set="onclick: onRetake">
+      <button type="button" class="uc-secondary-btn" set="onclick: onRetake" data-testid="retake">
         Retake
       </button>
       <button
@@ -1080,13 +1083,15 @@ CameraSource.template = /* HTML */ `
       <button
         class="uc-mini-btn uc-btn-microphone"
         set="onclick: onToggleAudio; @hidden: audioToggleMicrophoneHidden;"
+        data-testid="toggle-microphone"
       >
         <uc-icon set="@name:toggleMicrophoneIcon"></uc-icon>
       </button>
 
       <uc-select
         class="uc-audio-select"
         set="$.options: audioSelectOptions; onchange: onAudioSelectChange; @hidden: audioSelectHidden; @disabled: audioSelectDisabled"
+        data-testid="audio-select"
       >
       </uc-select>
     </div>

src/blocks/CameraSource/__tests__/calcCameraModes.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import type { ConfigType } from '../../../types/index';
+import { initialConfig } from '../../Config/initialConfig';
+import { calcCameraModes } from '../calcCameraModes';
+
+describe('calcCameraModes', () => {
+  it('should return both modes enabled when cameraModes includes video and photo', () => {
+    const cfg = { ...initialConfig } as ConfigType;
+    const result = calcCameraModes(cfg);
+    expect(result).toEqual({
+      isVideoRecordingEnabled: true,
+      isPhotoEnabled: true,
+    });
+  });
+
+  it('should return only video enabled when cameraModes includes only video', () => {
+    const cfg = { ...initialConfig, cameraModes: 'video' } as ConfigType;
+    const result = calcCameraModes(cfg);
+    expect(result).toEqual({
+      isVideoRecordingEnabled: true,
+      isPhotoEnabled: false,
+    });
+  });
+
+  it('should return only photo enabled when cameraModes includes only photo', () => {
+    const cfg = { ...initialConfig, cameraModes: 'photo' } as ConfigType;
+    const result = calcCameraModes(cfg);
+    expect(result).toEqual({
+      isVideoRecordingEnabled: false,
+      isPhotoEnabled: true,
+    });
+  });
+
+  it('should return both modes disabled when cameraModes is empty', () => {
+    const cfg = { ...initialConfig, cameraModes: '' } as ConfigType;
+    const result = calcCameraModes(cfg);
+    expect(result).toEqual({
+      isVideoRecordingEnabled: false,
+      isPhotoEnabled: false,
+    });
+  });
+
+  it('should handle mixed valid and invalid values', () => {
+    const cfg = { cameraModes: 'video,unknown,photo' } as ConfigType;
+    const result = calcCameraModes(cfg);
+    expect(result).toEqual({
+      isVideoRecordingEnabled: true,
+      isPhotoEnabled: true,
+    });
+  });
+});

src/blocks/CloudImageEditor/src/EditorToolbar.ts

@@ -501,8 +501,8 @@ EditorToolbar.template = /* HTML */ `
         <div class="uc-list-aspect-ratio" ref="list-el"></div>
       </div>
       <div class="uc-controls-row">
-        <uc-btn-ui theme="secondary" set="onclick: on.cancelSlider" l10n="@text:cancel"> </uc-btn-ui>
-        <uc-btn-ui theme="primary" set="onclick: on.applySlider" l10n="@text:apply"> </uc-btn-ui>
+        <uc-btn-ui theme="secondary" set="onclick: on.cancelSlider; title-prop:cancel" l10n="@text:cancel"> </uc-btn-ui>
+        <uc-btn-ui theme="primary" set="onclick: on.applySlider; title-prop:apply" l10n="@text:apply"> </uc-btn-ui>
       </div>
     </uc-presence-toggle>
   </div>