declare var by: any;
declare var browser: any;
declare var element: any;

function login() {

    let usernameInput = element(by.css("input[name="username"]"));
    let passwordInput = element(by.css("input[name="password"]"));
    let submit = element(by.css("button[type="submit"]"));

    usernameInput.sendKeys("Username");
    passwordInput.sendKeys("welcome");

    submit.click();
}

describe("my-App", function () {
    let page: WebPage;

    beforeEach(() => {
        page = new WebPage();
    });

    // If I remove this it doesnt work
    it("If we provide credentials to the login form we should be authenticated and login", () => {
        page.navigateTo();
        login();
        expect(element(by.css("parent-element")).isPresent()).toBe(true);
    });

    it("should open conversation-component when clicking on a message", () => {
        page.navigateTo();
        // Do login here when the first it() is removed.
        // login();

        element(by.css("parent-element")).isPresent().then(function () {
            let message = element.all(by.css(".child-message")).first()
            message.click();
        });

        /*
        == not working either ==
        browser.wait(element(by.css("parent-component")).isPresent(), 5000).then(function () {
            element.all(by.css(".child-message")).first().click();
        });
        */

    })

    expect(element(by.css("conversation-component")).isPresent()).toBe(true);
});

beforeAll(() => {
    page.navigateTo();
    login();
});

describe("my-App", function () {

    let page: WebPage;
    page = new WebPage();

    beforeAll(() => {
        page.navigateTo();
        login();
    });

it('should open conversation-component when clicking on a message',() => {
    page.navigateTo();
    //browser.sleep(10000); //Uncomment this if the below solution does not work.
    var EC = protractor.ExpectedConditions;
    let message = $$('.child-message').first();
    var isClickable = EC.elementToBeClickable(message);
    browser.wait(isClickable,10000);
    message.click();
});