playwright-fluent/lib/actions/handle-actions/select-options-in-handle/tests/select-options-in-handle.chromium.test.js

Fluent API around playwright

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const path = tslib_1.__importStar(require("path"));
const playwright_1 = require("playwright");
const SUT = tslib_1.__importStar(require("../index"));
const index_1 = require("../index");
const get_all_options_of_handle_1 = require("../../get-all-options-of-handle");
describe('select options in handle', () => {
    let browser = undefined;
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    beforeEach(() => { });
    afterEach(async () => {
        if (browser) {
            await browser.close();
        }
    });
    test('should throw when selector handle is undefined - chromium', async () => {
        // Given
        browser = await playwright_1.chromium.launch({ headless: true });
        const browserContext = await browser.newContext({ viewport: null });
        const page = await browserContext.newPage();
        const url = `file:${path.join(__dirname, 'select-options-in-handle.common.test.html')}`;
        await page.goto(url);
        const selector = '#empty-input';
        const handle = undefined;
        // When
        // Then
        const expectedError = new Error("Cannot select options 'foobar' in '#empty-input' because selector was not found in DOM");
        await SUT.selectOptionsInHandle(handle, selector, ['foobar'], page, index_1.defaultSelectOptions).catch((error) => expect(error).toMatchObject(expectedError));
    });
    test('should throw when selector handle is null - chromium', async () => {
        // Given
        browser = await playwright_1.chromium.launch({ headless: true });
        const browserContext = await browser.newContext({ viewport: null });
        const page = await browserContext.newPage();
        const url = `file:${path.join(__dirname, 'select-options-in-handle.common.test.html')}`;
        await page.goto(url);
        const selector = '#empty-input';
        const handle = null;
        // When
        // Then
        const expectedError = new Error("Cannot select options 'foobar' in '#empty-input' because selector was not found in DOM");
        await SUT.selectOptionsInHandle(handle, selector, ['foobar'], page, index_1.defaultSelectOptions).catch((error) => expect(error).toMatchObject(expectedError));
    });
    test('should throw when selector is not a select - chromium', async () => {
        // Given
        browser = await playwright_1.chromium.launch({ headless: true });
        const browserContext = await browser.newContext({ viewport: null });
        const page = await browserContext.newPage();
        const url = `file:${path.join(__dirname, 'select-options-in-handle.common.test.html')}`;
        await page.goto(url);
        const selector = '#empty-input';
        const handle = await page.$(selector);
        // When
        // Then
        const expectedError = new Error("Cannot find any options in selector '#empty-input'");
        await SUT.selectOptionsInHandle(handle, selector, ['foobar'], page, index_1.defaultSelectOptions).catch((error) => expect(error).toMatchObject(expectedError));
    });
    test('should throw when select is disabled - chromium', async () => {
        // Given
        browser = await playwright_1.chromium.launch({ headless: true });
        const browserContext = await browser.newContext({ viewport: null });
        const page = await browserContext.newPage();
        const url = `file:${path.join(__dirname, 'select-options-in-handle.common.test.html')}`;
        await page.goto(url);
        const selector = '#disabled-select';
        const handle = await page.$(selector);
        // When
        // Then
        const expectedError = new Error("Cannot select options 'label 1' in '#disabled-select' because this selector is disabled");
        await SUT.selectOptionsInHandle(handle, selector, ['label 1'], page, {
            ...index_1.defaultSelectOptions,
            timeoutInMilliseconds: 2000,
        }).catch((error) => expect(error).toMatchObject(expectedError));
    });
    test('should throw when option is unknown - chromium', async () => {
        // Given
        browser = await playwright_1.chromium.launch({ headless: true });
        const browserContext = await browser.newContext({ viewport: null });
        const page = await browserContext.newPage();
        const url = `file:${path.join(__dirname, 'select-options-in-handle.common.test.html')}`;
        await page.goto(url);
        const selector = '#enabled-select';
        const handle = await page.$(selector);
        // When
        // Then
        const expectedError = new Error("Cannot select options 'foobar' in '#enabled-select' because this selector has only options ',label 1,label 2'");
        await SUT.selectOptionsInHandle(handle, selector, ['foobar'], page, {
            ...index_1.defaultSelectOptions,
            timeoutInMilliseconds: 2000,
        }).catch((error) => expect(error).toMatchObject(expectedError));
    });
    test('should throw when no option is given - chromium', async () => {
        // Given
        browser = await playwright_1.chromium.launch({ headless: true });
        const browserContext = await browser.newContext({ viewport: null });
        const page = await browserContext.newPage();
        const url = `file:${path.join(__dirname, 'select-options-in-handle.common.test.html')}`;
        await page.goto(url);
        const selector = '#enabled-select';
        const handle = await page.$(selector);
        // When
        // Then
        const expectedError = new Error("You must specify at least one option for selector '#enabled-select'");
        await SUT.selectOptionsInHandle(handle, selector, [], page, {
            ...index_1.defaultSelectOptions,
            timeoutInMilliseconds: 2000,
        }).catch((error) => expect(error).toMatchObject(expectedError));
    });
    test('should not throw when options are already selected in a disabled select - chromium', async () => {
        // Given
        browser = await playwright_1.chromium.launch({ headless: true });
        const browserContext = await browser.newContext({ viewport: null });
        const page = await browserContext.newPage();
        const url = `file:${path.join(__dirname, 'select-options-in-handle.common.test.html')}`;
        await page.goto(url);
        // When
        const selector = '#disabled-select';
        const labels = ['label 2', 'label 3'];
        const handle = await page.$(selector);
        await SUT.selectOptionsInHandle(handle, selector, labels, page, index_1.defaultSelectOptions);
        // Then
        expect(true).toBe(true);
    });
    test('should select option - chromium', async () => {
        // Given
        browser = await playwright_1.chromium.launch({ headless: true });
        const browserContext = await browser.newContext({ viewport: null });
        const page = await browserContext.newPage();
        const url = `file:${path.join(__dirname, 'select-options-in-handle.common.test.html')}`;
        await page.goto(url);
        // When
        const selector = '#enabled-select';
        const labels = ['label 1'];
        const handle = await page.$(selector);
        await SUT.selectOptionsInHandle(handle, selector, labels, page, index_1.defaultSelectOptions);
        // Then
        const options = await (0, get_all_options_of_handle_1.getAllOptionsOfHandle)(handle, selector);
        const selectedOption = options.find((o) => o.selected);
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        expect(selectedOption.label).toBe('label 1');
    });
    test('should select multiple options - chromium', async () => {
        // Given
        browser = await playwright_1.chromium.launch({ headless: true });
        const browserContext = await browser.newContext({ viewport: null });
        const page = await browserContext.newPage();
        const url = `file:${path.join(__dirname, 'select-options-in-handle.common.test.html')}`;
        await page.goto(url);
        // When
        const selector = '#multiple-select';
        const labels = ['label 1', 'label 2'];
        const handle = await page.$(selector);
        const optionsBefore = await (0, get_all_options_of_handle_1.getAllOptionsOfHandle)(handle, selector);
        await SUT.selectOptionsInHandle(handle, selector, labels, page, index_1.defaultSelectOptions);
        // Then
        const optionsAfter = await (0, get_all_options_of_handle_1.getAllOptionsOfHandle)(handle, selector);
        const selectedOptionsBefore = optionsBefore.filter((o) => o.selected).map((o) => o.label);
        const selectedOptionsAfter = optionsAfter.filter((o) => o.selected).map((o) => o.label);
        expect(`${selectedOptionsBefore}`).toBe('label 2,label 3');
        expect(`${selectedOptionsAfter}`).toBe('label 1,label 2');
    });
});