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

Add tests for DomActions.prehide() #552

Merged
merged 1 commit into from
Jan 10, 2025
Merged

Add tests for DomActions.prehide() #552

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
1 change: 1 addition & 0 deletions tests-wtr/dom-actions/prehide/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Note: The test cases for `prehide()` have to be separated into dedicated files, as the generated HTML element `style#autoconsent-prehide` always has the same id and thus the test cases would interfere with one another.
11 changes: 11 additions & 0 deletions tests-wtr/dom-actions/prehide/dom-actions.prehide.delayed-element.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<html>
<body>
<script type="module">
import { runTests } from '@web/test-runner-mocha';

runTests(async () => {
await import('./dom-actions.prehide.delayed-element');
});
</script>
</body>
</html>
34 changes: 34 additions & 0 deletions tests-wtr/dom-actions/prehide/dom-actions.prehide.delayed-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { expect } from '@esm-bundle/chai';
import { DomActions } from '../../../lib/dom-actions';
import { instantiateDomActions } from '../utils';

// must be run from dom-actions.prehide.delayed-element.html
describe('prehide', () => {
let domActions: DomActions;

beforeEach(() => {
// Given
domActions = instantiateDomActions();
});

it('returns true even when element is only created after the call, and is immediately hidden', () => {
// Given
expect(document.querySelector('style#autoconsent-prehide')).to.be.null; // check that style element does not yet exist

// When
const result = domActions.prehide('#nonexistent');

// Then
expect(result).to.be.true;
expect(document.querySelector('style#autoconsent-prehide')).not.to.be.null; // check that style element was created

// we create element ex post and it will be hidden immediately
const createdDiv = document.createElement('div');
createdDiv.innerText = 'Here is some content';
createdDiv.id = 'nonexistent';

document.getElementsByTagName('body')[0].appendChild(createdDiv);

expect(createdDiv.checkVisibility({ checkOpacity: true })).to.be.false;
});
});
12 changes: 12 additions & 0 deletions tests-wtr/dom-actions/prehide/dom-actions.prehide.empty-selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<html>
<body>
<script type="module">
import { runTests } from '@web/test-runner-mocha';

runTests(async () => {
await import('./dom-actions.prehide.empty-selector');
});
</script>
<div id="visible">Here is some visible content!</div>
</body>
</html>
27 changes: 27 additions & 0 deletions tests-wtr/dom-actions/prehide/dom-actions.prehide.empty-selector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { expect } from '@esm-bundle/chai';
import { DomActions } from '../../../lib/dom-actions';
import { instantiateDomActions } from '../utils';

// must be run from dom-actions.prehide.empty-selector.html
describe('prehide', () => {
let domActions: DomActions;

beforeEach(() => {
// Given
domActions = instantiateDomActions();
});

it('returns false when selector is empty string', () => {
Copy link
Member

Choose a reason for hiding this comment

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

interesting, empty selector was never supposed to be passed here I think. In fact, right now it produces an invalid CSS in the style tag.
Invalid CSS is ignored by the browser, and we don't pass empty selectors anyways, so it's not a big deal. But we should clean it up some day, and handle empty selectors in this method.

// Given
expect(document.getElementById('visible').checkVisibility({ checkOpacity: true })).to.be.true; // establish baseline to prevent false positive
expect(document.querySelector('style#autoconsent-prehide')).to.be.null; // check that style element does not yet exist

// When
const result = domActions.prehide('');

// Then
expect(result).to.be.false;
expect(document.getElementById('visible').checkVisibility({ checkOpacity: true })).to.be.true;
expect(document.querySelector('style#autoconsent-prehide')).not.to.be.null; // check that style element was created
});
});
12 changes: 12 additions & 0 deletions tests-wtr/dom-actions/prehide/dom-actions.prehide.preexisting-element.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<html>
<body>
<script type="module">
import { runTests } from '@web/test-runner-mocha';

runTests(async () => {
await import('./dom-actions.prehide.preexisting-element');
});
</script>
<div id="visible">Here is some visible content!</div>
</body>
</html>
28 changes: 28 additions & 0 deletions tests-wtr/dom-actions/prehide/dom-actions.prehide.preexisting-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { expect } from '@esm-bundle/chai';
import { instantiateDomActions } from '../utils';
import { DomActions } from '../../../lib/dom-actions';

// must be run from dom-actions.prehide.preexisting-element.html
describe('prehide', () => {
let domActions: DomActions;

beforeEach(() => {
// Given
domActions = instantiateDomActions();
});

it('prehides preexisting element by selector', async () => {
// Given
expect(document.getElementById('visible').checkVisibility({ checkOpacity: true })).to.be.true; // establish baseline to prevent false positive
expect(document.querySelector('style#autoconsent-prehide')).to.be.null; // check that style element does not yet exist

// When
const result = domActions.prehide('#visible');

// Then
expect(result).to.be.true;

expect(document.getElementById('visible').checkVisibility({ checkOpacity: true })).to.be.false;
expect(document.querySelector('style#autoconsent-prehide')).not.to.be.null; // check that style element was created
});
});
Loading