Comments (8)
Hey @hzhoup I was curious since I've had some pain testing focus events myself, so I took a hack at this.
If you open in a new tab and are very careful to not click anything, so using a keyboard shortcut for example to open the inspector you will notice that document.activeElement
is actually the body as expected.
My guess is that either by mouse or keyboard you triggered the focus on the button before executing the document.activeElement
call.
To be completely sure, I would add some thick border to the button on the :focus
state so that you can be sure that you dont have it manually selected before executing the call. The default active element will usually be the body. In the stack page the active element is the iframe probably if you right click it to open the inspector.
What @cexbrayat suggested is correct though, and triggering the focus event on the wrapper should yield the whole wrapper as is happening in your test. The activeElement will not return the button unless you either:
- Mock the user focusing the button by trigger('focus')
- Programatically pre-focus the button for the user on the mounted hook for example
from test-utils.
Hi @hzhoup
As you are triggering the focus event on the whole wrapper, that looks normal to me. What are you trying to test?
from test-utils.
I want to test the wrapper focus state, in the MDN Doc, i know The activeElement read-only property of the Document interface returns the Element within the DOM that currently has focus.
. I think when i trigger focus
, the document.activeElement
will be return button
DOM instead of body
, like try that on the browser.
The preview link: https://stackblitz.com/edit/github-3auzsz-nb39qq?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts,src%2FApp.vue
On the stackblitz side preview is always iframe
, i open port new tab, in the browser console document.activeElement
will be show:
from test-utils.
Right now, trigger('focus')
is only dispatching a DOM event and not calling element.focus()
.
This seems to have different behavior, as element.focus()
is working with your repro:
https://stackblitz.com/edit/github-3auzsz-1iuaj8?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts
I'm not sure if we should call the methods on the DOM element (if exists) instead of dispatching a DOM event?
I've created a PR with a test implementation #2180
Just an opinion on your test:
You are using the wrapper as your work element (which is actually the button):
await wrapper.trigger('focus');
expect(document.activeElement).toBe(wrapper.element);
I would prefer to explicit use the button instead of wrapper
. In that case it's clear the button should be the active element and will make the test still work when you need to add some <div>
around or so.
const button = wrapper.find('button');
await button.trigger('focus');
expect(document.activeElement).toBe(button.element);
from test-utils.
@freakzlike thaks, it helped me.
if I call button.trigger('focus')
explicitly, then document.activeElement
's expect must be correct. There's no doubt about it, and I don't think there's any need for testing.
In my component, there may be certain factors that prevent it from being in focus. And the root component is a dynamic component, not necessarily a button.
I don't think explicitly calling button.trigger('focus')
meets my test need.
from test-utils.
Thanks @marina-mosti for taking a look. I agree with you π
Unless @freakzlike thinks #2180 is the way to go, I think this is expected behavior and we could close this.
from test-utils.
I'm completely fine if we don't merge #2180. Adds too much complexity in my opinion
from test-utils.
π Let's close then
from test-utils.
Related Issues (20)
- Feature request: Attach to SVG elements HOT 1
- Computed ref unwrapping is different than in vue HOT 2
- Bug: VTU not recognizing props object passed to the mount() function HOT 2
- Bug: Transition JavaScript Hooks does not work HOT 2
- Feature request: Test correctness of provided values HOT 7
- Bug: Cannot find module '@vue/server-renderer' HOT 6
- Bug: `Wrapper.setValue(str)` not working HOT 2
- Feature request: get css pseudo :hover, :active :focus rules HOT 4
- Bug: Wrapper.Text function is trimming elements HOT 4
- Bug: [TypeScript] `findAllComponents` type definition with Vue generic HOT 2
- Bug: Optional props are typed as `| undefined` HOT 2
- Bug: `setData()` incorrectly sets object prototype methods as keys HOT 4
- setData() on a writable computed property does not seem to work as it does in VTU.1 HOT 7
- Bug: error when loading the esm-browser version of the library HOT 3
- Nested key event modifiers donβt call the listener function. HOT 1
- Bug: input setValue trigger no more works after upgrade from 2.3.2 to 2.4.3... HOT 3
- Bug: ReferenceError: Vue is not defined HOT 2
- Does it work with "Vue 2.7.16"οΌ HOT 2
- Bug: Unable to pass props of a unioned type to `mount` since 2.4.2 HOT 1
- Bug: Cannot acess global plugin in test file (wrapper.vm.$plugin) HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from test-utils.