import { Selector, test } from 'testcafe'

class TodoPage {
    constructor() {
        this.input = Selector('.new-todo')
        this.editInput = Selector('.edit')
        this.todoItems = Selector('.todo-list li')
        this.firstTodoItem = Selector('.todo-list li:nth-child(1)')
        this.completedTodos = Selector('.completed')
        this.completeAll = Selector('.toggle-all')
        this.deleteCompleted = Selector('.clear-completed')
        this.showActiveLink = Selector('[href="#/active"]')
        this.showCompletedLink = Selector('[href="#/completed"]')
    }
}

const todoPage = new TodoPage()

// fixture('Test TodoMVC App')
//   .page('http://todomvc.com/examples/vanillajs/')


// Test å lage en todo
// Hint:
//  - todoPage.input er feltet du skriver inn i
//  - todoPage.todoItems er listen over todos
test('Create todo', async t => {
    // == Skriv test her ==

    await t
        .expect(todoPage.firstTodoItem.textContent)
        .contains('Dette er min første todo!')
})

// Test å redigere en todo ved å velge første todo
// Hint:
//  - Gjennomfør operasjonen med tast og museklikk først
test('Edit todo', async t => {
    await t
        .typeText(todoPage.input, 'Jeg liker mandager')
        .pressKey('enter')

    // == Skriv test her ==

    await t
        .expect(todoPage.firstTodoItem.textContent)
        .contains('Jeg liker fredager')
})


// Test å slette en Todo
// Hint:
//  - Du må finne selector for Slette-ikonet for å kunne klikke på det
test('Delete todo', async t => {
    await t
        .typeText(todoPage.input, 'Klem en sau')
        .pressKey('enter')

        .typeText(todoPage.input, 'Klem en tiger')
        .pressKey('enter')

    await t
        .expect(todoPage.todoItems.count)
        .eql(2)

    // == Skriv test her ==

    await t
        .expect(todoPage.todoItems.count)
        .eql(1)

    await t
        .expect(todoPage.firstTodoItem.textContent)
        .contains('Klem en tiger')
})

// Gjennomfør 1 Todo og skriv en test som verifiserer at Todo er streket over
// Hint:
//  - Du må finne og klikke på elementet som toggler
//  - Testen vil kunne skrives som t.expect(<test>).ok()
test('Complete one todo', async t => {
    await t
        .typeText(todoPage.input, 'Lær javascript')
        .pressKey('enter')

        .typeText(todoPage.input, 'Avinstaller ICQ')
        .pressKey('enter')

    // == Skriv test her ==
})


// Test at Active/Completed visning fungerer
// Hint:
//  - Du kan sette 1 Todo til aktive og en til fullfør først
test('Show active/completed todos', async t => {
    await t
        .typeText(todoPage.input, 'Lær javascript')
        .pressKey('enter')

        .typeText(todoPage.input, 'Avinstaller ICQ')
        .pressKey('enter')

    // == Skriv test her ==
})