describe('guest authentication pages', () => {
  it('redirects the root route to login', () => {
    cy.visit('/')

    cy.location('pathname').should('equal', '/login')
  })

  it('shows the login form and links to signup', () => {
    cy.visit('/login')

    cy.get('h1').should('have.text', 'Welcome back')
    cy.get('label[for="login-email"]').should('have.text', 'Email address')
    cy.get('#login-email').should('have.attr', 'autocomplete', 'email')
    cy.get('label[for="login-password"]').should('have.text', 'Password')
    cy.get('#login-password').should('have.attr', 'autocomplete', 'current-password')
    cy.get('button[type="submit"]').should('have.text', 'Log in')

    cy.contains('a', 'Create an account').click()
    cy.location('pathname').should('equal', '/signup')
  })

  it('shows the signup form and links to login', () => {
    cy.visit('/signup')

    cy.get('h1').should('have.text', 'Start your journey')
    cy.get('label[for="signup-name"]').should('have.text', 'Full name')
    cy.get('#signup-name').should('have.attr', 'autocomplete', 'name')
    cy.get('label[for="signup-email"]').should('have.text', 'Email address')
    cy.get('#signup-email').should('have.attr', 'autocomplete', 'email')
    cy.get('label[for="signup-password"]').should('have.text', 'Password')
    cy.get('#signup-password').should('have.attr', 'autocomplete', 'new-password')
    cy.get('label[for="signup-password-confirmation"]').should(
      'have.text',
      'Confirm password',
    )
    cy.get('#signup-password-confirmation').should(
      'have.attr',
      'autocomplete',
      'new-password',
    )
    cy.get('button[type="submit"]').should('have.text', 'Create account')

    cy.contains('a', 'Log in').click()
    cy.location('pathname').should('equal', '/login')
  })

  it('keeps UI-only form submissions on their current route', () => {
    cy.visit('/login')
    cy.get('form').submit()
    cy.location('pathname').should('equal', '/login')

    cy.visit('/signup')
    cy.get('form').submit()
    cy.location('pathname').should('equal', '/signup')
  })

  it('fits the signup page within a mobile viewport', () => {
    cy.viewport(390, 844)
    cy.visit('/signup')

    cy.get('main').should('be.visible')
    cy.document().then((document) => {
      expect(document.documentElement.scrollWidth).to.be.at.most(
        document.documentElement.clientWidth,
      )
    })
  })
})