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

(DomActions) WTR tests for elementSelector() #495

Merged
merged 5 commits into from
Oct 22, 2024
Merged

(DomActions) WTR tests for elementSelector() #495

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
865df0a
Minor cleanup in dom-actions.click.ts
Oct 14, 2024
6142ac6
Extract helper utils.instantiateDomActions()
Oct 14, 2024
8d1293f
Add dom-actions.element-selector.html
Oct 14, 2024
4bd5536
CR: do not wrap instantiateDomActions() into utils object
Oct 21, 2024
821f170
CR: exercise elementSelector() instead of its sub-methods
Oct 21, 2024
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
22 changes: 8 additions & 14 deletions tests-wtr/dom-actions/dom-actions.click.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
import { expect } from '@esm-bundle/chai';
import {DomActions} from "../../lib/dom-actions";
import { utils } from "./utils";

function instantiateDomActions() {
// @ts-expect-error we don't need to add a full AutoConsent instance, DomActions only needs config.logs from it
return new DomActions({config: {logs: {rulesteps: false, lifecycle: false, evals: false, errors: false, messages: false}}})
}

// must be run from dom-actions.test.html
// must be run from dom-actions.click.html
describe('click', () => {
let clickCounter1: number
let clickCounter2: number
Expand All @@ -27,7 +22,7 @@ describe('click', () => {

it('clicks on a button', () => {
// Given
const domActions = instantiateDomActions();
const domActions = utils.instantiateDomActions();

// When
const clickedSuccessfully = domActions.click('#test');
Expand All @@ -39,7 +34,7 @@ describe('click', () => {

it('clicks all upon multiple matches when all=true', () => {
// Given
const domActions = instantiateDomActions();
const domActions = utils.instantiateDomActions();

// When
const clickedSuccessfully = domActions.click('button', true);
Expand All @@ -52,7 +47,7 @@ describe('click', () => {

it('clicks only first one upon multiple matches when all=false', () => {
// Given
const domActions = instantiateDomActions();
const domActions = utils.instantiateDomActions();

// When
const clickedSuccessfully = domActions.click('button');
Expand All @@ -65,7 +60,7 @@ describe('click', () => {

it('clicks by chained selector', () => {
// Given
const domActions = instantiateDomActions();
const domActions = utils.instantiateDomActions();

// When
const clickedSuccessfully = domActions.click(['#second', 'button'])
Expand All @@ -78,7 +73,7 @@ describe('click', () => {

it('clicks by xpath selector', () => {
// Given
const domActions = instantiateDomActions();
const domActions = utils.instantiateDomActions();

// When
const clickedSuccessfully = domActions.click(['xpath///*[@id="second"]/button'])
Expand All @@ -91,7 +86,7 @@ describe('click', () => {

it('clicks an open shadow dom element', () => {
// Given
const domActions = instantiateDomActions();
const domActions = utils.instantiateDomActions();

let clickCounterShadowRoot = 0

Expand All @@ -100,7 +95,6 @@ describe('click', () => {
document.body.appendChild(shadowDiv)
const shadow = shadowDiv.attachShadow({ mode: 'open' })
const shadowButton = document.createElement('button')
shadowButton.innerText = '0'
muodov marked this conversation as resolved.
Show resolved Hide resolved
shadow.appendChild(shadowButton)
shadowButton.addEventListener('click', () => {
clickCounterShadowRoot++
Expand Down
30 changes: 30 additions & 0 deletions tests-wtr/dom-actions/dom-actions.element-selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<html>
<body>
<script type="module">
import {runTests} from '@web/test-runner-mocha';

runTests(async () => {
await import('./dom-actions.element-selector')
});
</script>

<div class="outer">
<div class="inner">
<p id="innermost">Innermost</p>
</div>
</div>
<div class="inner">
<p id="not-innermost">This should not be matched if searching by .outer first</p>
</div>

<div>
<button id="button1">Accept all</button>
<button id="button2">Reject all</button>
</div>

<div>
<button id="button3">Accept all</button>
</div>

</body>
</html>
94 changes: 94 additions & 0 deletions tests-wtr/dom-actions/dom-actions.element-selector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { expect } from '@esm-bundle/chai';
import { utils } from "./utils";

// must be run from dom-actions.element-selector.html
describe('elementSelector', () => {
muodov marked this conversation as resolved.
Show resolved Hide resolved
describe('querySingleReplySelector', () => {
const specialCasesThatShouldReturnEmptyArray = ['aria/', 'text/', 'pierce/']

specialCasesThatShouldReturnEmptyArray.forEach((selector) => {
it(`should return empty array if selector starts with "${selector}"`, () => {
// Given
const domActions = utils.instantiateDomActions();

// When
const elements = domActions.querySingleReplySelector(selector + 'something');

// Then
expect(elements).to.be.empty
})
})
it('should return elements by xpath if selector starts with "xpath/"', () => {
// Given
const domActions = utils.instantiateDomActions();

// When
const elements = domActions.querySingleReplySelector('xpath///button[contains(., \'Accept all\')]');

// Then
expect(elements).to.deep.eq([
document.getElementById('button1'),
document.getElementById('button3'),
])
})
it('should return elements by querySelectorAll from shadow root if available', () => {
// Given
const domActions = utils.instantiateDomActions();

const shadowDiv = document.createElement('div')
document.body.appendChild(shadowDiv)
const shadow = shadowDiv.attachShadow({mode: 'open'})
const shadowButton1 = document.createElement('button')
shadow.appendChild(shadowButton1)
const shadowButton2 = document.createElement('button')
shadow.appendChild(shadowButton2)

// When
const elements = domActions.querySingleReplySelector('button', shadowDiv)

// Then
expect(elements).to.deep.eq([
shadowButton1,
shadowButton2,
])
})
it('should return elements by querySelectorAll', () => {
// Given
const domActions = utils.instantiateDomActions();

// When
const elements = domActions.querySingleReplySelector('button');

// Then
expect(elements).to.deep.eq([
document.getElementById('button1'),
document.getElementById('button2'),
document.getElementById('button3'),
])
})
})
describe('querySelectorChain', () => {
Copy link
Member

Choose a reason for hiding this comment

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

could you add a test for Shadow DOM? something for ['.my-shadow-root-selector', '.selector-inside-shadow-root']?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

good call! I'll adjust the should return elements by querySelectorAll from shadow root if available which now cannot be used directly anymore as the elementSelector() only accepts one argument.

it('should return empty array if any selector does not produce a match', () => {
// Given
const domActions = utils.instantiateDomActions();

// When
const elements = domActions.querySelectorChain(['.outer', '.outer', '.inner'])

// Then
expect(elements).to.deep.eq([])
})
it('should return results if all selectors produce a match in one another', () => {
// Given
const domActions = utils.instantiateDomActions();

// When
const elements = domActions.querySelectorChain(['.outer', '.inner', 'p'])

// Then
expect(elements).to.deep.eq([
document.getElementById('innermost')
])
})
})
})
8 changes: 8 additions & 0 deletions tests-wtr/dom-actions/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import {DomActions} from "../../lib/dom-actions";

export const utils = {
muodov marked this conversation as resolved.
Show resolved Hide resolved
instantiateDomActions: () => {
// @ts-expect-error we don't need to add a full AutoConsent instance, DomActions only needs config.logs from it
return new DomActions({config: {logs: {rulesteps: false, lifecycle: false, evals: false, errors: false, messages: false}}})
}
}
Loading