-
Notifications
You must be signed in to change notification settings - Fork 3.1k
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.
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: <ExternalLink /> component enhancements #20903
Changes from 4 commits
f8374b0
6b52716
c27ddcd
1214ba6
a52f523
2128376
667e317
bff3e17
51efc74
79e4e88
5c089e8
33f221e
832c195
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,6 +3,7 @@ | |
<a | ||
:href="props.href" | ||
:class="classes" | ||
@keypress.space.enter.prevent="open" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This doesn't look like it's needed, may have been left in PR accidentally? I took it out and everything was fine. |
||
><slot /></a> | ||
</template> | ||
|
||
|
Original file line number | Diff line number | Diff line change | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,113 @@ | ||||||||||||||||||||
import ExternalLink from './ExternalLink.vue' | ||||||||||||||||||||
import { ExternalLink_OpenExternalDocument } from '../generated/graphql' | ||||||||||||||||||||
|
||||||||||||||||||||
describe('<ExternalLink />', () => { | ||||||||||||||||||||
beforeEach(() => { | ||||||||||||||||||||
const onClickSpy = cy.spy().as('onClickSpy') | ||||||||||||||||||||
|
||||||||||||||||||||
cy.mount(() => ( | ||||||||||||||||||||
<ExternalLink | ||||||||||||||||||||
href='https://on.cypress.io/ci' | ||||||||||||||||||||
// @ts-ignore - vue @click isn't represented in JSX | ||||||||||||||||||||
onClick={onClickSpy} | ||||||||||||||||||||
> | ||||||||||||||||||||
Click me! | ||||||||||||||||||||
</ExternalLink> | ||||||||||||||||||||
)) | ||||||||||||||||||||
}) | ||||||||||||||||||||
|
||||||||||||||||||||
it('opens external link on click', () => { | ||||||||||||||||||||
const urlStub = cy.stub() | ||||||||||||||||||||
|
||||||||||||||||||||
cy.stubMutationResolver(ExternalLink_OpenExternalDocument, (defineResult, { url }) => { | ||||||||||||||||||||
urlStub(url) | ||||||||||||||||||||
|
||||||||||||||||||||
return defineResult({ | ||||||||||||||||||||
openExternal: true, | ||||||||||||||||||||
}) | ||||||||||||||||||||
}) | ||||||||||||||||||||
|
||||||||||||||||||||
cy.get('[data-cy="external"]') | ||||||||||||||||||||
.click() | ||||||||||||||||||||
|
||||||||||||||||||||
cy.wrap(urlStub).should('have.been.calledWith', 'https://on.cypress.io/ci') | ||||||||||||||||||||
cy.get('@onClickSpy').should('have.been.calledOnce') | ||||||||||||||||||||
}) | ||||||||||||||||||||
|
||||||||||||||||||||
it('opens external link on click and triggers onClick function', () => { | ||||||||||||||||||||
const urlStub = cy.stub() | ||||||||||||||||||||
|
||||||||||||||||||||
cy.stubMutationResolver(ExternalLink_OpenExternalDocument, (defineResult, { url }) => { | ||||||||||||||||||||
urlStub(url) | ||||||||||||||||||||
|
||||||||||||||||||||
return defineResult({ | ||||||||||||||||||||
openExternal: true, | ||||||||||||||||||||
}) | ||||||||||||||||||||
}) | ||||||||||||||||||||
|
||||||||||||||||||||
cy.get('[data-cy="external"]') | ||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
A couple of reasons for this suggestion:
|
||||||||||||||||||||
.click() | ||||||||||||||||||||
|
||||||||||||||||||||
cy.wrap(urlStub).should('have.been.calledWith', 'https://on.cypress.io/ci') | ||||||||||||||||||||
cy.get('@onClickSpy').should('have.been.calledOnce') | ||||||||||||||||||||
}) | ||||||||||||||||||||
|
||||||||||||||||||||
it('opens external link on enter', () => { | ||||||||||||||||||||
const urlStub = cy.stub() | ||||||||||||||||||||
|
||||||||||||||||||||
cy.stubMutationResolver(ExternalLink_OpenExternalDocument, (defineResult, { url }) => { | ||||||||||||||||||||
urlStub(url) | ||||||||||||||||||||
|
||||||||||||||||||||
return defineResult({ | ||||||||||||||||||||
openExternal: true, | ||||||||||||||||||||
}) | ||||||||||||||||||||
}) | ||||||||||||||||||||
|
||||||||||||||||||||
cy.get('[data-cy="external"]') | ||||||||||||||||||||
.focus() | ||||||||||||||||||||
.realPress('Enter') | ||||||||||||||||||||
|
||||||||||||||||||||
cy.wrap(urlStub).should('have.been.calledWith', 'https://on.cypress.io/ci') | ||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do we want to confirm the onClickSpy was called here?
Suggested change
|
||||||||||||||||||||
}) | ||||||||||||||||||||
|
||||||||||||||||||||
it('opens external link on click and enter', () => { | ||||||||||||||||||||
const urlStub = cy.stub() | ||||||||||||||||||||
|
||||||||||||||||||||
cy.stubMutationResolver(ExternalLink_OpenExternalDocument, (defineResult, { url }) => { | ||||||||||||||||||||
urlStub(url) | ||||||||||||||||||||
|
||||||||||||||||||||
return defineResult({ | ||||||||||||||||||||
openExternal: true, | ||||||||||||||||||||
}) | ||||||||||||||||||||
}) | ||||||||||||||||||||
|
||||||||||||||||||||
cy.get('[data-cy="external"]') | ||||||||||||||||||||
.click() | ||||||||||||||||||||
|
||||||||||||||||||||
cy.get('[data-cy="external"]') | ||||||||||||||||||||
.focus() | ||||||||||||||||||||
.realPress('Enter') | ||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Side note, the need to use realPress here is a sign that we should look into doing something like #19726 for links as well. Feel like Also I think we can shorten this up a little if we want:
Suggested change
|
||||||||||||||||||||
|
||||||||||||||||||||
cy.wrap(urlStub).should('have.been.calledTwice') | ||||||||||||||||||||
cy.get('@onClickSpy').should('have.been.calledTwice') | ||||||||||||||||||||
}) | ||||||||||||||||||||
|
||||||||||||||||||||
it('do not open external link on space bar trigger', () => { | ||||||||||||||||||||
const urlStub = cy.stub() | ||||||||||||||||||||
|
||||||||||||||||||||
cy.stubMutationResolver(ExternalLink_OpenExternalDocument, (defineResult, { url }) => { | ||||||||||||||||||||
urlStub(url) | ||||||||||||||||||||
|
||||||||||||||||||||
return defineResult({ | ||||||||||||||||||||
openExternal: true, | ||||||||||||||||||||
}) | ||||||||||||||||||||
}) | ||||||||||||||||||||
|
||||||||||||||||||||
cy.get('[data-cy="external"]') | ||||||||||||||||||||
.focus() | ||||||||||||||||||||
.realPress('Space') | ||||||||||||||||||||
|
||||||||||||||||||||
cy.wrap(urlStub).should('not.be.called') | ||||||||||||||||||||
cy.get('@onClickSpy').should('not.be.called') | ||||||||||||||||||||
}) | ||||||||||||||||||||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool - this is the click that made me suspect we needed to emit the event, I assumed the extra div I saw here was a workaround for this component swallowing the click event, looks like it wasn't but still better to have this here and let this part of the UI be keyboard-accessible.