Skip to content

Commit

Permalink
Merge pull request #292 from samvera-labs/playlist-item-tracker-fix
Browse files Browse the repository at this point in the history 
Display tracker when displaying playlist manifests
  • Loading branch information
@Dananji
Dananji authored Nov 22, 2023
2 parents e9fe74f + 552f89c commit 70f864c
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 68 deletions.
57 changes: 52 additions & 5 deletions src/components/StructuredNavigation/NavUtils/List.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import List from './List';
import { render, screen } from '@testing-library/react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { withManifestAndPlayerProvider } from '../../../services/testing-helpers';

describe('List component', () => {
const sectionRef = { current: '' };
describe('displays', () => {
describe('with a regular manifest', () => {
const items =
{
id: undefined,
Expand Down Expand Up @@ -69,17 +69,17 @@ describe('List component', () => {
});
render(<ListWithManifest />);
});
test('renders successfully', () => {
test('renders structure successfully', () => {
expect(screen.getAllByTestId('list'));
});

test('canvas level structure item w/o mediafragment as a span', () => {
test('displays canvas level structure item w/o mediafragment as a span', () => {
expect(screen.queryByTestId('listitem-section-span')).toBeInTheDocument();
expect(screen.getByTestId('listitem-section-span'))
.toHaveTextContent('1. Lunchroom Manners09:32');
});

test('structures with the correct ListItems', () => {
test('displays structures with the correct ListItems', () => {
expect(screen.getByText('1. Part I (00:45)'));
expect(screen.getByText('Introduction'));
});
Expand Down Expand Up @@ -125,4 +125,51 @@ describe('List component', () => {
expect(screen.getByTestId('listitem-section-button'))
.toHaveTextContent('1. Lunchroom Manners');
});

describe('with playlist manifest', () => {
const playlistItem =
{
canvasIndex: 1,
duration: "09:32",
id: "https://example.com/playlists/1/manifest/canvas/1#t=0.0,",
isCanvas: true,
isClickable: true,
isEmpty: false,
isTitle: false,
itemIndex: 1,
items: [],
label: "Beginning Responsibility: Lunchroom Manners",
rangeId: "https://example.com/playlists/1/manifest/range/1"
};
const props = {
items: [playlistItem],
sectionRef
};
beforeEach(() => {
const ListWithManifest = withManifestAndPlayerProvider(List, {
initialManifestState: { playlist: { isPlaylist: true }, canvasIndex: 0 },
initialPlayerState: {},
...props
});
render(<ListWithManifest />);
});
test('displays playlist items as timespans', () => {
expect(screen.queryAllByTestId('list')).toHaveLength(1);
expect(screen.queryAllByTestId('list-item').length).toEqual(1);
expect(screen.queryAllByTestId('list-item')[0])
.toHaveTextContent('1. Beginning Responsibility: Lunchroom Manners (09:32)');
// Has tracker UI element attached
expect(screen.queryAllByTestId('list-item')[0].children[0]).toHaveClass('tracker');
});

test('shows tracker when clicked on the item', () => {
expect(screen.queryAllByTestId('list-item').length).toEqual(1);
const playlistItem = screen.getAllByTestId('list-item')[0];
expect(playlistItem).not.toHaveClass('active');
fireEvent.click(playlistItem);
waitFor(() => {
expect(playlistItem).toHaveClass('active');
});
});
});
});
5 changes: 4 additions & 1 deletion src/components/StructuredNavigation/NavUtils/ListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,10 @@ const ListItem = ({
});

React.useEffect(() => {
if (liRef.current && !isCanvas) {
/* Add 'active' class only when the current item is
either a playlist item when a playlist manifest is displayed
or a non-canvase level item when a regular manifest is displayed */
if ((liRef.current && isPlaylist) || (liRef.current && !isCanvas)) {
if (currentNavItem && currentNavItem.id == itemIdRef.current) {
liRef.current.className += ' active';

Expand Down
150 changes: 88 additions & 62 deletions src/components/StructuredNavigation/NavUtils/ListItem.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,62 +184,62 @@ describe('ListItem component', () => {

describe('with canvas level structure item', () => {
const sectionRef = { current: '' };
const canvasItem =
{
id: undefined,
duration: '09:32',
rangeId: 'https://example.com/manifest/lunchroom_manners/range/1',
isTitle: true,
isCanvas: true,
itemIndex: 1,
isClickable: false,
isEmpty: false,
label: 'Lunchroom Manners',
items: [
{
id: undefined,
duration: '02:00',
rangeId: 'https://example.com/manifest/lunchroom_manners/range/1-1',
isTitle: true,
isCanvas: false,
itemIndex: undefined,
isClickable: false,
isEmpty: false,
label: 'Introduction',
items: [
{
id: 'https://example.com/manifest/lunchroome_manners/canvas/1#t=0.0,45.321',
duration: '00:45',
rangeId: 'https://example.com/manifest/lunchroom_manners/range/1-1-1',
isTitle: false,
isCanvas: false,
itemIndex: 1,
isClickable: true,
isEmpty: false,
label: 'Part I',
items: [],
sectionRef: sectionRef
},
{
id: 'https://example.com/manifest/lunchroome_manners/canvas/1#t=60,120.321',
duration: '01:00',
rangeId: 'https://example.com/manifest/lunchroom_manners/range/1-1-2',
isTitle: false,
isCanvas: false,
itemIndex: 2,
isClickable: true,
isEmpty: false,
label: 'Part II',
items: [],
sectionRef: sectionRef
},
],
sectionRef: sectionRef
}
],
sectionRef: sectionRef
};
beforeEach(() => {
test('renders the section as a button for regular manifests', () => {
const canvasItem =
{
id: undefined,
duration: '09:32',
rangeId: 'https://example.com/manifest/lunchroom_manners/range/1',
isTitle: true,
isCanvas: true,
itemIndex: 1,
isClickable: false,
isEmpty: false,
label: 'Lunchroom Manners',
items: [
{
id: undefined,
duration: '02:00',
rangeId: 'https://example.com/manifest/lunchroom_manners/range/1-1',
isTitle: true,
isCanvas: false,
itemIndex: undefined,
isClickable: false,
isEmpty: false,
label: 'Introduction',
items: [
{
id: 'https://example.com/manifest/lunchroome_manners/canvas/1#t=0.0,45.321',
duration: '00:45',
rangeId: 'https://example.com/manifest/lunchroom_manners/range/1-1-1',
isTitle: false,
isCanvas: false,
itemIndex: 1,
isClickable: true,
isEmpty: false,
label: 'Part I',
items: [],
sectionRef: sectionRef
},
{
id: 'https://example.com/manifest/lunchroome_manners/canvas/1#t=60,120.321',
duration: '01:00',
rangeId: 'https://example.com/manifest/lunchroom_manners/range/1-1-2',
isTitle: false,
isCanvas: false,
itemIndex: 2,
isClickable: true,
isEmpty: false,
label: 'Part II',
items: [],
sectionRef: sectionRef
},
],
sectionRef: sectionRef
}
],
sectionRef: sectionRef
};
const props = {
...canvasItem
};
Expand All @@ -251,15 +251,41 @@ describe('ListItem component', () => {
initialState: { playlist: { isPlaylist: false }, canvasIndex: 0 },
});
render(<ListItemWithManifest />);
});
afterEach(() => {
cleanup();
});

test('renders the section with button', () => {
expect(screen.queryAllByTestId('list')).toHaveLength(2);
expect(screen.queryAllByTestId('list-item').length).toEqual(4);
expect(screen.queryAllByTestId('list-item')[0]).toHaveTextContent('1. Lunchroom Manners09:32');
});

test('renders the section as link for playlist manifests', () => {
const playlistItem =
{
canvasIndex: 1,
duration: "09:32",
id: "https://example.com/playlists/1/manifest/canvas/1#t=0.0,",
isCanvas: true,
isClickable: true,
isEmpty: false,
isTitle: false,
itemIndex: 1,
items: [],
label: "Beginning Responsibility: Lunchroom Manners",
rangeId: "https://example.com/playlists/1/manifest/range/1",
sectionRef: sectionRef,
};

const props = {
...playlistItem
};
const ListItemWithPlayer = withPlayerProvider(ListItem, {
...props,
initialState: {},
});
const ListItemWithManifest = withManifestProvider(ListItemWithPlayer, {
initialState: { playlist: { isPlaylist: true }, canvasIndex: 0 },
});
render(<ListItemWithManifest />);
expect(screen.queryAllByTestId('list-item').length).toEqual(1);
expect(screen.queryAllByTestId('list-item')[0]).toHaveTextContent('1. Beginning Responsibility: Lunchroom Manners (09:32)');
});
});
});

0 comments on commit 70f864c

Please sign in to comment.