Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: export focusWithKeyboard, focusWithMouse & assert #23

Merged
merged 1 commit into from
Jun 15, 2023
Merged

feat: export focusWithKeyboard, focusWithMouse & assert #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions src/browser/focus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import { sendKeys } from '@web/test-runner-commands';
import { sendKeys, sendMouse } from '@web/test-runner-commands';

export const focusWithKeyboard = async(element) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does linting want the function setup versus the const setup, or just trying to match the style of the repo? Or is there an advantage of one over the other?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't linting related, it was more of a personal preference. TBH I'm not sure where or why the const setup was introduced... maybe in the old visual-diff library and it got copied a bunch of places? If someone knows more about why we'd want one vs. the other, chime in!

Copy link
Contributor

@svanherk svanherk Jun 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure, I feel like we use the const style randomly throughout core, but it's not consistent. https://github.com/BrightspaceUI/core/blob/main/components/form/form-helper.js
https://github.com/BrightspaceUI/core/blob/main/helpers/gestures.js
And I just flip back and forth depending on what the file is already doing, so was mostly curious!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Outside of using the one that's necessary based on their differences (this, scope, hoisting), at the top level like this I'll usually use an arrow function for one-liners and regular function for anything longer.

await sendKeys({ press: 'Escape' });
export async function focusWithKeyboard(element) {
await sendKeys({ press: 'Shift' }); // Tab moves focus, Escape causes dismissible things to close
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As hinted at with the comment, when using this in core Escape was causing our dropdowns and dialogs to dismiss themselves. Core's copy uses Tab which was also problematic since it moves focus around and was why our visual-diff copy used Escape.

Shift seems to be a safe option... we'll see though I guess.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha and if not we'll just keep expanding the comment until we find something that works

element.focus({ focusVisible: true });
};
}

export async function focusWithMouse(element) {
const { x, y } = element.getBoundingClientRect();
await sendMouse({ type: 'click', position: [Math.ceil(x), Math.ceil(y)] });
await sendMouse({ type: 'move', position: [0, 0] });
}
3 changes: 2 additions & 1 deletion src/browser/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export { aTimeout, defineCE, expect, html, nextFrame, oneEvent, waitUntil } from '@open-wc/testing';
export { assert, aTimeout, defineCE, expect, html, nextFrame, oneEvent, waitUntil } from '@open-wc/testing';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding assert as an export. Core no longer uses it but guaranteed other projects do.

export { focusWithKeyboard, focusWithMouse } from './focus.js';
export { fixture } from './fixture.js';