@wdio/image-comparison-core
Version:
Image comparison core module for @wdio/visual-service - WebdriverIO visual testing framework
200 lines (199 loc) • 10.4 kB
JavaScript
// @vitest-environment jsdom
import { describe, it, expect } from 'vitest';
import hideRemoveElements from './hideRemoveElements.js';
describe('hideRemoveElements', () => {
it('should be able to hide elements and put them back again', () => {
document.body.innerHTML =
'<div>' +
' <span id="id-1">Hello</span>' +
' <span id="id-2">Hello</span>' +
' <div>' +
' <span id="id-3">Hello</span>' +
' <span id="id-4">Hello</span>' +
' </div>' +
'</div>';
expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
hideRemoveElements({
hide: [document.querySelector('#id-1'), document.querySelector('#id-3')],
remove: [],
}, true);
expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
hideRemoveElements({
hide: [document.querySelector('#id-1'), document.querySelector('#id-3')],
remove: [],
}, false);
expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
});
it('should be able to hide elements and put them back again when an array of hidden elements is provided', () => {
document.body.innerHTML =
'<div>' +
' <span class="hide">Hello</span>' +
' <span class="hide">Hello</span>' +
' <div>' +
' <span id="id-3">Hello</span>' +
' <span class="hide">Hello</span>' +
' </div>' +
'</div>';
expect(document.querySelectorAll('.hide')[0].style.visibility).toMatchSnapshot();
expect(document.querySelectorAll('.hide')[1].style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
expect(document.querySelectorAll('.hide')[2].style.visibility).toMatchSnapshot();
hideRemoveElements({
hide: [[...document.querySelectorAll('.hide')]],
remove: [],
}, true);
expect(document.querySelectorAll('.hide')[0].style.visibility).toMatchSnapshot();
expect(document.querySelectorAll('.hide')[1].style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
expect(document.querySelectorAll('.hide')[2].style.visibility).toMatchSnapshot();
hideRemoveElements({
hide: [[...document.querySelectorAll('.hide')]],
remove: [],
}, false);
expect(document.querySelectorAll('.hide')[0].style.visibility).toMatchSnapshot();
expect(document.querySelectorAll('.hide')[1].style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
expect(document.querySelectorAll('.hide')[2].style.visibility).toMatchSnapshot();
});
it('should be able to remove elements and put them back again', () => {
document.body.innerHTML =
'<div>' +
' <span id="id-1">Hello</span>' +
' <span id="id-2">Hello</span>' +
' <div>' +
' <span id="id-3">Hello</span>' +
' <span id="id-4">Hello</span>' +
' </div>' +
'</div>';
expect(document.querySelector('#id-2').style.display).toMatchSnapshot();
expect(document.querySelector('#id-4').style.display).toMatchSnapshot();
hideRemoveElements({
hide: [],
remove: [document.querySelector('#id-2'), document.querySelector('#id-4')],
}, true);
expect(document.querySelector('#id-2').style.display).toMatchSnapshot();
expect(document.querySelector('#id-4').style.display).toMatchSnapshot();
hideRemoveElements({
remove: [document.querySelector('#id-2'), document.querySelector('#id-4')],
hide: [],
}, false);
expect(document.querySelector('#id-2').style.display).toMatchSnapshot();
expect(document.querySelector('#id-4').style.display).toMatchSnapshot();
});
it('should be able to remove elements and put them back again when an array of to be removed elements is provided', () => {
document.body.innerHTML =
'<div>' +
' <span class="remove">Hello</span>' +
' <span class="remove">Hello</span>' +
' <div>' +
' <span id="id-3">Hello</span>' +
' <span class="remove">Hello</span>' +
' </div>' +
'</div>';
expect(document.querySelectorAll('.remove')[0].style.display).toMatchSnapshot();
expect(document.querySelectorAll('.remove')[1].style.display).toMatchSnapshot();
expect(document.querySelector('#id-3').style.display).toMatchSnapshot();
expect(document.querySelectorAll('.remove')[2].style.display).toMatchSnapshot();
hideRemoveElements({
remove: [[...document.querySelectorAll('.remove')]],
hide: [],
}, true);
expect(document.querySelectorAll('.remove')[0].style.display).toMatchSnapshot();
expect(document.querySelectorAll('.remove')[1].style.display).toMatchSnapshot();
expect(document.querySelector('#id-3').style.display).toMatchSnapshot();
expect(document.querySelectorAll('.remove')[2].style.display).toMatchSnapshot();
hideRemoveElements({
remove: [[...document.querySelectorAll('.remove')]],
hide: [],
}, false);
expect(document.querySelectorAll('.remove')[0].style.display).toMatchSnapshot();
expect(document.querySelectorAll('.remove')[1].style.display).toMatchSnapshot();
expect(document.querySelector('#id-3').style.display).toMatchSnapshot();
expect(document.querySelectorAll('.remove')[2].style.display).toMatchSnapshot();
});
it('should be able to find and hide single element based on xpath', () => {
document.body.innerHTML =
'<div>' +
' <span id="id-1">Hello</span>' +
' <span id="id-2">Hello</span>' +
' <div>' +
' <span id="id-3">Hello</span>' +
' <span id="id-4">Hello</span>' +
' </div>' +
'</div>';
expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
hideRemoveElements({
hide: [{ selector: "//span[@id='id-1']" }, { selector: "//span[@id='id-3']" }],
remove: [],
}, true);
expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
});
it('should be able to find and hide elements based on xpath', () => {
document.body.innerHTML =
'<div>' +
' <span id="id-1">Hello</span>' +
' <span id="id-2">Hello</span>' +
' <div>' +
' <span id="id-3">Hello</span>' +
' <span id="id-4">Hello</span>' +
' </div>' +
'</div>';
expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-2').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-4').style.visibility).toMatchSnapshot();
hideRemoveElements({
hide: [[{ selector: '//span' }]],
remove: [],
}, true);
expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-2').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-4').style.visibility).toMatchSnapshot();
});
it('should be able to find and hide a single element based on a css selector', () => {
document.body.innerHTML =
'<div>' +
' <span id="id-1">Hello</span>' +
' <span id="id-2">Hello</span>' +
' <div>' +
' <span id="id-3">Hello</span>' +
' <span class="hide">Hello</span>' +
' </div>' +
'</div>';
expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-2').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
expect(document.querySelector('.hide').style.visibility).toMatchSnapshot();
hideRemoveElements({
hide: [{ selector: '.hide' }],
remove: [],
}, true);
expect(document.querySelector('#id-1').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-2').style.visibility).toMatchSnapshot();
expect(document.querySelector('#id-3').style.visibility).toMatchSnapshot();
expect(document.querySelector('.hide').style.visibility).toMatchSnapshot();
});
it('should be able to find and hide elements based on a css selector', () => {
document.body.innerHTML =
'<div>' +
' <span class="hide">Hello</span>' +
' <span class="hide">Hello</span>' +
' <div>' +
' <span class="hide">Hello</span>' +
' <span class="hide">Hello</span>' +
' </div>' +
'</div>';
expect(document.querySelectorAll('.hide')).toMatchSnapshot();
hideRemoveElements({
hide: [[{ selector: '.hide' }, { selector: '.hide' }]],
remove: [],
}, true);
expect(document.querySelectorAll('.hide')).toMatchSnapshot();
});
});