diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts index e44c83775..6bbd8634f 100644 --- a/apps/client/src/common/hooks/useSocket.ts +++ b/apps/client/src/common/hooks/useSocket.ts @@ -160,7 +160,7 @@ export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) = numEvents: state.runtime.numEvents, selectedEventIndex: state.runtime.selectedEventIndex, - offset: state.runtime.offset, + offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset, currentBlock: state.currentBlock, })); diff --git a/apps/client/src/features/overview/Overview.tsx b/apps/client/src/features/overview/Overview.tsx index 1e10a82d7..a2eee0ea8 100644 --- a/apps/client/src/features/overview/Overview.tsx +++ b/apps/client/src/features/overview/Overview.tsx @@ -170,7 +170,7 @@ function RuntimeOverview() { return ( <> - + ); diff --git a/apps/client/src/features/overview/composite/TimeLayout.tsx b/apps/client/src/features/overview/composite/TimeLayout.tsx index 181af8da1..a1a19cd9a 100644 --- a/apps/client/src/features/overview/composite/TimeLayout.tsx +++ b/apps/client/src/features/overview/composite/TimeLayout.tsx @@ -10,13 +10,16 @@ interface TimeLayoutProps { muted?: boolean; daySpan?: number; className?: string; + testId?: string; } -export function TimeColumn({ label, value, muted, className }: TimeLayoutProps) { +export function TimeColumn({ label, value, muted, className, testId }: TimeLayoutProps) { return (
{label} - {value} + + {value} +
); } diff --git a/e2e/tests/features/212-time-until.spec.ts b/e2e/tests/features/212-time-until.spec.ts index 358991bf2..81b5beb40 100644 --- a/e2e/tests/features/212-time-until.spec.ts +++ b/e2e/tests/features/212-time-until.spec.ts @@ -1,6 +1,6 @@ import { expect, test } from '@playwright/test'; -test('linked time until', async ({ page }) => { +test('time until absolute', async ({ page }) => { await page.goto('http://localhost:4001/editor'); await page.getByRole('button', { name: 'Clear rundown' }).click(); @@ -11,15 +11,48 @@ test('linked time until', async ({ page }) => { await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click(); await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click(); + await page.getByRole('button', { name: 'Absolute' }).click(); await page.getByTestId('entry-1').getByLabel('Start event').click(); + await expect(page.getByTestId('offset')).not.toContainText('00:00:00'); // This might be a bad test requires that the test is not run at 0h + await page.getByLabel('Pause event').click(); + + await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('9m'); + await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('19m'); + await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('29m'); + + await page.getByTestId('entry-1').getByTestId('time-input-duration').click(); + await page.getByTestId('entry-1').getByTestId('time-input-duration').fill('6h'); + await page.getByTestId('entry-1').getByTestId('time-input-duration').press('Enter'); + + await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('5h59m'); + await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('6h9m'); + await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('6h19m'); + + await page.getByTestId('entry-1').getByTestId('time-input-duration').click(); + await page.getByTestId('entry-1').getByTestId('time-input-duration').fill('30s'); + await page.getByTestId('entry-1').getByTestId('time-input-duration').press('Enter'); + + await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('29s'); + await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('10m'); + await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('20m'); +}); + +test('time until relative', async ({ page }) => { + await page.goto('http://localhost:4001/editor'); + + await page.getByRole('button', { name: 'Clear rundown' }).click(); + await page.getByRole('button', { name: 'Delete all' }).click(); + + await page.getByRole('button', { name: 'Create Event' }).click(); + await page.getByRole('button', { name: 'Event' }).nth(4).click(); + await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click(); + await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click(); + + await page.getByRole('button', { name: 'Relative' }).click(); + await page.getByTestId('entry-1').getByLabel('Start event').click(); + await expect(page.getByTestId('offset')).toContainText('00:00:00'); // This might be a bad test as it ruires the evaluation to happen within 1s await page.getByLabel('Pause event').click(); - await page.getByRole('button', { name: 'Absolute' }).click(); - await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('9m'); - await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('19m'); - await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('29m'); - - await page.getByRole('button', { name: 'Relative' }).click(); await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('9m'); await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('19m'); await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('29m'); @@ -28,12 +61,6 @@ test('linked time until', async ({ page }) => { await page.getByTestId('entry-1').getByTestId('time-input-duration').fill('6h'); await page.getByTestId('entry-1').getByTestId('time-input-duration').press('Enter'); - await page.getByRole('button', { name: 'Absolute' }).click(); - await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('5h59m'); - await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('6h9m'); - await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('6h19m'); - - await page.getByRole('button', { name: 'Relative' }).click(); await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('5h59m'); await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('6h9m'); await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('6h19m'); @@ -42,12 +69,6 @@ test('linked time until', async ({ page }) => { await page.getByTestId('entry-1').getByTestId('time-input-duration').fill('30s'); await page.getByTestId('entry-1').getByTestId('time-input-duration').press('Enter'); - await page.getByRole('button', { name: 'Absolute' }).click(); - await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('29s'); - await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('10m'); - await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('20m'); - - await page.getByRole('button', { name: 'Relative' }).click(); await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('29s'); await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('10m'); await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('20m');