Skip to content

Commit

Permalink
[Emoji picker tests TS migration 13/N] Migrate some emoticon tests
Browse files Browse the repository at this point in the history 
Bug: b:270220102
Change-Id: I827de23831b41a03d04cd163eedd4e31aa6f265f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4290838
Commit-Queue: John Palmer <jopalmer@chromium.org>
Reviewed-by: Mehrab N <mehrab@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1115550}
  • Loading branch information
John Palmer authored and Chromium LUCI CQ committed Mar 10, 2023
1 parent d365505 commit b133a79
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 56 deletions.
2 changes: 1 addition & 1 deletion chrome/browser/resources/chromeos/emoji_picker/emoji_picker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -712,7 +712,7 @@ export class EmojiPicker extends PolymerElement {
this.scrollToGroup(nextTab?.groupId);
}

private scrollToGroup(newGroup?: string) {
scrollToGroup(newGroup?: string) {
// TODO(crbug/1152237): This should use behaviour:'smooth', but when you do
// that it doesn't scroll.
if (newGroup) {
Expand Down
2 changes: 1 addition & 1 deletion chrome/test/data/webui/chromeos/emoji_picker/BUILD.gn
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ build_webui_tests("build") {
"emoji_picker_extension_emoticon_test.js",
"emoji_picker_extension_gif.ts",
"emoji_picker_extension_symbol_test.js",
"emoji_picker_extension_test.js",
"emoji_picker_extension_test.ts",
"emoji_picker_gif_test.ts",
"emoji_picker_http_error_gif_test.ts",
"emoji_picker_offline_gif_test.ts",
Expand Down
109 changes: 55 additions & 54 deletions ...oji_picker/emoji_picker_extension_test.js → ...oji_picker/emoji_picker_extension_test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,65 +4,52 @@

import {EmojiPicker} from 'chrome://emoji-picker/emoji_picker.js';
import {EmojiPickerApiProxyImpl} from 'chrome://emoji-picker/emoji_picker_api_proxy.js';
import {EmojiSearch} from 'chrome://emoji-picker/emoji_search.js';
import {EMOJI_PICKER_READY} from 'chrome://emoji-picker/events.js';
import {assert} from 'chrome://resources/ash/common/assert.js';
import {assert} from 'chrome://resources/js/assert_ts.js';
import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {assertEquals, assertFalse} from 'chrome://webui-test/chromeos/chai_assert.js';
import {assertEquals, assertFalse} from 'chrome://webui-test/chai_assert.js';

import {completePendingMicrotasks, deepQuerySelector, isGroupButtonActive, timeout, waitForCondition} from './emoji_picker_test_util.js';

const ACTIVE_CATEGORY_BUTTON = 'category-button-active';

function isCategoryButtonActive(element) {
function isCategoryButtonActive(element: HTMLElement|null|undefined) {
assert(element, 'category button element should not be null.');
return element.classList.contains(ACTIVE_CATEGORY_BUTTON);
return element!.classList.contains(ACTIVE_CATEGORY_BUTTON);
}

suite('emoji-picker-extension', () => {
/** @type {!EmojiPicker} */
let emojiPicker;
/** @type {function(...!string): ?HTMLElement} */
let findInEmojiPicker;
/** @type {function(...!string): ?HTMLElement} */
let findEmojiFirstButton;
/** @type {Array<string>} */
const categoryList = ['emoji', 'symbol', 'emoticon'];
let emojiPicker: EmojiPicker;
let findInEmojiPicker: (...selectors: string[]) => HTMLElement | null;

setup(() => {
// Reset DOM state.
document.body.innerHTML = '';
window.localStorage.clear();

// Set default incognito state to False.
// Set default incognito state to False.
EmojiPickerApiProxyImpl.getInstance().isIncognitoTextField = () =>
new Promise((resolve) => resolve({incognito: false}));
EmojiPicker.configs = () => ({
'dataUrls': {
'emoji': [
dataUrls: {
emoji: [
'/emoji_test_ordering_start.json',
'/emoji_test_ordering_remaining.json',
],
'emoticon': ['/emoticon_test_ordering.json'],
'symbol': ['/symbol_test_ordering.json'],
emoticon: ['/emoticon_test_ordering.json'],
symbol: ['/symbol_test_ordering.json'],
gif: [],
},
});

emojiPicker =
/** @type {!EmojiPicker} */ (document.createElement('emoji-picker'));
(document.createElement('emoji-picker')) as unknown as EmojiPicker;

findInEmojiPicker = (...path) => deepQuerySelector(emojiPicker, path);

findEmojiFirstButton = (...path) => {
const emojiElement = deepQuerySelector(emojiPicker, path);
if (emojiElement) {
return emojiElement.firstEmojiButton();
}
return null;
};

// Wait until emoji data is loaded before executing tests.
return new Promise((resolve) => {
return new Promise<void>((resolve) => {
emojiPicker.addEventListener(EMOJI_PICKER_READY, () => {
flush();
resolve();
Expand All @@ -80,23 +67,25 @@ suite('emoji-picker-extension', () => {
const emoticonCategoryButton = findInEmojiPicker(
'emoji-search', 'emoji-category-button:last-of-type',
'cr-icon-button');
emoticonCategoryButton.click();
emoticonCategoryButton!.click();
await flush();
const firstEmoticonTabInFirstPage =
findInEmojiPicker('.pagination text-group-button', 'cr-button');
const firstEmoticonTabInSecondPage = findInEmojiPicker(
'.pagination + .pagination', 'text-group-button', 'cr-button');
rightChevron.click();
rightChevron!.click();

await flush();
await waitForCondition(
() => !isGroupButtonActive(firstEmoticonTabInFirstPage) &&
isGroupButtonActive(firstEmoticonTabInSecondPage));
leftChevron.click();
isGroupButtonActive(firstEmoticonTabInSecondPage),
'Wait for correct group to be active');
leftChevron!.click();
await flush();
await waitForCondition(
() => !isGroupButtonActive(firstEmoticonTabInSecondPage) &&
isGroupButtonActive(firstEmoticonTabInFirstPage));
isGroupButtonActive(firstEmoticonTabInFirstPage),
'Wait for second group to be active');
});

test(
Expand All @@ -114,7 +103,8 @@ suite('emoji-picker-extension', () => {

await waitForCondition(
() => isCategoryButtonActive(emoticonCategoryButton) &&
!isCategoryButtonActive(emojiCategoryButton));
!isCategoryButtonActive(emojiCategoryButton),
'Wait for correct group to be active');
});

test(
Expand All @@ -125,7 +115,8 @@ suite('emoji-picker-extension', () => {
emojiPicker.scrollToGroup(emoticonTestGroupId);
const emoticonTabButton = await waitForCondition(
() => findInEmojiPicker(
`.tab[data-group='${emoticonTestGroupId}']`, 'cr-button'));
`.tab[data-group='${emoticonTestGroupId}']`, 'cr-button'),
'Wait for emoticon button to become active.');

await waitForCondition(
() => isGroupButtonActive(emoticonTabButton),
Expand All @@ -138,10 +129,10 @@ suite('emoji-picker-extension', () => {
const emoticonTestGroupId = '25';

emojiPicker.scrollToGroup(emoticonTestGroupId);
// when scrolling to the next page, the chevron display needs to be updated.
await waitForCondition(
() => leftChevron.style.display === 'flex' &&
rightChevron.style.display === 'flex');
() => leftChevron!.style.display === 'flex' &&
rightChevron!.style.display === 'flex',
'When scrolling to the next page, the chevron display needs to be updated.');
});

test(
Expand All @@ -154,32 +145,39 @@ suite('emoji-picker-extension', () => {
'emoji-search', 'emoji-category-button:last-of-type',
'cr-icon-button');
const emojiGroups = findInEmojiPicker('#groups');
emoticonCategoryButton.click();
const targetScroll = emojiGroups.scrollTop;
emojiCategoryButton.click();
emoticonCategoryButton!.click();
const targetScroll = emojiGroups!.scrollTop;
emojiCategoryButton!.click();

findInEmojiPicker('emoji-search').setSearchQuery('face');
(findInEmojiPicker('emoji-search') as unknown as
EmojiSearch)!.setSearchQuery('face');
await waitForCondition(
() => findInEmojiPicker('emoji-search', 'emoji-group'));
emoticonCategoryButton.click();
() => findInEmojiPicker('emoji-search', 'emoji-group'),
'Wait for emoji groups to render');
emoticonCategoryButton!.click();

await waitForCondition(() => emojiGroups.scrollTop === targetScroll);
assertFalse(findInEmojiPicker('emoji-search').searchNotEmpty());
await waitForCondition(
() => emojiGroups!.scrollTop === targetScroll,
'Wait for scrolling to complete');
assertFalse(
(findInEmojiPicker('emoji-search') as unknown as EmojiSearch)
.searchNotEmpty());
});

test(
'Focusing on emoji tab groups does should not scroll the tabs section',
async () => {
const emojiGroupButton = findInEmojiPicker(
'#tabs', 'emoji-group-button:last-of-type', 'cr-icon-button');
emojiGroupButton.focus();
emojiGroupButton!.focus();
await waitForCondition(
() => findInEmojiPicker(
'#tabs', 'emoji-group-button:last-of-type:focus-within'));
'#tabs', 'emoji-group-button:last-of-type:focus-within'),
'Wait for correct tab to be focused');
// wait for any potential smooth scrolling to take place
await timeout(400);

assertEquals(findInEmojiPicker('#tabs').scrollLeft, 0);
assertEquals(findInEmojiPicker('#tabs')!.scrollLeft, 0);
});

test(
Expand All @@ -188,18 +186,21 @@ suite('emoji-picker-extension', () => {
const categoryButton = findInEmojiPicker(
'emoji-search', 'emoji-category-button:last-of-type',
'cr-icon-button');
categoryButton.click();
await waitForCondition(() => isCategoryButtonActive(categoryButton));
categoryButton!.click();
await waitForCondition(
() => isCategoryButtonActive(categoryButton),
'Wait for correct tab to be active');
await completePendingMicrotasks();
const emojiGroupButton = findInEmojiPicker(
'#tabs', 'text-group-button:last-of-type', 'cr-button');
emojiGroupButton.focus();
emojiGroupButton!.focus();
await waitForCondition(
() => findInEmojiPicker(
'#tabs', 'text-group-button:last-of-type:focus-within'));
'#tabs', 'text-group-button:last-of-type:focus-within'),
'Wait for correct group to be focused');
// wait for any potential smooth scrolling to take place
await timeout(400);

assertEquals(findInEmojiPicker('#tabs').scrollLeft, 0);
assertEquals(findInEmojiPicker('#tabs')!.scrollLeft, 0);
});
});

0 comments on commit b133a79

Please sign in to comment.