feat(wrapper array): Allow negative indices to be passed to .at()

[paulgv]

Passing a negative index to .at() lets you retrieve elements by starting from the end of the wrapper array (i.e. last item is at index -1).

import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')

const lastDiv = divArray.at(-1)
expect(lastDiv.is('div')).toBe(true)

[eddyerburgh]

Thanks for the PR. I haven't seen this in an API before, what are some examples of language features/ libraries that use -1 to mean the end of an array?

We could also add a last helper method. That would be easier to understand for me

[paulgv]

@eddyerburgh The best example I can think of is Python, which has this behavior built-in for lists, eg:

>>> list = [1, 2, 3]
>>> list[-1]
3
>>> list[-2]
2
>>> list[-3]
1

To me it would feel pretty natural to have this implemented in vue-test-utils (I actually have tried it multiple times only to be reminded it isn't supported).

A last helper would certainly be useful but not as flexible as supporting negative indices. A use case I can think of is for testing a pagination component where you might want to test the last three items, eg:

• items.at(-1) -> "Last page" button
• items.at(-2) -> "Next page" button
• items.at(-3) -> "Page #" button

[winniehell]

what are some examples of language features/ libraries that use -1 to mean the end of an array?

@eddyerburgh I hope you don't mind me jumping in here. 😃 A similar API is used in

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring
• https://lodash.com/docs/4.17.11#nth

[lmiller1990]

This feels a bit unintuitive to me. Since JS doesn't support this natively, I'm not sure it makes sense here, either.

[winniehell]

@lmiller1990 In my comment above I have linked native JavaScript APIs that support negative indices.

If you think that this is not the expected behavior, what behavior would you expect when doing wrapper.at(-1)? should it return undefined?

[lmiller1990]

I would expected undefined: var a = [1,2,3,4,5]; a[-1] //=> undefined.

I'm actually surprised to find there is some support for -1 in JS at all - the more you know. I don't think this is a bad idea - obviously it's convenient, especially for people coming from languages where this is supported. I doubt I'd expect this behaviour unless I had explicitly seen it in the docs.

If we want to follow slice, it would return an array? [1,2,3,4,4].slice(-1) //=> [4].

last would make more senes to me.

[paulgv]

I would expected undefined: var a = [1,2,3,4,5]; a[-1] //=> undefined.

I agree that, when manipulating a native Array in Js, it feels counterintuitive to access a negative index like you would in Python, but doing that through an API (.at(-1)) feels fine to me. Especially given the fact that this is already possible with native Js APIs, like @winniehell pointed out.

If we want to follow slice, it would return an array? [1,2,3,4,4].slice(-1) //=> [4].

The goal here is not to mimic .slice(), @winniehell was simply giving some examples where native Js APIs use negative indices. It wouldn't make any sense for .at() to return an array because it is designed to return a specific element from a wrappers list.

But I could imagine a .slice() method being implemented in vue-test-utils, I guess it could have some utility.

last would make more senes to me.

Again, a .last() helper would certainly be useful but doesn't provide as much flexibility as supporting negative indices in .at() does. IMHO, if we were to implement a .last() helper, it should be a simple alias for .at(-1).

[lmiller1990]

Ok, I reckon we merge this up. Going to get few more reviews going.

[afontcu]

LGTM!