Use Vue Test Utils to manage options like scoped slots and option normalizaiton #365

JessicaSachs · 2020-07-18T03:57:01Z

The typings here are really bad, but this should solve scopedSlots, slots, etc. We also get stubbing for free :-)

Likely we can also remove the plugin installation code.

This still needs a scopedSlot test to exercise that it's working.

closes #364

slots
scopedSlots

…malization

src/index.ts

cypress/component/basic/hello/Hello.vue

src/index.ts

…n components. It was being covered up by rendering the component as the Root Vue Component

JessicaSachs · 2020-07-18T06:23:14Z

A lot of issues covered up by some silent error handlers: unregistered components + mounting options using "data" as object literals instead of functions were the big ones.

I added localVue instead of the global Vue so that test state for plugins is cleared between specs. Some of the specs were broken and throwing console errors, but it wasn't apparent until fixing some of the underlying issues.

We have a lot of work to do regarding typing, but at least the API will look a bit more like Native Vue 😸

JessicaSachs · 2020-07-18T06:28:05Z

cypress/component/basic/components/spec.js

  }
  beforeEach(mountCallback({ template, data }, { extensions }))

-  it('registers global component', () => {


This is not a feature we should offer because it pollutes Vue state

src/index.ts

…unit-test into jess/root-vue-node

bahmutov · 2020-07-18T12:54:13Z

The failing test fails locally with command

npx cypress run --spec cypress/component/basic/mixins/spec.js

  Mixins
    Global mixin
      1) calls mixin "created" method
    local to test
      2) is created


  0 passing (5s)
  2 failing

  1) Mixins
       Global mixin
         calls mixin "created" method:
     AssertionError: expected stub to have been called exactly once, but it was called twice

    The following calls were made:

    stub() at getRet (http://localhost:57166/__cypress/runner/cypress_runner.js:153773:20)
    stub() at getRet (http://localhost:57166/__cypress/runner/cypress_runner.js:153773:20)
      at Context.eval (http://localhost:57166/__cypress/tests?p=cypress/component/basic/mixins/spec.js:454:43)

  2) Mixins
       local to test
         is created:
     AssertionError: Timed out retrying: expected created to have been called exactly once, but it was called twice

    The following calls were made:

    created() at VueComponent.created (http://localhost:57166/__cypress/runner/cypress_runner.js:139372:26)
    created() at VueComponent.created (http://localhost:57166/__cypress/runner/cypress_runner.js:139372:26)
      at Context.eval (http://localhost:57166/__cypress/tests?p=cypress/component/basic/mixins/spec.js:478:26)

bahmutov · 2020-07-18T13:20:46Z

cypress/component/basic/options-spec.js

-  const component = { template, data }
+  const component = {
+    template,
+    data() {


so during the test, what if we check the .data property and if it is an object, automatically make it into a function? Otherwise, this is a breaking change.

bahmutov

It is all good, I am worried about data: {} to data: () => {} change, I think we could make it convenient and transform it on the fly during mount

JessicaSachs · 2020-07-19T05:08:16Z

I know this is a breaking change, but it was a bug that was flying under the radar because we weren't failing the tests due to Vue runtime errors. If you try to mount a component with data: {} it throws an error in the Vue runtime... so you shouldn't pass tests with data: {}.

https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

Testing a Root Vue instance is separate from testing a Vue Component.

I don't want to add it as a convenience because it has a very specific meaning for Vue components.

JessicaSachs · 2020-07-19T05:08:33Z

Thank you for getting this passing :-)

src/index.ts

JessicaSachs · 2020-07-19T22:51:33Z

Weird, it seems that there's issues with the yarn registry.

bahmutov · 2020-07-20T03:23:10Z

🎉 This PR is included in version 3.4.4 🎉

The release is available on:

npm package (@latest dist-tag)
GitHub release

Your semantic-release bot 📦🚀

…malizaiton (cypress-io/cypress-vue-unit-test#365) * Use Vue Test Utils to manage options like scoped slots and option normalization * using createLocalVue to ensure global Vue namespace doesn't bleed over * fix: spec was demonstrating using data as an object, which is a bug in components. It was being covered up by rendering the component as the Root Vue Component * chore: cleaning up spec * fix: data should be a function, i18n plugin was throwing error * fix: plugins not passing options through. i18n spec artifically slow * Update src/index.ts * fix: ...localVue => localVue * update mixins test * enable slot AppInput spec * add full slots and scopedSlots test * Update src/index.ts Co-authored-by: Gleb Bahmutov <gleb.bahmutov@gmail.com>

Use Vue Test Utils to manage options like scoped slots and option nor…

147d74d

…malization

JessicaSachs commented Jul 18, 2020

View reviewed changes

src/index.ts Show resolved Hide resolved

JessicaSachs commented Jul 18, 2020

View reviewed changes

src/index.ts Show resolved Hide resolved

JessicaSachs commented Jul 18, 2020

View reviewed changes

src/index.ts Outdated Show resolved Hide resolved

JessicaSachs commented Jul 18, 2020

View reviewed changes

cypress/component/basic/hello/Hello.vue Show resolved Hide resolved

JessicaSachs commented Jul 18, 2020

View reviewed changes

src/index.ts Show resolved Hide resolved

JessicaSachs assigned bahmutov Jul 18, 2020

JessicaSachs added 5 commits July 18, 2020 00:53

using createLocalVue to ensure global Vue namespace doesn't bleed over

ca107c3

fix: spec was demonstrating using data as an object, which is a bug i…

c3e84ed

…n components. It was being covered up by rendering the component as the Root Vue Component

chore: cleaning up spec

8cb069d

fix: data should be a function, i18n plugin was throwing error

87ea052

fix: plugins not passing options through. i18n spec artifically slow

f1115e8

JessicaSachs mentioned this pull request Jul 18, 2020

WIP: create wrapper component with vue test-utils #235

Closed

JessicaSachs commented Jul 18, 2020

View reviewed changes

src/index.ts Outdated Show resolved Hide resolved

JessicaSachs added 3 commits July 18, 2020 02:28

Update src/index.ts

eb40fc4

fix: ...localVue => localVue

85b5175

Merge branch 'jess/root-vue-node' of github.com:bahmutov/cypress-vue-…

ca2991b

…unit-test into jess/root-vue-node

bahmutov added 3 commits July 18, 2020 09:01

update mixins test

e96281c

enable slot AppInput spec

73f5ee7

add full slots and scopedSlots test

3c919ca

bahmutov reviewed Jul 18, 2020

View reviewed changes

bahmutov approved these changes Jul 18, 2020

View reviewed changes

JessicaSachs commented Jul 19, 2020

View reviewed changes

src/index.ts Outdated Show resolved Hide resolved

JessicaSachs commented Jul 19, 2020

View reviewed changes

src/index.ts Outdated Show resolved Hide resolved

Update src/index.ts

b93c7c9

JessicaSachs merged commit abb95e0 into master Jul 20, 2020

bahmutov added the released label Jul 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Use Vue Test Utils to manage options like scoped slots and option normalizaiton #365

Use Vue Test Utils to manage options like scoped slots and option normalizaiton #365

Uh oh!

JessicaSachs commented Jul 18, 2020 •

edited by bahmutov

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JessicaSachs commented Jul 18, 2020 •

edited

Loading

Uh oh!

JessicaSachs Jul 18, 2020

Uh oh!

Uh oh!

bahmutov commented Jul 18, 2020

Uh oh!

bahmutov Jul 18, 2020

Uh oh!

bahmutov left a comment

Uh oh!

JessicaSachs commented Jul 19, 2020 •

edited

Loading

Uh oh!

JessicaSachs commented Jul 19, 2020

Uh oh!

Uh oh!

Uh oh!

JessicaSachs commented Jul 19, 2020

Uh oh!

bahmutov commented Jul 20, 2020

Uh oh!

Uh oh!

Use Vue Test Utils to manage options like scoped slots and option normalizaiton #365

Use Vue Test Utils to manage options like scoped slots and option normalizaiton #365

Uh oh!

Conversation

JessicaSachs commented Jul 18, 2020 • edited by bahmutov Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JessicaSachs commented Jul 18, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JessicaSachs Jul 18, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bahmutov commented Jul 18, 2020

Uh oh!

bahmutov Jul 18, 2020

Choose a reason for hiding this comment

Uh oh!

bahmutov left a comment

Choose a reason for hiding this comment

Uh oh!

JessicaSachs commented Jul 19, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JessicaSachs commented Jul 19, 2020

Uh oh!

Uh oh!

Uh oh!

JessicaSachs commented Jul 19, 2020

Uh oh!

bahmutov commented Jul 20, 2020

Uh oh!

Uh oh!

JessicaSachs commented Jul 18, 2020 •

edited by bahmutov

Loading

JessicaSachs commented Jul 18, 2020 •

edited

Loading

JessicaSachs commented Jul 19, 2020 •

edited

Loading