{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue-test-utils/issues/611","repository_url":"https://api.github.com/repos/vuejs/vue-test-utils","labels_url":"https://api.github.com/repos/vuejs/vue-test-utils/issues/611/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue-test-utils/issues/611/comments","events_url":"https://api.github.com/repos/vuejs/vue-test-utils/issues/611/events","html_url":"https://github.com/vuejs/vue-test-utils/issues/611","id":323159580,"number":611,"title":"Add ability to add new methods to Wrapper","user":{"login":"ascii-soup","id":627657,"avatar_url":"https://avatars2.githubusercontent.com/u/627657?v=4","gravatar_id":"","url":"https://api.github.com/users/ascii-soup","html_url":"https://github.com/ascii-soup","followers_url":"https://api.github.com/users/ascii-soup/followers","following_url":"https://api.github.com/users/ascii-soup/following{/other_user}","gists_url":"https://api.github.com/users/ascii-soup/gists{/gist_id}","starred_url":"https://api.github.com/users/ascii-soup/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ascii-soup/subscriptions","organizations_url":"https://api.github.com/users/ascii-soup/orgs","repos_url":"https://api.github.com/users/ascii-soup/repos","events_url":"https://api.github.com/users/ascii-soup/events{/privacy}","received_events_url":"https://api.github.com/users/ascii-soup/received_events","type":"User","site_admin":false},"labels":[{"id":734249215,"url":"https://api.github.com/repos/vuejs/vue-test-utils/labels/feature%20request","name":"feature request","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-05-15T10:32:53Z","updated_at":"2018-05-17T00:05:36Z","closed_at":null,"author_association":"NONE","body":"### What problem does this feature solve?\r\nI think it would be nice to be able to extend the `Wrapper` class with new methods (helper methods, effectively) to increase readability / reduce test-specific boilerplate.\r\n\r\nFor example, using Jest, I've added some new matchers to keep things clean whilst testing components. Contrived example below:\r\n\r\n\r\n```js\r\ntest('renders a table cell', () => {\r\n    const component = shallow(MyComponent);\r\n    expect(component).toHaveElement('td');\r\n});\r\n```\r\n\r\nIt would be nice to be able to add similar helper methods to the `Wrapper` object so that tests could be written at a slightly higher level of abstraction. See a before and after below:\r\n\r\n```js\r\n// Before\r\ntest('hides icon on hover', () => {\r\n    const component = shallow(MyComponent);\r\n    component.trigger('mouseover');\r\n    expect(component.find('i').isVisible()).toBe(false);\r\n});\r\n\r\n// After\r\ntest('hides icon on hover', () => {\r\n    const component = shallow(MyComponent);\r\n    expect(component.hover().find('i').isVisible()).toBe(false);\r\n});\r\n\r\n// With both extended Wrapper and custom Jest matcher\r\ntest('hides icon on hover', () => {\r\n    const component = shallow(MyComponent);\r\n    expect(component.hover()).not.toHaveVisible('i');\r\n});\r\n```\r\n\r\nAlthough the above examples are somewhat contrived for the sake of example, I think they lead to test code that more clearly documents the component under test.\r\n\r\n### What does the proposed API look like?\r\nAs for an example of how this might look in terms of the API, I'm not too sure; Wrapper is not exposed for reasons I think I agree with (from other issues on the topic). An exported function that provides this ability might work? I'm not much of a JS expert so please forgive me if I don't understand why the following example is unfeasible.\r\n\r\n```js\r\nimport { extend_wrapper } from \"@vue/test-utils\";\r\n\r\nextend_wrapper({\r\n    hover() {\r\n        return this.trigger('mouseover');\r\n    }\r\n});\r\n```\r\n\r\nI'm interested to hear thoughts on this, thanks for taking the time to read.\r\n\r\n<!-- generated by vue-issues. DO NOT REMOVE -->"},"comment":{"url":"https://api.github.com/repos/vuejs/vue-test-utils/issues/comments/389703305","html_url":"https://github.com/vuejs/vue-test-utils/issues/611#issuecomment-389703305","issue_url":"https://api.github.com/repos/vuejs/vue-test-utils/issues/611","id":389703305,"user":{"login":"38elements","id":2399132,"avatar_url":"https://avatars3.githubusercontent.com/u/2399132?v=4","gravatar_id":"","url":"https://api.github.com/users/38elements","html_url":"https://github.com/38elements","followers_url":"https://api.github.com/users/38elements/followers","following_url":"https://api.github.com/users/38elements/following{/other_user}","gists_url":"https://api.github.com/users/38elements/gists{/gist_id}","starred_url":"https://api.github.com/users/38elements/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/38elements/subscriptions","organizations_url":"https://api.github.com/users/38elements/orgs","repos_url":"https://api.github.com/users/38elements/repos","events_url":"https://api.github.com/users/38elements/events{/privacy}","received_events_url":"https://api.github.com/users/38elements/received_events","type":"User","site_admin":false},"created_at":"2018-05-17T00:05:36Z","updated_at":"2018-05-17T00:05:36Z","author_association":"CONTRIBUTOR","body":"I read the example of usage which adds an alias of `wrapper.trigger('mouseover')`.\r\nI do not think this feature is necessary.\r\nBut, I think if many people need to add some methods to `Wrapper`, it is necessary.\r\nI think that exporting Wrapper class  as below is better than this approach, since it is simple.\r\n\r\nhttps://github.com/vuejs/vue-test-utils/pull/328#issuecomment-358379864"}}
{"actor":{"display_login":"38elements"}}