github.com/GoogleCloudPlatform/testgrid@v0.0.174/web/test/testgrid-index.test.ts (about)

     1  import { Button } from '@material/mwc-button';
     2  import { ListItemBase } from '@material/mwc-list/mwc-list-item-base.js';
     3  import {
     4    html,
     5    fixture,
     6    defineCE,
     7    unsafeStatic,
     8    expect,
     9    waitUntil,
    10    aTimeout,
    11  } from '@open-wc/testing';
    12  
    13  import { TestgridIndex } from '../src/testgrid-index.js';
    14  
    15  describe('Testgrid Index page', () => {
    16    let element: TestgridIndex;
    17    beforeEach(async () => {
    18      // Need to wrap an element to apply its properties (ex. @customElement)
    19      // See https://open-wc.org/docs/testing/helpers/#test-a-custom-class-with-properties
    20      const tagName = defineCE(class extends TestgridIndex {});
    21      const tag = unsafeStatic(tagName);
    22      element = await fixture(html`<${tag}></${tag}>`);
    23    });
    24  
    25    // TODO - add accessibility tests
    26    it('fetches dashboards and dashboard-groups after loading the component', async () => {
    27  
    28      // waiting until list items (dashboards and groups) are fully rendered
    29      await waitUntil(
    30        () => element.shadowRoot!.querySelector('mwc-list-item.dashboard'),
    31        'Index did not render dashboards',
    32        {
    33          timeout: 5000,
    34        },
    35      );
    36  
    37      await waitUntil(
    38        () => element.shadowRoot!.querySelector('mwc-list-item.dashboard-group'),
    39        'Index did not render dashboard groups',
    40        {
    41          timeout: 5000,
    42        },
    43      );
    44      // check if dashboards and dashboard groups exist
    45      expect(element.dashboards).to.not.be.empty;
    46      expect(element.dashboardGroups).not.to.be.empty;
    47      expect(element.respectiveDashboards).to.be.empty;
    48    });
    49  
    50    it('fetches respective dashboards after clicking on a dashboard-group', async () => {
    51      // before click event, check if show (boolean) is true
    52      expect(element.show).to.be.true;
    53  
    54      await waitUntil(
    55        () => element.shadowRoot!.querySelector('mwc-list-item.dashboard-group'),
    56        'Index did not render dashboard groups',
    57        {
    58          timeout: 4000,
    59        },
    60      );
    61  
    62      expect(element.dashboardGroups).to.not.be.empty;
    63  
    64      // click on first dashboard group to fetch respective dashboards
    65      const dashboardGroup: ListItemBase = element.shadowRoot!.querySelector('mwc-list-item.dashboard-group')!;
    66      dashboardGroup.click();
    67  
    68      await aTimeout(3000);
    69      
    70      expect(element.show).to.be.false;
    71      expect(element.respectiveDashboards).to.not.be.empty;
    72    });
    73  
    74    // check the functionality of the close button
    75    it('renders the close button and changes the show attribute after clicking on it', async () => {
    76      expect(element.show).to.be.true;
    77  
    78      await waitUntil(
    79        () => element.shadowRoot!.querySelector('mwc-list-item.dashboard-group'),
    80        'Index did not render dashboard groups',
    81        {
    82          timeout: 4000,
    83        },
    84      );
    85  
    86      // click on first dashboard group to fetch respective dashboards
    87      const dashboardGroup: ListItemBase = element.shadowRoot!.querySelector('mwc-list-item.dashboard-group')!;
    88      dashboardGroup.click();
    89  
    90      expect(element.show).to.be.false;
    91  
    92      await waitUntil(
    93        () => element.shadowRoot!.querySelector('mwc-button.column'),
    94        'Element did not render children',
    95        {
    96          timeout: 4000,
    97        },
    98      );
    99      
   100      const closeBtn: Button = element.shadowRoot!.querySelector('mwc-button.column')!;
   101      closeBtn.click();
   102      expect(element.show).to.be.true;
   103    });
   104  
   105    it('navigates to /dashboards after clicking on dashboard',async () => {
   106   
   107       await waitUntil(
   108         () => element.shadowRoot!.querySelector('mwc-list-item.dashboard'),
   109         'Index did not render dashboards',
   110         {
   111           timeout: 4000,
   112         },
   113       );
   114   
   115       // click on first dashboard group to fetch respective dashboards
   116       const dashboard: ListItemBase = element.shadowRoot!.querySelector('mwc-list-item.dashboard')!;
   117       dashboard.click();
   118  
   119       expect(location.pathname).to.not.equal('/');
   120    });
   121  });