-
Notifications
You must be signed in to change notification settings - Fork 90
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
feat: Add video tag support for context #87
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -253,19 +253,13 @@ | |
} | ||
} | ||
|
||
.image-link { | ||
.image-link, .video-link { | ||
display: inline-block; | ||
font-size: 11px; | ||
padding: 0 1em 1em 1em; | ||
} | ||
|
||
.image { | ||
display: block; | ||
max-width: 100%; | ||
height: auto; | ||
} | ||
|
||
.video { | ||
.image, .video { | ||
display: block; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same as img CSS. Makes the video scale responsively like the image tag does. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This should be combined with the |
||
max-width: 100%; | ||
height: auto; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -18,6 +18,8 @@ describe('<TestContext />', () => { | |
ctxItems: wrapper.find('.test-context-item'), | ||
img: wrapper.find('.test-image'), | ||
imgLink: wrapper.find('.test-image-link'), | ||
video: wrapper.find('.test-video'), | ||
videoLink: wrapper.find('.test-video-link'), | ||
link: wrapper.find('.test-text-link'), | ||
snippet: wrapper.find(CodeSnippet) | ||
}; | ||
|
@@ -134,6 +136,45 @@ describe('<TestContext />', () => { | |
expect(snippet).to.have.lengthOf(0); | ||
expect(img).to.have.lengthOf(1); | ||
}); | ||
|
||
it('renders local video', () => { | ||
const context = '/testvideo.mp4'; | ||
const { wrapper, snippet, video } = getInstance({ | ||
context: JSON.stringify(context), | ||
className: 'test' | ||
}); | ||
expect(wrapper).to.have.className('test'); | ||
expect(snippet).to.have.lengthOf(0); | ||
expect(wrapper).to.have.descendants('video'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I did expect(video).to.have.lengthOf(1);
// failure: Expected 0 to be 1
expect(wrapper).to.have.descendants('video');
// failure: expected <TestContext /> to have descendants 'video' (and then dumps the HTML for easy comparison) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I like this change but it looks like we could keep the length check using: expect(wrapper).to.have.exactly(1).descendants('video'); There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I like it |
||
expect(video).to.have.attr('src', '/testvideo.mp4'); | ||
}); | ||
|
||
it('renders video url with protocol', () => { | ||
const context = 'http://test.url.com/testvideo.mp4'; | ||
const { wrapper, snippet, videoLink } = getInstance({ | ||
context: JSON.stringify(context), | ||
className: 'test' | ||
}); | ||
expect(wrapper).to.have.className('test'); | ||
expect(snippet).to.have.lengthOf(0); | ||
expect(wrapper).to.have.descendants('video'); | ||
expect(wrapper).to.have.descendants('a.test-video-link'); | ||
expect(videoLink).to.have.attr('href', 'http://test.url.com/testvideo.mp4'); | ||
videoLink.simulate('click', { stopPropagation: noop }); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What's the reason for the simulated click here? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't know, it was part of the img one I copied. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Haha. Ok fair enough. I don't remember why I added that. |
||
}); | ||
|
||
it('renders image url without protocol', () => { | ||
const context = 'test.url.com/testvideo.mp4'; | ||
const { wrapper, snippet, videoLink } = getInstance({ | ||
context: JSON.stringify(context), | ||
className: 'test' | ||
}); | ||
expect(wrapper).to.have.className('test'); | ||
expect(snippet).to.have.lengthOf(0); | ||
expect(wrapper).to.have.descendants('video'); | ||
expect(wrapper).to.have.descendants('a.test-video-link'); | ||
expect(videoLink).to.have.attr('href', 'http://test.url.com/testvideo.mp4'); | ||
}); | ||
}); | ||
|
||
describe('when context is an object', () => { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The accessibility checker flags video tags without captions even though there is caption source file. I didn't know what would be better - disabling the lint rule or fooling it. Either way there are no captions.