import React from 'react'; import renderer from 'react-test-renderer'; import configureStore from 'redux-mock-store'; import { Provider } from 'react-intl-redux'; import Body from './Body'; import { getVideoIDAndPlaceholder } from './Body'; import config from '@plone/volto/registry'; config.blocks.blocksConfig = { video: { id: 'video', title: 'Video', group: 'media', extensions: {}, variations: [], restricted: false, mostUsed: true, sidebarTab: 1, security: { addPermission: [], view: [], }, allowedPeertubeInstances: [ 'freediverse.com', // About: https://freediverse.com/about/instance 'fair.tube', // About: https://fair.tube/about/instance 'tube.reseau-canope.fr', // About: https://tube.reseau-canope.fr/about/instance 'peertube.eus', // About: https://peertube.eus/about/instance ], }, }; const mockStore = configureStore(); test('renders a youtube video component with "list" in its url', () => { const url = 'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1'; const videoDetails = getVideoIDAndPlaceholder(url); const listID = 'PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1'; expect(videoDetails).toEqual({ hasMatch: true, videoID: null, videoUrl: `https://www.youtube.com/embed/videoseries?list=${listID}`, thumbnailURL: 'https://img.youtube.com/vi/KwRSRRyuk-Q/sddefault.jpg', videoSource: null, }); }); test('extracts video details from a youtube video with "/live/" in its url', () => { const url = 'https://www.youtube.com/live/ISdHvS6Ck3k?si=COeVakmC1lI6jQy3'; const videoDetails = getVideoIDAndPlaceholder(url); expect(videoDetails).toEqual({ hasMatch: true, videoID: 'ISdHvS6Ck3k?si=COeVakmC1lI6jQy3', videoUrl: null, thumbnailURL: 'https://img.youtube.com/vi/ISdHvS6Ck3k/sddefault.jpg', videoSource: 'youtube', }); }); test('extracts video details from a youtube video with ".be/" in its url', () => { const url = 'https://youtu.be/P9j-xYdWT28?si=zZ2putStJbPBLCdt'; const videoDetails = getVideoIDAndPlaceholder(url); expect(videoDetails).toEqual({ hasMatch: true, videoID: 'P9j-xYdWT28?si=zZ2putStJbPBLCdt', videoUrl: null, thumbnailURL: 'https://img.youtube.com/vi/P9j-xYdWT28/sddefault.jpg', videoSource: 'youtube', }); }); test('extracts video details from a youtube video with "?v=" in its url', () => { const url = 'https://www.youtube.com/watch?v=KUd6e105u_I'; const videoDetails = getVideoIDAndPlaceholder(url); expect(videoDetails).toEqual({ hasMatch: true, videoID: 'KUd6e105u_I', videoUrl: null, thumbnailURL: 'https://img.youtube.com/vi/KUd6e105u_I/sddefault.jpg', videoSource: 'youtube', }); }); test('extracts video details from a youtube short', () => { const url = 'https://www.youtube.com/shorts/_-DjLZCfGOg'; const videoDetails = getVideoIDAndPlaceholder(url); expect(videoDetails).toEqual({ hasMatch: true, videoID: '_-DjLZCfGOg', videoUrl: null, thumbnailURL: 'https://img.youtube.com/vi/_-DjLZCfGOg/sddefault.jpg', videoSource: 'youtube', }); }); test('extracts video details from a vimeo video url', () => { const url = 'https://vimeo.com/639449679'; const videoDetails = getVideoIDAndPlaceholder(url); expect(videoDetails).toEqual({ hasMatch: true, videoID: '639449679', videoUrl: null, thumbnailURL: 'https://vumbnail.com/639449679.jpg', videoSource: 'vimeo', }); }); test('renders a youtube video body component', () => { const store = mockStore({ intl: { locale: 'en', messages: {}, }, }); const component = renderer.create( , ); const json = component.toJSON(); expect(json).toMatchSnapshot(); }); test('renders a youtu.be video body component', () => { const store = mockStore({ intl: { locale: 'en', messages: {}, }, }); const component = renderer.create( , ); const json = component.toJSON(); expect(json).toMatchSnapshot(); }); test('renders a youtube short video body component', () => { const store = mockStore({ intl: { locale: 'en', messages: {}, }, }); const component = renderer.create( , ); const json = component.toJSON(); expect(json).toMatchSnapshot(); }); test('renders a peertube video body component', () => { const store = mockStore({ intl: { locale: 'en', messages: {}, }, }); const component = renderer.create( , ); const json = component.toJSON(); expect(json).toMatchSnapshot(); }); test('renders a incorrect peertube video body component', () => { const store = mockStore({ intl: { locale: 'en', messages: {}, }, }); const component = renderer.create( , ); const json = component.toJSON(); expect(json).toMatchSnapshot(); }); test('renders a youtube video body component in edit mode', () => { const store = mockStore({ intl: { locale: 'en', messages: {}, }, }); const component = renderer.create( , ); const json = component.toJSON(); expect(json).toMatchSnapshot(); }); test('renders invalid video body component with invalid URL', () => { const store = mockStore({ intl: { locale: 'en', messages: {}, }, }); const component = renderer.create( , ); const json = component.toJSON(); expect(json).toMatchSnapshot(); }); test('renders a error message for invalid video URL in edit mode', () => { const store = mockStore({ intl: { locale: 'en', messages: {}, }, }); const component = renderer.create( , ); const json = component.toJSON(); expect(json).toMatchSnapshot(); });