Repository: ionic-team/ionic-framework
File: core/src/components/accordion/test/accordion.spec.ts (TypeScript)

Code before:

it('should not animate when initial value is set before load', async () => {
  const page = await newSpecPage({
    components: [Item, Accordion, AccordionGroup],
  });

  const accordionGroup = page.doc.createElement('ion-accordion-group');
  accordionGroup.innerHTML = `
    <ion-accordion value="first">
      <ion-item slot="header">Label</ion-item>
      <div slot="content">Content</div>
    </ion-accordion>
    <ion-accordion value="second">
      <ion-item slot="header">Label</ion-item>
      <div slot="content">Content</div>
    </ion-accordion>
  `;

  const details: AccordionGroupChangeEventDetail[] = [];
  accordionGroup.addEventListener('ionValueChange', (event: CustomEvent<AccordionGroupChangeEventDetail>) => {
    details.push(event.detail);
  });

  accordionGroup.value = 'first';
  page.body.appendChild(accordionGroup);

  await page.waitForChanges();

  expect(details[0]?.initial).toBe(true);

  const firstAccordion = accordionGroup.querySelector('ion-accordion[value="first"]')!;

  expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
  expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
});

it('should not animate when initial value is set after load', async () => {
  const page = await newSpecPage({
    components: [Item, Accordion, AccordionGroup],
  });

  const accordionGroup = page.doc.createElement('ion-accordion-group');
  accordionGroup.innerHTML = `
    <ion-accordion value="first">
      <ion-item slot="header">Label</ion-item>
      <div slot="content">Content</div>
    </ion-accordion>
    <ion-accordion value="second">
      <ion-item slot="header">Label</ion-item>
      <div slot="content">Content</div>
    </ion-accordion>

Review comment (suggestion):
I didn't realize that spec tests capture these kinds of classes. I would have expected it to be false all the time since `expect` would run after the animation ended. I'll have to keep this in mind for future tests. Thanks!

Code after:
it('should not animate when initial value is set before load', async () => {
  const page = await newSpecPage({
    components: [Item, Accordion, AccordionGroup],
  });

  const accordionGroup = page.doc.createElement('ion-accordion-group');
  accordionGroup.innerHTML = `
    <ion-accordion value="first">
      <ion-item slot="header">Label</ion-item>
      <div slot="content">Content</div>
    </ion-accordion>
    <ion-accordion value="second">
      <ion-item slot="header">Label</ion-item>
      <div slot="content">Content</div>
    </ion-accordion>
  `;

  accordionGroup.value = 'first';
  page.body.appendChild(accordionGroup);

  await page.waitForChanges();

  const firstAccordion = accordionGroup.querySelector('ion-accordion[value="first"]')!;

  expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
  expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
});

it('should not animate when initial value is set after load', async () => {
  const page = await newSpecPage({
    components: [Item, Accordion, AccordionGroup],
  });

  const accordionGroup = page.doc.createElement('ion-accordion-group');
  accordionGroup.innerHTML = `
    <ion-accordion value="first">
      <ion-item slot="header">Label</ion-item>
      <div slot="content">Content</div>
    </ion-accordion>
    <ion-accordion value="second">
      <ion-item slot="header">Label</ion-item>
      <div slot="content">Content</div>
    </ion-accordion>
  `;

  page.body.appendChild(accordionGroup);
  await page.waitForChanges();

  accordionGroup.value = 'first';
  await page.waitForChanges();