Repository: wagtail/wagtail
File: client/src/controllers/RevealController.test.js (JavaScript)

Code before:
      await Promise.resolve(document.querySelector('button').click());

      expect(allItemsVisible).toEqual(true);
      expect(getIconInfo()).toEqual(['icon icon-cross', '#icon-cross']);

      // confirm peeking is unset
      expect(
        document
          .querySelector('.w-breadcrumbs')
          .getAttribute('data-w-breadcrumbs-peeking-value'),
      ).toEqual('false');

      const previousHTML = document.querySelector('header').outerHTML;

      // mouseleave on peek target should not do anything now
      await Promise.resolve(
        document
          .querySelector('header')
          .dispatchEvent(new MouseEvent('mouseleave')),
      );

      expect(document.querySelector('header').outerHTML).toEqual(previousHTML);
    });
  });

  describe('save the expanded state of breadcrumbs to local storage', () => {
    beforeEach(async () => {
      jest.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {});
      jest.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {});
    });

    afterEach(() => {
      jest.restoreAllMocks();
    });

    it('should use the existing saved state, if opened, and expand on connect', async () => {
      localStorage.getItem.mockImplementation(() => 'opened');

      await setup(
        `
        <section class="w-breadcrumbs" data-controller="w-breadcrumbs" data-w-breadcrumbs-storage-key-value="header-expanded">
          <button aria-controls="my-content" aria-expanded="false" type="button" data-action="w-breadcrumbs#toggle" data-w-breadcrumbs-target="toggle">Toggle</button>
        </section>`,
        'w-breadcrumbs',
      );

      const toggleButton = document.querySelector('button');
      expect(toggleButton.getAttribute('aria-expanded')).toBe('true');

      await Promise.resolve(toggleButton.click());


Review comment (suggestion):
```suggestion
  describe('saving and retrieving the opened/closed state from local storage', () => {
```

Let's avoid the specific usage in the description if possible, instead focus on behaviour.

Code after:
      await Promise.resolve(document.querySelector('button').click());

      expect(allItemsVisible).toEqual(true);
      expect(getIconInfo()).toEqual(['icon icon-cross', '#icon-cross']);

      // confirm peeking is unset
      expect(
        document
          .querySelector('.w-breadcrumbs')
          .getAttribute('data-w-breadcrumbs-peeking-value'),
      ).toEqual('false');

      const previousHTML = document.querySelector('header').outerHTML;

      // mouseleave on peek target should not do anything now
      await Promise.resolve(
        document
          .querySelector('header')
          .dispatchEvent(new MouseEvent('mouseleave')),
      );

      expect(document.querySelector('header').outerHTML).toEqual(previousHTML);
    });
  });

  describe('saving and retrieving the opened/closed state from local storage', () => {
    beforeEach(async () => {
      jest.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {});
      jest.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {});
    });

    afterEach(() => {
      jest.restoreAllMocks();
    });

    it('should use the existing saved state, if opened, and expand on connect', async () => {
      localStorage.getItem.mockImplementation(() => 'opened');

      await setup(
        `
        <section class="w-breadcrumbs" data-controller="w-breadcrumbs" data-w-breadcrumbs-storage-key-value="header">
          <button aria-controls="my-content" aria-expanded="false" type="button" data-action="w-breadcrumbs#toggle" data-w-breadcrumbs-target="toggle">Toggle</button>
        </section>`,
        'w-breadcrumbs',
      );

      const toggleButton = document.querySelector('button');
      expect(Storage.prototype.getItem).toHaveBeenCalledWith(
        'wagtail:w-breadcrumbs:header',
      );
      expect(toggleButton.getAttribute('aria-expanded')).toBe('true');