Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit f8165aa

Browse filesBrowse files
committed
Testing provide/inject through Testing component that provides values section
1 parent 41eeb5b commit f8165aa
Copy full SHA for f8165aa

File tree

1 file changed

+8
-8
lines changed
Filter options

1 file changed

+8
-8
lines changed

‎README.md

Copy file name to clipboardExpand all lines: README.md
+8-8
Original file line numberDiff line numberDiff line change
@@ -1711,7 +1711,7 @@ This approach requires VUE and router internals knowledge, keep in mind that it
17111711

17121712
## Testing provide/inject
17131713

1714-
_NOTE_: Before you even start developing your components using `provide`/`inject`, please consider if you really need them. It is mentioned in [the official documentation](https://vuejs.org/v2/api/#provide-inject) that this feature is suitable only for certain scenarios. Also consider that both, `provide` and `inject` and not [reactive](https://vuejs.org/v2/guide/reactivity.html#ad), which only introduces limitation to the development that you have to keep in mind. Using "traditional" [one-way data flow](https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow) between components may be more appropriate for your use case.
1714+
_NOTE_: Before you even start developing your component using `provide`/`inject`, consider to spend a while thinking if you really need them. The [official documentation](https://vuejs.org/v2/api/#provide-inject) mention that this feature is suitable only for certain scenarios. Also consider that both, `provide` and `inject` and not [reactive](https://vuejs.org/v2/guide/reactivity.html#ad), which only introduces limitation to the development that you have to keep in mind. Using "traditional" [one-way data flow](https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow) between components may be more appropriate for your use case.
17151715

17161716
For the testing purposes, let's have three components which communicate using `provide`/`inject`:
17171717

@@ -1724,7 +1724,7 @@ For the testing purposes, let's have three components which communicate using `p
17241724
</my-checkbox-list>
17251725
```
17261726

1727-
... where `my-checkbox-list` is a wrapper providing an API for `my-checkbox`es to tell the list they are checked or not, and the `my-checkbox-list-status` is a component for displaying nice message to the user how many checkboxes have already been checked, e.g. `"2 out of 3 item(s) have been selected."`
1727+
Where `my-checkbox-list` is a wrapper providing an API for `my-checkbox`es to tell the list if they are checked or not, and the `my-checkbox-list-status` is a component for displaying a message of how many checkboxes have already been checked, e.g. `"2 out of 3 item(s) have been selected"`.
17281728

17291729
### Testing component that injects values
17301730

@@ -1733,15 +1733,15 @@ For a component that only injects values we can use [provide option](https://vue
17331733
```js
17341734
beforeEach(function () {
17351735
this.mountMyCheckboxListStatus = function (myCheckboxListMock, options) {
1736-
let provide = { "checkboxList": myCheckboxListMock };
1737-
let wrapper = mount(MyCheckboxListStatus, { provide, ...options });
1736+
const provide = { "checkboxList": myCheckboxListMock };
1737+
const wrapper = mount(MyCheckboxListStatus, { provide, ...options });
17381738
return new MyCheckboxListStatusPageObj(wrapper);
17391739
};
17401740
});
17411741

17421742
it('should render the message', function () {
1743-
let myCheckboxListMock = { numberOfItems: 6, numberOfSelectedItems: 3 };
1744-
let myCheckboxListStatus = this.mountCheckboxListStatus(myCheckboxListMock);
1743+
const myCheckboxListMock = { numberOfItems: 6, numberOfSelectedItems: 3 };
1744+
const myCheckboxListStatus = this.mountCheckboxListStatus(myCheckboxListMock);
17451745
expect(myCheckboxListStatus.message).to.equal("3 out of 6 item(s) have been selected");
17461746
});
17471747
```
@@ -1754,12 +1754,12 @@ For a component that provides values is better to use integration tests and test
17541754
beforeEach(function () {
17551755
this.mountMyCheckboxList = function (template, options) {
17561756
// we are going to mount a string template, thus we need to convert it into something that Vue can understand:
1757-
let Wrapper = Vue.extend({
1757+
const Wrapper = Vue.extend({
17581758
...compileToFunctions(template),
17591759
components: { MyCheckboxList, MyCheckbox, MyCheckboxListStatus }
17601760
});
17611761

1762-
let wrapper = mount(Wrapper, { ...options });
1762+
const wrapper = mount(Wrapper, { ...options });
17631763
return new MyCheckboxListPageObj(wrapper);
17641764
};
17651765
});

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.