expect-webdriverio 5.3.2 → 5.3.3

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

@@ -0,0 +1,171 @@
+import { vi, test, describe, expect } from 'vitest';
+import { $ } from '@wdio/globals';
+import { getExpectMessage, getReceived } from '../../__fixtures__/utils.js';
+import { toHaveHeight } from '../../../src/matchers/element/toHaveHeight.js';
+vi.mock('@wdio/globals');
+describe('toHaveHeight', () => {
+    test('wait for success', async () => {
+        const el = await $('sel');
+        el._attempts = 2;
+        el._size = function (property) {
+            if (this._attempts > 0) {
+                this._attempts--;
+                return null;
+            }
+            if (property === 'width') {
+                return 50;
+            }
+            if (property === 'height') {
+                return 32;
+            }
+            return { width: 50, height: 32 };
+        };
+        const beforeAssertion = vi.fn();
+        const afterAssertion = vi.fn();
+        const result = await toHaveHeight.call({}, el, 32, { beforeAssertion, afterAssertion });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(0);
+        expect(beforeAssertion).toBeCalledWith({
+            matcherName: 'toHaveHeight',
+            expectedValue: 32,
+            options: { beforeAssertion, afterAssertion }
+        });
+        expect(afterAssertion).toBeCalledWith({
+            matcherName: 'toHaveHeight',
+            expectedValue: 32,
+            options: { beforeAssertion, afterAssertion },
+            result
+        });
+    });
+    test('wait but failure', async () => {
+        const el = await $('sel');
+        el._size = function () {
+            throw new Error('some error');
+        };
+        await expect(() => toHaveHeight.call({}, el, 10, {}))
+            .rejects.toThrow('some error');
+    });
+    test('success on the first attempt', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._size = function (property) {
+            this._attempts++;
+            if (property === 'width') {
+                return 50;
+            }
+            if (property === 'height') {
+                return 32;
+            }
+            return { width: 50, height: 32 };
+        };
+        const result = await toHaveHeight.call({}, el, 32, {});
+        expect(result.message()).toEqual('Expect $(`sel`) to have height\n\nExpected: 32\nReceived: serializes to the same string');
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('no wait - failure', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._size = function (property) {
+            this._attempts++;
+            if (property === 'width') {
+                return 50;
+            }
+            if (property === 'height') {
+                return 32;
+            }
+            return { width: 50, height: 32 };
+        };
+        const result = await toHaveHeight.call({}, el, 10, { wait: 0 });
+        expect(result.message()).toEqual('Expect $(`sel`) to have height\n\nExpected: 10\nReceived: 32');
+        expect(result.pass).toBe(false);
+        expect(el._attempts).toBe(1);
+    });
+    test('no wait - success', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._size = function (property) {
+            this._attempts++;
+            if (property === 'width') {
+                return 50;
+            }
+            if (property === 'height') {
+                return 32;
+            }
+            return { width: 50, height: 32 };
+        };
+        const result = await toHaveHeight.call({}, el, 32, { wait: 0 });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('gte and lte', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._size = function (property) {
+            this._attempts++;
+            if (property === 'width') {
+                return 50;
+            }
+            if (property === 'height') {
+                return 32;
+            }
+            return { width: 50, height: 32 };
+        };
+        const result = await toHaveHeight.call({}, el, { gte: 31, lte: 33 }, { wait: 0 });
+        expect(result.message()).toEqual('Expect $(`sel`) to have height\n\nExpected: ">= 31 && <= 33"\nReceived: 32');
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('not - failure', async () => {
+        const el = await $('sel');
+        el._size = function (property) {
+            if (property === 'width') {
+                return 50;
+            }
+            if (property === 'height') {
+                return 32;
+            }
+            return { width: 50, height: 32 };
+        };
+        const result = await toHaveHeight.call({}, el, 32, { wait: 0 });
+        const received = getReceived(result.message());
+        expect(received).not.toContain('not');
+        expect(result.pass).toBe(true);
+    });
+    test("should return false if sizes don't match", async () => {
+        const el = await $('sel');
+        el._size = function (property) {
+            if (property === 'width') {
+                return 50;
+            }
+            if (property === 'height') {
+                return 32;
+            }
+            return { width: 50, height: 32 };
+        };
+        const result = await toHaveHeight.bind({})(el, 10, { wait: 1 });
+        expect(result.pass).toBe(false);
+    });
+    test('should return true if sizes match', async () => {
+        const el = await $('sel');
+        el._size = function (property) {
+            if (property === 'width') {
+                return 50;
+            }
+            if (property === 'height') {
+                return 32;
+            }
+            return { width: 50, height: 32 };
+        };
+        const result = await toHaveHeight.bind({})(el, 32, { wait: 1 });
+        expect(result.pass).toBe(true);
+    });
+    test('message', async () => {
+        const el = await $('sel');
+        el._size = function () {
+            return null;
+        };
+        const result = await toHaveHeight.call({}, el, 50);
+        expect(getExpectMessage(result.message())).toContain('to have height');
+    });
+});

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

@@ -0,0 +1,54 @@
+import { vi, test, describe, expect, beforeEach } from 'vitest';
+import { $ } from '@wdio/globals';
+import { getExpectMessage, getExpected, getReceived } from '../../__fixtures__/utils.js';
+import { toHaveHref } from '../../../src/matchers/element/toHaveHref.js';
+vi.mock('@wdio/globals');
+describe('toHaveHref', () => {
+    let el;
+    beforeEach(async () => {
+        el = await $('sel');
+        el.getAttribute = vi.fn().mockImplementation((attribute) => {
+            if (attribute === 'href') {
+                return 'https://www.example.com';
+            }
+            return null;
+        });
+    });
+    test('success when contains', async () => {
+        const beforeAssertion = vi.fn();
+        const afterAssertion = vi.fn();
+        const result = await toHaveHref.call({}, el, 'https://www.example.com', { beforeAssertion, afterAssertion });
+        expect(result.pass).toBe(true);
+        expect(beforeAssertion).toBeCalledWith({
+            matcherName: 'toHaveHref',
+            expectedValue: 'https://www.example.com',
+            options: { beforeAssertion, afterAssertion }
+        });
+        expect(afterAssertion).toBeCalledWith({
+            matcherName: 'toHaveHref',
+            expectedValue: 'https://www.example.com',
+            options: { beforeAssertion, afterAssertion },
+            result
+        });
+    });
+    describe('failure when doesnt contain', () => {
+        let result;
+        beforeEach(async () => {
+            result = await toHaveHref.call({}, el, 'an href');
+        });
+        test('failure', () => {
+            expect(result.pass).toBe(false);
+        });
+        describe('message shows correctly', () => {
+            test('expect message', () => {
+                expect(getExpectMessage(result.message())).toContain('to have attribute href');
+            });
+            test('expected message', () => {
+                expect(getExpected(result.message())).toContain('an href');
+            });
+            test('received message', () => {
+                expect(getReceived(result.message())).toContain('https://www.example.com');
+            });
+        });
+    });
+});

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

@@ -0,0 +1,54 @@
+import { vi, test, describe, expect, beforeEach } from 'vitest';
+import { $ } from '@wdio/globals';
+import { getExpectMessage, getExpected, getReceived } from '../../__fixtures__/utils.js';
+import { toHaveId } from '../../../src/matchers/element/toHaveId.js';
+vi.mock('@wdio/globals');
+describe('toHaveId', () => {
+    let el;
+    beforeEach(async () => {
+        el = await $('sel');
+        el.getAttribute = vi.fn().mockImplementation((attribute) => {
+            if (attribute === 'id') {
+                return 'test id';
+            }
+            return null;
+        });
+    });
+    test('success', async () => {
+        const result = await toHaveId.call({}, el, 'test id');
+        expect(result.pass).toBe(true);
+    });
+    describe('failure', () => {
+        let result;
+        const beforeAssertion = vi.fn();
+        const afterAssertion = vi.fn();
+        beforeEach(async () => {
+            result = await toHaveId.call({}, el, 'an attribute', { beforeAssertion, afterAssertion });
+        });
+        test('failure', () => {
+            expect(beforeAssertion).toBeCalledWith({
+                matcherName: 'toHaveId',
+                expectedValue: 'an attribute',
+                options: { beforeAssertion, afterAssertion }
+            });
+            expect(result.pass).toBe(false);
+            expect(afterAssertion).toBeCalledWith({
+                matcherName: 'toHaveId',
+                expectedValue: 'an attribute',
+                options: { beforeAssertion, afterAssertion },
+                result
+            });
+        });
+        describe('message shows correctly', () => {
+            test('expect message', () => {
+                expect(getExpectMessage(result.message())).toContain('to have attribute id');
+            });
+            test('expected message', () => {
+                expect(getExpected(result.message())).toContain('an attribute');
+            });
+            test('received message', () => {
+                expect(getReceived(result.message())).toContain('test id');
+            });
+        });
+    });
+});

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

@@ -0,0 +1,109 @@
+import { vi, test, describe, expect } from 'vitest';
+import { $ } from '@wdio/globals';
+import { getExpectMessage, getReceived } from '../../__fixtures__/utils.js';
+import { toHaveSize } from '../../../src/matchers/element/toHaveSize.js';
+vi.mock('@wdio/globals');
+describe('toHaveSize', () => {
+    test('wait for success', async () => {
+        const el = await $('sel');
+        el._attempts = 2;
+        el._size = function () {
+            if (this._attempts > 0) {
+                this._attempts--;
+                return null;
+            }
+            return { width: 32, height: 32 };
+        };
+        const beforeAssertion = vi.fn();
+        const afterAssertion = vi.fn();
+        const result = await toHaveSize.call({}, el, { width: 32, height: 32 }, { beforeAssertion, afterAssertion });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(0);
+        expect(beforeAssertion).toBeCalledWith({
+            matcherName: 'toHaveSize',
+            expectedValue: { width: 32, height: 32 },
+            options: { beforeAssertion, afterAssertion }
+        });
+        expect(afterAssertion).toBeCalledWith({
+            matcherName: 'toHaveSize',
+            expectedValue: { width: 32, height: 32 },
+            options: { beforeAssertion, afterAssertion },
+            result
+        });
+    });
+    test('wait but failure', async () => {
+        const el = await $('sel');
+        el._size = function () {
+            throw new Error('some error');
+        };
+        await expect(() => toHaveSize.call({}, el, { width: 32, height: 32 }, {}))
+            .rejects.toThrow('some error');
+    });
+    test('success on the first attempt', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._size = function () {
+            this._attempts++;
+            return { width: 32, height: 32 };
+        };
+        const result = await toHaveSize.call({}, el, { width: 32, height: 32 }, {});
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('no wait - failure', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        el._size = function () {
+            this._attempts++;
+            return { width: 32, height: 32 };
+        };
+        const result = await toHaveSize.call({}, el, { width: 15, height: 32 }, { 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._size = function () {
+            this._attempts++;
+            return { width: 32, height: 32 };
+        };
+        const result = await toHaveSize.call({}, el, { width: 32, height: 32 }, { wait: 0 });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('not - failure', async () => {
+        const el = await $('sel');
+        el._size = function () {
+            return { width: 32, height: 32 };
+        };
+        const result = await toHaveSize.call({}, el, { width: 32, height: 32 }, { wait: 0 });
+        const received = getReceived(result.message());
+        expect(received).not.toContain('not');
+        expect(result.pass).toBe(true);
+    });
+    test("should return false if sizes don't match", async () => {
+        const el = await $('sel');
+        el._size = function () {
+            return { width: 32, height: 32 };
+        };
+        const result = await toHaveSize.bind({})(el, { width: 15, height: 32 }, { wait: 1 });
+        expect(result.pass).toBe(false);
+    });
+    test('should return true if sizes match', async () => {
+        const el = await $('sel');
+        el._size = function () {
+            return { width: 32, height: 32 };
+        };
+        const result = await toHaveSize.bind({})(el, { width: 32, height: 32 }, { wait: 1 });
+        expect(result.pass).toBe(true);
+    });
+    test('message', async () => {
+        const el = await $('sel');
+        el._size = function () {
+            return null;
+        };
+        const result = await toHaveSize.call({}, el, { width: 32, height: 32 });
+        expect(getExpectMessage(result.message())).toContain('to have size');
+    });
+});

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

@@ -0,0 +1,199 @@
+import { vi, test, describe, expect } from 'vitest';
+import { $ } from '@wdio/globals';
+import { getExpectMessage, getReceived } from '../../__fixtures__/utils.js';
+import { toHaveStyle } from '../../../src/matchers/element/toHaveStyle.js';
+vi.mock('@wdio/globals');
+describe('toHaveStyle', () => {
+    let el;
+    const mockStyle = {
+        'font-family': 'Faktum',
+        'font-size': '26px',
+        'color': '#000'
+    };
+    test('wait for success', async () => {
+        el = await $('sel');
+        el._attempts = 2;
+        let counter = 0;
+        el.getCSSProperty = vi.fn().mockImplementation((property) => {
+            if (el._attempts > 0) {
+                counter++;
+                if (counter === Object.keys(mockStyle).length) {
+                    counter = 0;
+                    el._attempts--;
+                }
+                return { value: 'Wrong Value' };
+            }
+            return { value: mockStyle[property] };
+        });
+        const beforeAssertion = vi.fn();
+        const afterAssertion = vi.fn();
+        const result = await toHaveStyle.call({}, el, mockStyle, { ignoreCase: true, beforeAssertion, afterAssertion });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(0);
+        expect(beforeAssertion).toBeCalledWith({
+            matcherName: 'toHaveStyle',
+            expectedValue: mockStyle,
+            options: { ignoreCase: true, beforeAssertion, afterAssertion }
+        });
+        expect(afterAssertion).toBeCalledWith({
+            matcherName: 'toHaveStyle',
+            expectedValue: mockStyle,
+            options: { ignoreCase: true, beforeAssertion, afterAssertion },
+            result
+        });
+    });
+    test('wait but failure', async () => {
+        el = await $('sel');
+        el._attempts = 0;
+        let counter = 0;
+        el.getCSSProperty = vi.fn().mockImplementation(() => {
+            counter++;
+            if (counter === Object.keys(mockStyle).length) {
+                counter = 0;
+                el._attempts++;
+            }
+            throw new Error('some error');
+        });
+        await expect(() => toHaveStyle.call({}, el, mockStyle, { ignoreCase: true }))
+            .rejects.toThrow('some error');
+    });
+    test('success on the first attempt', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        let counter = 0;
+        el.getCSSProperty = vi.fn().mockImplementation((property) => {
+            counter++;
+            if (counter === Object.keys(mockStyle).length) {
+                counter = 0;
+                el._attempts++;
+            }
+            return { value: mockStyle[property] };
+        });
+        const result = await toHaveStyle.call({}, el, mockStyle, { ignoreCase: true });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('no wait - failure', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        let counter = 0;
+        el.getCSSProperty = vi.fn().mockImplementation(() => {
+            counter++;
+            if (counter === Object.keys(mockStyle).length) {
+                counter = 0;
+                el._attempts++;
+            }
+            return { value: 'Wrong Value' };
+        });
+        const result = await toHaveStyle.call({}, el, mockStyle, { wait: 0 });
+        expect(result.pass).toBe(false);
+        expect(el._attempts).toBe(1);
+    });
+    test('no wait - success', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        let counter = 0;
+        el.getCSSProperty = vi.fn().mockImplementation((property) => {
+            counter++;
+            if (counter === Object.keys(mockStyle).length) {
+                counter = 0;
+                el._attempts++;
+            }
+            return { value: mockStyle[property] };
+        });
+        const result = await toHaveStyle.call({}, el, mockStyle, { wait: 0 });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('not - failure', async () => {
+        const el = await $('sel');
+        el.getCSSProperty = vi.fn().mockImplementation((property) => {
+            return { value: mockStyle[property] };
+        });
+        const result = await toHaveStyle.call({ isNot: true }, el, mockStyle, { wait: 0 });
+        const received = getReceived(result.message());
+        expect(received).not.toContain('not');
+        expect(result.pass).toBe(true);
+    });
+    test('should return false if styles dont match', async () => {
+        const el = await $('sel');
+        el.getCSSProperty = vi.fn().mockImplementation((property) => {
+            return { value: mockStyle[property] };
+        });
+        const wrongStyle = {
+            'font-family': 'Incorrect Font',
+            'font-size': '100px',
+            'color': '#fff'
+        };
+        const result = await toHaveStyle.bind({ isNot: true })(el, wrongStyle, { wait: 1 });
+        expect(result.pass).toBe(false);
+    });
+    test('should return true if styles match', async () => {
+        const el = await $('sel');
+        el.getCSSProperty = vi.fn().mockImplementation((property) => {
+            return { value: mockStyle[property] };
+        });
+        const result = await toHaveStyle.bind({ isNot: true })(el, mockStyle, { wait: 1 });
+        expect(result.pass).toBe(true);
+    });
+    test('message shows correctly', async () => {
+        const el = await $('sel');
+        el.getCSSProperty = vi.fn().mockImplementation(() => {
+            return { value: 'Wrong Value' };
+        });
+        const result = await toHaveStyle.call({}, el, 'WebdriverIO');
+        expect(getExpectMessage(result.message())).toContain('to have style');
+    });
+    test('success if style matches with ignoreCase', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        let counter = 0;
+        const actualStyle = {
+            'font-family': 'Faktum',
+            'font-size': '26px',
+            'color': '#fff'
+        };
+        el.getCSSProperty = vi.fn().mockImplementation((property) => {
+            counter++;
+            if (counter === Object.keys(mockStyle).length) {
+                counter = 0;
+                el._attempts++;
+            }
+            return { value: actualStyle[property] };
+        });
+        const alteredCaseStyle = {
+            'font-family': 'FaKtum',
+            'font-size': '26px',
+            'color': '#FFF'
+        };
+        const result = await toHaveStyle.call({}, el, alteredCaseStyle, { ignoreCase: true });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+    test('success if style matches with trim', async () => {
+        const el = await $('sel');
+        el._attempts = 0;
+        let counter = 0;
+        const actualStyle = {
+            'font-family': '   Faktum   ',
+            'font-size': '   26px   ',
+            'color': '    #fff     '
+        };
+        el.getCSSProperty = vi.fn().mockImplementation((property) => {
+            counter++;
+            if (counter === Object.keys(mockStyle).length) {
+                counter = 0;
+                el._attempts++;
+            }
+            return { value: actualStyle[property] };
+        });
+        const alteredSpaceStyle = {
+            'font-family': 'Faktum',
+            'font-size': '26px',
+            'color': '#fff'
+        };
+        const result = await toHaveStyle.call({}, el, alteredSpaceStyle, { trim: true });
+        expect(result.pass).toBe(true);
+        expect(el._attempts).toBe(1);
+    });
+});