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

Code before:
  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 get saved state if expanded', async () => {
      localStorage.getItem.mockImplementation(() => 'opened');

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

      const toggleButton = document.querySelector('button');
      expect(toggleButton).not.toBeNull();
      await Promise.resolve(toggleButton.click());

      expect(
        localStorage.getItem('wagtail:w-breadcrumbs:header-expanded'),
      ).toBe('opened');
      expect(toggleButton.getAttribute('aria-expanded')).toBe('true');
    });

    it('should save state as closed when collapsed', async () => {
      localStorage.getItem.mockImplementation(() => 'closed');
      await setup(`
        <section class="w-breadcrumbs" data-controller="w-breadcrumbs" data-w-breadcrumbs-storage-key-value="header-expanded">
          <button type="button" data-w-breadcrumbs-target="toggle" aria-controls="my-content" aria-expanded="true">Toggle</button>
        </section>`);

      const toggleButton = document.querySelector('button');
      expect(toggleButton).not.toBeNull();
      await Promise.resolve(toggleButton.click());

      expect(
        localStorage.getItem('wagtail:w-breadcrumbs:header-expanded'),
      ).toBe('closed');
      expect(toggleButton.getAttribute('aria-expanded')).toBe('false');
    });

    it('should not load and save state if disabled', async () => {
      await setup(`
      <section class="w-breadcrumbs" data-controller="w-breadcrumbs">
        <button type="button" data-w-breadcrumbs-target="toggle" aria-controls="my-content" aria-expanded="false">Toggle</button>
      </section>`);


Review comment (bug):
This is the test line where it’s currently failing. The `aria-expanded` attribute is not changing, whereas I can see in the browser’s inspector that it does change after clicking the button.

Code after:
  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');

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

      expect(toggleButton.getAttribute('aria-expanded')).toBe('false');
      expect(Storage.prototype.setItem).toHaveBeenLastCalledWith(
        'wagtail:w-breadcrumbs:header',
        'closed',
      );
    });

    it('should use the existing saved state, if closed, and close on connect', async () => {
      localStorage.getItem.mockImplementation(() => 'closed');
      await setup(
        `
        <section class="w-breadcrumbs" data-controller="w-breadcrumbs" data-w-breadcrumbs-storage-key-value="header-test">
          <button aria-controls="my-content" aria-expanded="true" 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-test',
      );
      expect(toggleButton.getAttribute('aria-expanded')).toBe('false');