polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts

/**
 * @license
 * Copyright 2016 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
import '../../../test/common-test-setup';
import {
  isHidden,
  query,
  stubElement,
  stubRestApi,
} from '../../../test/test-utils';
import './gr-main-header';
import {GrMainHeader, getDocLinks} from './gr-main-header';
import {
  createAccountDetailWithId,
  createGerritInfo,
  createServerInfo,
} from '../../../test/test-data-generators';
import {NavLink} from '../../../models/views/admin';
import {ServerInfo, TopMenuItemInfo} from '../../../types/common';
import {AuthType} from '../../../constants/constants';
import {fixture, html, assert} from '@open-wc/testing';

suite('gr-main-header tests', () => {
  let element: GrMainHeader;

  setup(async () => {
    stubRestApi('probePath').returns(Promise.resolve(false));
    stubElement('gr-main-header', 'loadAccount').callsFake(() =>
      Promise.resolve()
    );
    element = await fixture(html`<gr-main-header></gr-main-header>`);
    element.loginUrl = '/login';
    await element.updateComplete;
  });

  test('renders', () => {
    assert.shadowDom.equal(
      element,
      /* HTML */ `
        <nav class="hideOnMobile">
          <a class="bigTitle" href="//localhost:9876/">
            <gr-endpoint-decorator name="header-title">
              <div class="titleText"></div>
            </gr-endpoint-decorator>
          </a>
          <ul class="links">
            <li>
              <gr-dropdown down-arrow="" horizontal-align="left" link="">
                <span class="linksTitle" id="Changes"> Changes </span>
              </gr-dropdown>
            </li>
            <li>
              <gr-dropdown down-arrow="" horizontal-align="left" link="">
                <span class="linksTitle" id="Documentation">Documentation</span>
              </gr-dropdown>
            </li>
            <li>
              <gr-dropdown down-arrow="" horizontal-align="left" link="">
                <span class="linksTitle" id="Browse"> Browse </span>
              </gr-dropdown>
            </li>
          </ul>
          <div class="rightItems">
            <gr-endpoint-decorator
              class="hideOnMobile"
              name="header-small-banner"
            >
            </gr-endpoint-decorator>
            <gr-smart-search id="search"> </gr-smart-search>
            <gr-endpoint-decorator class="hideOnMobile" name="header-top-right">
            </gr-endpoint-decorator>
            <gr-endpoint-decorator
              class="feedbackButton"
              name="header-feedback"
            >
            </gr-endpoint-decorator>
          </div>
          <div class="accountContainer" id="accountContainer">
            <div>
              <gr-icon
                aria-label="Hide Searchbar"
                icon="search"
                id="mobileSearch"
                role="button"
              >
              </gr-icon>
            </div>
            <gr-endpoint-decorator name="auth-link">
              <a class="loginButton" href="/login"> Sign in </a>
            </gr-endpoint-decorator>
            <a
              aria-label="Settings"
              class="settingsButton"
              href="/settings/"
              role="button"
              title="Settings"
            >
              <gr-icon icon="settings" filled></gr-icon>
            </a>
          </div>
        </nav>
        <nav class="hideOnDesktop">
          <div class="nav-sidebar">
            <ul class="menu">
              <li class="has-collapsible">
                <a class="main" data-title="Changes" href="">
                  Changes
                  <gr-icon class="arrow-down" icon="arrow_drop_down"> </gr-icon>
                </a>
                <ul class="dropdown">
                  <li tabindex="-1">
                    <span hidden="" tabindex="-1"> Open </span>
                    <a
                      class="itemAction"
                      href="//localhost:9876/q/status:open+-is:wip"
                      tabindex="-1"
                    >
                      Open
                    </a>
                  </li>
                  <li tabindex="-1">
                    <span hidden="" tabindex="-1"> Merged </span>
                    <a
                      class="itemAction"
                      href="//localhost:9876/q/status:merged"
                      tabindex="-1"
                    >
                      Merged
                    </a>
                  </li>
                  <li tabindex="-1">
                    <span hidden="" tabindex="-1"> Abandoned </span>
                    <a
                      class="itemAction"
                      href="//localhost:9876/q/status:abandoned"
                      tabindex="-1"
                    >
                      Abandoned
                    </a>
                  </li>
                </ul>
              </li>
              <li class="has-collapsible">
                <a class="main" data-title="Documentation" href="">
                  Documentation
                  <gr-icon class="arrow-down" icon="arrow_drop_down"> </gr-icon>
                </a>
                <ul class="dropdown">
                  <li tabindex="-1">
                    <span hidden="" tabindex="-1"> Table of Contents </span>
                    <a
                      class="itemAction"
                      href="https://gerrit-review.googlesource.com/Documentation/index.html"
                      rel="noopener"
                      tabindex="-1"
                      target="_blank"
                    >
                      Table of Contents
                    </a>
                  </li>
                  <li tabindex="-1">
                    <span hidden="" tabindex="-1"> Searching </span>
                    <a
                      class="itemAction"
                      href="https://gerrit-review.googlesource.com/Documentation/user-search.html"
                      rel="noopener"
                      tabindex="-1"
                      target="_blank"
                    >
                      Searching
                    </a>
                  </li>
                  <li tabindex="-1">
                    <span hidden="" tabindex="-1"> Uploading </span>
                    <a
                      class="itemAction"
                      href="https://gerrit-review.googlesource.com/Documentation/user-upload.html"
                      rel="noopener"
                      tabindex="-1"
                      target="_blank"
                    >
                      Uploading
                    </a>
                  </li>
                  <li tabindex="-1">
                    <span hidden="" tabindex="-1"> Access Control </span>
                    <a
                      class="itemAction"
                      href="https://gerrit-review.googlesource.com/Documentation/access-control.html"
                      rel="noopener"
                      tabindex="-1"
                      target="_blank"
                    >
                      Access Control
                    </a>
                  </li>
                  <li tabindex="-1">
                    <span hidden="" tabindex="-1"> REST API </span>
                    <a
                      class="itemAction"
                      href="https://gerrit-review.googlesource.com/Documentation/rest-api.html"
                      rel="noopener"
                      tabindex="-1"
                      target="_blank"
                    >
                      REST API
                    </a>
                  </li>
                  <li tabindex="-1">
                    <span hidden="" tabindex="-1"> Project Owner Guide </span>
                    <a
                      class="itemAction"
                      href="https://gerrit-review.googlesource.com/Documentation/intro-project-owner.html"
                      rel="noopener"
                      tabindex="-1"
                      target="_blank"
                    >
                      Project Owner Guide
                    </a>
                  </li>
                </ul>
              </li>
              <li class="has-collapsible">
                <a class="main" data-title="Browse" href="">
                  Browse
                  <gr-icon class="arrow-down" icon="arrow_drop_down"> </gr-icon>
                </a>
                <ul class="dropdown"></ul>
              </li>
            </ul>
          </div>
          <div class="nav-header">
            <a
              aria-label="Open hamburger"
              class="hamburger"
              href=""
              role="button"
              title="Hamburger"
            >
              <gr-icon filled="" icon="menu"> </gr-icon>
            </a>
            <a class="bigTitle mobileTitle" href="//localhost:9876/">
              <gr-endpoint-decorator name="header-mobile-title">
                <div class="mobileTitleText"></div>
              </gr-endpoint-decorator>
            </a>
            <div class="mobileRightItems">
              <a
                aria-label="Hide Searchbar"
                class="searchButton"
                role="button"
                title="Search"
              >
                <gr-icon filled="" icon="search"> </gr-icon>
              </a>
              <gr-dropdown class="moreMenu" horizontal-align="center" link="">
                <span class="linksTitle">
                  <gr-icon filled="" icon="more_horiz"> </gr-icon>
                </span>
              </gr-dropdown>
            </div>
          </div>
        </nav>
        <div class="modelBackground"></div>
      `
    );
  });

  test('link visibility', async () => {
    element.loading = true;
    await element.updateComplete;
    assert.isTrue(isHidden(query(element, '.accountContainer')));

    element.loading = false;
    element.loggedIn = false;
    await element.updateComplete;
    assert.isFalse(isHidden(query(element, '.accountContainer')));
    assert.isFalse(isHidden(query(element, '.loginButton')));
    assert.isNotOk(query(element, '.registerDiv'));
    assert.isNotOk(query(element, '.registerButton'));

    element.account = createAccountDetailWithId(1);
    await element.updateComplete;
    assert.isTrue(isHidden(query(element, 'gr-account-dropdown')));
    assert.isTrue(isHidden(query(element, '.settingsButton')));

    element.loggedIn = true;
    await element.updateComplete;
    assert.isTrue(isHidden(query(element, '.loginButton')));
    assert.isTrue(isHidden(query(element, '.registerButton')));
    assert.isFalse(isHidden(query(element, 'gr-account-dropdown')));
    assert.isFalse(isHidden(query(element, '.settingsButton')));
  });

  test('fix my menu item', () => {
    assert.deepEqual(
      [
        {url: 'https://awesometown.com/#hashyhash', name: '', target: ''},
        {url: 'url', name: '', target: '_blank'},
      ].map(element.createHeaderLink),
      [
        {url: 'https://awesometown.com/#hashyhash', name: ''},
        {url: 'url', name: ''},
      ]
    );
  });

  test('user links', () => {
    const defaultLinks = [
      {
        title: 'Faves',
        links: [
          {
            name: 'Pinterest',
            url: 'https://pinterest.com',
          },
        ],
      },
    ];
    const userLinks: TopMenuItemInfo[] = [
      {
        name: 'Facebook',
        url: 'https://facebook.com',
        target: '',
      },
    ];
    const adminLinks: NavLink[] = [
      {
        name: 'Repos',
        url: '/repos',
        view: undefined,
      },
    ];

    // When no admin links are passed, it should use the default.
    assert.deepEqual(
      element
        .computeLinks(
          /* userLinks= */ [],
          adminLinks,
          /* topMenus= */ [],
          defaultLinks
        )
        .find(i => i.title === 'Faves'),
      defaultLinks[0]
    );
    assert.deepEqual(
      element
        .computeLinks(userLinks, adminLinks, /* topMenus= */ [], defaultLinks)
        .find(i => i.title === 'Your'),
      {
        title: 'Your',
        links: userLinks,
      }
    );
  });

  test('documentation links', () => {
    const docLinks = [
      {
        name: 'Table of Contents',
        url: '/index.html',
      },
    ];

    assert.deepEqual(getDocLinks('', docLinks), []);
    assert.deepEqual(getDocLinks('base', []), []);

    assert.deepEqual(getDocLinks('base', docLinks), [
      {
        name: 'Table of Contents',
        target: '_blank',
        url: 'base/index.html',
      },
    ]);

    assert.deepEqual(getDocLinks('base/', docLinks), [
      {
        name: 'Table of Contents',
        target: '_blank',
        url: 'base/index.html',
      },
    ]);
  });

  test('top menus', () => {
    const adminLinks: NavLink[] = [
      {
        name: 'Repos',
        url: '/repos',
        view: undefined,
      },
    ];
    const topMenus = [
      {
        name: 'Plugins',
        items: [
          {
            name: 'Manage',
            target: '_blank',
            url: 'https://gerrit/plugins/plugin-manager/static/index.html',
          },
        ],
      },
    ];
    assert.deepEqual(
      element.computeLinks(
        /* userLinks= */ [],
        adminLinks,
        topMenus,
        /* defaultLinks= */ []
      )[2],
      {
        title: 'Plugins',
        links: [
          {
            name: 'Manage',
            url: 'https://gerrit/plugins/plugin-manager/static/index.html',
          },
        ],
      }
    );
  });

  test('ignore top project menus', () => {
    const adminLinks: NavLink[] = [
      {
        name: 'Repos',
        url: '/repos',
        view: undefined,
      },
    ];
    const topMenus = [
      {
        name: 'Projects',
        items: [
          {
            name: 'Project Settings',
            target: '_blank',
            url: '/plugins/myplugin/${projectName}',
          },
          {
            name: 'Project List',
            target: '_blank',
            url: '/plugins/myplugin/index.html',
          },
        ],
      },
    ];
    assert.deepEqual(
      element.computeLinks(
        /* userLinks= */ [],
        adminLinks,
        topMenus,
        /* defaultLinks= */ []
      )[2],
      {
        title: 'Projects',
        links: [
          {
            name: 'Project List',
            url: '/plugins/myplugin/index.html',
          },
        ],
      }
    );
  });

  test('merge top menus', () => {
    const adminLinks: NavLink[] = [
      {
        name: 'Repos',
        url: '/repos',
        view: undefined,
      },
    ];
    const topMenus = [
      {
        name: 'Plugins',
        items: [
          {
            name: 'Manage',
            target: '_blank',
            url: 'https://gerrit/plugins/plugin-manager/static/index.html',
          },
        ],
      },
      {
        name: 'Plugins',
        items: [
          {
            name: 'Create',
            target: '_blank',
            url: 'https://gerrit/plugins/plugin-manager/static/create.html',
          },
        ],
      },
    ];
    assert.deepEqual(
      element.computeLinks(
        /* userLinks= */ [],
        adminLinks,
        topMenus,
        /* defaultLinks= */ []
      )[2],
      {
        title: 'Plugins',
        links: [
          {
            name: 'Manage',
            url: 'https://gerrit/plugins/plugin-manager/static/index.html',
          },
          {
            name: 'Create',
            url: 'https://gerrit/plugins/plugin-manager/static/create.html',
          },
        ],
      }
    );
  });

  test('merge top menus in default links', () => {
    const defaultLinks = [
      {
        title: 'Faves',
        links: [
          {
            name: 'Pinterest',
            url: 'https://pinterest.com',
          },
        ],
      },
    ];
    const topMenus = [
      {
        name: 'Faves',
        items: [
          {
            name: 'Manage',
            target: '_blank',
            url: 'https://gerrit/plugins/plugin-manager/static/index.html',
          },
        ],
      },
    ];
    assert.deepEqual(
      element.computeLinks(
        /* userLinks= */ [],
        /* adminLinks= */ [],
        topMenus,
        defaultLinks
      )[0],
      {
        title: 'Faves',
        links: defaultLinks[0].links.concat([
          {
            name: 'Manage',
            url: 'https://gerrit/plugins/plugin-manager/static/index.html',
          },
        ]),
      }
    );
  });

  test('merge top menus in user links', () => {
    const userLinks = [
      {
        name: 'Facebook',
        url: 'https://facebook.com',
        target: '',
      },
    ];
    const topMenus = [
      {
        name: 'Your',
        items: [
          {
            name: 'Manage',
            target: '_blank',
            url: 'https://gerrit/plugins/plugin-manager/static/index.html',
          },
        ],
      },
    ];
    assert.deepEqual(
      element.computeLinks(
        userLinks,
        /* adminLinks= */ [],
        topMenus,
        /* defaultLinks= */ []
      )[0],
      {
        title: 'Your',
        links: [
          {
            name: 'Facebook',
            url: 'https://facebook.com',
            target: '',
          },
          {
            name: 'Manage',
            url: 'https://gerrit/plugins/plugin-manager/static/index.html',
          },
        ],
      }
    );
  });

  test('merge top menus in admin links', () => {
    const adminLinks: NavLink[] = [
      {
        name: 'Repos',
        url: '/repos',
        view: undefined,
      },
    ];
    const topMenus = [
      {
        name: 'Browse',
        items: [
          {
            name: 'Manage',
            target: '_blank',
            url: 'https://gerrit/plugins/plugin-manager/static/index.html',
          },
        ],
      },
    ];
    assert.deepEqual(
      element.computeLinks(
        /* userLinks= */ [],
        adminLinks,
        topMenus,
        /* defaultLinks= */ []
      )[1],
      {
        title: 'Browse',
        links: [
          adminLinks[0],
          {
            name: 'Manage',
            url: 'https://gerrit/plugins/plugin-manager/static/index.html',
          },
        ],
      }
    );
  });

  test('shows feedback icon when URL provided', async () => {
    assert.isEmpty(element.feedbackURL);
    assert.isNotOk(query(element, '.feedbackButton > a'));

    const url = 'report_bug_url';
    const config: ServerInfo = {
      ...createServerInfo(),
      gerrit: {
        ...createGerritInfo(),
        report_bug_url: url,
      },
    };
    element.retrieveFeedbackURL(config);
    await element.updateComplete;

    assert.equal(element.feedbackURL, url);
    assert.ok(query(element, '.feedbackButton > a'));
  });

  test('register URL', async () => {
    assert.isTrue(isHidden(query(element, '.registerDiv')));
    const config: ServerInfo = {
      ...createServerInfo(),
      auth: {
        auth_type: AuthType.LDAP,
        register_url: 'https//gerrit.example.com/register',
        editable_account_fields: [],
      },
    };
    element.retrieveRegisterURL(config);
    await element.updateComplete;
    assert.equal(element.registerURL, config.auth.register_url);
    assert.equal(element.registerText, 'Sign up');
    assert.isFalse(isHidden(query(element, '.registerDiv')));

    config.auth.register_text = 'Create account';
    element.retrieveRegisterURL(config);
    await element.updateComplete;
    assert.equal(element.registerURL, config.auth.register_url);
    assert.equal(element.registerText, config.auth.register_text);
    assert.isFalse(isHidden(query(element, '.registerDiv')));
  });

  test('register URL ignored for wrong auth type', async () => {
    const config: ServerInfo = {
      ...createServerInfo(),
      auth: {
        auth_type: AuthType.OPENID,
        register_url: 'https//gerrit.example.com/register',
        editable_account_fields: [],
      },
    };
    element.retrieveRegisterURL(config);
    await element.updateComplete;
    assert.equal(element.registerURL, '');
    assert.equal(element.registerText, 'Sign up');
    assert.isTrue(isHidden(query(element, '.registerDiv')));
  });
});