test(fullscreen): 完善 useVideoFullscreen 单元测试

goblin-laboratory · Jul 11, 2019 · 24e243c · 24e243c
1 parent e1117ae
commit 24e243c
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 2 deletions.
diff --git a/scripts/jest/setupTests.js b/scripts/jest/setupTests.js
@@ -1,2 +1,4 @@
 // jest.setTimeout(30 * 1000);
 jest.setTimeout(5 * 1000);
+
+// ['requestFullscreen', 'exitFullscreen'].forEach(each => (document[each] = () => {}));
diff --git a/tests/ReactPlayer.test.js b/tests/ReactPlayer.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, waitForElement } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import ReactPlayer from '../src/components/ReactPlayer';
 
 jest.setTimeout(1000);

diff --git a/tests/useVideoFullscreen.test.js b/tests/useVideoFullscreen.test.js
@@ -1,4 +1,7 @@
-import { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { render } from '@testing-library/react';
+
 import useVideoFullscreen from '../src/hooks/useVideoFullscreen';
 
 describe('useVideoFullscreen:', () => {
@@ -12,4 +15,105 @@ describe('useVideoFullscreen:', () => {
     expect(typeof result.current.requestFullscreen).toBe('function');
     expect(typeof result.current.exitFullscreen).toBe('function');
   });
+
+  it('requestFullscreen/exitFullscreen', () => {
+    render(<video />);
+    const videoEl = document.querySelector('video');
+    expect(!!videoEl).toBe(true);
+    videoEl.requestFullscreen = () => {
+      document.fullscreenElement = videoEl;
+      document.dispatchEvent(new Event('fullscreenchange'));
+    };
+    document.exitFullscreen = () => {
+      document.fullscreenElement = null;
+      document.dispatchEvent(new Event('fullscreenchange'));
+    };
+    expect(!!videoEl.requestFullscreen).toBe(true);
+    expect(!!document.exitFullscreen).toBe(true);
+
+    const { result } = renderHook(() =>
+      useVideoFullscreen({ x5playsinline: false, onX5VideoFullscreenChange: () => {} }, () => videoEl, () => videoEl),
+    );
+
+    act(() => {
+      result.current.requestFullscreen();
+    });
+    expect(result.current.fullscreen).toBe(true);
+
+    act(() => {
+      result.current.exitFullscreen();
+    });
+    expect(result.current.fullscreen).toBe(false);
+  });
+
+  it('x5playsinline', () => {
+    render(<video />);
+    const videoEl = document.querySelector('video');
+    expect(!!videoEl).toBe(true);
+    expect(!!videoEl.requestFullscreen).toBe(false);
+    delete document.exitFullscreen;
+    expect(!!document.exitFullscreen).toBe(false);
+
+    const { result } = renderHook(() =>
+      useVideoFullscreen({ x5playsinline: true, onX5VideoFullscreenChange: () => {} }, () => videoEl, () => videoEl),
+    );
+
+    act(() => {
+      videoEl.dispatchEvent(new Event('x5videoenterfullscreen'));
+    });
+    expect(result.current.x5videofullscreen).toBe(true);
+
+    act(() => {
+      window.dispatchEvent(new Event('resize'));
+    });
+    expect(videoEl.style.width).toBe(`${window.innerWidth}px`);
+    expect(videoEl.style.height).toBe(`${window.innerHeight}px`);
+
+    act(() => {
+      result.current.requestFullscreen();
+    });
+    expect(result.current.fullscreen).toBe(true);
+
+    act(() => {
+      result.current.exitFullscreen();
+    });
+    expect(result.current.fullscreen).toBe(false);
+
+    act(() => {
+      videoEl.dispatchEvent(new Event('x5videoexitfullscreen'));
+    });
+    expect(result.current.x5videofullscreen).toBe(false);
+  });
+
+  it('unmounted', () => {
+    const { result } = renderHook(() =>
+      useVideoFullscreen({ x5playsinline: false, onX5VideoFullscreenChange: () => {} }, () => {}, () => {}),
+    );
+
+    act(() => {
+      result.current.requestFullscreen();
+    });
+    expect(result.current.fullscreen).toBe(false);
+
+    act(() => {
+      result.current.exitFullscreen();
+    });
+    expect(result.current.fullscreen).toBe(false);
+  });
+
+  it('unmounted with x5playsinline', () => {
+    const { result } = renderHook(() =>
+      useVideoFullscreen({ x5playsinline: true, onX5VideoFullscreenChange: () => {} }, () => {}, () => {}),
+    );
+
+    act(() => {
+      result.current.requestFullscreen();
+    });
+    expect(result.current.fullscreen).toBe(false);
+
+    act(() => {
+      result.current.exitFullscreen();
+    });
+    expect(result.current.fullscreen).toBe(false);
+  });
 });