diff --git a/src/components/Card/Card.test.tsx b/src/components/Card/Card.test.tsx index be3d4709a..ea646de7c 100644 --- a/src/components/Card/Card.test.tsx +++ b/src/components/Card/Card.test.tsx @@ -11,23 +11,22 @@ const itemWithImage = { title: 'This is a movie', duration: 120, cardImage: 'htt describe('', () => { it('renders card with video title', () => { - const { getByText } = renderWithRouter( ''} />); + const { getByText } = renderWithRouter(); expect(getByText(/aa/i)).toBeTruthy(); }); it('renders tag with correct duration', () => { - const { getByText } = renderWithRouter( ''} />); + const { getByText } = renderWithRouter(); expect(getByText(/2/i)).toBeTruthy(); }); it('renders the image with the image prop when valid', () => { - const { getByAltText } = renderWithRouter( ''} />); - + const { getByAltText } = renderWithRouter(); expect(getByAltText('This is a movie')).toHaveAttribute('src', 'http://movie.jpg?width=320'); }); it('makes the image visible after load', () => { - const { getByAltText } = renderWithRouter( ''} />); + const { getByAltText } = renderWithRouter(); expect(getByAltText('This is a movie')).toHaveAttribute('src', 'http://movie.jpg?width=320'); expect(getByAltText('This is a movie')).toHaveStyle({ opacity: 0 }); @@ -36,4 +35,9 @@ describe('', () => { expect(getByAltText('This is a movie')).toHaveStyle({ opacity: 1 }); }); + + it('should render anchor tag', () => { + const { container } = renderWithRouter(); + expect(container).toMatchSnapshot(); + }); }); diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 11b8e5c5f..621112e2f 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -1,4 +1,4 @@ -import React, { KeyboardEvent, memo, useState } from 'react'; +import React, { memo, useState } from 'react'; import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; @@ -19,7 +19,6 @@ export type PosterAspectRatio = (typeof cardAspectRatios)[number]; type CardProps = { item: PlaylistItem; - onClick?: () => void; onHover?: () => void; progress?: number; posterAspect?: PosterAspectRatio; @@ -29,11 +28,10 @@ type CardProps = { isCurrent?: boolean; isLocked?: boolean; currentLabel?: string; - url?: string; + url: string; }; function Card({ - onClick, onHover, progress, item, @@ -90,13 +88,11 @@ function Card({ return ( e.preventDefault() : undefined} onMouseEnter={onHover} tabIndex={disabled ? -1 : 0} - onKeyDown={(event: KeyboardEvent) => (event.key === 'Enter' || event.key === ' ') && !disabled && onClick && onClick()} - role="button" aria-label={title} >
diff --git a/src/components/Card/__snapshots__/Card.test.tsx.snap b/src/components/Card/__snapshots__/Card.test.tsx.snap new file mode 100644 index 000000000..c53d9bb21 --- /dev/null +++ b/src/components/Card/__snapshots__/Card.test.tsx.snap @@ -0,0 +1,62 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[` > should render anchor tag 1`] = ` + +`; diff --git a/src/components/CardGrid/CardGrid.test.tsx b/src/components/CardGrid/CardGrid.test.tsx index 649e8d853..a428ca3ac 100644 --- a/src/components/CardGrid/CardGrid.test.tsx +++ b/src/components/CardGrid/CardGrid.test.tsx @@ -4,7 +4,7 @@ import CardGrid from './CardGrid'; import playlistFixture from '#test/fixtures/playlist.json'; import { renderWithRouter } from '#test/testUtils'; -import type { Playlist } from '#types/playlist'; +import type { Playlist, PlaylistItem } from '#types/playlist'; describe('', () => { it('renders and matches snapshot', () => { @@ -13,11 +13,11 @@ describe('', () => { `https://test.dummy.jwplayer.com?media_id=${item.mediaid}`} />, ); diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx index 3a3080701..af5b62e72 100644 --- a/src/components/CardGrid/CardGrid.tsx +++ b/src/components/CardGrid/CardGrid.tsx @@ -11,7 +11,6 @@ import type { AccessModel } from '#types/Config'; import type { Playlist, PlaylistItem } from '#types/playlist'; import { parseAspectRatio, parseTilesDelta } from '#src/utils/collection'; import InfiniteScrollLoader from '#components/InfiniteScrollLoader/InfiniteScrollLoader'; -import { mediaURL } from '#src/utils/formatting'; const INITIAL_ROW_COUNT = 6; const LOAD_ROWS_COUNT = 4; @@ -37,7 +36,7 @@ type CardGridProps = { hasLoadMore?: boolean; loadMore?: () => void; onCardHover?: (item: PlaylistItem) => void; - onCardClick: (item: PlaylistItem, playlistId?: string) => void; + getUrl: (item: PlaylistItem) => string; }; function CardGrid({ @@ -51,8 +50,8 @@ function CardGrid({ isLoggedIn, hasSubscription, hasLoadMore, + getUrl, loadMore, - onCardClick, onCardHover, }: CardGridProps) { const breakpoint: Breakpoint = useBreakpoint(); @@ -70,15 +69,13 @@ function CardGrid({ const renderTile = (playlistItem: PlaylistItem) => { const { mediaid } = playlistItem; - const url = mediaURL({ media: playlistItem, playlistId: playlistItem.feedid }); return (
onCardClick(playlistItem, playlistItem.feedid)} + url={getUrl(playlistItem)} onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined} loading={isLoading} isCurrent={currentCardItem && currentCardItem.mediaid === mediaid} diff --git a/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap b/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap index 2c5c617a0..488ae9f45 100644 --- a/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap +++ b/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap @@ -17,8 +17,7 @@ exports[` > renders and matches snapshot 1`] = `
> renders and matches snapshot 1`] = `
> renders and matches snapshot 1`] = `
', () => { playlist={playlist} error={error} isLoading={isLoading} - onCardClick={() => null} onCardHover={() => null} onClearFavoritesClick={() => null} hasSubscription={true} diff --git a/src/components/Favorites/Favorites.tsx b/src/components/Favorites/Favorites.tsx index 07c1cb47e..85f3e2df5 100644 --- a/src/components/Favorites/Favorites.tsx +++ b/src/components/Favorites/Favorites.tsx @@ -10,6 +10,7 @@ import ErrorPage from '#components/ErrorPage/ErrorPage'; import { Breakpoint, Breakpoints } from '#src/hooks/useBreakpoint'; import type { AccessModel } from '#types/Config'; import type { Playlist, PlaylistItem } from '#types/playlist'; +import { mediaURL } from '#src/utils/formatting'; type Props = { playlist: Playlist; @@ -17,7 +18,6 @@ type Props = { isLoading: boolean; accessModel: AccessModel; hasSubscription: boolean; - onCardClick: (item: PlaylistItem) => void; onCardHover?: (item: PlaylistItem) => void; onClearFavoritesClick: () => void; }; @@ -30,7 +30,7 @@ const cols: Breakpoints = { [Breakpoint.xl]: 3, }; -const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, onCardClick, onCardHover, onClearFavoritesClick }: Props): JSX.Element => { +const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, onCardHover, onClearFavoritesClick }: Props): JSX.Element => { const { t } = useTranslation('user'); if (isLoading) return ; @@ -39,6 +39,8 @@ const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, o return ; } + const getURL = (playlistItem: PlaylistItem) => mediaURL({ media: playlistItem, playlistId: playlistItem.feedid }); + return (
@@ -47,8 +49,8 @@ const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, o
{playlist.playlist.length > 0 ? ( ); }, diff --git a/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap b/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap index 42e2d1594..ce3c616b5 100644 --- a/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap +++ b/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap @@ -43,8 +43,7 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
Featured shelf 1`] = `
Featured shelf 1`] = ` aria-label="Movie 1" class="_card_d75732 _featured_d75732" href="/m/1234abcd/movie-1" - role="button" tabindex="0" >
Featured shelf 1`] = `
Featured shelf 1`] = `
Regular shelf 1`] = ` aria-label="Movie 1" class="_card_d75732" href="/m/1234abcd/movie-1" - role="button" tabindex="0" >
Regular shelf 1`] = ` aria-label="Movie 2" class="_card_d75732" href="/m/aaaaaaaa/movie-2" - role="button" tabindex="0" >
Regular shelf 1`] = ` aria-label="Third movie" class="_card_d75732" href="/m/12332123/third-movie" - role="button" tabindex="0" >
Regular shelf 1`] = ` aria-label="Last playlist item" class="_card_d75732" href="/m/ddeeddee/last-playlist-item" - role="button" tabindex="0" >
string; }; type Props = { @@ -96,6 +97,7 @@ const VideoLayout: React.FC = ({ // load more hasLoadMore, loadMore, + getURL, }) => { const breakpoint = useBreakpoint(); const isTablet = breakpoint === Breakpoint.sm || breakpoint === Breakpoint.md; @@ -113,7 +115,7 @@ const VideoLayout: React.FC = ({ ); const renderRelatedVideos = (grid = true) => { - if (!playlist || !onItemClick) return null; + if (!playlist) return null; return grid ? ( <> @@ -123,7 +125,6 @@ const VideoLayout: React.FC = ({
= ({ hasSubscription={hasSubscription} hasLoadMore={hasLoadMore} loadMore={loadMore} + getUrl={getURL} /> ) : ( @@ -195,7 +197,7 @@ const VideoLayout: React.FC = ({ primaryMetadata={primaryMetadata} secondaryMetadata={secondaryMetadata} /> - {playlist && onItemClick &&
{renderRelatedVideos(true)}
} + {playlist &&
{renderRelatedVideos(true)}
} {children} {player}
diff --git a/src/pages/Home/__snapshots__/Home.test.tsx.snap b/src/pages/Home/__snapshots__/Home.test.tsx.snap index 9e7369336..2d2914ed7 100644 --- a/src/pages/Home/__snapshots__/Home.test.tsx.snap +++ b/src/pages/Home/__snapshots__/Home.test.tsx.snap @@ -38,7 +38,6 @@ exports[`Home Component tests > Home test 1`] = ` aria-label="My video" class="_card_d75732" href="/m/abcddabc/my-video" - role="button" tabindex="0" >
Home test 1`] = ` aria-label="Other Vids" class="_card_d75732" href="/m/zzzaaazz/other-vids" - role="button" tabindex="0" >
Home test 1`] = ` aria-label="My video" class="_card_d75732" href="/m/abcddabc/my-video" - role="button" tabindex="0" >
Home test 1`] = ` aria-label="Other Vids" class="_card_d75732" href="/m/zzzaaazz/other-vids" - role="button" tabindex="0" >
{ const breakpoint = useBreakpoint(); @@ -79,8 +79,10 @@ const LegacySeries = () => { // Handlers const goBack = () => episode && navigate(legacySeriesURL({ episodeId: episode.mediaid, seriesId, play: false, playlistId: feedId })); - const onCardClick = (toEpisode: PlaylistItem) => - seriesPlaylist && navigate(legacySeriesURL({ episodeId: toEpisode.mediaid, seriesId, play: false, playlistId: feedId })); + const getUrl = (toEpisode: PlaylistItem) => { + return seriesPlaylist ? legacySeriesURL({ episodeId: toEpisode.mediaid, seriesId, play: false, playlistId: feedId }) : ''; + }; + const handleComplete = useCallback(async () => { navigate(legacySeriesURL({ episodeId: nextItem?.mediaid, seriesId, play: !!nextItem, playlistId: feedId })); }, [navigate, nextItem, seriesId, feedId]); @@ -190,7 +192,6 @@ const LegacySeries = () => { hasSubscription={hasSubscription} playlist={filteredPlaylist} relatedTitle={inlineLayout ? selectedItem.title : t('episodes')} - onItemClick={onCardClick} setFilter={setSeasonFilter} currentFilter={seasonFilter} defaultFilterLabel={t('all_seasons')} @@ -198,6 +199,7 @@ const LegacySeries = () => { watchHistory={watchHistoryDictionary} filterMetadata={filterMetadata} filters={filters} + getURL={getUrl} player={ inlineLayout && (episode || firstEpisode) ? ( = ({ data: media, isLoading }) = // Handlers const goBack = () => media && navigate(mediaURL({ media, playlistId, play: false })); - const onCardClick = (item: PlaylistItem) => navigate(mediaURL({ media: item, playlistId })); + const getUrl = (item: PlaylistItem) => mediaURL({ media: item, playlistId }); const handleComplete = useCallback(() => { if (!id || !playlist) return; @@ -156,7 +156,7 @@ const MediaEvent: ScreenComponent = ({ data: media, isLoading }) = startWatchingButton={startWatchingButton} playlist={playlist} relatedTitle={playlist?.title} - onItemClick={onCardClick} + getURL={getUrl} activeLabel={t('current_video')} player={ inlineLayout ? ( diff --git a/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx b/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx index 00c803808..67ede7391 100644 --- a/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx +++ b/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx @@ -57,7 +57,7 @@ const MediaMovie: ScreenComponent = ({ data, isLoading }) => { // Handlers const goBack = () => data && navigate(mediaURL({ media: data, playlistId: feedId, play: false })); - const onCardClick = (item: PlaylistItem) => navigate(mediaURL({ media: item, playlistId: features?.recommendationsPlaylist })); + const getUrl = (item: PlaylistItem) => mediaURL({ media: item, playlistId: features?.recommendationsPlaylist }); const handleComplete = useCallback(() => { if (!id || !playlist) return; @@ -140,7 +140,7 @@ const MediaMovie: ScreenComponent = ({ data, isLoading }) => { startWatchingButton={startWatchingButton} playlist={playlist} relatedTitle={playlist?.title} - onItemClick={onCardClick} + getURL={getUrl} activeLabel={t('current_video')} player={ inlineLayout ? ( diff --git a/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx b/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx index 406a728dc..6bf51be0c 100644 --- a/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx +++ b/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { Navigate } from 'react-router'; +import { Navigate, useLocation } from 'react-router'; import { Helmet } from 'react-helmet'; import { useTranslation } from 'react-i18next'; import shallow from 'zustand/shallow'; @@ -33,6 +33,7 @@ import type { PlaylistItem } from '#types/playlist'; import Loading from '#src/pages/Loading/Loading'; import type { ScreenComponent } from '#types/screens'; import { VideoProgressMinMax } from '#src/config'; +import { addQueryParam } from '#src/utils/location'; const MediaSeries: ScreenComponent = ({ data: seriesMedia }) => { const breakpoint = useBreakpoint(); @@ -106,6 +107,11 @@ const MediaSeries: ScreenComponent = ({ data: seriesMedia }) => { const isLoggedIn = !!user; const hasSubscription = !!subscription; + const location = useLocation(); + const getURL = (toEpisode: PlaylistItem) => { + return addQueryParam(location, 'e', toEpisode.mediaid); + }; + // Handlers const goBack = useCallback(() => { setSearchParams({ ...searchParams, e: episode?.mediaid, r: feedId || '' }); @@ -255,6 +261,7 @@ const MediaSeries: ScreenComponent = ({ data: seriesMedia }) => { playlist={playlist} relatedTitle={inlineLayout ? seriesMedia.title : t('episodes')} onItemClick={onCardClick} + getURL={getURL} setFilter={setSeasonFilter} currentFilter={seasonFilter} defaultFilterLabel={t('all_seasons')} diff --git a/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx b/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx index 79a3fc84b..93b8ce6f1 100644 --- a/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx +++ b/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx @@ -1,11 +1,9 @@ import React, { useEffect, useMemo, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; import { Helmet } from 'react-helmet'; import shallow from 'zustand/shallow'; import styles from './PlaylistGrid.module.scss'; -import { mediaURL } from '#src/utils/formatting'; import { filterPlaylist, getFiltersFromConfig } from '#src/utils/collection'; import CardGrid from '#components/CardGrid/CardGrid'; import Filter from '#components/Filter/Filter'; @@ -13,9 +11,9 @@ import { useAccountStore } from '#src/stores/AccountStore'; import { useConfigStore } from '#src/stores/ConfigStore'; import type { Playlist, PlaylistItem } from '#types/playlist'; import type { ScreenComponent } from '#types/screens'; +import { mediaURL } from '#src/utils/formatting'; const PlaylistGrid: ScreenComponent = ({ data, isLoading }) => { - const navigate = useNavigate(); const { config, accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow); const [filter, setFilter] = useState(''); @@ -32,10 +30,10 @@ const PlaylistGrid: ScreenComponent = ({ data, isLoading }) => { setFilter(''); }, [data.feedid]); - const onCardClick = (playlistItem: PlaylistItem) => navigate(mediaURL({ media: playlistItem, playlistId: data.feedid })); - const pageTitle = `${data.title} - ${config.siteName}`; + const getUrl = (playlistItem: PlaylistItem) => mediaURL({ media: playlistItem, playlistId: playlistItem.feedid }); + return (
@@ -49,8 +47,8 @@ const PlaylistGrid: ScreenComponent = ({ data, isLoading }) => {
= ({ data: { feedid, playl shareButton={shareButton} trailerButton={null} favoriteButton={null} + getURL={() => ''} // TODO: OWA-31 - Add link for EPG item player={ channelMediaItem && ( { const { t } = useTranslation('search'); @@ -25,7 +25,6 @@ const Search = () => { const firstRender = useFirstRender(); const searchQuery = useUIStore((state) => state.searchQuery); const { updateSearchQuery } = useSearchQueryUpdater(); - const navigate = useNavigate(); const params = useParams(); const query = params['*']; const { isFetching, error, data: playlist } = usePlaylist(features?.searchPlaylist || '', { search: query || '' }, true, !!query); @@ -33,6 +32,8 @@ const Search = () => { // User const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow); + const getURL = (playlistItem: PlaylistItem) => mediaURL({ media: playlistItem, playlistId: features?.searchPlaylist }); + // Update the search bar query to match the route param on mount useEffect(() => { if (!firstRender) { @@ -44,14 +45,14 @@ const Search = () => { } }, [firstRender, query, searchQuery, updateSearchQuery]); - const onCardClick = (playlistItem: PlaylistItem) => { - useUIStore.setState({ - searchQuery: '', - searchActive: false, - }); - - navigate(mediaURL({ media: playlistItem, playlistId: features?.searchPlaylist })); - }; + useEffect(() => { + return () => { + useUIStore.setState({ + searchQuery: '', + searchActive: false, + }); + }; + }, []); if ((error || !playlist) && !isFetching) { return ( @@ -90,14 +91,7 @@ const Search = () => {

{t('heading')}

- +
); diff --git a/src/pages/User/User.tsx b/src/pages/User/User.tsx index fb0d9caab..8f40e5153 100644 --- a/src/pages/User/User.tsx +++ b/src/pages/User/User.tsx @@ -22,8 +22,6 @@ import { useAccountStore } from '#src/stores/AccountStore'; import { getSubscriptionSwitches } from '#src/stores/CheckoutController'; import { PersonalShelf, useConfigStore } from '#src/stores/ConfigStore'; import { clear as clearFavorites } from '#src/stores/FavoritesController'; -import { mediaURL } from '#src/utils/formatting'; -import type { PlaylistItem } from '#types/playlist'; const User = (): JSX.Element => { const { accessModel, favoritesList } = useConfigStore( @@ -41,7 +39,6 @@ const User = (): JSX.Element => { const isLargeScreen = breakpoint > Breakpoint.md; const { user: customer, subscription, loading, canUpdateEmail } = useAccountStore(); - const onCardClick = (playlistItem: PlaylistItem) => navigate(mediaURL({ media: playlistItem })); const onLogout = useCallback(async () => { // Empty customer on a user page leads to navigate (code bellow), so we don't repeat it here await logout(); @@ -110,7 +107,6 @@ const User = (): JSX.Element => { playlist={playlist} error={error} isLoading={isLoading} - onCardClick={onCardClick} onClearFavoritesClick={() => setClearFavoritesOpen(true)} accessModel={accessModel} hasSubscription={!!subscription} diff --git a/src/pages/User/__snapshots__/User.test.tsx.snap b/src/pages/User/__snapshots__/User.test.tsx.snap index 0d577d0c4..2d254ec66 100644 --- a/src/pages/User/__snapshots__/User.test.tsx.snap +++ b/src/pages/User/__snapshots__/User.test.tsx.snap @@ -392,7 +392,6 @@ exports[`User Component tests > Favorites Page 1`] = ` aria-label="Fav 1" class="_card_d75732" href="/m/aaabbbcc/fav-1?r=abcdffff" - role="button" tabindex="0" >
Favorites Page 1`] = ` aria-label="Big Buck Bunny" class="_card_d75732" href="/m/aaabbbcd/big-buck-bunny?r=bbbdddff" - role="button" tabindex="0" >
Favorites Page 1`] = ` aria-label="My last favorite" class="_card_d75732" href="/m/ggaaccvv/my-last-favorite?r=bbbbbbbb" - role="button" tabindex="0" >
{ I.see('Share'); I.seeTextEquals('Episodes', 'h3'); - I.click('div[aria-label="Play Blocking"]'); + I.click('a[aria-label="Blocking"]'); I.scrollTo('text="Episodes"'); I.see('E1 - Blocking'); - I.see('Current episode', { css: 'div[aria-label="Play Blocking"]' }); + I.see('Current episode', { css: 'a[aria-label="Blocking"]' }); I.see('Concept Art'); - I.see('E2', { css: 'div[aria-label="Play Concept Art"]' }); - I.see('E3', { css: 'div[aria-label="Play Modeling Part 1"]' }); - I.see('E4', { css: 'div[aria-label="Play Modeling Part 2"]' }); + I.see('E2', { css: 'a[aria-label="Concept Art"]' }); + I.see('E3', { css: 'a[aria-label="Modeling Part 1"]' }); + I.see('E4', { css: 'a[aria-label="Modeling Part 2"]' }); - I.scrollTo('div[aria-label="Play Modeling Part 2"]'); + I.scrollTo('a[aria-label="Modeling Part 2"]'); - I.see('E5', { css: 'div[aria-label="Play Texturing and Lighting"]' }); + I.see('E5', { css: 'a[aria-label="Texturing and Lighting"]' }); }); Scenario('I can see series with seasons', async ({ I }) => { @@ -52,27 +52,27 @@ Scenario('I can see series with seasons', async ({ I }) => { I.see('Share'); I.seeTextEquals('Episodes', 'h3'); - I.click('div[aria-label="Play Welcome"]'); + I.click('a[aria-label="Welcome"]'); I.scrollTo('text="Episodes"'); I.see('S1:E1 - Welcome'); - I.see('Current episode', { css: 'div[aria-label="Play Welcome"]' }); - I.see('S1:E2', { css: 'div[aria-label="Play Basics Of Blender"]' }); - I.see('S1:E3', { css: 'div[aria-label="Play Using Mineways"]' }); - I.see('S1:E4', { css: 'div[aria-label="Play Texturing your Minecraft World (Blender Render)"]' }); + I.see('Current episode', { css: 'a[aria-label="Welcome"]' }); + I.see('S1:E2', { css: 'a[aria-label="Basics Of Blender"]' }); + I.see('S1:E3', { css: 'a[aria-label="Using Mineways"]' }); + I.see('S1:E4', { css: 'a[aria-label="Texturing your Minecraft World (Blender Render)"]' }); - I.scrollTo('div[aria-label="Play Texturing your Minecraft World (Blender Render)"]'); + I.scrollTo('a[aria-label="Texturing your Minecraft World (Blender Render)"]'); - I.see('S1:E5', { css: 'div[aria-label="Play Texturing your Minecraft World (Cycles)"]' }); - I.see('S1:E6', { css: 'div[aria-label="Play Rig Overview (Boxscape Studios)"]' }); + I.see('S1:E5', { css: 'a[aria-label="Texturing your Minecraft World (Cycles)"]' }); + I.see('S1:E6', { css: 'a[aria-label="Rig Overview (Boxscape Studios)"]' }); }); -Scenario('I can play other episodes from the series', async ({ I }) => { +Scenario('I can other episodes from the series', async ({ I }) => { await I.openVideoCard(constants.fantasyVehicleTitle, ShelfId.allCourses); I.see('Fantasy Vehicle Creation'); I.scrollTo('text="Modeling Part 1"'); - I.click('div[aria-label="Play Modeling Part 1"]'); + I.click('a[aria-label="Modeling Part 1"]'); // Scroll to the top when a new episode is selected (takes a short time) I.wait(2); @@ -83,7 +83,7 @@ Scenario('I can play other episodes from the series', async ({ I }) => { ); I.scrollTo('text="Texturing and Lighting"'); - I.click('div[aria-label="Play Texturing and Lighting"]'); + I.click('a[aria-label="Texturing and Lighting"]'); // Check that scrolled to the top I.wait(2); diff --git a/test-e2e/tests/video_detail_test.ts b/test-e2e/tests/video_detail_test.ts index 7adea6485..e38737472 100644 --- a/test-e2e/tests/video_detail_test.ts +++ b/test-e2e/tests/video_detail_test.ts @@ -31,7 +31,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) { I.see('Favorite'); I.see('Share'); I.see('Elephants Dream'); - I.see('11 min', { css: 'div[aria-label="Play Elephants Dream"]' }); + I.see('11 min', { css: 'a[aria-label="Elephants Dream"]' }); }); Scenario(`I can expand the description (@mobile-only) - ${providerName}`, async ({ I }) => { diff --git a/test-e2e/tests/watch_history/local_test.ts b/test-e2e/tests/watch_history/local_test.ts index 2450a7035..f9fc3a01d 100644 --- a/test-e2e/tests/watch_history/local_test.ts +++ b/test-e2e/tests/watch_history/local_test.ts @@ -44,7 +44,7 @@ Scenario('I can see my watch history on the Home screen', async ({ I }) => { I.see('10 min'); }); - const selector = `${makeShelfXpath(ShelfId.continueWatching)}//div[@aria-label="Play ${videoTitle}"]`; + const selector = `${makeShelfXpath(ShelfId.continueWatching)}//a[@aria-label="${videoTitle}"]`; await checkProgress(I, selector, (200 / videoLength) * 100); I.click(selector); diff --git a/test-e2e/tests/watch_history/logged_in_test.ts b/test-e2e/tests/watch_history/logged_in_test.ts index 7505cdc58..e9c8f4434 100644 --- a/test-e2e/tests/watch_history/logged_in_test.ts +++ b/test-e2e/tests/watch_history/logged_in_test.ts @@ -71,7 +71,7 @@ function runTestSuite(config: typeof testConfigs.svod, configNoWatchlist: typeof I.see('10 min'); }); - const selector = `${makeShelfXpath(ShelfId.continueWatching)}//div[@aria-label="Play ${videoTitle}"]`; + const selector = `${makeShelfXpath(ShelfId.continueWatching)}//a[@aria-label="${videoTitle}"]`; await checkProgress(I, selector, (80 / videoLength) * 100); I.click(selector); diff --git a/test-e2e/utils/steps_file.ts b/test-e2e/utils/steps_file.ts index 392275cee..844eda47b 100644 --- a/test-e2e/utils/steps_file.ts +++ b/test-e2e/utils/steps_file.ts @@ -378,7 +378,7 @@ const stepsObj = { scrollToTheRight: boolean = true, preOpenCallback?: (locator: string) => void, ) { - const locator = `//div[@aria-label="Play ${name}"]`; + const locator = `//a[@aria-label="${name}"]`; const shelfXpath = shelf ? makeShelfXpath(shelf) : undefined; if (shelfXpath) { @@ -419,7 +419,7 @@ const stepsObj = { if (isMobile) { // This swipes on the current item in the carousel where the card we're trying to click is await this.swipe({ - xpath: shelfXpath ? `${shelfXpath}//*[@tabindex=0]` : `${locator}/ancestor::ul/li/div[@tabindex=0]`, + xpath: shelfXpath ? `${shelfXpath}//*[@tabindex=0]` : `${locator}/ancestor::ul/li/a[@tabindex=0]`, direction: scrollToTheRight ? 'left' : 'right', }); } else {