import { render, fireEvent } from '@@/test/kalimotxo-test-utils'
import KaFixedCallModule from './KaFixedCallModule.vue'

describe('KaFixedCallModule should', () => {
  test('Show the opened content if module is opened', async () => {
    const { getByText } = renderComponent()
    await fireEvent.click(getByText('Asistente virtual'))
    expect(getByText('Contactar con un Asesor Virtual')).toBeInTheDocument()
  })
  test('Show the closed content if module is closed', async () => {
    const { queryByText, getByText, getByRole } = renderComponent()
    expect(
      queryByText('Contactar con un Asesor Virtual'),
    ).not.toBeInTheDocument()
    await fireEvent.click(getByText('Asistente virtual'))
    expect(getByText('Contactar con un Asesor Virtual')).toBeInTheDocument()
    await fireEvent.click(getByRole('button', { name: '' })) // No name button is same that the close button
    expect(
      queryByText('Contactar con un Asesor Virtual'),
    ).not.toBeInTheDocument()
  })
})

function renderComponent() {
  const view = render(KaFixedCallModule, {
    props: {
      eventLabel: 'irrelevant',
      eventCategory: 'irrelevant',
    },
    // FIXME: stubs do not work, for whatever reason.
    // This will be rendering the real child components
    // stubs: {
    //   'opened-call-module': { template: '<div>opened</div>' },
    //   'closed-call-module': { template: '<div>closed</div>' },
    // },
  })
  return { ...view }
}