describe('Create plan modal on the home page', () => {
    beforeEach(() => {
        cy.exec('npm run db:seed')
        cy.intercept('GET', '/api/texts').as('getTexts')
        cy.visit('/home')
        cy.wait('@getTexts')
    })

    afterEach(() => {
        cy.exec('npm run db:wipe')
    })

    it('shows a "Create plan" button on each text', () => {
        cy.get('#texts-list li').each((textItem) => {
            cy.wrap(textItem).find('button.create-plan').should('exist')
        })
    })

    it('hides the create plan modal by default', () => {
        cy.get('#create-plan-modal').should('not.be.visible')
    })

    it('shows the modal when clicking "Create plan"', () => {
        cy.get('#texts-list li').first()
            .find('button.create-plan').click()
        cy.get('#create-plan-modal').should('be.visible')
    })

    it('modal contains name, date start, date end, save, cancel', () => {
        cy.get('#texts-list li').first()
            .find('button.create-plan').click()
        cy.get('#create-plan-modal input.plan-name').should('be.visible')
        cy.get('#create-plan-modal input.plan-date-start')
            .should('be.visible')
        cy.get('#create-plan-modal input.plan-date-end')
            .should('be.visible')
        cy.get('#create-plan-modal button.save-plan').should('be.visible')
        cy.get('#create-plan-modal button.cancel-plan').should('be.visible')
    })
})