const puppeteer = require('puppeteer')
const {
    registerPizzeriaWithOneProductAndGoToHome,
} = require('./helpers/helpers')

jest.setTimeout(15000)

const editProductButtonSelector = '.card-container .edit-product-btn img'
const editProductModalFormSelector = '.pizzap-modal [name="edit-product-form"]'
const nameInputSelector = editProductModalFormSelector + ' input[name="name"]'
const descriptionInputSelector = editProductModalFormSelector + ' input[name="description"]'
const priceInputSelector = editProductModalFormSelector + ' input[name="price"]'
const imageURLInputSelector = editProductModalFormSelector + ' input[name="imageURL"]'

const modalCloseButton = '.pizzap-modal [name="modal-close-btn"]'

describe('Pizzeria product edition', () => {
    let browser
    let page

    beforeEach(async () => {
        browser = await puppeteer.launch({headless: false})
        page = await browser.newPage()
    })

    afterEach(async () => {
        await browser.close()
    })

    it('given a modal form with edited fields when it is closed with the close button then no changes are made to the product', async () => {
        await registerPizzeriaWithOneProductAndGoToHome(page)

        // await page.waitForSelector('.card-container')
        const originalProductCard = await page.$eval('.card-container', element => element.innerHTML)
        
        await page.waitForSelector(editProductButtonSelector)
        await page.click(editProductButtonSelector)

        await page.waitForSelector(editProductModalFormSelector)
        await page.type(nameInputSelector, 'aaa')
        await page.type(descriptionInputSelector, 'bbbb')
        await page.type(priceInputSelector, '9999')
        await page.type(imageURLInputSelector, 'http://change.com/image.jpg')

        await page.click(modalCloseButton)

        const currentProductCard = await page.$eval('.card-container', element => element.innerHTML)
        expect(originalProductCard).toEqual(currentProductCard)
    })

})

async function expectInputValue(page, inputSelector, expectedValue) {
    const actualValue = await page.$eval(inputSelector, input => input.value)
    expect(actualValue).toEqual(expectedValue.toString())
}
