// accordion.js
 
class Accordion {
  constructor(obj) {
    this.accordion = obj;
    this.summary = obj.querySelector('.accordion__title');
  }
 
  init() {
    const open = this.accordion.hasAttribute('open');
    if (open) {
      this.accordion.classList.add('accordion--open');
    }
    this.summary.addEventListener('focus', () => {
      this.handleFocus();
    });
    this.summary.addEventListener('blur', () => {
      this.handleBlur();
    });
    this.summary.addEventListener('click', () => {
      this.handleClick();
    });
  }
 
  handleFocus() {
    // Focus class for styling.
    this.accordion.classList.add('has-focus');
  }
 
  handleBlur() {
    // Focus class for styling.
    this.accordion.classList.remove('has-focus');
  }
 
  handleClick() {
    const open = this.accordion.classList.contains('accordion--open');
    this.summary.setAttribute('aria-expanded', !open);
    this.summary.setAttribute('aria-pressed', !open);
    this.accordion.classList.toggle('accordion--open');
  }
}
 
export default { Accordion };

// __tests__/accordion.js
import { render, fireEvent, Twig } from 'twig-testing-library'
 
// Add Twig extensions - see the Twig.js wiki.
Twig.extendFilter("backwords", function(value) {
  return value.split(" ").reverse().join(" ");
});
 
describe('Accordion toggling', () => {
  it('Can be rendered open, and then collapsed on click', async () => {
    // Rendering is async, so you need to use await.
    const { container, getByText } = await render(
    // Path to twig template.
    'accordion.twig',
    // Template variables/context. 
    {
      title: 'Accordion title',
      open: true,
    }, 
    // Namespace support
    {
      'my_namespace': './some/path'
    });
    const accordionElement = container.querySelector('.accordion');
    const accordion = new Accordion.Accordion(accordionElement);
    accordion.init();
    // Snapshot support via jest.
    expect(accordionElement).toMatchSnapshot('Initial render');
    expect(accordionElement.classList.contains('accordion--open')).toBe(true);
    fireEvent.click(getByText('Accordion title'));
    expect(accordionElement).toMatchSnapshot('First collapse');
    expect(accordionElement.classList.contains('accordion--open')).toBe(false);
  })
})