/// <reference types="Cypress" />

import PagesInfo from "../../support/pagesInfo";
const pagesInfo = new PagesInfo();

describe('Product detail', function() {
    describe('Picture / Image', function() {
        it('Shows placeholder image when the product has no image.', function() {
            cy.request('GET', '/testapi/v1/products/productsWithoutImage').then(function(response) {
                expect(response.body.data).to.have.length.above(1, 'The test api must return at least 1 product WITHOUT an image');
                let firstProduct = response.body.data[0];
                cy.log(firstProduct);
                cy.visit(pagesInfo.getByName('productDetail').locations.nl + firstProduct.translation.slug);
                cy.get('[data-test="productable-image"]').invoke('attr', 'src').should('contain', 'placeholder');
            })
        });
    });

    describe('Price', function() {
        it('Price inc and ex vat is shown', function() {
            cy.request('GET', '/testapi/v1/products/index').then(function(response) {
                expect(response.body.data).to.have.length.above(1, 'The test api must return at least 1 product');
                let firstProduct = response.body.data[0];
                cy.visit(pagesInfo.getByName('productDetail').locations.nl + firstProduct.translation.slug);
                cy.get('[data-test="price-inc"]').should('have.text', '€' + firstProduct.price_inc_formatted)
                cy.get('[data-test="price-ex"]').should('have.text', '€' + firstProduct.price_ex_formatted + ' ex btw')
            })
        });
    });

    describe('Quantity control', function() {
        it('Quantity can be changed by using the keyboard', function() {
            cy.request('GET', '/testapi/v1/products/index').then(function(response) {
                expect(response.body.data).to.have.length.above(1, 'The test api must return at least 1 product');
                let firstProduct = response.body.data[0];
                cy.visit(pagesInfo.getByName('productDetail').locations.nl + firstProduct.translation.slug);
                cy.get('[data-test="whole"]').should('have.value', '1')
                cy.get('[data-test="whole"]').type('{backspace}2');
                cy.get('[data-test="whole"]').should('have.value', '2')
                cy.get('[data-test="whole"]').type('{backspace}1');
                cy.get('[data-test="whole"]').should('have.value', '1')
            })
        });

        it('Quantity can be changed by using up and down buttons', function() {
            cy.request('GET', '/testapi/v1/products/index').then(function(response) {
                expect(response.body.data).to.have.length.above(1, 'The test api must return at least 1 product');
                let firstProduct = response.body.data[0];
                cy.visit(pagesInfo.getByName('productDetail').locations.nl + firstProduct.translation.slug);
                cy.get('[data-test="whole"]').should('have.value', '1')
                cy.get('[data-test="whole-up"]').click()
                cy.get('[data-test="whole"]').should('have.value', '2')
                cy.get('[data-test="whole-down"]').click()
                cy.get('[data-test="whole"]').should('have.value', '1')
            })
        });
    });
    describe('Shopping cart button', function() {
        it('Product can be added to the cart and has the correct quantity', function() {
            cy.clearCookies();

            cy.request('GET', '/testapi/v1/products/index').then(function(response) {
                expect(response.body.data).to.have.length.above(1, 'The test api must return at least 1 product')
                let firstProduct = response.body.data[0]
                cy.visit(pagesInfo.getByName('productDetail').locations.nl + firstProduct.translation.slug)
                cy.get('[data-test="whole"]').should('have.value', '1')
                cy.get('[data-test="whole-up"]').click().click()
                cy.get('[data-test="whole"]').should('have.value', '3')
                cy.get('[data-test="add-product-to-shoppingcart"]').click()

                cy.get('[data-test="cart-items"]').children().should('have.length', 1);
                cy.get('[data-test="cart-items"]').children().first().should('contain', firstProduct.translation.name)
                cy.get('[data-test="cart-items"]').children().first().get('[data-test="whole"]').should('have.value', '3');
            })
        });
    });
});