chrome/test/data/local_ntp/customize_menu_browsertest.js

// 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_ATTR: 'custom-bg-attr',
  CUSTOM_BG_ATTR_LINE1: 'attr1',
  CUSTOM_BG_ATTR_LINE2: 'attr2',
  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();

  setupFakeAsyncImageLoad('coll_tile_0');
  $('coll_tile_0').click();

  // Check styling and attribution for default background.
  assertFalse(document.body.classList.contains('alternate-logo'));
  assertEquals(null, $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE1));
  assertEquals(null, $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE2));
  assertEquals('', $(test.customizeMenu.IDS.CUSTOM_BG_ATTR).href);

  // Select a background and check that correct styling and attributes are
  // applied to the page.
  const image_tile = $('coll_0_img_tile_0');
  image_tile.click();
  assertTrue(document.body.classList.contains('alternate-logo'));
  assertEquals(
      image_tile.dataset.attributionLine1,
      $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE1).innerText);
  assertEquals(
      image_tile.dataset.attributionLine2,
      $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE2).innerText);
  assertEquals(
      image_tile.dataset.attributionActionUrl,
      $(test.customizeMenu.IDS.CUSTOM_BG_ATTR).href);
};

/**
 * 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();
  }
};