profile
viewpoint
Adrià Fontcuberta afontcu @holaluz Caldes de Montbui, Catalunya https://afontcu.dev Frontend development: JS, CSS, UX, lean software development, agile, and everything in between.

afontcu/awesome-learning 104

A curated list of awesome learning material

afontcu/cool-ux-tools 8

Cool UX Tools is a curated list of (obviously) cool resources and tools for developers, UX researchers, designers and project managers.

afontcu/finger-frenzy 6

How fast can you type the alphabet?

afontcu/aos2018 2

Website for the Agile Open Spain 2018

afontcu/afontcu-npm 1

npx afontcu :)

afontcu/all-contributors 0

✨ Recognize all contributors, not just the ones who push code ✨

afontcu/awesome 0

😎 Awesome lists about all kinds of interesting topics

afontcu/awesome-vue 0

🎉 A curated list of awesome things related to Vue.js

issue commentvuejs/vue-test-utils

Default props are set as attributes when mounting a stubbed component

I think stubs and shallowMount should stub everything, so the snapshot would show just be helloworld-stub

I'm in favor of this 👍 – I would not show any prop/attribute from the stubbed out component, as the stub should be a simple placeholder to speed up the test or avoid a more complex test setup.

horyd

comment created time in 11 hours

pull request commenttesting-library/vue-testing-library

add simple directive and test

Fixed in #120. Thanks for this, though! 😃

chiptus

comment created time in 11 hours

push eventtesting-library/vue-testing-library

Eduard

commit sha cd4deb8a40b857613595afae56a9e127b997d9e0

chore: Add directive test example (#120) * Add directive folder to test path ignore patterns to jest config * Implement v-uppercase directive * Implement Directive example component * Implement directive test

view details

push time in 11 hours

PR merged testing-library/vue-testing-library

Directive test example

This PR aims to add an easy-to-understand Vuejs directive example and how to test it.

fixes #108

+42 -0

0 comment

4 changed files

edufarre

pr closed time in 11 hours

issue closedtesting-library/vue-testing-library

add example for using directives

as per https://spectrum.chat/testing-library/help-vue/mocking-directives~1167b8e5-a303-494e-a0c5-593d75e8b792 example is needed to test a component that is using a directive

closed time in 11 hours

chiptus

issue commentvuejs/vue-test-utils

Plaint text in default slot is lost with wrapper.html()

Hum, I might be missing something here, but I couldn't seem to reproduce the issue you are facing – ran both your tests in local and got them passing instantly (beta.31):

image

Tried with a SFC too (just in case), and they still pass.

TheJaredWilcurt

comment created time in a day

issue commentvuejs/vue-test-utils

Plaint text in default slot is not captured in a mounted snapshot

Hi @TheJaredWilcurt! Just check and tests not relying on snapshot serializer are properly working. Is it possible that this is related to the serialization of the component in Jest snapshots rather than an issue in VTU?

TheJaredWilcurt

comment created time in a day

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha 7aae1f739156e75a98dda6a570f684e600a1b318

Add "A Small Increment" (#48) * Initial draft * Fix small spelling issues * Try to improve initial paragraph * Add links * Add missing if * Last details * Last details – now is true * no comments

view details

push time in a day

delete branch afontcu/afontcu.dev

delete branch : a-small-increment

delete time in a day

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha 896a1757c2e66bb27d7957c616c5ce1621d0e5e3

no comments

view details

push time in 4 days

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha 0450117ec74794ef5bf37977fd1173b81e9358b8

Last details – now is true

view details

push time in 4 days

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha fdf8731a31357c5ee53b24768e46bfa498ae3a37

Last details – now is true

view details

push time in 4 days

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha 544451622fc5e273df53a9caa5942740088a5180

Last details

view details

push time in 4 days

pull request commentvuejs/vue-test-utils

Respect provide from parentComponent

Hi @xanf! any chance you could take a look at this? :)

xanf

comment created time in 4 days

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha aff870d34b3b3dc6d133661ae3089470f36e4fca

Add missing if

view details

push time in 5 days

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 2a375396a274d0c20ca1f747b55e2178f8244208

Update README.md

view details

push time in 5 days

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 897a0f4d2eb08b4397fcfd5d5394279966ba7d3e

Update README.md

view details

push time in 5 days

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 1f1438521059ea714f47954d642620456dff7daf

Update README.md

view details

push time in 6 days

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 2c9a029133861e0a67e493ccfc5c7c2e96e5c29a

Update README.md

view details

push time in 6 days

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha 1841a74a71db59e88b119b62c361cca5effe4381

Add links

view details

push time in 6 days

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha 7895119bfc931378da79ce917bf2e86a6f0420f2

Try to improve initial paragraph

view details

push time in 6 days

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha d43b7355ff3e3dafe7d5d44579a75b42dd1d9412

Fix small spelling issues

view details

push time in 6 days

PR opened afontcu/afontcu.dev

Add "A Small Increment"
+66 -0

0 comment

1 changed file

pr created time in 6 days

create barnchafontcu/afontcu.dev

branch : a-small-increment

created branch time in 6 days

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 368d266f7217dd7d4dbb633cbe8335c5ec1815d4

Update README.md

view details

push time in 8 days

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 51903d4cbf505cf549c935b958183dc50aabeb19

Update README.md

view details

push time in 10 days

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha fad9a31ceb22f3f49232a751e31f3504fc29898a

Update README.md

view details

push time in 13 days

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha dd5a6b1b7028f8e0028e6a31c9ae8b4a3c7a7821

Add "All power to the Teams" (#47) * Add initial draft * Improve content * Add additional thoughts * Fix wording

view details

push time in 13 days

delete branch afontcu/afontcu.dev

delete branch : power-teams

delete time in 13 days

PR merged afontcu/afontcu.dev

Add "All power to the Teams"
+48 -0

0 comment

1 changed file

afontcu

pr closed time in 13 days

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha 6efd84eae185cebcfa1a591a85f708e49bdabcfd

Fix wording

view details

push time in 15 days

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha fe1f698aff7e9269c449e0b2cbd6f01b1590bffd

Add additional thoughts

view details

push time in 16 days

startedlydiahallie/javascript-questions

started time in 16 days

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 4b1c581016dcb98827c3ab1dda7c343d8c478e04

Update README.md

view details

push time in 16 days

PR opened afontcu/afontcu.dev

Add "All power to the Teams"
+46 -0

0 comment

1 changed file

pr created time in 17 days

push eventafontcu/afontcu.dev

Adrià Fontcuberta

commit sha 58e531f0d84edddd7df430dc91df2c2396fbd52d

Improve content

view details

push time in 17 days

push eventafontcu/afontcu-npm

Adrià Fontcuberta

commit sha 31cbf4fa324bc72a7d5b0f1bb725f14f34499213

1.2.1

view details

push time in 17 days

push eventafontcu/afontcu-npm

Adrià Fontcuberta

commit sha ef676ec5140aa2d9618f16e8903bb36407c2922d

1.2.0

view details

Adrià Fontcuberta

commit sha 583217eafdf54af65b8b1dcc1628818ebd398d96

Im a software engineer

view details

push time in 17 days

create barnchafontcu/afontcu.dev

branch : power-teams

created branch time in 18 days

issue closedvuejs/vue-test-utils

Once again 404's on documentation site

Version

1.0.0-beta.31

Reproduction link

https://vue-test-utils.vuejs.org/guides/?

Steps to reproduce

When searching on the documentation site I get a bunch of 404's on scripts

What is expected?

No 404's

What is actually happening?

404's


URL: https://vue-test-utils.vuejs.org/guides/? Search param: 'classes'.

Will try to add a screenshot

<!-- generated by vue-issues. DO NOT REMOVE --> image

closed time in 18 days

TheDutchCoder

issue commentvuejs/vue-test-utils

Once again 404's on documentation site

We'll take that into account :) Thanks for the feedback!

TheDutchCoder

comment created time in 18 days

issue commentvuejs/vue-test-utils

Once again 404's on documentation site

Hi! 👋 Looks fine from here, have you tried with another browser / private network tab / removing the installed service workers?

TheDutchCoder

comment created time in 18 days

issue closedvuejs/vue-test-utils

Can not find inner child element by ID

Version

1.0.0-beta.31

Reproduction link

https://github.com/begueradj/test-vuetify-bug2

Steps to reproduce

Have a component with an icon which displays info text on hover:

<template>
  <v-container fill-height fluid>
    <v-card-text>
      <v-toolbar class="green--text">
        <v-app-bar-nav-icon v-if="tooltipText">
          <v-tooltip id="id1" bottom>
            <template id="id2" v-slot:activator="{ on }">
              <v-icon v-on="on" color="grey">
                help
              </v-icon>
            </template>
            <span id="id3">
              {{ tooltipText }}
            </span>
          </v-tooltip>
        </v-app-bar-nav-icon>
      </v-toolbar>
    </v-card-text>
  </v-container>
</template>

<script>
export default {
  props: {
    tooltipText: { type: String, default: '' }
  }
}
</script>

Try to access elements with id2 or id3, you will not be able to access them. But element with id1 is accessible:

import Vuetify from 'vuetify'
import { mount } from '@vue/test-utils'
import ComponentTwo from '@/components/ComponentTwo.vue'

const vuetify = new Vuetify()
let wrapper = null

beforeEach(() => {
  const app = document.createElement('div');
  app.setAttribute('data-app', true);
  document.body.append(app);
  wrapper = mount(ComponentTwo, {
    vuetify,
    propsData: {
      tooltipText: 'science'
    }
  })
})

afterEach(() => {
  wrapper.destroy()
})

describe('ComponentTwo.vue:', () => {
  it('1. Mounts properly', () => {
    expect(wrapper.isVueInstance()).toBe(true) // Ok
  })

  it('2. Access elements by ID', async () => {
    const icons = wrapper.findAll('.v-icon')
    expect(icons.length).toBe(1) // Ok

    const helpIcon = icons.at(0)
    expect(helpIcon.text()).toEqual('help') // Ok

    helpIcon.trigger('mouseenter')
    await wrapper.vm.$nextTick()

    const e1 = wrapper.find('#id2') // or id3
    console.log(e1) // undefined
  })
})

What is expected?

I expect to access element with id2 and id3

What is actually happening?

Vue test utils is able to find the child with id1, but not the children with id2 and id3

<!-- generated by vue-issues. DO NOT REMOVE -->

closed time in 18 days

begueradj

issue commentvuejs/vue-test-utils

Can not find inner child element by ID

you welcome!

I'll go ahead and close the issue for now, feel free to ask additional questions in the Forum in the Chat 😄

begueradj

comment created time in 18 days

issue commentvuejs/vue-test-utils

Can not find inner child element by ID

Hi! 👋

For #id2 I'm not sure you can set an id to a <template>. What about adding it to the <v-icon>? That appears to work.

For #id3, I guess you should use the requestAnimationFrame as stated here:

    requestAnimationFrame(() => {
      const e1 = wrapper.find("#id3");
      console.log(e1); // not undefined anymore
      done();
    });

If these ideas fix your test, feel free to close up the issue 😄

Hope it helps!

begueradj

comment created time in 18 days

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 6ddd275e2057827caacfeb4c24371c61956307b9

Update README.md

view details

push time in 18 days

push eventvuejs/vue-test-utils

Scott Bedard

commit sha 8dc9bab483ee6cae328b7a0482ba903390be7fb7

docs: Update old link for VeeValidate (#1425)

view details

push time in 20 days

PR merged vuejs/vue-test-utils

Update old link

<!-- Please make sure to read the Pull Request Guidelines: https://github.com/vuejs/vue-test-utils/blob/dev/.github/CONTRIBUTING.md#pull-request-guidelines -->

<!-- PULL REQUEST TEMPLATE --> <!-- (Update "[ ]" to "[x]" to check a box) -->

What kind of change does this PR introduce? (check at least one)

  • [ ] Bugfix
  • [ ] Feature
  • [ ] Code style update
  • [ ] Refactor
  • [ ] Build-related changes
  • [x] Other, please describe: Documentation

Does this PR introduce a breaking change? (check one)

  • [ ] Yes
  • [x] No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

  • [ ] It's submitted to the dev branch.
  • [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
  • [ ] All tests are passing: https://github.com/vuejs/vue-test-utils/blob/dev/.github/CONTRIBUTING.md#development-setup
  • [ ] New/updated tests are included

If adding a new feature, the PR's description includes:

  • [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:

+1 -1

0 comment

1 changed file

scottbedard

pr closed time in 20 days

Pull request review commenttalyssonoc/react-redux-ddd

[WIP] Vue version

+import { TAG } from '../mutationTypes';++const initialState = {+  tags: [],+  error: null,+  isLoading: false+};++const state = { ...initialState };++const mutations = {+  [TAG.LOAD_POPULAR_TAGS_REQUEST](state) {+    state.isLoading = true;+  },+  [TAG.LOAD_POPULAR_TAGS_SUCCESS](state, tags) {+    state.isLoading = false;+    state.tags = tags;+  },+  [TAG.LOAD_POPULAR_TAGS_ERROR](state, error) {+    state.isLoading = false;+    state.error = error;+  }+};++const actions = {+  [TAG.LOAD_POPULAR_TAGS]({ commit }) {+    commit(TAG.LOAD_POPULAR_TAGS_REQUEST);++    this.app.getPopularTags({

Hi! I just stumbled upon this great repo and this PR, and I'm heavily interested in creating a proof of concept of this based on Vue. Now, I have this question: did you manage to achieve autocompleition and type hinting after injecting dependencies using a Vuex plugin and accessing it with this.app?

Thank you for your time! The whole repo has been really enlightening to me. Appreciated.

talyssonoc

comment created time in 24 days

issue commentvuejs/vue-test-utils

Add ability to add new methods to Wrapper

Hi @begueradj! The issue was closed a year and a half ago, so it would be way better if you could open up a new one if you are facing an issue.

If you have a general question, it would be better if you could submit it to the forum or the official chat.

Thanks! :)

ascii-soup

comment created time in 24 days

issue commentvuejs/vue-test-utils

(docs)Update links to "get"

Hi! I'd go with https://vue-test-utils.vuejs.org/api/wrapper/get.html since the other "See also" link points to the .html file.

Thanks for this! :)

novellac

comment created time in 25 days

push eventafontcu/art-front-end-architecture

Adrià Fontcuberta

commit sha f077ae0373d757ce10ef5ee7bf35b5237aa18874

Some almost-raw ideas

view details

push time in a month

pull request commenttesting-library/dom-testing-library

feat(wait): wait will now also run your callback on DOM changes

+1 at setting a lower default value for the timeout – I've never found a case where a 4.5s timeout would make a (well-written and properly mocked) test pass while a lower one would make the same test fail.

I'm ok with 1s.

kentcdodds

comment created time in a month

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha b3149607eea24d4bdb882c093055cc3c7d86dd7e

Update README.md

view details

push time in a month

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 2f63ac44f1a6f61f3f322993cee3b4d189a52bdd

Update README.md

view details

push time in a month

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 1af55d1474543c633a425149b4bfef948f9a616e

Update README.md

view details

push time in a month

issue commentdobromir-hristov/vuecommunity

Testing learning resources

Thanks for the mention (and the kind words)! :)

Some links that might suit your needs:

Static vs Unit vs Integration vs E2E Testing for Frontend Apps code examples are written in React, but they are easy to follow(?) Testing API calls in Vue applications (disclaimer: I wrote this post). Front-end Testing and a tale of three users (disclaimer: I wrote this post). video version here.

dobromir-hristov

comment created time in a month

push eventtesting-library/testing-library-docs

Vincent Taverna

commit sha 8300a03c32c6413c1ac0f4b72b05247ad3fa3863

Fix copy typo to buy course buy -> by

view details

Adrià Fontcuberta

commit sha 39e6025a74e5c882ed8bde5d54445e42c3bc3ba3

Merge pull request #359 from vinnymac/patch-1 Fix copy typo to buy course

view details

push time in a month

pull request commenttesting-library/testing-library-docs

Fix copy typo to buy course

Nice catch! Thanks!

vinnymac

comment created time in a month

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha ed50b481c5f2fc082a7a72a42fb8fd7a7bb327a1

Update README.md

view details

push time in a month

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha da542897e625744611841adf3204b59a7860eae8

Update README.md

view details

push time in a month

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha d8b9438dd4d20550d7eff2e13c6afbcf3ffcd5b6

Update README.md

view details

push time in a month

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 18679d001c323f301507eb2f8127c15f4a09e3f4

Update README.md

view details

push time in a month

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha af11d436eb208318494d1b245a0673a3f2506dc9

Update README.md

view details

push time in a month

pull request commentvuejs/vue-test-utils

Adding get method to Wrapper

Should get also throw an error if more than 1 matching element is found?

tomasbjerre

comment created time in a month

Pull request review commentvuejs/vue-test-utils

Adding get method to Wrapper

+## get++Works just like [find](../find.md) but will throw an error if nothing matching+the given selector is found. You should use `find` when searching for an element+that may not exist. You should use this method when getting an element that should+exist and it will provide a nice error message if that is not the case.++```js

Should we add an example showing the "happy path" for get? I mean, just getting an existing element in addition to showcase that it would throw otherwise.

tomasbjerre

comment created time in a month

push eventtesting-library/testing-library-docs

Pablo R. Dinella

commit sha 4170598f9dc7634318ddd11b95f84084bdbaf290

Improve usage instructions for jest-dom People not familiar with jest matchers extensions might not know what to do after installing the lib, so this addition should avoid confusion.

view details

Pablo R. Dinella

commit sha fdda7c24959642ba8f19053a30a98ec9edd90eec

Remove code snippet that will likely get outdated from jest-dom section

view details

Adrià Fontcuberta

commit sha 37d597b9c82b92dac43afb93eb8d5965b7037a61

Merge pull request #355 from PabloDinella/patch-2 Improve usage instructions for jest-dom

view details

push time in a month

PR merged testing-library/testing-library-docs

Improve usage instructions for jest-dom

People not familiar with jest matchers extensions might not know what to do after installing the lib, so this addition should avoid confusion.

+3 -0

1 comment

1 changed file

PabloDinella

pr closed time in a month

create barnchafontcu/art-front-end-architecture

branch : master

created branch time in a month

created repositoryafontcu/art-front-end-architecture

created time in a month

issue commentvuejs/vue-test-utils

Proposal: Official way of targeting elements

My two cents:

For the time being, I agree with Lachlan's view on not providing "the" right way of doing things – we're currently in "damage control" mode with VTU, and the main goal now is to reach 1.0 in a timely manner. After that, I'm sure we can discuss what's the best (if any) way of doing certain things, and I'd like very much to reduce some duplication in VTU – we have several tools that serve the same purpose, and I believe this might be confusing.

removing functionality from find might negatively affect their integration, which is another reason I'm not keen on a breaking change to find. @afontcu has more knowledge around this than I do.

I don't think this would happen, mostly because in Vue Testing Library we target the DOM, so as long as the attribute is still there, we're good.

And last but not least, thanks @TheJaredWilcurt for the well thought-out proposal – it is yelding interesting debates and let us focus on the big picture. Keep'em coming! :)

TheJaredWilcurt

comment created time in a month

Pull request review commentvuejs/vue-test-utils

docs: add note about waiting for async trigger event to be handled

 Return an object containing custom events emitted by the `Wrapper` `vm`. ```js import { mount } from '@vue/test-utils' -const wrapper = mount(Component)+test('emit demo', async () => {+  const wrapper = mount(Component) -wrapper.vm.$emit('foo')-wrapper.vm.$emit('foo', 123)+  wrapper.vm.$emit('foo')+  wrapper.vm.$emit('foo', 123) -/*-wrapper.emitted() returns the following object:-{-  foo: [[], [123]]-}-*/+  await wrapper.vm.$nextTick() // Wait until $emits have been handled

Not sure if it's too down-to-metal, but we're technically waiting for the next DOM update cycle, right? Should be mention that? I mean, $nextTick has nothing to do with $emits directly, and one could infer that from the comment above.

Just thinking out loud 😇

samgre

comment created time in a month

Pull request review commentvuejs/vue-test-utils

Allow find to work on both Pascal case and camel case

 describeWithShallowAndMount('find', mountingMethod => {     )   }) +  it('returns a Wrapper matching a camelCase name option and a Pascal Case component name ', () => {
  it('returns a Wrapper matching a camelCase name option and a PascalCase component name', () => {
lmiller1990

comment created time in a month

Pull request review commentvuejs/vue-test-utils

Allow find to work on both Pascal case and camel case

 describeWithShallowAndMount('find', mountingMethod => {     )   }) +  it('returns a Wrapper matching a camelCase name option and a Pascal Case component name ', () => {+    const component = {+      name: 'CamelCase',+      render: h => h('div')+    }+    const wrapper = mountingMethod(component)+    expect(wrapper.find({ name: 'camelCase' }).name()).to.equal('CamelCase')+  })++  it('returns a Wrapper matching a kebab-case name option and a Pascal Case component name ', () => {
  it('returns a Wrapper matching a kebab-case name option and a PascalCase component name', () => {
lmiller1990

comment created time in a month

Pull request review commentvuejs/vue-test-utils

Allow find to work on both Pascal case and camel case

 describeWithShallowAndMount('find', mountingMethod => {     )   }) +  it('returns a Wrapper matching a camelCase name option and a Pascal Case component name ', () => {+    const component = {+      name: 'CamelCase',+      render: h => h('div')+    }+    const wrapper = mountingMethod(component)+    expect(wrapper.find({ name: 'camelCase' }).name()).to.equal('CamelCase')+  })++  it('returns a Wrapper matching a kebab-case name option and a Pascal Case component name ', () => {+    const component = {+      name: 'CamelCase',+      render: h => h('div')+    }+    const wrapper = mountingMethod(component)+    expect(wrapper.find({ name: 'camel-case' }).name()).to.equal('CamelCase')+  })++  it('returns a Wrapper matching a Pascal Case name option and a kebab-casecomponent name ', () => {
  it('returns a Wrapper matching a PascalCase name option and a kebab-case component name', () => {
lmiller1990

comment created time in a month

Pull request review commentvuejs/vue-test-utils

Allow find to work on both Pascal case and camel case

 import {   FUNCTIONAL_OPTIONS } from 'shared/consts' import { isConstructor } from 'shared/validators'+import { capitalize, camelize } from 'shared/util' -export function vmMatchesName(vm, name) {+function vmMatchesName(vm, name) {+  // We want to mirror how Vue resolves component names in SFCs:+  // For example, <test-component />, <TestComponent /> and `<testComponent />
  // For example, <test-component />, <TestComponent /> and <testComponent />
lmiller1990

comment created time in a month

Pull request review commentvuejs/vue-test-utils

Allow find to work on both Pascal case and camel case

 describeWithShallowAndMount('find', mountingMethod => {     const wrapper = mountingMethod(compiled)     const a = wrapper.find('a')     const message =-      '[vue-test-utils]: $ref selectors can only be used on Vue component wrappers'+      '[vue-test-utils]: $ref selectors can used on Vue component wrappers'

Is this an expected modification?

lmiller1990

comment created time in a month

Pull request review commentvuejs/vue-test-utils

Allow find to work on both Pascal case and camel case

 import {   FUNCTIONAL_OPTIONS } from 'shared/consts' import { isConstructor } from 'shared/validators'+import { capitalize, camelize } from 'shared/util' -export function vmMatchesName(vm, name) {+function vmMatchesName(vm, name) {+  console.log(name)

some debugging stuff over here! ;)

lmiller1990

comment created time in a month

issue commenttesting-library/vue-testing-library

Cannot set data properties on a component

Thanks for commenting, though! :) Feel free to raise any other issue or ask any question in our Spectrum chat: https://spectrum.chat/testing-library

EvanBurbidge

comment created time in a month

issue commenttesting-library/vue-testing-library

Cannot set data properties on a component

If a test is hard to write, it usually means the component is doing too much, or that it is too coupled. You might benefit from removing responsibilities from it to other parts of your system.

Anyway, you can easily mock axios (or fetch or any other service) the same way!

EvanBurbidge

comment created time in a month

issue commenttesting-library/vue-testing-library

Cannot set data properties on a component

You should mock you API calls – https://afontcu.dev/testing-api-calls/

So you can test without hitting a back end, and also reassure that you're getting the desired output from the API call.

EvanBurbidge

comment created time in a month

issue commenttesting-library/vue-testing-library

Cannot set data properties on a component

Hi! Thanks for filling in the issue.

This is not a bug, since VTL aims for providing the tools that allow you to interact with your components as the end user or the developer would do – neither of them would be able to directly modify the internal data from a component, and this is why VTL does not exposed such method.

What's your use case? Maybe we can figure it out 🙌

EvanBurbidge

comment created time in a month

Pull request review commentvuejs/vue-test-utils

Allow find to work on both Pascal case and camel case

 import { import { isConstructor } from 'shared/validators'  export function vmMatchesName(vm, name) {+  const normalize = (name = '') => name.replace(/-/gi, '').toLowerCase()

Wondering if this should be a globally-available utility function..?

lmiller1990

comment created time in a month

issue commentvuejs/vue-test-utils

Allow custom attribute in the Wrapper.find options object.

I'd also say using the CSS attribute selector is a better solution, since it's the standard way of performing this queries – also we avoid introducing additional unnecessary complexity to VTU 👍

adamwoodbury

comment created time in a month

Pull request review commentvuejs/vue-test-utils

Allow testing src directly

 const rules = [].concat(   {     test: /\.js$/,     loader: 'babel-loader',-    exclude: /node_modules\/(?!(shared|create-instance)\/).*/+    exclude: /node_modules/   } )-+const externals = nodeExternals({+  // we need to whitelist both `create-instance` and files in `shared` package. Otherwise Webpack wont bundle them in the test dev env
  // we need to whitelist both `create-instance` and files in `shared` package. Otherwise webpack won't bundle them in the test dev env
dobromir-hristov

comment created time in a month

pull request commentvuejs/vue-test-utils

Support v-slot

Great job mate! 🙌

lmiller1990

comment created time in a month

push eventvuejs/vue-test-utils

Woonchan Cho

commit sha a7d551f488285babe0714a3dc016dcaf12bf0ffc

docs: fix a typo 'crated' (#1395)

view details

push time in 2 months

PR merged vuejs/vue-test-utils

fix a typo 'crated'
+1 -1

0 comment

1 changed file

etherCro

pr closed time in 2 months

pull request commentvuejs/vue-test-utils

Override component watcher with mounting options

The one you pass to the mount should always override the entire watcher definition, imho. Its up to you, as a dev to take care if its immediate, deep or whatever, no?

Sure! I guess what I wanted to confirm is that the current implementation overrides the entire definion, not only the handler :) I'd assume so, but wanted to make sure 👍

lmiller1990

comment created time in 2 months

pull request commentvuejs/vue-test-utils

Remove npm references from Contributing

Seems will still reference npm in various places, including release scripts and package.json. We might want to move all those to yarn as well. What do you think?

Hm, I didn't want to change the release scripts as they are working fine (AFAIK). Same thing with package.json scripts as long as they are run using yarn. Should we update them anyway?

afontcu

comment created time in 2 months

pull request commenttesting-library/vue-testing-library

add simple directive and test

Hi @chiptus! Any chance you could take a look at this? 😄

have a happy new year!

chiptus

comment created time in 2 months

PR opened vuejs/vue-test-utils

Reviewers
Remove npm references from Contributing

Closes #1235.

Right now, npm is not a valid option as the project won't run properly. Only yarn is. Thus, I updated the docs accordingly.

In an ideal world, running VTU scripts with npm would "just work", but I'm not experienced enough with Lerna to identify what's missing. That's why I thought that, at least, we should make the docs reflect the current state of the art.

+4 -10

0 comment

1 changed file

pr created time in 2 months

create barnchvuejs/vue-test-utils

branch : remove-npm-docs

created branch time in 2 months

Pull request review commentvuejs/vue-test-utils

Support v-slot

 function resolveOptions(component, _Vue) {   return options } +function getScopedSlotRenderFunctions(ctx: any): Array<string> {+  // In Vue 2.6+ a new v-slot syntax was introduced+  // scopedSlots are now saved in parent._vnode.data.scopedSlots+  // We filter out the _normalized and $stable key+  if (+    ctx &&+    ctx.$options &&+    ctx.$options.parent._vnode &&+    ctx.$options.parent._vnode.data &&+    ctx.$options.parent._vnode.data.scopedSlots+  ) {+    const slotKeys: Array<string> = ctx.$options.parent._vnode.data.scopedSlots+    return keys(slotKeys).filter(x => x[0] !== '_' && !x.includes('$'))

Thinking out loud here, and might be missing something, but:

If we're aiming to remove _normalized and $stable, could we be more explicit about our intention?

return keys(slotKeys).filter(x => x !== '_normalized' && x !== '$stable')

(or even ['_normalized', '$stable'].includes(x))

lmiller1990

comment created time in 2 months

pull request commentvuejs/vue-test-utils

Change the way of setting props

Hi @xanf! Did you find the opportunity to work on this? :)

xanf

comment created time in 2 months

pull request commentvuejs/vue-test-utils

Add commit message linting

Should I change it so prettier and esling run a fix command, and we stage the changes? This way users dont need to figure out how to run them, it just happens for them?

I don't see why not!

dobromir-hristov

comment created time in 2 months

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 5067f7fec052ad6309db86d6b9c01c4db85184ad

Update README.md

view details

push time in 2 months

more