describe('Toggle display of child nodes', () => {
  beforeEach(() => {
    cy.exec('npm run db:seed')
    cy.intercept('GET', '/api/texts/0').as('getText')
    cy.intercept('GET', '/api/nodes/0').as('getNodes')
    cy.visit('/admin/texts/0')
    cy.wait('@getText')
    cy.wait('@getNodes')
  })

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

  it('shows a toggle button on nodes that have children', () => {
    cy.get('#text-detail > ul > li')
      .first()
      .find('button.toggle-children')
      .should('exist')
  })

  it('does not show a toggle button on leaf nodes', () => {
    cy.get('#text-detail > ul > li > ul > li > ul > li')
      .first()
      .find('button.toggle-children')
      .should('not.exist')
  })

  it('root node children are visible on initial load', () => {
    cy.get('#text-detail > ul > li > ul > li')
      .first()
      .should('be.visible')
  })

  it('grandchildren are hidden on initial load', () => {
    cy.get('#text-detail > ul > li > ul > li > ul')
      .first()
      .should('not.be.visible')
  })

  it('clicking toggle button on a node shows its children', () => {
    cy.get('#text-detail > ul > li > ul > li')
      .first()
      .find('button.toggle-children')
      .click()
    cy.get('#text-detail > ul > li > ul > li > ul')
      .first()
      .should('be.visible')
  })

  it('clicking toggle button again hides children', () => {
    cy.get('#text-detail > ul > li > ul > li')
      .first()
      .find('button.toggle-children')
      .click()
    cy.get('#text-detail > ul > li > ul > li > ul')
      .first()
      .should('be.visible')
    cy.get('#text-detail > ul > li > ul > li')
      .first()
      .find('button.toggle-children')
      .click()
    cy.get('#text-detail > ul > li > ul > li > ul')
      .first()
      .should('not.be.visible')
  })
})