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

Improve passing text to slots #274

Merged
merged 14 commits into from
Dec 19, 2017
Merged

Improve passing text to slots #274

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e397ef2
Improve passing text to slots
38elements Dec 17, 2017
76f14f6
Add test
38elements Dec 17, 2017
99c0f7a
Add document
38elements Dec 17, 2017
dec437c
Add throw error
38elements Dec 17, 2017
912fbe1
Add link
38elements Dec 17, 2017
3bd9da6
Skip
38elements Dec 17, 2017
3c3abf8
Lint
38elements Dec 17, 2017
c3750a8
Fix document
38elements Dec 17, 2017
66ecd96
Fix link
38elements Dec 17, 2017
3b99090
Fix update()
38elements Dec 18, 2017
a07c622
Improve
38elements Dec 18, 2017
192c5ac
Fix error message
38elements Dec 18, 2017
2302443
Update test
38elements Dec 18, 2017
d2a5d65
Fix error message
38elements Dec 19, 2017
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
4 changes: 3 additions & 1 deletion docs/en/api/options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,9 @@ expect(wrapper.find('div')).toBe(true)
#### Passing text

You can pass text to `slots`.
There is a limitation to this.
There is two limitations to this.

This does not support PhantomJS.

The text works below.

Expand Down
3 changes: 3 additions & 0 deletions src/lib/add-slots.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ function addSlotToVm (vm: Component, slotName: string, slotValue: Component | st
if (!compileToFunctions) {
throwError('vueTemplateCompiler is undefined, you must pass components explicitly if vue-template-compiler is undefined')
}
if (window.navigator.userAgent.match(/PhantomJS/i)) {
throwError('option.slots does not support PhantomJS. Please use Puppeteer')
}
const domParser = new window.DOMParser()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DOMParser isn't supported in phantomJs, so we need an alternative that will work in phantom

Copy link
Contributor Author

@38elements 38elements Dec 17, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for reviewing.
Is there a choice not to support PhantomJS ?
IMHO, I think it is better to use Puppeteer.
It is better to introduce Puppeteer at document.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A lot of users still use phantom. We could throw an error, or a warning that phantom doesn't support markup in slots, and handle it gracefully

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for reply.
I will look for other ways.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you change the error message to—option.slots does not support strings PhantomJS. Please use Puppeteer, or pass a component

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am sorry.
I did not notice your comment.
I fixed the error message.

const document = domParser.parseFromString(slotValue, 'text/html')
const _slotValue = slotValue.trim()
Expand Down
21 changes: 21 additions & 0 deletions test/unit/specs/mount/options/slots.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,18 @@ import Component from '~resources/components/component.vue'
import ComponentWithSlots from '~resources/components/component-with-slots.vue'

describe('mount.slots', () => {
let _window

beforeEach(() => {
_window = window
})

afterEach(() => {
/* eslint-disable */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unless I'm mistakenm you can just add // eslint-disable-line to the line, instead of 2 comments. Even better, you can add //eslint-disable-line name-of-rule to only disable eslint for the rule which is failing

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for pointing out.
I fixed it.

window = _window
/* eslint-enable */
})

it('mounts component with default slot if passed component in slot object', () => {
const wrapper = mount(ComponentWithSlots, { slots: { default: Component }})
expect(wrapper.contains(Component)).to.equal(true)
Expand All @@ -25,6 +37,15 @@ describe('mount.slots', () => {
expect(wrapper.contains('span')).to.equal(true)
})

it('throws error if the UserAgent is PhantomJS when passed string is in slot object', () => {
/* eslint-disable */
window = { navigator: { userAgent:'PhantomJS' } }
/* eslint-enable */
const message = '[vue-test-utils]: option.slots does not support PhantomJS. Please use Puppeteer'
const fn = () => mount(ComponentWithSlots, { slots: { default: 'foo' }})
expect(fn).to.throw().with.property('message', message)
})

it('mounts component with default slot if passed string in slot object', () => {
const wrapper1 = mount(ComponentWithSlots, { slots: { default: 'foo<span>123</span>{{ foo }}' }})
expect(wrapper1.find('main').html()).to.equal('<main>foo<span>123</span>bar</main>')
Expand Down