import VnLocation from 'src/components/common/VnLocation.vue';
describe.skip('<VnLocation />', () => {
    const location = {
        postcode: '46000',
        city: 'Valencia',
        province: { name: 'Province one' },
        country: { name: 'España' },
    };
    const defaultComponent = {
        props: {
            modelValue: 1234,
            location,
        },
    };
    const mountComponent = (obj = defaultComponent) => {
        cy.createWrapper(VnLocation, obj);
    };

    it('renders with default props', () => {
        mountComponent();
        cy.get('.q-field__label').should('contain', 'Location');
    });

    it('renders with location prop', () => {
        mountComponent();
        cy.get('.q-field__label').should('contain', 'Location');
        cy.get('.q-field__native').should(
            'have.value',
            '46000, Valencia(Province one), España'
        );
    });

    it('opens select dialog on click', () => {
        mountComponent();
        cy.get('.q-field__native').click();
        cy.get('.q-dialog').should('be.visible');
    });

    it('renders options correctly', () => {
        const options = [
            {
                code: '46000',
                town: 'Valencia',
                province: 'Province one',
                country: 'España',
            },
        ];
        mountComponent();
        cy.get('.q-field__native').click();
        cy.get('.q-item').should('have.length', options.length);
        cy.get('.q-item').first().should('contain', '46000');
        cy.get('.q-item').first().should('contain', 'Valencia(Province one)');
        cy.get('.q-item').first().should('contain', 'España');
    });

    it('emits update:model-value on selection', () => {
        mountComponent();
        cy.get('.q-field__native').click();
        cy.get('.q-item').first().click();
        cy.wrap(Cypress.vueWrapper.emitted('update:model-value')).should(
            'have.length',
            1
        );
    });

    it('renders CreateNewPostcode form', () => {
        mountComponent();
        cy.get('.q-field__native').click();
        cy.get('.q-dialog').should('be.visible');
        cy.get('.q-dialog').within(() => {
            cy.get('form').should('exist');
        });
    });
});