Skip to content

Commit

Permalink
fix traversal unique sorting
Browse files Browse the repository at this point in the history 
$.uniqueSort was failing the unique part in firefox. also had the ordering wrong.
  • Loading branch information
@chrisbreiding
chrisbreiding committed Aug 11, 2020
1 parent 106dbf4 commit c8871d6
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 54 deletions.
2 changes: 1 addition & 1 deletion packages/driver/cypress/fixtures/shadow-dom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<title>Shadow DOM Fixture</title>
</head>
<body>
<body class="filter-me">
<div id="non-shadow-element" class="in-and-out">Non Shadow</div>
<cy-test-element id="shadow-element-1" innerClass="shadow-1" content="Shadow Content 1"></cy-test-element>
<cy-test-element id="shadow-element-2" innerClass="shadow-2" content="Shadow Content 2"></cy-test-element>
Expand Down
117 changes: 69 additions & 48 deletions packages/driver/cypress/integration/commands/traversals_shadow_dom_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,15 +266,15 @@ describe('src/cy/commands/traversals - shadow dom', () => {
.then(($parents) => {
expect($parents.length).to.eq(10)
expect($parents[0]).to.have.class('shadow-div')
expect($parents[1]).to.match('html')
expect($parents[2]).to.match('body')
expect($parents[1]).to.have.id('shadow-element-3')
expect($parents[2]).to.have.id('parent-of-shadow-container-1')
expect($parents[3]).to.have.id('parent-of-shadow-container-0')
expect($parents[4]).to.have.id('parent-of-shadow-container-1')
expect($parents[5]).to.have.id('shadow-element-3')
expect($parents[6]).to.have.class('shadow-div')
expect($parents[4]).to.have.class('shadow-div')
expect($parents[5]).to.have.id('shadow-element-8')
expect($parents[6]).to.have.id('parent-of-shadow-container-3')
expect($parents[7]).to.have.id('parent-of-shadow-container-2')
expect($parents[8]).to.have.id('parent-of-shadow-container-3')
expect($parents[9]).to.have.id('shadow-element-8')
expect($parents[8]).to.match('body')
expect($parents[9]).to.match('html')
})
})
})
Expand Down Expand Up @@ -321,9 +321,10 @@ describe('src/cy/commands/traversals - shadow dom', () => {
.find('p', { includeShadowDom: true })
.parents('.filter-me')
.then(($parents) => {
expect($parents.length).to.eq(2)
expect($parents.length).to.eq(3)
expect($parents[0]).to.have.id('parent-of-shadow-container-1')
expect($parents[1]).to.have.id('parent-of-shadow-container-3')
expect($parents[2]).to.match('body')
})
})
})
Expand Down Expand Up @@ -368,15 +369,15 @@ describe('src/cy/commands/traversals - shadow dom', () => {
.then(($parents) => {
expect($parents.length).to.eq(10)
expect($parents[0]).to.have.class('shadow-div')
expect($parents[1]).to.match('html')
expect($parents[2]).to.match('body')
expect($parents[1]).to.have.id('shadow-element-3')
expect($parents[2]).to.have.id('parent-of-shadow-container-1')
expect($parents[3]).to.have.id('parent-of-shadow-container-0')
expect($parents[4]).to.have.id('parent-of-shadow-container-1')
expect($parents[5]).to.have.id('shadow-element-3')
expect($parents[6]).to.have.class('shadow-div')
expect($parents[4]).to.have.class('shadow-div')
expect($parents[5]).to.have.id('shadow-element-8')
expect($parents[6]).to.have.id('parent-of-shadow-container-3')
expect($parents[7]).to.have.id('parent-of-shadow-container-2')
expect($parents[8]).to.have.id('parent-of-shadow-container-3')
expect($parents[9]).to.have.id('shadow-element-8')
expect($parents[8]).to.match('body')
expect($parents[9]).to.match('html')
})
})
})
Expand Down Expand Up @@ -426,13 +427,13 @@ describe('src/cy/commands/traversals - shadow dom', () => {
.then(($parents) => {
expect($parents.length).to.eq(8)
expect($parents[0]).to.have.class('shadow-div')
expect($parents[1]).to.have.id('parent-of-shadow-container-0')
expect($parents[1]).to.have.id('shadow-element-3')
expect($parents[2]).to.have.id('parent-of-shadow-container-1')
expect($parents[3]).to.have.id('shadow-element-3')
expect($parents[3]).to.have.id('parent-of-shadow-container-0')
expect($parents[4]).to.have.class('shadow-div')
expect($parents[5]).to.have.id('parent-of-shadow-container-2')
expect($parents[5]).to.have.id('shadow-element-8')
expect($parents[6]).to.have.id('parent-of-shadow-container-3')
expect($parents[7]).to.have.id('shadow-element-8')
expect($parents[7]).to.have.id('parent-of-shadow-container-2')
})
})
})
Expand All @@ -455,9 +456,10 @@ describe('src/cy/commands/traversals - shadow dom', () => {
.find('.shadow-8-nested-3', { includeShadowDom: true })
.parentsUntil('#parent-of-shadow-container-0', '.filter-me')
.then(($parents) => {
expect($parents.length).to.eq(2)
expect($parents.length).to.eq(3)
expect($parents[0]).to.have.class('shadow-8-nested-1')
expect($parents[1]).to.have.id('parent-of-shadow-container-3')
expect($parents[2]).to.match('body')
})
})

Expand All @@ -475,11 +477,12 @@ describe('src/cy/commands/traversals - shadow dom', () => {
cy
.get('#shadow-element-3, #shadow-element-8')
.find('p', { includeShadowDom: true })
.parentsUntil('body', '.filter-me')
.parentsUntil('html', '.filter-me')
.then(($parents) => {
expect($parents.length).to.eq(2)
expect($parents.length).to.eq(3)
expect($parents[0]).to.have.id('parent-of-shadow-container-1')
expect($parents[1]).to.have.id('parent-of-shadow-container-3')
expect($parents[2]).to.match('body')
})
})
})
Expand Down Expand Up @@ -536,17 +539,23 @@ describe('src/cy/commands/traversals - shadow dom', () => {

it('handles multiple elements in subject', () => {
cy
.get('#shadow-element-8')
.find('.shadow-div', { includeShadowDom: true })
.get('html')
.then(($untilEl) => {
cy
.get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
.get('#shadow-element-3, #shadow-element-8')
.find('p', { includeShadowDom: true })
.parentsUntil($untilEl[0])
.then(($parents) => {
expect($parents.length).to.eq(3)
expect($parents[0]).to.have.class('shadow-content')
expect($parents[1]).to.have.class('shadow-8-nested-1')
expect($parents[2]).to.have.class('shadow-8-nested-2')
expect($parents.length).to.eq(9)
expect($parents[0]).to.have.class('shadow-div')
expect($parents[1]).to.have.id('shadow-element-3')
expect($parents[2]).to.have.id('parent-of-shadow-container-1')
expect($parents[3]).to.have.id('parent-of-shadow-container-0')
expect($parents[4]).to.have.class('shadow-div')
expect($parents[5]).to.have.id('shadow-element-8')
expect($parents[6]).to.have.id('parent-of-shadow-container-3')
expect($parents[7]).to.have.id('parent-of-shadow-container-2')
expect($parents[8]).to.match('body')
})
})
})
Expand Down Expand Up @@ -578,9 +587,10 @@ describe('src/cy/commands/traversals - shadow dom', () => {
.find('.shadow-8-nested-3', { includeShadowDom: true })
.parentsUntil($untilEl[0], '.filter-me')
.then(($parents) => {
expect($parents.length).to.eq(2)
expect($parents.length).to.eq(3)
expect($parents[0]).to.have.class('shadow-8-nested-1')
expect($parents[1]).to.have.id('parent-of-shadow-container-3')
expect($parents[2]).to.match('body')
})
})
})
Expand All @@ -601,15 +611,17 @@ describe('src/cy/commands/traversals - shadow dom', () => {

it('handles multiple elements in subject', () => {
cy
.get('#shadow-element-8')
.find('.shadow-div', { includeShadowDom: true })
.get('html')
.then(($untilEl) => {
cy
.get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
.get('#shadow-element-3, #shadow-element-8')
.find('p', { includeShadowDom: true })
.parentsUntil($untilEl[0], '.filter-me')
.then(($parents) => {
expect($parents.length).to.eq(1)
expect($parents[0]).to.have.class('shadow-8-nested-1')
expect($parents.length).to.eq(3)
expect($parents[0]).to.have.id('parent-of-shadow-container-1')
expect($parents[1]).to.have.id('parent-of-shadow-container-3')
expect($parents[2]).to.match('body')
})
})
})
Expand Down Expand Up @@ -667,17 +679,23 @@ describe('src/cy/commands/traversals - shadow dom', () => {

it('handles multiple elements in subject', () => {
cy
.get('#shadow-element-8')
.find('.shadow-div', { includeShadowDom: true })
.get('html')
.then(($untilEl) => {
cy
.get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
.get('#shadow-element-3, #shadow-element-8')
.find('p', { includeShadowDom: true })
.parentsUntil($untilEl)
.then(($parents) => {
expect($parents.length).to.eq(3)
expect($parents[0]).to.have.class('shadow-content')
expect($parents[1]).to.have.class('shadow-8-nested-1')
expect($parents[2]).to.have.class('shadow-8-nested-2')
expect($parents.length).to.eq(9)
expect($parents[0]).to.have.class('shadow-div')
expect($parents[1]).to.have.id('shadow-element-3')
expect($parents[2]).to.have.id('parent-of-shadow-container-1')
expect($parents[3]).to.have.id('parent-of-shadow-container-0')
expect($parents[4]).to.have.class('shadow-div')
expect($parents[5]).to.have.id('shadow-element-8')
expect($parents[6]).to.have.id('parent-of-shadow-container-3')
expect($parents[7]).to.have.id('parent-of-shadow-container-2')
expect($parents[8]).to.match('body')
})
})
})
Expand Down Expand Up @@ -709,9 +727,10 @@ describe('src/cy/commands/traversals - shadow dom', () => {
.find('.shadow-8-nested-3', { includeShadowDom: true })
.parentsUntil($untilEl, '.filter-me')
.then(($parents) => {
expect($parents.length).to.eq(2)
expect($parents.length).to.eq(3)
expect($parents[0]).to.have.class('shadow-8-nested-1')
expect($parents[1]).to.have.id('parent-of-shadow-container-3')
expect($parents[2]).to.match('body')
})
})
})
Expand All @@ -732,15 +751,17 @@ describe('src/cy/commands/traversals - shadow dom', () => {

it('handles multiple elements in subject', () => {
cy
.get('#shadow-element-8')
.find('.shadow-div', { includeShadowDom: true })
.get('html')
.then(($untilEl) => {
cy
.get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
.get('#shadow-element-3, #shadow-element-8')
.find('p', { includeShadowDom: true })
.parentsUntil($untilEl, '.filter-me')
.then(($parents) => {
expect($parents.length).to.eq(1)
expect($parents[0]).to.have.class('shadow-8-nested-1')
expect($parents.length).to.eq(3)
expect($parents[0]).to.have.id('parent-of-shadow-container-1')
expect($parents[1]).to.have.id('parent-of-shadow-container-3')
expect($parents[2]).to.match('body')
})
})
})
Expand Down
17 changes: 12 additions & 5 deletions packages/driver/src/cy/commands/traversals.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
const $ = require('jquery')
const _ = require('lodash')

const $dom = require('../../dom')
Expand All @@ -20,6 +19,14 @@ const optInShadowTraversals = {
},
}

const sortedUnique = (cy, $el) => {
// we want _.uniq() to keep the elements with higher indexes instead of lower
// so we reverse, uniq, then reverse again
// so [div1, body, html, div2, body, html]
// becomes [div1, div2, body, html] and not [div1, body, html, div2]
return cy.$$(_($el).reverse().uniq().reverse().value())
}

const autoShadowTraversals = {
closest: (cy, $el, selector) => {
const nodes = _.reduce($el, (nodes, el) => {
Expand All @@ -38,22 +45,22 @@ const autoShadowTraversals = {
return getClosest(el)
}, [])

return $.uniqueSort(nodes)
return sortedUnique(cy, nodes)
},
parent: (cy, $el) => {
const parents = $el.map((i, el) => {
return $elements.getParent(el)
})

return $.uniqueSort(parents)
return sortedUnique(cy, parents)
},
parents: (cy, $el, selector) => {
let $parents = $el.map((i, el) => {
return $elements.getAllParents(el)
})

if ($el.length > 1) {
$parents = $.uniqueSort($parents)
$parents = sortedUnique(cy, $parents)
}

if (!selector) {
Expand All @@ -68,7 +75,7 @@ const autoShadowTraversals = {
})

if ($el.length > 1) {
$parents = $.uniqueSort($parents)
$parents = sortedUnique(cy, $parents)
}

if (!filter) {
Expand Down

0 comments on commit c8871d6

Please sign in to comment.