chromium/chrome/test/data/webui/chromeos/settings/common/app_language_selection_dialog/app_language_selection_item_test.ts

// Copyright 2023 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'chrome://os-settings/lazy_load.js';

import {AppLanguageSelectionItemElement} from 'chrome://os-settings/lazy_load.js';
import {Locale} from 'chrome://resources/cr_components/app_management/app_management.mojom-webui.js';
import {assertTrue} from 'chrome://webui-test/chai_assert.js';
import {flushTasks} from 'chrome://webui-test/polymer_test_util.js';
import {isVisible} from 'chrome://webui-test/test_util.js';

import {isHidden, replaceBody} from '../../app_management/test_util.js';

suite('<app-language-selection-item>', () => {
  const listItemId = '#listItem';
  const ironIconTag = 'iron-icon' as const;
  let appLanguageSelectionItem: AppLanguageSelectionItemElement;

  setup(() => {
    appLanguageSelectionItem =
        document.createElement('app-language-selection-item');

    replaceBody(appLanguageSelectionItem);
    flushTasks();
  });

  teardown(() => {
    appLanguageSelectionItem.remove();
  });

  function assertItem(expectedText: string, isSelected: boolean): void {
    const item = appLanguageSelectionItem.shadowRoot!.querySelector(listItemId);
    assertTrue(!!item, '#list-item not found');
    assertTrue(!!item.textContent, 'Item textContent not found');
    assertTrue(
        item.textContent.includes(expectedText),
        `Invalid text ${item.textContent}`);
    if (isSelected) {
      assertTrue(
          isVisible(item.querySelector(ironIconTag)),
          'Selection icon is not visible');
    } else {
      assertTrue(
          isHidden(item.querySelector(ironIconTag)),
          'Selection icon is not hidden');
    }
  }

  test('Display name and native display name is different, concat text', () => {
    const testDisplayName = 'testDisplayName';
    const testNativeDisplayName = 'testNativeDisplayName';
    appLanguageSelectionItem.item = {
      localeTag: 'test123',
      displayName: testDisplayName,
      nativeDisplayName: testNativeDisplayName,
    } as const satisfies Locale;
    appLanguageSelectionItem.selected = false;

    assertItem(
        testDisplayName + ' - ' + testNativeDisplayName,
        /* isSelected= */ false);
  });

  test('Display name and native display name is same, use display name', () => {
    const sameDisplayName = 'sameDisplayName';
    appLanguageSelectionItem.item = {
      localeTag: 'test123',
      displayName: sameDisplayName,
      nativeDisplayName: sameDisplayName,
    } as const satisfies Locale;
    appLanguageSelectionItem.selected = false;

    assertItem(sameDisplayName, /* isSelected= */ false);
  });

  test(
      'Display name exists and native display name is empty, use display name',
      () => {
        const testDisplayName = 'testDisplayName';
        appLanguageSelectionItem.item = {
          localeTag: 'test123',
          displayName: testDisplayName,
          nativeDisplayName: '',
        } as const satisfies Locale;
        appLanguageSelectionItem.selected = false;

        assertItem(testDisplayName, /* isSelected= */ false);
      });

  test('Display name and native display name is empty, use locale tag', () => {
    const testLocaleTag = 'test123';
    appLanguageSelectionItem.item = {
      localeTag: 'test123',
      displayName: '',
      nativeDisplayName: '',
    } as const satisfies Locale;
    appLanguageSelectionItem.selected = false;

    assertItem(testLocaleTag, /* isSelected= */ false);
  });

  test('Item is selected, selection icon should be visible', () => {
    const testDisplayName = 'testDisplayName';
    appLanguageSelectionItem.item = {
      localeTag: 'test123',
      displayName: testDisplayName,
      nativeDisplayName: '',
    } as const satisfies Locale;
    appLanguageSelectionItem.selected = true;

    assertItem(testDisplayName, /* isSelected= */ true);
  });
});