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.

Sign up for GitHub

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

Jump to bottom

Refactor components and code style #220

Merged
2 commits merged into from
Feb 28, 2021
Merged

Refactor components and code style #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
36d7f26
Refactor components and fix code style
nirmaoz Feb 26, 2021
01a98c9
Refactor components and code style
nirmaoz Feb 27, 2021
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
93 changes: 47 additions & 46 deletions __tests__/audio.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/* eslint-disable no-unused-vars */
import React from 'react'
import React from 'react';
/* eslint-enable no-unused-vars */
import { shallow, mount } from 'enzyme'
import { Audio, Transformation } from 'cloudinary-react'
import { shallow, mount } from 'enzyme';
import { Audio, Transformation } from 'cloudinary-react';

describe('Audio', () => {
it('should include child transformation for a single source type', function () {
Expand All @@ -17,30 +17,30 @@ describe('Audio', () => {
>
<Transformation quality='70' />
</Audio>
)
expect(tag.props().src).toEndWith('/q_70/du_3/dog.wav')
})
);
expect(tag.props().src).toEndWith('/q_70/du_3/dog.wav');
});

it('should support startOffset parameter', function () {
let tag = shallow(
<Audio cloudName='demo' sourceTypes='wav' publicId='dog'>
<Transformation startOffset='auto' />
</Audio>
)
expect(tag.props().src).toEndWith('/so_auto/dog.wav')
);
expect(tag.props().src).toEndWith('/so_auto/dog.wav');
tag = shallow(
<Audio cloudName='demo' sourceTypes='wav' publicId='dog'>
<Transformation startOffset='2' />
</Audio>
)
expect(tag.props().src).toEndWith('/so_2/dog.wav')
);
expect(tag.props().src).toEndWith('/so_2/dog.wav');
tag = shallow(
<Audio cloudName='demo' sourceTypes='wav' publicId='dog'>
<Transformation startOffset='2.34' />
</Audio>
)
expect(tag.props().src).toEndWith('/so_2.34/dog.wav')
})
);
expect(tag.props().src).toEndWith('/so_2.34/dog.wav');
});

it('should include child transformation for multiple source types', function () {
const tag = shallow(
Expand All @@ -55,26 +55,26 @@ describe('Audio', () => {
>
<Transformation duration='2' />
</Audio>
)
);
expect(tag.find('[type="audio/vnd.wav"]').props().src).toEndWith(
'/du_2/e_volume:30/dog.wav'
)
);
expect(tag.find('[type="audio/mpeg"]').props().src).toEndWith(
'/du_2/e_volume:45/dog.mp3'
)
})
);
});

it('should support inner text', function () {
const tag = shallow(
<Audio cloudName='demo' publicId='dog'>
Your browser does not support the audio tag.
</Audio>
)
expect(tag.type()).toEqual('audio')
})
);
expect(tag.type()).toEqual('audio');
});

it('Should support forwarding innerRef to underlying audio element', function () {
const myRef = React.createRef()
const myRef = React.createRef();

const tag = mount(
<Audio
Expand All @@ -86,43 +86,44 @@ describe('Audio', () => {
ogg: { duration: 2 }
}}
/>
)
);

const audio = myRef.current
const audio = myRef.current;

expect(tag.find('audio').prop('src')).toEndWith('/du_2/dog.ogg')
expect(tag.find('audio').prop('src')).toEndWith('/du_2/dog.ogg');
expect(audio.src).toEndWith('/du_2/dog.ogg')
;['play', 'pause', 'canPlayType', 'addTextTrack'].forEach((func) =>
expect(typeof audio[func]).toBe('function')
)
})
);
});

it('Should not set a poster attribute', function () {
const tag = shallow(<Audio cloudName='demo' publicId='dog' />)
const tag = shallow(<Audio cloudName='demo' publicId='dog' />);

expect(tag.props().poster).toEqual(undefined)
})
expect(tag.props().poster).toEqual(undefined);
});

it('Should pass camelCase attributes to Audio component', function () {
const tag = shallow(
<Audio playsInline autoPlay cloudName='demo' publicId='dog' />
)
);

const { autoPlay, auto_play } = tag.props()
// eslint-disable-next-line camelcase
const { autoPlay, auto_play } = tag.props();

expect(autoPlay).toEqual(true)
expect(autoPlay).toEqual(true);

expect(auto_play).toEqual(undefined)
})
expect(auto_play).toEqual(undefined);
});
it('Should pass camelCase attributes to inner audio element', function () {
const tag = mount(<Audio autoPlay cloudName='demo' publicId='dog' />)
const tag = mount(<Audio autoPlay cloudName='demo' publicId='dog' />);

const audio = tag.find('audio')
expect(audio.prop('autoPlay')).toEqual(true)
const audio = tag.find('audio');
expect(audio.prop('autoPlay')).toEqual(true);

expect(audio.prop('plays_inline')).toEqual(undefined)
expect(audio.prop('auto_play')).toEqual(undefined)
})
expect(audio.prop('plays_inline')).toEqual(undefined);
expect(audio.prop('auto_play')).toEqual(undefined);
});
it('should generate default source tags', function () {
const tag = shallow(
<Audio
Expand All @@ -136,15 +137,15 @@ describe('Audio', () => {
>
<Transformation quality='70' />
</Audio>
)
);
expect(tag.find('[type="audio/aac"]').props().src).toEndWith(
'/du_1/dog.aac'
)
);
expect(tag.find('[type="audio/mpeg"]').props().src).toEndWith(
'/du_2/dog.mp3'
)
);
expect(tag.find('[type="audio/ogg"]').props().src).toEndWith(
'/du_3/dog.ogg'
)
})
})
);
});
});
90 changes: 45 additions & 45 deletions __tests__/context.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
import React from 'react'
import { mount } from 'enzyme'
import React from 'react';
import { mount } from 'enzyme';

import { Image, CloudinaryContext } from 'cloudinary-react'
import { Image, CloudinaryContext } from 'cloudinary-react';

describe('CloudinaryContext', () => {
it('should pass properties to children', function () {
const tag = mount(
<CloudinaryContext className='root' cloudName='demo'>
<Image publicId='sample' />
</CloudinaryContext>
)
);

expect(tag.html().startsWith('<div')).toEqual(true)
expect(tag.find('div').hasClass('root')).toEqual(true)
expect(tag.children()).toHaveLength(1)
const img = tag.find('div').childAt(0)
expect(tag.html().startsWith('<div')).toEqual(true);
expect(tag.find('div').hasClass('root')).toEqual(true);
expect(tag.children()).toHaveLength(1);
const img = tag.find('div').childAt(0);
expect(img.html()).toEqual(
`<img src="http://res.cloudinary.com/demo/image/upload/sample">`
)
})
'<img src="http://res.cloudinary.com/demo/image/upload/sample">'
);
});

it('should render without div', function () {
const tag = mount(
<CloudinaryContext className='root' cloudName='demo' includeOwnBody>
<Image publicId='sample' />
</CloudinaryContext>
)
);

expect(tag.html().startsWith('<div')).toEqual(false)
})
expect(tag.html().startsWith('<div')).toEqual(false);
});
it('should render with div', function () {
const tag = mount(
<CloudinaryContext
Expand All @@ -38,36 +38,36 @@ describe('CloudinaryContext', () => {
>
<Image publicId='sample' />
</CloudinaryContext>
)
);

expect(tag.html().startsWith('<div')).toEqual(true)
})
expect(tag.html().startsWith('<div')).toEqual(true);
});

it('should pass properties to children with snake case', function () {
const tag = mount(
<CloudinaryContext className='root' cloudName='demo' fetch_format='auto'>
<Image publicId='sample' />
</CloudinaryContext>
)
);

const img = tag.find('div').childAt(0)
const img = tag.find('div').childAt(0);
expect(img.html()).toEqual(
`<img src="http://res.cloudinary.com/demo/image/upload/f_auto/sample">`
)
})
'<img src="http://res.cloudinary.com/demo/image/upload/f_auto/sample">'
);
});

it('should pass properties to children with kebab case', function () {
const tag = mount(
<CloudinaryContext className='root' cloudName='demo' fetch-format='auto'>
<Image publicId='sample' />
</CloudinaryContext>
)
);

const img = tag.find('div').childAt(0)
const img = tag.find('div').childAt(0);
expect(img.html()).toEqual(
`<img src="http://res.cloudinary.com/demo/image/upload/f_auto/sample">`
)
})
'<img src="http://res.cloudinary.com/demo/image/upload/f_auto/sample">'
);
});

it('should remove Cloudinary custom properties from CloudinaryContext component', function () {
const html = mount(
Expand All @@ -81,20 +81,20 @@ describe('CloudinaryContext', () => {
>
<Image publicId='sample' />
</CloudinaryContext>
)
);

const contextDiv = html.find('div')
expect(contextDiv.find('.root').length).toEqual(1)
expect(contextDiv.find("[role='tab']").length).toEqual(1)
expect(contextDiv.find("[aria-live='polite']").length).toEqual(1)
expect(contextDiv.find("[cloudName='demo']").length).toEqual(0)
expect(contextDiv.find('[quality]').length).toEqual(0)
const contextDiv = html.find('div');
expect(contextDiv.find('.root').length).toEqual(1);
expect(contextDiv.find("[role='tab']").length).toEqual(1);
expect(contextDiv.find("[aria-live='polite']").length).toEqual(1);
expect(contextDiv.find("[cloudName='demo']").length).toEqual(0);
expect(contextDiv.find('[quality]').length).toEqual(0);

// Verify that transformations from context are applied to components
expect(contextDiv.find('img').prop('src')).toEqual(
'https://res.cloudinary.com/demo/image/upload/q_auto/sample'
)
})
);
});

it('should allow chained Contexts', function () {
const tag = mount(
Expand All @@ -103,25 +103,25 @@ describe('CloudinaryContext', () => {
<Image publicId='sample' />
</CloudinaryContext>
</CloudinaryContext>
)
);
expect(tag.find('img').prop('src')).toEqual(
'http://res.cloudinary.com/demo/image/upload/c_scale,w_100/sample'
)
})
);
});

it('should update url on context change', function () {
const tag = mount(
<CloudinaryContext cloudName='demo'>
<Image publicId='sample' />
</CloudinaryContext>
)
);

expect(tag.find('img').prop('src')).toEqual(
'http://res.cloudinary.com/demo/image/upload/sample'
)
tag.setProps({ cloudName: 'demo2' }).update()
);
tag.setProps({ cloudName: 'demo2' }).update();
expect(tag.find('img').prop('src')).toEqual(
'http://res.cloudinary.com/demo2/image/upload/sample'
)
})
})
);
});
});
Loading