Skip to content

Commit f8165aa

Browse files
committed
Testing provide/inject through Testing component that provides values section
1 parent 41eeb5b commit f8165aa

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

README.md

Lines changed: 8 additions & 8 deletions
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)