From 525da7a30321bb8f04f744f5265f42fe429e476a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= Date: Sat, 9 Mar 2019 01:58:00 +0100 Subject: [PATCH] Without `vue-portal` all the oddities vanish CC @Tirokk @mattwr18 @appinteractive Major breakthrough: If I remove `vue-portal` entirely from the styleguide, problem solved. Not only that we can remove the TODOs from the tests. Even wrappers of subcomponents get updated when I interact with the root component. What a bliss :joy: Example code: ```js let button = wrapper.find('div div div button') expect(button.attributes()).toEqual({disabled: 'disabled'}) wrapper.doSomeAction() expect(button.attributes()).toEqual({}) ``` --- components/ReportModal.spec.js | 27 ++++----------------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/components/ReportModal.spec.js b/components/ReportModal.spec.js index a23df3baa..a64424ea8 100644 --- a/components/ReportModal.spec.js +++ b/components/ReportModal.spec.js @@ -50,12 +50,6 @@ describe('ReportModal.vue', () => { return mount(ReportModal, { store, mocks, localVue }) } - beforeEach(() => { - // TODO find out why on earth do we have to call Wrapper() at least twice? - // TODO this is a nasty side effect and we have non-atomic tests here - Wrapper() - }) - it('renders', () => { expect(Wrapper().is('div')).toBe(true) }) @@ -71,16 +65,6 @@ describe('ReportModal.vue', () => { wrapper = Wrapper() }) - describe('by default', () => { - it('buttons enabled', () => { - const expected = { disabled: 'disabled' } - const cancelButton = wrapper.findAll('footer button').at(0) - const confirmButton = wrapper.findAll('footer button').at(1) - expect(cancelButton.attributes().disabled).toBeUndefined() - expect(confirmButton.attributes().disabled).toBeUndefined() - }) - }) - describe('click confirm button', () => { const clickAction = () => { const confirmButton = wrapper.find('.ds-button-danger') @@ -96,14 +80,11 @@ describe('ReportModal.vue', () => { it('disables buttons', () => { const expected = { disabled: 'disabled' } - // TODO: `wrapper.findAll` behaves in a very odd way - // if I call find or findAll first to check the initial attributes - // the attributes won't change anymore. Seems to be a caching - // problem here. I made a workaround by checking the inital - // in a separate test case above. + let cancelButton = wrapper.findAll('footer button').at(0) + let confirmButton = wrapper.findAll('footer button').at(1) + expect(cancelButton.attributes().disabled).toBeUndefined() + expect(confirmButton.attributes().disabled).toBeUndefined() clickAction() - const cancelButton = wrapper.findAll('footer button').at(0) - const confirmButton = wrapper.findAll('footer button').at(1) expect(cancelButton.attributes()).toEqual( expect.objectContaining(expected) )