| // Copyright 2019 The Chromium Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| /** |
| * @fileoverview Tests local NTP richer picker. |
| */ |
| |
| /** |
| * Local NTP's object for test and setup functions. |
| */ |
| test.customizeMenu = {}; |
| |
| /** |
| * Enum for ids. |
| * @enum {string} |
| * @const |
| */ |
| test.customizeMenu.IDS = { |
| BACKGROUNDS_BUTTON: 'backgrounds-button', |
| BACKGROUNDS_IMAGE_MENU: 'backgrounds-image-menu', |
| BACKGROUNDS_MENU: 'backgrounds-menu', |
| COLOR_PICKER_CONTAINER: 'color-picker-container', |
| COLOR_PICKER_TILE: 'color-picker-tile', |
| COLORS_BUTTON: 'colors-button', |
| COLORS_DEFAULT: 'colors-default', |
| COLORS_DEFAULT_ICON: 'colors-default-icon', |
| COLORS_MENU: 'colors-menu', |
| COLORS_THEME: 'colors-theme', |
| COLORS_THEME_UNINSTALL: 'colors-theme-uninstall', |
| CUSTOMIZATION_MENU: 'customization-menu', |
| CUSTOM_BG: 'custom-bg', |
| CUSTOM_BG_PREVIEW: 'custom-bg-preview', |
| EDIT_BG: 'edit-bg', |
| MENU_BACK: 'menu-back', |
| MENU_CANCEL: 'menu-cancel', |
| MENU_DONE: 'menu-done', |
| MENU_TITLE: 'menu-title', |
| SHORTCUTS_BUTTON: 'shortcuts-button', |
| SHORTCUTS_HIDE_TOGGLE: 'sh-hide-toggle', |
| SHORTCUTS_MENU: 'shortcuts-menu', |
| SHORTCUTS_OPTION_CUSTOM_LINKS: 'sh-option-cl', |
| SHORTCUTS_OPTION_MOST_VISITED: 'sh-option-mv', |
| }; |
| |
| /** |
| * Enum for classnames. |
| * @enum {string} |
| * @const |
| */ |
| test.customizeMenu.CLASSES = { |
| COLLECTION_TILE: 'bg-sel-tile', |
| ENTRY_POINT_ENHANCED: 'ep-enhanced', |
| SELECTED: 'selected', |
| }; |
| |
| /** |
| * Utility to mock out parts of the DOM. |
| * @type {Replacer} |
| */ |
| test.customizeMenu.stubs = new Replacer(); |
| |
| /** |
| * The test value of chrome.embeddedSearch.newTabPage.isUsingMostVisited. |
| * @type {boolean} |
| */ |
| test.customizeMenu.isUsingMostVisited = false; |
| |
| /** |
| * The test value of chrome.embeddedSearch.newTabPage.areShortcutsVisible. |
| * @type {boolean} |
| */ |
| test.customizeMenu.areShortcutsVisible = true; |
| |
| /** |
| * The number of times |
| * chrome.embeddedSearch.newTabPage.applyAutogeneratedTheme is called. |
| * @type {number} |
| */ |
| test.customizeMenu.applyAutogeneratedThemeCount = 0; |
| |
| /** |
| * The number of times |
| * chrome.embeddedSearch.newTabPage.confirmThemeChanges is called. |
| * @type {number} |
| */ |
| test.customizeMenu.confirmThemeChangesCount = 0; |
| |
| /** |
| * The number of times |
| * chrome.embeddedSearch.newTabPage.revertThemeChanges is called. |
| * @type {number} |
| */ |
| test.customizeMenu.revertThemeChangesCount = 0; |
| |
| /** |
| * The number of times |
| * chrome.embeddedSearch.newTabPage.useDefaultTheme is called. |
| * @type {number} |
| */ |
| test.customizeMenu.useDefaultThemeCount = 0; |
| |
| /** |
| * The number of times |
| * chrome.embeddedSearch.newTabPage.toggleMostVisitedOrCustomLinks is called. |
| * @type {number} |
| */ |
| test.customizeMenu.toggleMostVisitedOrCustomLinksCount = 0; |
| |
| /** |
| * The number of times |
| * chrome.embeddedSearch.newTabPage.toggleShortcutsVisibility is called. |
| * @type {number} |
| */ |
| test.customizeMenu.toggleShortcutsVisibilityCount = 0; |
| |
| /** |
| * The number of times |
| * chrome.embeddedSearch.newTabPage.SetCustomBackground* is called. |
| * @type {number} |
| */ |
| test.customizeMenu.timesCustomBackgroundWasSet = 0; |
| |
| /** |
| * Themed properties for testing to be used instead of |
| * chrome.embeddedSearch.newTabPage.themeBackgroundInfo. |
| * @type {?Object} |
| */ |
| test.customizeMenu.mockThemeBackgroundInfo = {}; |
| |
| /** |
| * Sets up the page for each individual test. |
| */ |
| test.customizeMenu.setUp = function() { |
| setUpPage('local-ntp-template'); |
| |
| // Required to enable the richer picker. |configData| does not correctly |
| // populate using base::test::ScopedFeatureList. |
| configData.richerPicker = true; |
| configData.chromeColors = true; |
| configData.chromeColorsCustomColorPicker = false; |
| customize.colorsMenuLoaded = false; |
| customize.builtTiles = false; |
| |
| // Reset variable values. |
| test.customizeMenu.stubs.reset(); |
| test.customizeMenu.isUsingMostVisited = false; |
| test.customizeMenu.areShortcutsVisible = true; |
| test.customizeMenu.applyAutogeneratedThemeCount = 0; |
| test.customizeMenu.confirmThemeChangesCount = 0; |
| test.customizeMenu.revertThemeChangesCount = 0; |
| test.customizeMenu.useDefaultThemeCount = 0; |
| test.customizeMenu.toggleMostVisitedOrCustomLinksCount = 0; |
| test.customizeMenu.toggleShortcutsVisibilityCount = 0; |
| test.customizeMenu.timesCustomBackgroundWasSet = 0; |
| test.customizeMenu.mockThemeBackgroundInfo = {}; |
| }; |
| |
| // ******************************* SIMPLE TESTS ******************************* |
| // These are run by runSimpleTests above. |
| // Functions from test_utils.js are automatically imported. |
| |
| /** |
| * Tests that the richer picker opens. |
| */ |
| test.customizeMenu.testMenu_Open = function() { |
| init(); |
| |
| const menuButton = $(test.customizeMenu.IDS.EDIT_BG); |
| assertTrue(elementIsVisible(menuButton)); |
| assertTrue(menuButton.classList.contains( |
| test.customizeMenu.CLASSES.ENTRY_POINT_ENHANCED)); |
| |
| menuButton.click(); // Open the richer picker. |
| |
| const menuDialog = $(test.customizeMenu.IDS.CUSTOMIZATION_MENU); |
| assertTrue(menuDialog.open); |
| assertTrue(elementIsVisible(menuDialog)); |
| }; |
| |
| /** |
| * Tests that the richer picker submenus open. |
| */ |
| test.customizeMenu.testMenu_OpenSubmenus = function() { |
| init(); |
| |
| // Open the richer picker. The default submenu (Background) should be shown. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| const backgroundSubmenu = $(test.customizeMenu.IDS.BACKGROUNDS_MENU); |
| const shortcutsSubmenu = $(test.customizeMenu.IDS.SHORTCUTS_MENU); |
| const colorSubmenu = $(test.customizeMenu.IDS.COLORS_MENU); |
| assertTrue(elementIsVisible(backgroundSubmenu)); |
| assertFalse(elementIsVisible(shortcutsSubmenu)); |
| assertFalse(elementIsVisible(colorSubmenu)); |
| |
| // Open the Shortcuts submenu. All other submenus should be hidden. |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| assertFalse(elementIsVisible(backgroundSubmenu)); |
| assertTrue(elementIsVisible(shortcutsSubmenu)); |
| assertFalse(elementIsVisible(colorSubmenu)); |
| |
| // Open the Color submenu. |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| assertFalse(elementIsVisible(backgroundSubmenu)); |
| assertFalse(elementIsVisible(shortcutsSubmenu)); |
| assertTrue(elementIsVisible(colorSubmenu)); |
| |
| // Open the Background submenu. |
| $(test.customizeMenu.IDS.BACKGROUNDS_BUTTON).click(); |
| assertTrue(elementIsVisible(backgroundSubmenu)); |
| assertFalse(elementIsVisible(shortcutsSubmenu)); |
| assertFalse(elementIsVisible(colorSubmenu)); |
| }; |
| |
| /** |
| * Tests that user selections are saved across submenus. |
| */ |
| test.customizeMenu.testMenu_SaveUserSelections = function() { |
| setupFakeAsyncCollectionLoad(); |
| init(); |
| |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| |
| // Select a background. |
| setupFakeAsyncImageLoad('coll_tile_0'); |
| $('coll_tile_0').click(); |
| const background = $('coll_0_img_tile_0'); |
| background.click(); |
| assertTrue(background.parentElement.classList.contains( |
| test.customizeMenu.CLASSES.SELECTED)); |
| // The submenu's title should be the image collection's. |
| assertEquals( |
| 'Collection 1', $(test.customizeMenu.IDS.MENU_TITLE).textContent); |
| |
| // Select some shortcut options. |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| assertShortcutOptionsSelected( |
| /*clSelected=*/ true, /*mvSelected=*/ false, /*isHidden=*/ false); |
| $(test.customizeMenu.IDS.SHORTCUTS_OPTION_MOST_VISITED).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_HIDE_TOGGLE).click(); |
| assertShortcutOptionsSelected( |
| /*clSelected=*/ false, /*mvSelected=*/ true, /*isHidden=*/ true); |
| |
| // Select a color. |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| const colorOptions = |
| $(test.customizeMenu.IDS.COLORS_MENU) |
| .getElementsByClassName(test.customizeMenu.CLASSES.COLLECTION_TILE); |
| const color = colorOptions[1]; // Skip the default theme option. |
| color.click(); |
| assertTrue(color.parentElement.classList.contains( |
| test.customizeMenu.CLASSES.SELECTED)); |
| |
| // Open the Background submenu and check that it's still selected. |
| $(test.customizeMenu.IDS.BACKGROUNDS_BUTTON).click(); |
| assertTrue(background.parentElement.classList.contains( |
| test.customizeMenu.CLASSES.SELECTED)); |
| // The image collection should still be open. |
| assertEquals( |
| 'Collection 1', $(test.customizeMenu.IDS.MENU_TITLE).textContent); |
| |
| // Open the Shortcuts submenu and check that they're still selected. |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| assertShortcutOptionsSelected( |
| /*clSelected=*/ false, /*mvSelected=*/ true, /*isHidden=*/ true); |
| |
| // Open the Color submenu and check that it's still selected. |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| assertTrue(color.parentElement.classList.contains( |
| test.customizeMenu.CLASSES.SELECTED)); |
| |
| $(test.customizeMenu.IDS.MENU_CANCEL).click(); |
| }; |
| |
| /** |
| * Tests that user selections across submenus are applied on "done". |
| */ |
| test.customizeMenu.testMenu_ApplyUserSelections = function() { |
| setupFakeAsyncCollectionLoad(); |
| init(); |
| |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| |
| // Select a background. |
| setupFakeAsyncImageLoad('coll_tile_0'); |
| $('coll_tile_0').click(); |
| $('coll_0_img_tile_0').click(); |
| |
| // Select a shortcut option. |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_OPTION_MOST_VISITED).click(); |
| |
| // Select a color. |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| const colorOptions = |
| $(test.customizeMenu.IDS.COLORS_MENU) |
| .getElementsByClassName(test.customizeMenu.CLASSES.COLLECTION_TILE); |
| // Skip the color picker and the default theme option. |
| colorOptions[2].click(); |
| |
| // Click done and check that all selections have applied. |
| $(test.customizeMenu.IDS.MENU_DONE).click(); |
| assertEquals(1, test.customizeMenu.timesCustomBackgroundWasSet); |
| assertEquals(1, test.customizeMenu.toggleMostVisitedOrCustomLinksCount); |
| assertEquals(1, test.customizeMenu.applyAutogeneratedThemeCount); |
| assertEquals(1, test.customizeMenu.confirmThemeChangesCount); |
| }; |
| |
| /** |
| * Tests that a background is applied if it was selected and then the back arrow |
| * was clicked. |
| */ |
| test.customizeMenu.testMenu_BackgroundAppliedAfterBackArrow = function() { |
| setupFakeAsyncCollectionLoad(); |
| init(); |
| |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| |
| // Select a background. |
| setupFakeAsyncImageLoad('coll_tile_0'); |
| $('coll_tile_0').click(); |
| $('coll_0_img_tile_0').click(); |
| |
| // Go back to main menu. |
| $(test.customizeMenu.IDS.MENU_BACK).click(); |
| |
| // Click done and check that the selections was applied. |
| $(test.customizeMenu.IDS.MENU_DONE).click(); |
| assertEquals(1, test.customizeMenu.timesCustomBackgroundWasSet); |
| }; |
| |
| /** |
| * Tests that background previews are applied. |
| */ |
| test.customizeMenu.testMenu_BackgroundPreviewApplied = function() { |
| setupFakeAsyncCollectionLoad(); |
| init(); |
| |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| |
| // Select a background. |
| setupFakeAsyncImageLoad('coll_tile_0'); |
| $('coll_tile_0').click(); |
| $('coll_0_img_tile_0').click(); |
| |
| // Check that correct styling is applied to the page. |
| assertTrue(document.body.classList.contains('alternate-logo')); |
| }; |
| |
| /** |
| * Tests that user selections across submenus are not applied on "cancel". |
| */ |
| test.customizeMenu.testMenu_CancelUserSelections = function() { |
| setupFakeAsyncCollectionLoad(); |
| init(); |
| |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| |
| // Select a background. |
| setupFakeAsyncImageLoad('coll_tile_0'); |
| $('coll_tile_0').click(); |
| $('coll_0_img_tile_0').click(); |
| |
| // Select a shortcut option. |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_OPTION_MOST_VISITED).click(); |
| |
| // Select a color. |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| const colorOptions = |
| $(test.customizeMenu.IDS.COLORS_MENU) |
| .getElementsByClassName(test.customizeMenu.CLASSES.COLLECTION_TILE); |
| // Skip the color picker and the default theme option. |
| const color = colorOptions[2]; |
| color.click(); |
| |
| // Click cancel and check that all changes have been reverted. |
| $(test.customizeMenu.IDS.MENU_CANCEL).click(); |
| assertEquals(0, test.customizeMenu.timesCustomBackgroundWasSet); |
| assertEquals(0, test.customizeMenu.toggleMostVisitedOrCustomLinksCount); |
| assertEquals(1, test.customizeMenu.applyAutogeneratedThemeCount); |
| assertEquals(1, test.customizeMenu.revertThemeChangesCount); |
| }; |
| |
| /** |
| * Tests that user selections across submenus are not applied when the menu is |
| * closed using the keyboard. |
| */ |
| test.customizeMenu.testMenu_CancelUserSelectionsKeyboard = function() { |
| setupFakeAsyncCollectionLoad(); |
| init(); |
| |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| |
| // Select a background. |
| setupFakeAsyncImageLoad('coll_tile_0'); |
| $('coll_tile_0').click(); |
| $('coll_0_img_tile_0').click(); |
| |
| // Select a shortcut option. |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_OPTION_MOST_VISITED).click(); |
| |
| // Select a color. |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| const colorOptions = |
| $(test.customizeMenu.IDS.COLORS_MENU) |
| .getElementsByClassName(test.customizeMenu.CLASSES.COLLECTION_TILE); |
| // Skip the color picker and the default theme option. |
| const color = colorOptions[2]; |
| color.click(); |
| |
| // Click cancel and check that all changes have been reverted. |
| const keyDown = new Event('keydown'); |
| keyDown.keyCode = 27; |
| $(test.customizeMenu.IDS.CUSTOMIZATION_MENU).dispatchEvent(keyDown); |
| assertEquals(0, test.customizeMenu.timesCustomBackgroundWasSet); |
| assertEquals(0, test.customizeMenu.toggleMostVisitedOrCustomLinksCount); |
| assertEquals(1, test.customizeMenu.applyAutogeneratedThemeCount); |
| assertEquals(1, test.customizeMenu.revertThemeChangesCount); |
| }; |
| |
| //// SHORTCUT SUBMENU TESTS //// |
| |
| /** |
| * Tests that the custom link option will be preselected. |
| */ |
| test.customizeMenu.testShortcuts_CustomLinksPreselected = function() { |
| init(); // Custom links should be enabled and the shortcuts not hidden. |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| |
| // Check that only the custom links option is preselected. |
| assertShortcutOptionsSelected( |
| /*clSelected=*/ true, /*mvSelected=*/ false, /*isHidden=*/ false); |
| }; |
| |
| /** |
| * Tests that the most visited option will be preselected. |
| */ |
| test.customizeMenu.testShortcuts_MostVisitedPreselected = function() { |
| test.customizeMenu.isUsingMostVisited = true; |
| init(); // Most visited should be enabled and the shortcuts not hidden. |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| |
| // Check that only the most visited option is preselected. |
| assertShortcutOptionsSelected( |
| /*clSelected=*/ false, /*mvSelected=*/ true, /*isHidden=*/ false); |
| }; |
| |
| /** |
| * Tests that the "hide shortcuts" option will be preselected. |
| */ |
| test.customizeMenu.testShortcuts_IsHiddenPreselected = function() { |
| test.customizeMenu.areShortcutsVisible = false; |
| init(); // Custom links should be enabled and the shortcuts hidden. |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| |
| // Check that the custom links and "hide shortcuts" options are preselected. |
| assertShortcutOptionsSelected( |
| /*clSelected=*/ true, /*mvSelected=*/ false, /*isHidden=*/ true); |
| }; |
| |
| /** |
| * Tests that the shortcut options can be selected. |
| */ |
| test.customizeMenu.testShortcuts_CanSelectOptions = function() { |
| init(); // Custom links should be enabled and the shortcuts not hidden. |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| |
| assertShortcutOptionsSelected( |
| /*clSelected=*/ true, /*mvSelected=*/ false, /*isHidden=*/ false); |
| |
| // Select the custom links option. The option should remain selected. |
| $(test.customizeMenu.IDS.SHORTCUTS_OPTION_CUSTOM_LINKS).click(); |
| assertShortcutOptionsSelected(true, false, false); |
| |
| // Select the most visited option. The custom links option should be |
| // deselected. |
| $(test.customizeMenu.IDS.SHORTCUTS_OPTION_MOST_VISITED).click(); |
| assertShortcutOptionsSelected(false, true, false); |
| |
| // Toggle the hide shortcuts option. Toggle should be enabled. |
| const hiddenToggle = $(test.customizeMenu.IDS.SHORTCUTS_HIDE_TOGGLE); |
| hiddenToggle.click(); |
| assertShortcutOptionsSelected(false, true, true); |
| |
| // Toggle the hide shortcuts option again. Toggle should be disabled. |
| hiddenToggle.click(); |
| assertShortcutOptionsSelected(false, true, false); |
| }; |
| |
| /** |
| * Tests that the shortcut options can be selected with a keyboard. |
| */ |
| test.customizeMenu.testShortcuts_CanSelectOptionsKeyboard = function() { |
| init(); // Custom links should be enabled and the shortcuts not hidden. |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| |
| const enter = new Event('keyup'); |
| enter.keyCode = 13; |
| const space = new Event('keyup'); |
| space.keyCode = 32; |
| |
| assertShortcutOptionsSelected( |
| /*clSelected=*/ true, /*mvSelected=*/ false, /*isHidden=*/ false); |
| |
| // Select the custom links option. The option should remain selected. |
| $(test.customizeMenu.IDS.SHORTCUTS_OPTION_CUSTOM_LINKS).dispatchEvent(enter); |
| assertShortcutOptionsSelected(true, false, false); |
| |
| // Select the most visited option. The custom links option should be |
| // deselected. |
| $(test.customizeMenu.IDS.SHORTCUTS_OPTION_MOST_VISITED).dispatchEvent(space); |
| assertShortcutOptionsSelected(false, true, false); |
| |
| // Toggle the hide shortcuts option. Toggle should be enabled. |
| const hiddenToggle = $(test.customizeMenu.IDS.SHORTCUTS_HIDE_TOGGLE); |
| hiddenToggle.dispatchEvent(enter); |
| assertShortcutOptionsSelected(false, true, true); |
| |
| // Select the custom links option. The custom links option should be selected |
| // and the hide shortcuts toggle disabled. |
| $(test.customizeMenu.IDS.SHORTCUTS_OPTION_CUSTOM_LINKS).click(); |
| assertShortcutOptionsSelected(true, false, false); |
| }; |
| |
| /** |
| * Tests that the shortcut options will not be applied when the user cancels |
| * customization. |
| */ |
| test.customizeMenu.testShortcuts_Cancel = function() { |
| init(); // Custom links should be enabled and the shortcuts not hidden. |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| |
| // Select the custom links option and hide the shortcuts. |
| $(test.customizeMenu.IDS.SHORTCUTS_OPTION_MOST_VISITED).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_HIDE_TOGGLE).click(); |
| assertShortcutOptionsSelected( |
| /*clSelected=*/ false, /*mvSelected=*/ true, /*isHidden=*/ true); |
| |
| $(test.customizeMenu.IDS.MENU_CANCEL).click(); |
| |
| // Check that the EmbeddedSearchAPI was not called. |
| assertEquals(0, test.customizeMenu.toggleMostVisitedOrCustomLinksCount); |
| assertEquals(0, test.customizeMenu.toggleShortcutsVisibilityCount); |
| }; |
| |
| /** |
| * Tests that the shortcut type will be changed on "done". |
| */ |
| test.customizeMenu.testShortcuts_ChangeShortcutType = function() { |
| init(); // Custom links should be enabled and the shortcuts not hidden. |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| |
| // Select the most visited option. |
| $(test.customizeMenu.IDS.SHORTCUTS_OPTION_MOST_VISITED).click(); |
| assertShortcutOptionsSelected( |
| /*clSelected=*/ false, /*mvSelected=*/ true, /*isHidden=*/ false); |
| |
| $(test.customizeMenu.IDS.MENU_DONE).click(); |
| |
| // Check that the EmbeddedSearchAPI was correctly called. |
| assertEquals(1, test.customizeMenu.toggleMostVisitedOrCustomLinksCount); |
| assertEquals(0, test.customizeMenu.toggleShortcutsVisibilityCount); |
| }; |
| |
| /** |
| * Tests that the shortcut visibility will be changed on "done". |
| */ |
| test.customizeMenu.testShortcuts_ChangeVisibility = function() { |
| init(); // Custom links should be enabled and the shortcuts not hidden. |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| |
| // Hide the shortcuts. |
| $(test.customizeMenu.IDS.SHORTCUTS_HIDE_TOGGLE).click(); |
| assertShortcutOptionsSelected( |
| /*clSelected=*/ true, /*mvSelected=*/ false, /*isHidden=*/ true); |
| |
| $(test.customizeMenu.IDS.MENU_DONE).click(); |
| |
| // Check that the EmbeddedSearchAPI was correctly called. |
| assertEquals(0, test.customizeMenu.toggleMostVisitedOrCustomLinksCount); |
| assertEquals(1, test.customizeMenu.toggleShortcutsVisibilityCount); |
| }; |
| |
| /** |
| * Tests that the shortcut type and visibility will be changed on "done". |
| */ |
| test.customizeMenu.testShortcuts_ChangeShortcutTypeAndVisibility = function() { |
| test.customizeMenu.isUsingMostVisited = true; |
| init(); // Most visited should be enabled and the shortcuts not hidden. |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_BUTTON).click(); |
| |
| // Select the custom links option and hide the shortcuts. |
| $(test.customizeMenu.IDS.SHORTCUTS_OPTION_CUSTOM_LINKS).click(); |
| $(test.customizeMenu.IDS.SHORTCUTS_HIDE_TOGGLE).click(); |
| assertShortcutOptionsSelected( |
| /*clSelected=*/ true, /*mvSelected=*/ false, /*isHidden=*/ true); |
| |
| $(test.customizeMenu.IDS.MENU_DONE).click(); |
| |
| // Check that the EmbeddedSearchAPI was correctly called. |
| assertEquals(1, test.customizeMenu.toggleMostVisitedOrCustomLinksCount); |
| assertEquals(1, test.customizeMenu.toggleShortcutsVisibilityCount); |
| }; |
| |
| //// COLOR SUBMENU TESTS //// |
| |
| /** |
| * Test that Customization dialog doesn't have Colors option when Colors are |
| * disabled. |
| */ |
| test.customizeMenu.testColors_Disabled = function() { |
| configData.chromeColors = false; |
| init(); |
| |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| assertFalse(elementIsVisible($(test.customizeMenu.IDS.COLORS_BUTTON))); |
| }; |
| |
| /** |
| * Test that Customization dialog has Colors option when Colors are enabled. |
| */ |
| test.customizeMenu.testColors_Enabled = function() { |
| init(); |
| |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| assertTrue(elementIsVisible($(test.customizeMenu.IDS.COLORS_BUTTON))); |
| }; |
| |
| |
| /** |
| * Test that default tile is visible. |
| */ |
| test.customizeMenu.testColors_DefaultTile = function() { |
| init(); |
| |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| assertTrue(elementIsVisible($(test.customizeMenu.IDS.COLORS_DEFAULT))); |
| }; |
| |
| /** |
| * Test that at least one color tile is loaded. |
| */ |
| test.customizeMenu.testColors_ColorTilesLoaded = function() { |
| init(); |
| |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| assertTrue($(test.customizeMenu.IDS.COLORS_MENU).children.length > 1); |
| assertTrue(!!$('color_0').dataset.color); |
| assertTrue(!!$('color_0').style.backgroundImage); |
| }; |
| |
| /** |
| * Test that at theme info is not visible when no theme id is available. |
| */ |
| test.customizeMenu.testColors_ThemeInfo_NoThemeID = function() { |
| test.customizeMenu.mockThemeBackgroundInfo = {themeName: 'test theme name'}; |
| init(); |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| assertFalse(elementIsVisible($(test.customizeMenu.IDS.COLORS_THEME))); |
| }; |
| |
| /** |
| * Test that at theme info is not visible when no theme name is available. |
| */ |
| test.customizeMenu.testColors_ThemeInfo_NoThemeName = function() { |
| test.customizeMenu.mockThemeBackgroundInfo = {themeId: 'test theme id'}; |
| init(); |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| assertFalse(elementIsVisible($(test.customizeMenu.IDS.COLORS_THEME))); |
| }; |
| |
| /** |
| * Test that at theme info is visible. |
| */ |
| test.customizeMenu.testColors_ThemeInfo_Visible = function() { |
| test.customizeMenu.mockThemeBackgroundInfo = { |
| themeId: 'test theme id', |
| themeName: 'test theme name' |
| }; |
| init(); |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| assertTrue(elementIsVisible($(test.customizeMenu.IDS.COLORS_THEME))); |
| }; |
| |
| /** |
| * Test that at theme uninstall triggers correct calls. |
| */ |
| test.customizeMenu.testColors_ThemeInfo_Uninstall = function() { |
| test.customizeMenu.mockThemeBackgroundInfo = { |
| themeId: 'test theme id', |
| themeName: 'test theme name' |
| }; |
| init(); |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| assertTrue(elementIsVisible($(test.customizeMenu.IDS.COLORS_THEME))); |
| assertEquals(0, test.customizeMenu.useDefaultThemeCount); |
| |
| $(test.customizeMenu.IDS.COLORS_THEME_UNINSTALL).click(); |
| assertEquals(1, test.customizeMenu.useDefaultThemeCount); |
| }; |
| |
| /** |
| * Test preselect default tile. |
| */ |
| test.customizeMenu.testColors_PreselectDefault = function() { |
| test.customizeMenu.mockThemeBackgroundInfo = {usingDefaultTheme: true}; |
| init(); |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| |
| assertTrue( |
| $(test.customizeMenu.IDS.COLORS_MENU) |
| .getElementsByClassName('selected') |
| .length === 1); |
| assertTrue($(test.customizeMenu.IDS.COLORS_DEFAULT) |
| .classList.contains(test.customizeMenu.CLASSES.SELECTED)); |
| }; |
| |
| /** |
| * Test preselect color tile. |
| */ |
| test.customizeMenu.testColors_PreselectColor = function() { |
| test.customizeMenu.mockThemeBackgroundInfo = { |
| usingDefaultTheme: false, |
| colorId: 1 |
| }; |
| init(); |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| |
| assertTrue( |
| $(test.customizeMenu.IDS.COLORS_MENU) |
| .getElementsByClassName('selected') |
| .length === 1); |
| const tile = $(test.customizeMenu.IDS.COLORS_MENU) |
| .getElementsByClassName('selected')[0] |
| .firstChild; |
| assertTrue( |
| parseInt(tile.dataset.id) === |
| test.customizeMenu.mockThemeBackgroundInfo.colorId); |
| }; |
| |
| /** |
| * Test no preselect when color id is invalid. |
| */ |
| test.customizeMenu.testColors_NoPreselectInvalidColorId = function() { |
| test.customizeMenu.mockThemeBackgroundInfo = { |
| usingDefaultTheme: false, |
| colorId: -1 |
| }; |
| init(); |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| |
| assertTrue( |
| $(test.customizeMenu.IDS.COLORS_MENU) |
| .getElementsByClassName('selected') |
| .length === 0); |
| }; |
| |
| /** |
| * Test no preselect when color id not specified. |
| */ |
| test.customizeMenu.testColors_NoPreselectNoColorId = function() { |
| test.customizeMenu.mockThemeBackgroundInfo = {usingDefaultTheme: false}; |
| init(); |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| |
| assertTrue( |
| $(test.customizeMenu.IDS.COLORS_MENU) |
| .getElementsByClassName('selected') |
| .length === 0); |
| }; |
| |
| /** |
| * Test preselect when custom color is used. |
| */ |
| test.customizeMenu.testColors_PreselectColorPicker = function() { |
| configData.chromeColorsCustomColorPicker = true; |
| test.customizeMenu.mockThemeBackgroundInfo = { |
| usingDefaultTheme: false, |
| colorId: 0, |
| colorDark: [100, 100, 100], |
| colorLight: [200, 200, 200], |
| colorPicked: [90, 90, 90], |
| }; |
| init(); |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| $(test.customizeMenu.IDS.COLORS_BUTTON).click(); |
| |
| assertTrue( |
| $(test.customizeMenu.IDS.COLORS_MENU) |
| .getElementsByClassName('selected') |
| .length === 1); |
| assertTrue($(test.customizeMenu.IDS.COLOR_PICKER_CONTAINER) |
| .classList.contains(test.customizeMenu.CLASSES.SELECTED)); |
| }; |
| |
| //// BACKGROUND SUBMENU TESTS //// |
| |
| /* |
| * Tests that a custom background can be set through the menu. |
| */ |
| test.customizeMenu.testBackgrounds_SetCustomBackground = function() { |
| init(); |
| |
| setupFakeAsyncCollectionLoad(); |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| |
| const backgroundSubmenu = $(test.customizeMenu.IDS.BACKGROUNDS_MENU); |
| const backgroundImageSubmenu = |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU); |
| assertTrue(elementIsVisible(backgroundSubmenu)); |
| |
| // 5 total tiles: upload, default, and the 3 collection tiles. |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_MENU) |
| .getElementsByClassName('bg-sel-tile') |
| .length === 5); |
| |
| setupFakeAsyncImageLoad('coll_tile_0'); |
| $('coll_tile_0').click(); |
| |
| // The open menu is now the images menu with 4 tiles. |
| assertFalse(elementIsVisible(backgroundSubmenu)); |
| assertTrue(elementIsVisible(backgroundImageSubmenu)); |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU) |
| .getElementsByClassName('bg-sel-tile') |
| .length === 4); |
| |
| $('coll_0_img_tile_0').click(); |
| $(test.customizeMenu.IDS.MENU_DONE).click(); |
| |
| // No menu should be open, and setCustomBackground should have been called. |
| assertFalse(elementIsVisible(backgroundSubmenu)); |
| assertFalse(elementIsVisible(backgroundImageSubmenu)); |
| assertEquals(1, test.customizeMenu.timesCustomBackgroundWasSet); |
| }; |
| |
| /** |
| * Tests that canceling after selecting an image doesn't set |
| * a custom background. |
| */ |
| test.customizeMenu.testBackgrounds_CancelCustomBackground = function() { |
| init(); |
| |
| assertEquals(0, test.customizeMenu.timesCustomBackgroundWasSet); |
| setupFakeAsyncCollectionLoad(); |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| |
| const backgroundSubmenu = $(test.customizeMenu.IDS.BACKGROUNDS_MENU); |
| const backgroundImageSubmenu = |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU); |
| assertTrue(elementIsVisible(backgroundSubmenu)); |
| |
| // 5 total tiles: upload, default, and the 3 collection tiles. |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_MENU) |
| .getElementsByClassName('bg-sel-tile') |
| .length === 5); |
| |
| setupFakeAsyncImageLoad('coll_tile_0'); |
| $('coll_tile_0').click(); |
| |
| // The open menu is now the images menu with 4 tiles. |
| assertFalse(elementIsVisible(backgroundSubmenu)); |
| assertTrue(elementIsVisible(backgroundImageSubmenu)); |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU) |
| .getElementsByClassName('bg-sel-tile') |
| .length === 4); |
| |
| $('coll_0_img_tile_0').click(); |
| $(test.customizeMenu.IDS.MENU_CANCEL).click(); |
| |
| // No menu should be open, and setCustomBackground should NOT have been |
| // called. |
| assertFalse(elementIsVisible(backgroundSubmenu)); |
| assertFalse(elementIsVisible(backgroundImageSubmenu)); |
| assertEquals(0, test.customizeMenu.timesCustomBackgroundWasSet); |
| }; |
| |
| /** |
| * Tests pressing the back arrow in the background image submenu will return to |
| * the collections menu. |
| */ |
| test.customizeMenu.testBackgrounds_BackArrowCustomBackground = function() { |
| init(); |
| |
| setupFakeAsyncCollectionLoad(); |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| |
| const backgroundSubmenu = $(test.customizeMenu.IDS.BACKGROUNDS_MENU); |
| const backgroundImageSubmenu = |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU); |
| assertTrue(elementIsVisible(backgroundSubmenu)); |
| |
| // 5 total tiles: upload, default, and the 3 collection tiles. |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_MENU) |
| .getElementsByClassName('bg-sel-tile') |
| .length === 5); |
| |
| setupFakeAsyncImageLoad('coll_tile_0'); |
| $('coll_tile_0').click(); |
| |
| // The open menu is now the images menu with 4 tiles. |
| assertFalse(elementIsVisible(backgroundSubmenu)); |
| assertTrue(elementIsVisible(backgroundImageSubmenu)); |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU) |
| .getElementsByClassName('bg-sel-tile') |
| .length === 4); |
| |
| $('coll_0_img_tile_0').click(); |
| $(test.customizeMenu.IDS.MENU_BACK).click(); |
| |
| // The main backgrounds menu should be open, and no custom background set. |
| assertTrue(elementIsVisible(backgroundSubmenu)); |
| assertFalse(elementIsVisible(backgroundImageSubmenu)); |
| assertEquals(0, test.customizeMenu.timesCustomBackgroundWasSet); |
| |
| // Reopen the images menu, the selection should still be present. |
| $('coll_tile_0').click(); |
| |
| assertImageSubmenuOpenWithFirstTileSelected(); |
| |
| // Close and reopen the submenu and ensure the first tile is still selected. |
| $(test.customizeMenu.IDS.MENU_BACK).click(); |
| assertTrue(elementIsVisible(backgroundSubmenu)); |
| assertFalse(elementIsVisible(backgroundImageSubmenu)); |
| assertEquals(0, test.customizeMenu.timesCustomBackgroundWasSet); |
| $('coll_tile_0').click(); |
| |
| assertImageSubmenuOpenWithFirstTileSelected(); |
| }; |
| |
| /** |
| * Tests pressing backspace in the background image submenu will return to the |
| * collections menu. |
| */ |
| test.customizeMenu.testBackgrounds_BackspaceCustomBackground = function() { |
| init(); |
| |
| setupFakeAsyncCollectionLoad(); |
| |
| // Open the Shortcuts submenu. |
| $(test.customizeMenu.IDS.EDIT_BG).click(); |
| |
| const backgroundSubmenu = $(test.customizeMenu.IDS.BACKGROUNDS_MENU); |
| const backgroundImageSubmenu = |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU); |
| assertTrue(elementIsVisible(backgroundSubmenu)); |
| |
| // 5 total tiles: upload, default, and the 3 collection tiles. |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_MENU) |
| .getElementsByClassName('bg-sel-tile') |
| .length === 5); |
| |
| setupFakeAsyncImageLoad('coll_tile_0'); |
| $('coll_tile_0').click(); |
| |
| // The open menu is now the images menu with 4 tiles. |
| assertFalse(elementIsVisible(backgroundSubmenu)); |
| assertTrue(elementIsVisible(backgroundImageSubmenu)); |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU) |
| .getElementsByClassName('bg-sel-tile') |
| .length === 4); |
| |
| $('coll_0_img_tile_0').click(); |
| const keyDown = new Event('keydown'); |
| keyDown.keyCode = 8; |
| $(test.customizeMenu.IDS.CUSTOMIZATION_MENU).dispatchEvent(keyDown); |
| |
| // The main backgrounds menu should be open, and no custom background set. |
| assertTrue(elementIsVisible(backgroundSubmenu)); |
| assertFalse(elementIsVisible(backgroundImageSubmenu)); |
| assertEquals(0, test.customizeMenu.timesCustomBackgroundWasSet); |
| |
| // Reopen the images menu, the selection should still be present. |
| $('coll_tile_0').click(); |
| |
| assertImageSubmenuOpenWithFirstTileSelected(); |
| |
| // Close and reopen the submenu and ensure the tile is still selected. |
| $(test.customizeMenu.IDS.MENU_BACK).click(); |
| assertTrue(elementIsVisible(backgroundSubmenu)); |
| assertFalse(elementIsVisible(backgroundImageSubmenu)); |
| assertEquals(0, test.customizeMenu.timesCustomBackgroundWasSet); |
| $('coll_tile_0').click(); |
| |
| assertImageSubmenuOpenWithFirstTileSelected(); |
| }; |
| |
| // ******************************* HELPERS ******************************* |
| |
| /** |
| * Initialize the local NTP and mock the EmbeddedSearchAPI. |
| */ |
| init = function() { |
| // Mock chrome.embeddedSearch functions. This must be done right before |
| // initializing the local NTP. |
| const applyAutogeneratedTheme = () => { |
| test.customizeMenu.applyAutogeneratedThemeCount++ |
| }; |
| const confirmThemeChanges = () => { |
| test.customizeMenu.confirmThemeChangesCount++ |
| }; |
| const revertThemeChanges = () => { |
| test.customizeMenu.revertThemeChangesCount++ |
| }; |
| const useDefaultTheme = () => { |
| test.customizeMenu.useDefaultThemeCount++; |
| }; |
| const toggleMostVisitedOrCustomLinks = () => { |
| test.customizeMenu.toggleMostVisitedOrCustomLinksCount++ |
| }; |
| const toggleShortcutsVisibility = (doNotify) => { |
| test.customizeMenu.toggleShortcutsVisibilityCount++ |
| }; |
| const timesCustomBackgroundWasSet = () => { |
| test.customizeMenu.timesCustomBackgroundWasSet++; |
| }; |
| // We want to keep some EmbeddedSearchAPI functions, so save and add them to |
| // our mock API. |
| const getColorsInfo = chrome.embeddedSearch.newTabPage.getColorsInfo; |
| let themeBackgroundInfo = |
| chrome.embeddedSearch.newTabPage.themeBackgroundInfo; |
| // Override theme background properties with testing values. |
| for (const property in test.customizeMenu.mockThemeBackgroundInfo) { |
| themeBackgroundInfo[property] = |
| test.customizeMenu.mockThemeBackgroundInfo[property]; |
| }; |
| |
| test.customizeMenu.stubs.replace(chrome.embeddedSearch, 'newTabPage', { |
| applyAutogeneratedTheme: applyAutogeneratedTheme, |
| applyDefaultTheme: () => {}, |
| areShortcutsVisible: test.customizeMenu.areShortcutsVisible, |
| confirmThemeChanges: confirmThemeChanges, |
| getColorsInfo: getColorsInfo, |
| isUsingMostVisited: test.customizeMenu.isUsingMostVisited, |
| logEvent: (a) => {}, |
| resetCustomLinks: () => {}, |
| revertThemeChanges: revertThemeChanges, |
| selectLocalBackgroundImage: () => {}, |
| setBackgroundURL: timesCustomBackgroundWasSet, |
| setBackgroundInfo: timesCustomBackgroundWasSet, |
| themeBackgroundInfo: themeBackgroundInfo, |
| toggleMostVisitedOrCustomLinks: toggleMostVisitedOrCustomLinks, |
| toggleShortcutsVisibility: toggleShortcutsVisibility, |
| useDefaultTheme: useDefaultTheme, |
| }); |
| |
| initLocalNTP(/*isGooglePage=*/ true); |
| }; |
| |
| /** |
| * Assert that the correct shortcut options are selected. |
| * @param {boolean} clSelected True if custom links are selected. |
| * @param {boolean} mvSelected True if most visited are selected. |
| * @param {boolean} isHidden True if the hide shortcuts toggle should be on. |
| */ |
| assertShortcutOptionsSelected = function(clSelected, mvSelected, isHidden) { |
| const clOption = $(test.customizeMenu.IDS.SHORTCUTS_OPTION_CUSTOM_LINKS); |
| const mvOption = $(test.customizeMenu.IDS.SHORTCUTS_OPTION_MOST_VISITED); |
| const hiddenToggle = $(test.customizeMenu.IDS.SHORTCUTS_HIDE_TOGGLE); |
| assertEquals( |
| clSelected, |
| clOption.parentElement.classList.contains( |
| test.customizeMenu.CLASSES.SELECTED)); |
| assertEquals( |
| mvSelected, |
| mvOption.parentElement.classList.contains( |
| test.customizeMenu.CLASSES.SELECTED)); |
| assertEquals(isHidden, hiddenToggle.checked); |
| }; |
| |
| /** |
| * Assert that the background images submenu is open and the first image tile is |
| * selected. |
| */ |
| assertImageSubmenuOpenWithFirstTileSelected = function() { |
| const backgroundSubmenu = $(test.customizeMenu.IDS.BACKGROUNDS_MENU); |
| const backgroundImageSubmenu = |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU); |
| |
| assertFalse(elementIsVisible(backgroundSubmenu)); |
| assertTrue(elementIsVisible(backgroundImageSubmenu)); |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU) |
| .getElementsByClassName('bg-sel-tile') |
| .length === 4); |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU) |
| .getElementsByClassName('selected') |
| .length === 1); |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU) |
| .getElementsByClassName('selected')[0] |
| .firstChild.id === 'coll_0_img_tile_0'); |
| }; |
| |
| /** |
| * Assert that the background images submenu is open and no image tile is |
| * selected. |
| */ |
| assertImageSubmenuOpenWithNoTileSelected = function() { |
| const backgroundSubmenu = $(test.customizeMenu.IDS.BACKGROUNDS_MENU); |
| const backgroundImageSubmenu = |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU); |
| |
| assertFalse(elementIsVisible(backgroundSubmenu)); |
| assertTrue(elementIsVisible(backgroundImageSubmenu)); |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU) |
| .getElementsByClassName('bg-sel-tile') |
| .length === 4); |
| assertTrue( |
| $(test.customizeMenu.IDS.BACKGROUNDS_IMAGE_MENU) |
| .getElementsByClassName('selected') |
| .length === 0); |
| }; |
| |
| /** |
| * Fake the loading of the Chrome Backgrounds collections so it happens |
| * synchronously. |
| */ |
| setupFakeAsyncCollectionLoad = function() { |
| // Override the collection loading script. |
| customize.loadChromeBackgrounds = function() { |
| const collScript = document.createElement('script'); |
| collScript.id = 'ntp-collection-loader'; |
| document.body.appendChild(collScript); |
| coll = [ |
| { |
| collectionId: 'collection1', |
| collectionName: 'Collection 1', |
| previewImageUrl: 'chrome-search://local-ntp/background.jpg' |
| }, |
| { |
| collectionId: 'collection2', |
| collectionName: 'Collection 2', |
| previewImageUrl: 'chrome-search://local-ntp/background.jpg' |
| }, |
| { |
| collectionId: 'collection3', |
| collectionName: 'Collection 3', |
| previewImageUrl: 'chrome-search://local-ntp/background.jpg' |
| } |
| ]; |
| collErrors = {}; |
| customize.showCollectionSelectionDialog(); |
| }; |
| }; |
| |
| /** |
| * Fake the loading of the a collection's images so it happens synchronously. |
| */ |
| setupFakeAsyncImageLoad = function(tile_id) { |
| // Append the creation of the image data and a call to onload to the |
| // end of the click handler. |
| const oldImageLoader = $(tile_id).onclick; |
| $(tile_id).onclick = function(event) { |
| oldImageLoader(event); |
| collImg = [ |
| { |
| attributionActionUrl: 'https://www.google.com', |
| attributions: ['test1', 'attribution1'], |
| collectionId: 'collection1', |
| imageUrl: 'chrome-search://local-ntp/background1.jpg', |
| thumbnailImageUrl: 'chrome-search://local-ntp/background_thumbnail.jpg1' |
| }, |
| { |
| attributionActionUrl: 'https://www.google.com', |
| attributions: ['test2', 'attribution2'], |
| collectionId: 'collection1', |
| imageUrl: 'chrome-search://local-ntp/background2.jpg', |
| thumbnailImageUrl: 'chrome-search://local-ntp/background_thumbnail.jpg2' |
| }, |
| { |
| attributionActionUrl: 'https://www.google.com', |
| attributions: ['test3', 'attribution3'], |
| collectionId: 'collection1', |
| imageUrl: 'chrome-search://local-ntp/background3.jpg', |
| thumbnailImageUrl: 'chrome-search://local-ntp/background_thumbnail.jpg3' |
| }, |
| { |
| attributionActionUrl: 'https://www.google.com', |
| attributions: ['test4', 'attribution4'], |
| collectionId: 'collection1', |
| imageUrl: 'chrome-search://local-ntp/background4.jpg', |
| thumbnailImageUrl: 'chrome-search://local-ntp/background_thumbnail.jpg4' |
| }, |
| ]; |
| collImgErrors = {}; |
| $('ntp-images-loader').onload(); |
| } |
| }; |