go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/common/components/changelists_badge/changelists_badge.test.tsx (about)

     1  // Copyright 2023 The LUCI Authors.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //      http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  
    15  import { fireEvent, render, screen } from '@testing-library/react';
    16  
    17  import { ShowTooltipEventDetail } from '@/common/components/tooltip';
    18  import {
    19    Changelist,
    20    ChangelistOwnerKind,
    21  } from '@/common/services/luci_analysis';
    22  
    23  import { ChangelistsBadge } from './changelists_badge';
    24  import { ChangelistsTooltipElement } from './changelists_tooltip';
    25  
    26  const changelists: Changelist[] = [
    27    {
    28      host: 'www.example.com',
    29      change: '1234',
    30      patchset: 1,
    31      ownerKind: ChangelistOwnerKind.Automation,
    32    },
    33    {
    34      host: 'www.example.com',
    35      change: '2345',
    36      patchset: 2,
    37      ownerKind: ChangelistOwnerKind.Automation,
    38    },
    39  ];
    40  
    41  describe('ChangelistsBadge', () => {
    42    const dispatchEvent = window.dispatchEvent;
    43    beforeEach(() => {
    44      jest.useFakeTimers();
    45    });
    46    afterEach(() => {
    47      window.dispatchEvent = dispatchEvent;
    48      jest.restoreAllMocks();
    49      jest.useRealTimers();
    50    });
    51  
    52    test('single changelist', async () => {
    53      const dispatchEventSpy = jest.spyOn(window, 'dispatchEvent');
    54      render(<ChangelistsBadge changelists={changelists.slice(0, 1)} />);
    55  
    56      const anchorElement = screen.getByRole<HTMLAnchorElement>('link');
    57      expect(anchorElement.href).toStrictEqual(
    58        'https://www.example.com/c/1234/1',
    59      );
    60      expect(anchorElement.textContent).toStrictEqual('c/1234/1');
    61  
    62      fireEvent.mouseOver(anchorElement);
    63      await jest.runAllTimersAsync();
    64  
    65      expect(dispatchEventSpy.mock.calls.length).toStrictEqual(0);
    66    });
    67  
    68    test('multiple changelists', async () => {
    69      const dispatchEventSpy = jest.spyOn(window, 'dispatchEvent');
    70      render(<ChangelistsBadge changelists={changelists} />);
    71  
    72      const anchorElement = screen.getByRole<HTMLAnchorElement>('link');
    73      expect(anchorElement.href).toStrictEqual(
    74        'https://www.example.com/c/1234/1',
    75      );
    76      expect(anchorElement.textContent).toStrictEqual('c/1234/1, ...');
    77  
    78      fireEvent.mouseOver(anchorElement);
    79      await jest.runAllTimersAsync();
    80  
    81      expect(dispatchEventSpy.mock.calls.length).toStrictEqual(1);
    82      const event = dispatchEventSpy.mock
    83        .lastCall![0] as CustomEvent<ShowTooltipEventDetail>;
    84      expect(event.type).toStrictEqual('show-tooltip');
    85      const tooltip = event.detail.tooltip.getElementsByTagName(
    86        'milo-changelists-tooltip',
    87      );
    88      expect(tooltip.length).toStrictEqual(1);
    89      expect((tooltip[0] as ChangelistsTooltipElement).changelists).toEqual(
    90        changelists,
    91      );
    92    });
    93  });