expect-webdriverio 5.3.2 → 5.3.3

package/lib/test/matchers/element/toHaveElementClass.test.js

@@ -0,0 +1,125 @@
+import { $ } from '@wdio/globals';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { getExpectMessage, getExpected, getReceived } from '../../__fixtures__/utils.js';
+import { toHaveElementClass } from '../../../src/matchers/element/toHaveClass.js';
+vi.mock('@wdio/globals');
+describe('toHaveElementClass', () => {
+    let el;
+    beforeEach(async () => {
+        el = await $('sel');
+        el.getAttribute = vi.fn().mockImplementation((attribute) => {
+            if (attribute === 'class') {
+                return 'some-class another-class yet-another-class';
+            }
+            return null;
+        });
+    });
+    test('success when class name is present', async () => {
+        const beforeAssertion = vi.fn();
+        const afterAssertion = vi.fn();
+        const result = await toHaveElementClass.call({}, el, 'some-class', { beforeAssertion, afterAssertion });
+        expect(result.pass).toBe(true);
+        expect(beforeAssertion).toBeCalledWith({
+            matcherName: 'toHaveElementClass',
+            expectedValue: 'some-class',
+            options: { beforeAssertion, afterAssertion }
+        });
+        expect(afterAssertion).toBeCalledWith({
+            matcherName: 'toHaveElementClass',
+            expectedValue: 'some-class',
+            options: { beforeAssertion, afterAssertion },
+            result
+        });
+    });
+    test('success when including surrounding spaces and asymmetric matcher', async () => {
+        const result = await toHaveElementClass.call({}, el, expect.stringContaining('some-class '));
+        expect(result.pass).toBe(true);
+        const result2 = await toHaveElementClass.call({}, el, expect.stringContaining(' another-class '));
+        expect(result2.pass).toBe(true);
+    });
+    test('success with RegExp when class name is present', async () => {
+        const result = await toHaveElementClass.call({}, el, /sOmE-cLaSs/i);
+        expect(result.pass).toBe(true);
+    });
+    test('success if array matches with class', async () => {
+        const result = await toHaveElementClass.call({}, el, ['some-class', 'yet-another-class']);
+        expect(result.pass).toBe(true);
+    });
+    test('failure if the classes do not match', async () => {
+        const result = await toHaveElementClass.call({}, el, 'someclass', { message: 'Not found!' });
+        expect(result.pass).toBe(false);
+        expect(getExpectMessage(result.message())).toContain('Not found!');
+    });
+    test('failure if array does not match with class', async () => {
+        const result = await toHaveElementClass.call({}, el, ['someclass', 'anotherclass']);
+        expect(result.pass).toBe(false);
+    });
+    describe('options', () => {
+        test('should fail when class is not a string', async () => {
+            el.getAttribute = vi.fn().mockImplementation(() => {
+                return null;
+            });
+            const result = await toHaveElementClass.call({}, el, 'some-class');
+            expect(result.pass).toBe(false);
+        });
+        test('should pass when trimming the attribute', async () => {
+            el.getAttribute = vi.fn().mockImplementation(() => {
+                return '  some-class  ';
+            });
+            const result = await toHaveElementClass.call({}, el, 'some-class', { trim: true });
+            expect(result.pass).toBe(true);
+        });
+        test('should pass when ignore the case', async () => {
+            const result = await toHaveElementClass.call({}, el, 'sOme-ClAsS', { ignoreCase: true });
+            expect(result.pass).toBe(true);
+        });
+        test('should pass if containing', async () => {
+            const result = await toHaveElementClass.call({}, el, 'some', { containing: true });
+            expect(result.pass).toBe(true);
+        });
+        test('should pass if array ignores the case', async () => {
+            const result = await toHaveElementClass.call({}, el, ['sOme-ClAsS', 'anOther-ClAsS'], { ignoreCase: true });
+            expect(result.pass).toBe(true);
+        });
+    });
+    describe('failure when class name is not present', () => {
+        let result;
+        beforeEach(async () => {
+            result = await toHaveElementClass.call({}, el, 'test');
+        });
+        test('failure', () => {
+            expect(result.pass).toBe(false);
+        });
+        describe('message shows correctly', () => {
+            test('expect message', () => {
+                expect(getExpectMessage(result.message())).toContain('to have class');
+            });
+            test('expected message', () => {
+                expect(getExpected(result.message())).toContain('test');
+            });
+            test('received message', () => {
+                expect(getReceived(result.message())).toContain('some-class another-class');
+            });
+        });
+    });
+    describe('failure with RegExp when class name is not present', () => {
+        let result;
+        beforeEach(async () => {
+            result = await toHaveElementClass.call({}, el, /WDIO/);
+        });
+        test('failure', () => {
+            expect(result.pass).toBe(false);
+        });
+        describe('message shows correctly', () => {
+            test('expect message', () => {
+                expect(getExpectMessage(result.message())).toContain('to have class');
+            });
+            test('expected message', () => {
+                expect(getExpected(result.message())).toContain('/WDIO/');
+            });
+            test('received message', () => {
+                expect(getReceived(result.message())).toContain('some-class another-class');
+            });
+        });
+    });
+});

package/lib/test/matchers/element/toHaveElementProperty.test.js

@@ -0,0 +1,111 @@
+import { vi, test, describe, expect, beforeEach } from 'vitest';
+import { $ } from '@wdio/globals';
+import { getExpectMessage, getExpected, getReceived } from '../../__fixtures__/utils.js';
+import { toHaveElementProperty } from '../../../src/matchers/element/toHaveElementProperty.js';
+vi.mock('@wdio/globals');
+describe('toHaveElementProperty', () => {
+    test('ignore case of stringified value', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._value = function () {
+            this._attempts++;
+            return 'iphone';
+        };
+        const beforeAssertion = vi.fn();
+        const afterAssertion = vi.fn();
+        const result = await toHaveElementProperty.call({}, el, 'property', 'iPhone', { wait: 0, ignoreCase: true, beforeAssertion, afterAssertion });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+        expect(beforeAssertion).toBeCalledWith({
+            matcherName: 'toHaveElementProperty',
+            expectedValue: ['property', 'iPhone'],
+            options: { wait: 0, ignoreCase: true, beforeAssertion, afterAssertion }
+        });
+        expect(afterAssertion).toBeCalledWith({
+            matcherName: 'toHaveElementProperty',
+            expectedValue: ['property', 'iPhone'],
+            options: { wait: 0, ignoreCase: true, beforeAssertion, afterAssertion },
+            result
+        });
+    });
+    test('assymeric match', async () => {
+        const el = await $('sel');
+        el._value = function () {
+            return 'iphone';
+        };
+        const result = await toHaveElementProperty.call({}, el, 'property', expect.stringContaining('phone'));
+        expect(result.pass).toBe(true);
+    });
+    test('should return false if values dont match', async () => {
+        const el = await $('sel');
+        el._value = function () {
+            return 'iphone';
+        };
+        const result = await toHaveElementProperty.bind({ isNot: true })(el, 'property', 'foobar', { wait: 1 });
+        expect(result.pass).toBe(false);
+    });
+    test('should return true if values match', async () => {
+        const el = await $('sel');
+        el._value = function () {
+            return 'iphone';
+        };
+        const result = await toHaveElementProperty.bind({ isNot: true })(el, 'property', 'iphone', { wait: 1 });
+        expect(result.pass).toBe(true);
+    });
+    test('with RegExp should return true if values match', async () => {
+        const el = await $('sel');
+        el._value = function () {
+            return 'iphone';
+        };
+        const result = await toHaveElementProperty.call({}, el, 'property', /iPhOnE/i);
+        expect(result.pass).toBe(true);
+    });
+    test('should return false for null input', async () => {
+        const el = await $('sel');
+        el._value = function () {
+            return undefined;
+        };
+        const result = await toHaveElementProperty.bind({ isNot: true })(el, 'property', 'iphone', { wait: 1 });
+        expect(result.pass).toBe(false);
+    });
+    test('should return true if value is null', async () => {
+        const el = await $('sel');
+        el._value = function () {
+            return 'Test Value';
+        };
+        const result = await toHaveElementProperty.bind({ isNot: true })(el, 'property', null);
+        expect(result.pass).toBe(true);
+    });
+    test('should return false if value is non-string', async () => {
+        const el = await $('sel');
+        el._value = function () {
+            return 5;
+        };
+        const result = await toHaveElementProperty.bind({ isNot: true })(el, 'property', 'Test Value');
+        expect(result.pass).toBe(false);
+    });
+    describe('failure with RegExp when value does not match', () => {
+        let result;
+        beforeEach(async () => {
+            const el = await $('sel');
+            el._value = function () {
+                return 'iphone';
+            };
+            result = await toHaveElementProperty.call({}, el, 'property', /WDIO/);
+        });
+        test('failure', () => {
+            expect(result.pass).toBe(false);
+        });
+        describe('message shows correctly', () => {
+            test('expect message', () => {
+                expect(getExpectMessage(result.message())).toContain('to have property');
+            });
+            test('expected message', () => {
+                expect(getExpected(result.message())).toContain('/WDIO/');
+            });
+            test('received message', () => {
+                expect(getReceived(result.message())).toContain('iphone');
+            });
+        });
+    });
+});

package/lib/test/matchers/element/toHaveHTML.test.js

@@ -0,0 +1,291 @@
+import { vi, test, describe, expect, beforeEach } from 'vitest';
+import { $ } from '@wdio/globals';
+import { getExpectMessage, getReceived, getExpected } from '../../__fixtures__/utils.js';
+import { toHaveHTML } from '../../../src/matchers/element/toHaveHTML.js';
+vi.mock('@wdio/globals');
+describe('toHaveHTML', () => {
+    test('wait for success', async () => {
+        const el = await $('sel');
+        el._attempts = 2;
+        el._html = function () {
+            if (this._attempts > 0) {
+                this._attempts--;
+                return '';
+            }
+            return '<div>foo</div>';
+        };
+        const beforeAssertion = vi.fn();
+        const afterAssertion = vi.fn();
+        const result = await toHaveHTML.call({}, el, '<div>foo</div>', { ignoreCase: true, beforeAssertion, afterAssertion });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(0);
+        expect(beforeAssertion).toBeCalledWith({
+            matcherName: 'toHaveHTML',
+            expectedValue: '<div>foo</div>',
+            options: { ignoreCase: true, beforeAssertion, afterAssertion }
+        });
+        expect(afterAssertion).toBeCalledWith({
+            matcherName: 'toHaveHTML',
+            expectedValue: '<div>foo</div>',
+            options: { ignoreCase: true, beforeAssertion, afterAssertion },
+            result
+        });
+    });
+    test('wait but failure', async () => {
+        const el = await $('sel');
+        el._html = function () {
+            throw new Error('some error');
+        };
+        await expect(() => toHaveHTML.call({}, el, '<div>foo</div>', { ignoreCase: true }))
+            .rejects.toThrow('some error');
+    });
+    test('success on the first attempt', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._html = function () {
+            this._attempts++;
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.call({}, el, '<div>foo</div>', { ignoreCase: true });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('no wait - failure', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._html = function () {
+            this._attempts++;
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.call({}, el, 'foo', { wait: 0 });
+        expect(result.pass).toBe(false);
+        expect(el._attempts).toBe(1);
+    });
+    test('no wait - success', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._html = function () {
+            this._attempts++;
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.call({}, el, '<div>foo</div>', { wait: 0 });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('not - failure', async () => {
+        const el = await $('sel');
+        el._html = function () {
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.call({ isNot: true }, el, '<div>foo</div>', { wait: 0 });
+        const received = getReceived(result.message());
+        expect(received).not.toContain('not');
+        expect(result.pass).toBe(true);
+    });
+    test("should return false if htmls don't match", async () => {
+        const el = await $('sel');
+        el._html = function () {
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.bind({ isNot: true })(el, 'foobar', { wait: 1 });
+        expect(result.pass).toBe(false);
+    });
+    test('should return true if htmls match', async () => {
+        const el = await $('sel');
+        el._html = function () {
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.bind({ isNot: true })(el, '<div>foo</div>', { wait: 1 });
+        expect(result.pass).toBe(true);
+    });
+    test('should return true if actual html + single replacer matches the expected html', async () => {
+        const el = await $('sel');
+        el._html = function () {
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.bind({})(el, '<div>bar</div>', { replace: ['foo', 'bar'] });
+        expect(result.pass).toBe(true);
+    });
+    test('should return true if actual html + replace (string) matches the expected html', async () => {
+        const el = await $('sel');
+        el._html = function () {
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.bind({})(el, '<div>bar</div>', { replace: [['foo', 'bar']] });
+        expect(result.pass).toBe(true);
+    });
+    test('should return true if actual html + replace (regex) matches the expected html', async () => {
+        const el = await $('sel');
+        el._html = function () {
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.bind({})(el, '<div>bar</div>', { replace: [[/foo/, 'bar']] });
+        expect(result.pass).toBe(true);
+    });
+    test('should return true if actual html starts with expected html', async () => {
+        const el = await $('sel');
+        el._html = function () {
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.bind({})(el, '<div>', { atStart: true });
+        expect(result.pass).toBe(true);
+    });
+    test('should return true if actual html ends with expected html', async () => {
+        const el = await $('sel');
+        el._html = function () {
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.bind({})(el, '</div>', { atEnd: true });
+        expect(result.pass).toBe(true);
+    });
+    test('should return true if actual html contains the expected html at the given index', async () => {
+        const el = await $('sel');
+        el._html = function () {
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.bind({})(el, 'iv>foo', { atIndex: 2 });
+        expect(result.pass).toBe(true);
+    });
+    test('should return true if actual html equals the expected html with includeSelectorTag set to false', async () => {
+        const el = await $('sel');
+        el._html = function (includeSelectorTag) {
+            return includeSelectorTag ? '<div><div>foo</div></div>' : '<div>foo</div>';
+        };
+        const result = await toHaveHTML.bind({})(el, '<div>foo</div>', { includeSelectorTag: false });
+        expect(result.pass).toBe(true);
+    });
+    test('should return true if actual html equals the expected html with includeSelectorTag set to false', async () => {
+        const el = await $('sel');
+        el._html = function (includeSelectorTag) {
+            return includeSelectorTag ? '<div><div>foo</div></div>' : '<div>foo</div>';
+        };
+        const result = await toHaveHTML.bind({})(el, '<div><div>foo</div></div>', {
+            includeSelectorTag: true,
+        });
+        expect(result.pass).toBe(true);
+    });
+    test('message', async () => {
+        const el = await $('sel');
+        el._html = function () {
+            return '';
+        };
+        const result = await toHaveHTML.call({}, el, '<div>foo</div>');
+        expect(getExpectMessage(result.message())).toContain('to have HTML');
+    });
+    test('success if array matches with html and ignoreCase', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._html = function () {
+            this._attempts++;
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.call({}, el, ['div', '<div>foo</div>'], { ignoreCase: true });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('success if array matches with html and trim', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._html = function () {
+            this._attempts++;
+            return '   <div>foo</div>   ';
+        };
+        const result = await toHaveHTML.call({}, el, ['div', '<div>foo</div>', 'toto'], { trim: true });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('success if array matches with html and replace (string)', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._html = function () {
+            this._attempts++;
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.call({}, el, ['div', '<div>foo</div>', 'toto'], {
+            replace: [['Web', 'Browser']],
+        });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('success if array matches with html and replace (regex)', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._html = function () {
+            this._attempts++;
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.call({}, el, ['div', '<div>foo</div>', 'toto'], {
+            replace: [[/Web/g, 'Browser']],
+        });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('success if array matches with html and multiple replacers and one of the replacers is a function', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._html = function () {
+            this._attempts++;
+            return '<div>FOO</div>';
+        };
+        const result = await toHaveHTML.call({}, el, ['div', '<p>foo</p>', 'toto'], {
+            replace: [
+                [/div/g, 'p'],
+                [/[A-Z]/g, (match) => match.toLowerCase()],
+            ],
+        });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('failure if array does not match with html', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._html = function () {
+            this._attempts++;
+            return '<div>foo</div>';
+        };
+        const result = await toHaveHTML.call({}, el, ['div', 'foo'], { wait: 1 });
+        expect(result.pass).toBe(false);
+        expect(el._attempts).toBe(1);
+    });
+    describe('with RegExp', () => {
+        let el;
+        beforeEach(async () => {
+            el = await $('sel');
+            el._html = vi.fn().mockImplementation(() => {
+                return 'This is example HTML';
+            });
+        });
+        test('success if match', async () => {
+            const result = await toHaveHTML.call({}, el, /ExAmplE/i);
+            expect(result.pass).toBe(true);
+        });
+        test('success if array matches with RegExp', async () => {
+            const result = await toHaveHTML.call({}, el, ['div', /ExAmPlE/i]);
+            expect(result.pass).toBe(true);
+        });
+        test('success if array matches with html', async () => {
+            const result = await toHaveHTML.call({}, el, ['This is example HTML', /Webdriver/i]);
+            expect(result.pass).toBe(true);
+        });
+        test('success if array matches with html and ignoreCase', async () => {
+            const result = await toHaveHTML.call({}, el, ['ThIs Is ExAmPlE HTML', /Webdriver/i], {
+                ignoreCase: true,
+            });
+            expect(result.pass).toBe(true);
+        });
+        test('failure if no match', async () => {
+            const result = await toHaveHTML.call({}, el, /Webdriver/i);
+            expect(result.pass).toBe(false);
+            expect(getExpectMessage(result.message())).toContain('to have HTML');
+            expect(getExpected(result.message())).toContain('/Webdriver/i');
+            expect(getReceived(result.message())).toContain('This is example HTML');
+        });
+        test('failure if array does not match with html', async () => {
+            const result = await toHaveHTML.call({}, el, ['div', /Webdriver/i]);
+            expect(result.pass).toBe(false);
+            expect(getExpectMessage(result.message())).toContain('to have HTML');
+            expect(getExpected(result.message())).toContain('/Webdriver/i');
+            expect(getExpected(result.message())).toContain('div');
+        });
+    });
+});