// enable Angular debug info
const reloadWithDebugInfo = ClientFunction(() => {
    const angular = (window as any).angular;
    if (angular) {
        angular.reloadWithDebugInfo();
    }
});
await reloadWithDebugInfo();

// get object from angularjs scope
const getCustomObject = ClientFunction( () => {
    const $ = (window as any).jQuery;
    const scope = $("selector").scope();
    // inspect, in dev tools, the scope object todiscover available objects
    // tslint:disable-next-line:no-console
    console.log("scope: ", scope);
    return scope.xxx;
});
const myObject = await getCustomObject();

// assert for a count value
// see http://devexpress.github.io/testcafe/example/
const selector = Selector("select#preferred-interface option")
    .with({visibilityCheck: true});
await t
    .expect(selector.count).eql(3, {timeout: 5000});

// assert the existence of a selector
// see http://devexpress.github.io/testcafe/example/
const preferredInterfaceElement = "select#preferred-interface";
const selector = Selector(preferredInterfaceElement)
    .find("option")
    .withExactText("JavaScript API");
await t
    .expect(selector.exists)
        .ok(
            `The element '${preferredInterfaceElement}' has no option named 'JavaScript API'`,
            {timeout: 5000},
        );

// Client-side ajax request
// client-side function used for sending the ajax request
const send = ClientFunction( (req: any) => {
    return new Promise( (resolve) => {
        const json: string = JSON.stringify(req);
        const $ = (window as any).jQuery;
        $.ajax({
            contentType: "application/json; charset=utf-8",
            data: json,
            dataType: "json",
            type: "POST",
            url: "https://reqres.in/api/users",
        })
        .always( (httpResponse: XMLHttpRequest) => {
            if (httpResponse && httpResponse.getAllResponseHeaders ===undefined) {
                resolve(httpResponse);
                return;
            }
            resolve({
                responseHeaders: httpResponse.getAllResponseHeaders(),
                responseText: httpResponse.responseText,
                status: httpResponse.status,
                statusText: httpResponse.statusText,
            });
        });
    });
});
// request object that will be posted to the backend server
const request = {
    firstName: "john",
    lastName: "Doe",
    requestTime: Date(),
};
// send request and get response
const response: XMLHttpRequest | any = await send(request);

// you need to import {ClientFunction} from "testcafe";
const getBrowserUserAgent = ClientFunction(() => navigator.userAgent.toString());
const userAgent = await getBrowserUserAgent();

// you need to import {ClientFunction} from "testcafe";
// this sample will get the details of a selected input
// see http://devexpress.github.io/testcafe/example/
// <label for="windows">
//     <input type="radio" name="os" id="windows" value="Windows">
//     Windows
// </label>
const inputSelector = Selector('label[for="windows"] input');
const getInputDetails = ClientFunction((selector: Selector) => {
    return new Promise( (resolve) => {
        const element: any = selector();
        // check, in developper tools, what are the available properties in element
        // tslint:disable-next-line:no-console
        console.log("element:", element);
        resolve({
            checked: element.checked,
            disabled: element.disabled,
            id: element.id,
            name: element.name,
            type: element.type,
            value: element.value,
        });
    });
});
const inputDetails = await getInputDetails(inputSelector);

// you need to import {ClientFunction} from 'testcafe';
// get style attribute of a Selector
// see http://devexpress.github.io/testcafe/example/
const getStyleAttributeOf = ClientFunction((selector: Selector) => {
    const element = selector();
    return element.getAttribute('style');
});

const field = Selector('div#slider > span');
const styles = await getStyleAttributeOf(field) || '';
console.log(`styles = '${styles}'`);

// you need to import {ClientFunction} from 'testcafe';
// get style attribute of a Selector
// see http://devexpress.github.io/testcafe/example/
const setStyleAttributeOf = ClientFunction((selector: Selector, styleValue: string) => {
    const element: any = selector();
    element.setAttribute('style', styleValue);
});

const field = Selector('div#slider > span');
const newStyles = 'left: 50%;';
await setStyleAttributeOf(field, newStyles);

// you need to import {ClientFunction} from "testcafe";
const getWindowState = ClientFunction(() => ({
    height:      window.innerHeight,
    isMaximized: window.outerWidth >= window.screen.availWidth && window.outerHeight >=window.screen.availHeight,
    width:       window.innerWidth,
}));
const windowState = await getWindowState();

// you need to import {ClientFunction} from "testcafe";
const stopWatch = {
    elapsedTimeInMilliseconds: ClientFunction(() => Date.now() - (window as any).startTime),
    start: ClientFunction(() => (window as any).startTime = Date.now()),
};
await stopWatch.start();
// place here the code to instrument,
const elapsed = await stopWatch.elapsedTimeInMilliseconds();
await t.expect(elapsed).lt(1000);

// you need to import {ClientFunction} from "testcafe";
const getLocalStorageValueByKey = ClientFunction((key: string) => {
    return new Promise( (resolve) => {
        const result = localStorage.getItem(key);
        resolve(result);
    });
});
const value = await getLocalStorageValueByKey("mykey");

// you need to import {ClientFunction} from "testcafe";
const setLocalStorage = ClientFunction((key: string, value: string) => {
    return new Promise( (resolve, reject) => {
        try {
            localStorage.setItem(key, value);
            resolve();
        } catch (error) {
            reject(error);
        }
    });
});
await setLocalStorage("mykey", "myValue");

// you need to import {ClientFunction} from "testcafe";
// this sample will scroll to a label
// see http://devexpress.github.io/testcafe/example/
// <label for="windows">
//     <input type="radio" name="os" id="windows" value="Windows">
//     Windows
// </label>
const inputSelector = Selector('label[for="windows"]');
const scrollToElement = ClientFunction((selector: Selector, offset: {x: number, y: number}) => {
    return new Promise( (resolve) => {
        const element: any = selector();
        if (element && element.scrollIntoView) {
            element.scrollIntoView();
        }
        // do a small shift up and left
        if (window && window.scrollBy && offset) {
            window.scrollBy(offset.x, offset.y);
        }
        resolve();
    });
});
await scrollToElement(inputSelector, {x: 20, y: -20});

// you need to import {ClientFunction} from "testcafe";
// this sample will replace a checkbox label
// see http://devexpress.github.io/testcafe/example/
// <label for="windows">
//     <input type="radio" name="os" id="windows" value="Windows">
//     Windows
// </label>
const mySelector = Selector('label[for="windows"]');
const setLabel = ClientFunction((selector: Selector, value: string) => {
    const element: any = selector();
    // check, in developper tools, what are the available properties in element
    // tslint:disable-next-line:no-console
    console.log("element:", element);
    element.firstElementChild.nextSibling.replaceWith(value);
});
await setLabel(mySelector, "Windows 10");

// see http://devexpress.github.io/testcafe/example/
const input = Selector('input#developer-name[type="text"]');
await t // copy paste a text in an input box and press tab
    .setTestSpeed(0.7)
    .hover(input)
    .expect(input.hasAttribute("disabled")).notOk({timeout: 5000})
    .click(input)
    .typeText(input, "john doe", {replace: true, paste: true})
    .pressKey("tab");

// Ensure field is ready before clicking on it
// see http://devexpress.github.io/testcafe/example/
const field = Selector('input#developer-name[type="text"]');
await t
    .expect(field.with({visibilityCheck: true}).exists)
    .ok({timeout: 5000})
    .hover(field)
    .expect(field.hasAttribute('disabled'))
    .notOk({timeout: 5000});

// get all hidden inputs
// see http://devexpress.github.io/testcafe/example/
const inputs = Selector("input");
const hiddenInputs =  inputs.filterHidden(); // v0.19.0
await t.expect(hiddenInputs.count).eql(1);
console.log(`first hiddenInput is '${await hiddenInputs.nth(0).id}'`);

// get all visible inputs
// see http://devexpress.github.io/testcafe/example/
const inputs = Selector("input");
const visibleInputs = inputs.filterVisible(); // v0.19.0
await t.expect(visibleInputs.count).eql(11);
console.log(`first visibleInputs is '${await visibleInputs.nth(0).id}'`);

fixture("My Fixture")
    .page("http://myurl");

fixture("My Fixture")
    .page("http://myurl")
    .before(async (ctx) => {
        // inject in the fixture context any object you want to share beetween tests
        ctx.config = config;
    })
    .beforeEach(async (t) => {
        // inject in the test context any input data needed to run the test
        t.ctx.inputData = inputData;
        // put here all actions that are common to all tests
});

// get the selected option
// see http://devexpress.github.io/testcafe/example/
const select = Selector("select#preferred-interface");
const selectedOption = select
        .find("option")
            .filter((node) => {
                const option = node as HTMLOptionElement;
                if (option && option.selected) {
                    return true;
                }
                return false;
            })
            .nth(0);
const selectedOptionContent = await  selectedOption.textContent;

import "testcafe";
import {ClientFunction, Selector} from "testcafe";

// iterate over selected checkboxes
// see http://devexpress.github.io/testcafe/example/
const selectedCheckboxes = Selector('input[type="checkbox"]')
    // select all checboxes whose name value is in a set of predefined values
    .withAttribute("name", /custom-name|remote|re-using|background|CI|analysis/)
        .filter((node) => {
            const checkbox = node as HTMLInputElement;
            if (checkbox && checkbox.checked) {
                return true;
            }
            return false;
        });
const checkedCount = await selectedCheckboxes.count;
const checkedIds = [];
for (let i = 0; i < checkedCount; i++) {
    checkedIds.push(await selectedCheckboxes.nth(i).id);
}
// now you can make your business check from the checkedIds array

// see http://devexpress.github.io/testcafe/example/
// select a radio button by it's input value
const radioButtonValue = "Linux"; // the value to search
const radioButton = Selector('input[type="radio"]')
    .withAttribute("name", "os") // select all radio buttons within the group named 'os'
        .filter((node) => {
            const button = node as HTMLInputElement;
            if (button && button.value === radioButtonValue) {
                return true;
            }
            return false;
        }, {radioButtonValue})
        .nth(0);
await t
    .hover(radioButton)
    .expect(radioButton.hasAttribute("disabled")).notOk({timeout: 5000})
    .click(radioButton)
    .pressKey("tab");

// select first non-empty option
const selector = Selector("select").nth(0);
const firstNonEmptyOption = selector
    .find("option")
        .filter((node) => {
            const option = node as HTMLOptionElement;
            if (option && option.innerText && option.innerText.trim() !== "") {
                return true;
            }
            return false;
        })
        .nth(0);
await t
    .hover(selector)
    .click(selector)
    .click(firstNonEmptyOption);

// see http://devexpress.github.io/testcafe/example/
const select = Selector("select#preferred-interface");
await t // select the first option and press tab
    .setTestSpeed(0.7)
    .hover(select)
    .expect(select.hasAttribute("disabled")).notOk({timeout: 5000})
    .click(select)
    .click(select
        .find("option")
        .nth(0))
    .pressKey("tab");

// see http://devexpress.github.io/testcafe/example/
const select = Selector("select#preferred-interface");
await t // select the last option and press tab
    .setTestSpeed(0.7)
    .hover(select)
    .expect(select.hasAttribute("disabled")).notOk({timeout: 5000})
    .click(select)
    .click(select
        .find("option")
        .nth(-1))
    .pressKey("tab");

/**
 * waiting for selector stability
 * @param {number} timeout : amount of time in milliseconds during which a selector property must be stable
 */
export function wait(timeout: number) {
    return {
         until: (selector: Selector) => {
            return {
                /**
                 * exists property of selector
                 */
                exists:  {
                    /**
                     * wait until exists property of selector is stable
                     */
                    isStable: async (): Promise<void> => {
                        const interval = 100;
                        const elapsedTimeMaxValue = timeout * 3;
                        let stabilityElapsedTime = 0;
                        let previousValue = "";
                        let elapsedTime = 0;
                        while (true) {
                            await t.wait(interval);
                            const currentValue = (await selector.exists).toString();
                            // tslint:disable-next-line:no-console
                            console.log(`Selector exists property evaluates to '${currentValue}'`);
                            if (currentValue !== previousValue) {
                                stabilityElapsedTime = 0;
                            }
                            if (currentValue === previousValue) {
                                stabilityElapsedTime += interval;
                            }
                            previousValue = currentValue;
                            elapsedTime += interval;
                            if (stabilityElapsedTime > timeout) {
                                // tslint:disable-next-line:no-console
                                console.log(`Now it is safe to check if selector exists`);
                                return;
                            }
                            if (elapsedTime > elapsedTimeMaxValue) {
                                // tslint:disable-next-line:no-console
                                console.log(`Selector is unstable`);
                                return;
                            }
                        }
                    },
                },
            };
        },
    };
}