Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add new sample mp3s for e2e tests and storybook #927

Merged
merged 3 commits into from
Jan 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 24 additions & 23 deletions cypress/components/audio-player-composable.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const checkTime = expectedValue => {
};

const TEST_DATA = {
durationInSeconds: 898,
durationInSeconds: 78,
};

/*
Expand Down Expand Up @@ -136,17 +136,18 @@ describe('audio player composable', () => {
cy.get('@audioSliderTrack').click('left');
checkTime(0);

// move to 4th minute
cy.get('@audioSliderTrack').click(129, 4);
checkTime(2 * 60);
// move to 12th second
cy.get('@audioSliderTrack').click(150, 4);
checkTime(12);
});

it('pause when end', () => {
// start playing
cy.get('@togglePlay').click();
// move to the end
cy.get('@audioSliderTrack').click(1000, 4, {force: true});
checkTime(TEST_DATA.durationInSeconds);
cy.get('@audioSliderTrack').click(965, 4, { force: true });
cy.get('@audioSliderTrack').click(965, 4, { force: true });
checkTime(TEST_DATA.durationInSeconds - 1);
isPaused();
});

Expand Down Expand Up @@ -185,43 +186,43 @@ describe('audio player composable', () => {
// Keyboard related tests
it('keyboard: toggle when press K key', () => {
cy.get('@togglePlay').focus();
triggerKeyEvent('@togglePlay', {key: 'k'});
triggerKeyEvent('@togglePlay', { key: 'k' });
isPlaying();

triggerKeyEvent('@togglePlay', {key: 'k'});
triggerKeyEvent('@togglePlay', { key: 'k' });
isPaused();
});

it('keyboard: toggle when press M key', () => {
cy.get('@muteButton').focus();
triggerKeyEvent('@muteButton', {key: 'm'});
triggerKeyEvent('@muteButton', { key: 'm' });
isVolumeVal(0);

triggerKeyEvent('@muteButton', {key: 'm', force: true});
triggerKeyEvent('@muteButton', { key: 'm', force: true });
isVolumeVal(0.7);
});

it('keyboard: toggle when press Space key', () => {
cy.get('@audioSliderThumb').focus();
triggerKeyEvent('@audioSliderThumb', {key: ' '});
triggerKeyEvent('@audioSliderThumb', { key: ' ' });
isPlaying();

triggerKeyEvent('@audioSliderThumb', {key: ' '});
triggerKeyEvent('@audioSliderThumb', { key: ' ' });
isPaused();
});

it('keyboard: move track using 0, Start and End key', () => {
cy.get('@togglePlay').focus();
triggerKeyEvent('@togglePlay', {key: 'End'});
checkTime(TEST_DATA.durationInSeconds);
triggerKeyEvent('@togglePlay', { key: 'End' });
checkTime(TEST_DATA.durationInSeconds - 1);

triggerKeyEvent('@togglePlay', {key: 'Home'});
triggerKeyEvent('@togglePlay', { key: 'Home' });
checkTime(0);

triggerKeyEvent('@togglePlay', {key: 'End'});
triggerKeyEvent('@togglePlay', { key: 'End' });
checkTime(TEST_DATA.durationInSeconds);

triggerKeyEvent('@togglePlay', {key: '0'});
triggerKeyEvent('@togglePlay', { key: '0' });
checkTime(0);
});

Expand All @@ -238,26 +239,26 @@ describe('audio player composable', () => {
});

it('keyboard: shift + p trigger previous', () => {
triggerKeyEvent('@togglePlay', [{key: 'Shift'}, {key: 'p'}]);
triggerKeyEvent('@togglePlay', [{ key: 'Shift' }, { key: 'p' }]);
cy.get(`${parentTestIDSelector} [data-testid="event"]`).as('eventLog');
cy.get('@eventLog').should('have.text', 'skip-previous');
});

it('keyboard: shift + n trigger next', () => {
triggerKeyEvent('@togglePlay', [{key: 'Shift'}, {key: 'n'}]);
triggerKeyEvent('@togglePlay', [{ key: 'Shift' }, { key: 'n' }]);
cy.get(`${parentTestIDSelector} [data-testid="event"]`).as('eventLog');
cy.get('@eventLog').should('have.text', 'skip-next');
});

it('keyboard: l trigger forwards', () => {
triggerKeyEvent('@forwardButton', {key: 'l'});
triggerKeyEvent('@forwardButton', { key: 'l' });
checkTime(10);
});

it('keyboard: j trigger playback', () => {
triggerKeyEvent('@forwardButton', {key: 'l'});
triggerKeyEvent('@forwardButton', {key: 'l'});
triggerKeyEvent('@forwardButton', {key: 'j'});
triggerKeyEvent('@forwardButton', { key: 'l' });
triggerKeyEvent('@forwardButton', { key: 'l' });
triggerKeyEvent('@forwardButton', { key: 'j' });
checkTime(10);
});
});
4 changes: 2 additions & 2 deletions cypress/fixtures/podcasts.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@
"captionSrc": "captions.vtt"
},
{
"src": "https://ncu-newskit-docs.s3.eu-west-1.amazonaws.com/storybook-assets/audio_file_1.mp3",
"src": "https://newskit.co.uk/static/sample.mp3",
"imgAlt": "test image 2",
"title": "title 2",
"live": false,
"imgSrc": "https://via.placeholder.com/150",
"captionSrc": "captions.vtt"
},
{
"src": "https://ncu-newskit-docs.s3.eu-west-1.amazonaws.com/storybook-assets/audio_file_2.mp3",
"src": "https://newskit.co.uk/static/sample2.mp3",
"imgAlt": "test image 3",
"title": "title 3",
"live": false,
Expand Down
Binary file added site/public/static/sample.mp3
Binary file not shown.
Binary file added site/public/static/sample2.mp3
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const AudioPlayerE2E = () => {
<div data-testid="audio-player-inline">
<StorybookSubHeading>Audio player for e2e tests</StorybookSubHeading>
<AudioPlayerComposable
src="https://ncu-newskit-docs.s3.eu-west-1.amazonaws.com/storybook-assets/audio_file_1.mp3"
src="https://newskit.co.uk/static/sample.mp3"
ariaLandmark="audio player e2e tests"
>
<GridLayout rowGap="space020" areas={fullAudioPlayerAreas}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,7 @@ const StyledPage = styled.div`
padding-right: 20px;
`;

const AUDIO_SRC =
'https://ncu-newskit-docs.s3.eu-west-1.amazonaws.com/storybook-assets/audio_file_1.mp3';
const AUDIO_SRC = 'https://newskit.co.uk/static/sample.mp3';
const LIVE_AUDIO_SRC = 'https://radio.talkradio.co.uk/stream';

const myCustomTheme = createTheme({
Expand Down
3 changes: 1 addition & 2 deletions src/audio-player/__tests__/audio-player.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,7 @@ const liveAudioProps = {
};

const recordedAudioProps = {
src:
'https://ncu-newskit-docs.s3.eu-west-1.amazonaws.com/storybook-assets/audio_file_1.mp3',
src: 'https://newskit.co.uk/static/sample.mp3',
title: 'The Breakfast Show with Giles Coren',
captionSrc: 'captions.vtt',
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default {
export const StoryAutoPlayAudioPlayer = () => (
<AudioPlayerContainer>
<AudioPlayer
src="https://ncu-newskit-docs.s3.eu-west-1.amazonaws.com/storybook-assets/audio_file_1.mp3"
src="https://newskit.co.uk/static/sample.mp3"
title="Auto Play Test"
captionSrc="captions.vtt"
ariaLandmark="audio player with autoplay"
Expand Down
4 changes: 2 additions & 2 deletions src/theme-checker/scenarios.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ export const scenarios: Array<ComponentData> = [
</Block>
<AudioPlayerContainer>
<AudioPlayer
src="https://ncu-newskit-docs.s3.eu-west-1.amazonaws.com/storybook-assets/audio_file_1.mp3"
src="https://newskit.co.uk/static/sample.mp3"
title="The Breakfast Show with Giles Coren"
captionSrc="captions.vtt"
ariaLandmark="audio player default"
Expand Down Expand Up @@ -326,7 +326,7 @@ export const scenarios: Array<ComponentData> = [
<>
<>
<AudioPlayerComposable
src="https://ncu-newskit-docs.s3.eu-west-1.amazonaws.com/storybook-assets/audio_file_1.mp3"
src="https://newskit.co.uk/static/sample.mp3"
ariaLandmark="audio player skip buttons"
>
<GridLayout rowGap="20px" areas={fullAudioPlayerAreas}>
Expand Down