chromium/chrome/test/data/webui/chromeos/emoji_picker/emoji_picker_global_variants_test.ts

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

/**
 * Definition of emoji skin tone and gender categorizations:
 *  - Group 1: emojis with only skin tone, e.g. 👍
 *  - Group 2: emojis with only gender, e.g. 🧞
 *  - Group 3: emojis with both tone and gender, e.g. 🤷
 *  - Group 4: the multi-part emoji with only tone: 🤝
 *  - Group 5: multi-part emojis with tone and gender, e.g. 👬
 */

import {initialiseEmojiPickerForTest} from './emoji_picker_test_util.js';

suite('emoji-picker-global-variants', () => {
  let expectEmojiButton: (text: string, getGroup?: () => HTMLElement | null) =>
      Promise<HTMLElement>;
  let expectEmojiButtons:
      (texts: string[], getGroup?: () => HTMLElement | null) =>
          Promise<HTMLElement[]>;
  let clickVariant: (text: string, button: HTMLElement) => Promise<void>;
  let findGroup: (groupId: string) => HTMLElement | null;
  let reload: () => Promise<void>;

  setup(async () => {
    const newPicker = initialiseEmojiPickerForTest();
    expectEmojiButton = newPicker.expectEmojiButton;
    expectEmojiButtons = newPicker.expectEmojiButtons;
    clickVariant = newPicker.clickVariant;
    findGroup = newPicker.findGroup;
    reload = newPicker.reload;
    await newPicker.readyPromise;
  });

  test('tone should sync from group 1 to group 2', async () => {
    const thumbsUp = await expectEmojiButton('👍');

    await clickVariant('👍🏿', thumbsUp);
    await reload();

    await expectEmojiButtons(['👍🏿', '🤷🏿']);
  });

  test('gender should sync from group 3 to group 2', async () => {
    const genie = await expectEmojiButton('🧞');

    await clickVariant('🧞‍♀', genie);
    await reload();

    await expectEmojiButtons(['🧞‍♀', '🤷‍♀']);
  });

  test('tone & gender should sync from groups 1 & 3 to group 2', async () => {
    const thumbsUp = await expectEmojiButton('👍');

    const genie = await expectEmojiButton('🧞');
    await clickVariant('👍🏿', thumbsUp);
    await clickVariant('🧞‍♀', genie);
    await reload();

    await expectEmojiButton('🤷🏿‍♀');
  });

  test('tone & gender should sync from groups 2 to group 1 & 3', async () => {
    const shrug = await expectEmojiButton('🤷');

    await clickVariant('🤷🏿‍♀', shrug);
    await reload();

    await expectEmojiButtons(['🤷🏿‍♀', '👍🏿', '🧞‍♀']);
  });

  test('tone preference should be individual for group 4', async () => {
    const handshake = await expectEmojiButton('🤝');

    await clickVariant('🫱🏻‍🫲🏿', handshake);
    await reload();

    await expectEmojiButtons(['🫱🏻‍🫲🏿', '👬', '👍', '🤷']);
  });

  test('tone preference should be individual for group 5', async () => {
    const holdingHands = await expectEmojiButton('👬');

    await clickVariant('👨🏿‍🤝‍👨🏻', holdingHands);
    await reload();

    await expectEmojiButtons(['👨🏿‍🤝‍👨🏻', '🤝', '👍', '🤷']);
  });

  test(
      'tone preference for multi-part emojis with a single tone codepoint should be individual',
      async () => {
        const handshake = await expectEmojiButton('🤝');

        await clickVariant('🤝🏿', handshake);
        await reload();

        await expectEmojiButtons(['🤝🏿', '👍']);
      });

  test(
      'selecting a variant with default tone should update preferences',
      async () => {
        const shrug = await expectEmojiButton('🤷');
        const thumbsUp = await expectEmojiButton('👍');

        await clickVariant('🤷🏿‍♀', shrug);
        await clickVariant('👍', thumbsUp);
        await reload();

        await expectEmojiButtons(['🤷‍♀', '👍']);
      });

  test(
      'selecting a variant with default gender should update preferences',
      async () => {
        const shrug = await expectEmojiButton('🤷');
        const genie = await expectEmojiButton('🧞');

        await clickVariant('🤷🏿‍♀', shrug);
        await clickVariant('🧞', genie);
        await reload();

        await expectEmojiButtons(['🤷🏿', '🧞']);
      });

  test(
      'selecting a variant from history should update preferences',
      async () => {
        const shrug = await expectEmojiButton('🤷');
        shrug.click();
        const historyEmoji =
            await expectEmojiButton('🤷', () => findGroup('emoji-history'));

        await clickVariant('🤷🏿‍♀', historyEmoji);
        await reload();

        await expectEmojiButtons(['🤷🏿‍♀', '👍🏿', '🧞‍♀']);
      });

  test(
      'selecting an emoji from history without opening variants should not update preferences',
      async () => {
        const shrug = await expectEmojiButton('🤷');
        await clickVariant('🤷🏿‍♀', shrug);
        await clickVariant('🤷🏻‍♂', shrug);

        const historyEmoji = await expectEmojiButton(
            '🤷🏿‍♀', () => findGroup('emoji-history'));
        historyEmoji.click();
        await reload();

        await expectEmojiButtons(['🤷🏻‍♂', '👍🏻', '🧞‍♂']);
      });

  test('preferences should not be applied in emoji history', async () => {
    const shrug = await expectEmojiButton('🤷');

    await clickVariant('🤷🏻‍♂', shrug);
    await clickVariant('🤷🏿‍♀', shrug);

    await expectEmojiButtons(
        ['🤷🏿‍♀', '🤷🏻‍♂'], () => findGroup('emoji-history'));
  });

  test('preferences should be applied in other subcategories', async () => {
    const shrug = await expectEmojiButton('🤷');

    await clickVariant('🤷🏿‍♀', shrug);
    await reload();

    await expectEmojiButton('🧍🏿‍♀', () => findGroup('1'));
  });
});