chrome/test/data/webui/print_preview.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * Test fixture for print preview WebUI testing.
   7  * @constructor
   8  * @extends {testing.Test}
   9  */
  10 function PrintPreviewWebUITest() {
  11   testing.Test.call(this);
  12   this.nativeLayer_ = null;
  13   this.initialSettings_ = null;
  14   this.localDestinationInfos_ = null;
  15 }
  16
  17 /**
  18  * Index of the "Save as PDF" printer.
  19  * @type {number}
  20  * @const
  21  */
  22 PrintPreviewWebUITest.PDF_INDEX = 0;
  23
  24 /**
  25  * Index of the Foo printer.
  26  * @type {number}
  27  * @const
  28  */
  29 PrintPreviewWebUITest.FOO_INDEX = 1;
  30
  31 /**
  32  * Index of the Bar printer.
  33  * @type {number}
  34  * @const
  35  */
  36 PrintPreviewWebUITest.BAR_INDEX = 2;
  37
  38 PrintPreviewWebUITest.prototype = {
  39   __proto__: testing.Test.prototype,
  40
  41   /**
  42    * Browse to the sample page, cause print preview & call preLoad().
  43    * @type {string}
  44    * @override
  45    */
  46   browsePrintPreload: 'print_preview_hello_world_test.html',
  47
  48   /**
  49    * Stub out low-level functionality like the NativeLayer and
  50    * CloudPrintInterface.
  51    * @this {PrintPreviewWebUITest}
  52    * @override
  53    */
  54   preLoad: function() {
  55     window.addEventListener('DOMContentLoaded', function() {
  56       function NativeLayerStub() {
  57         cr.EventTarget.call(this);
  58       }
  59       NativeLayerStub.prototype = {
  60         __proto__: cr.EventTarget.prototype,
  61         startGetInitialSettings: function() {},
  62         startGetLocalDestinations: function() {},
  63         startGetPrivetDestinations: function() {},
  64         startGetLocalDestinationCapabilities: function(destinationId) {}
  65       };
  66       var oldNativeLayerEventType = print_preview.NativeLayer.EventType;
  67       var oldDuplexMode = print_preview.NativeLayer.DuplexMode;
  68       print_preview.NativeLayer = NativeLayerStub;
  69       print_preview.NativeLayer.EventType = oldNativeLayerEventType;
  70       print_preview.NativeLayer.DuplexMode = oldDuplexMode;
  71
  72       function CloudPrintInterfaceStub() {
  73         cr.EventTarget.call(this);
  74       }
  75       CloudPrintInterfaceStub.prototype = {
  76         __proto__: cr.EventTarget.prototype,
  77         search: function(isRecent) {}
  78       };
  79       var oldCpInterfaceEventType = cloudprint.CloudPrintInterface.EventType;
  80       cloudprint.CloudPrintInterface = CloudPrintInterfaceStub;
  81       cloudprint.CloudPrintInterface.EventType = oldCpInterfaceEventType;
  82
  83       print_preview.PreviewArea.prototype.getPluginType_ =
  84           function() {
  85         return print_preview.PreviewArea.PluginType_.NONE;
  86       };
  87     }.bind(this));
  88   },
  89
  90   setUpPreview: function() {
  91     var initialSettingsSetEvent =
  92         new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
  93     initialSettingsSetEvent.initialSettings = this.initialSettings_;
  94     this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
  95
  96     var localDestsSetEvent =
  97         new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
  98     localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
  99     this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 100   },
 101
 102   /**
 103    * Generate a real C++ class; don't typedef.
 104    * @type {?string}
 105    * @override
 106    */
 107   typedefCppFixture: null,
 108
 109   /**
 110    * @this {PrintPreviewWebUITest}
 111    * @override
 112    */
 113   setUp: function() {
 114     Mock4JS.clearMocksToVerify();
 115
 116     this.initialSettings_ = new print_preview.NativeInitialSettings(
 117       false /*isInKioskAutoPrintMode*/,
 118       false /*isInAppKioskMode*/,
 119       false /*hidePrintWithSystemDialogLink*/,
 120       ',' /*thousandsDelimeter*/,
 121       '.' /*decimalDelimeter*/,
 122       1 /*unitType*/,
 123       true /*isDocumentModifiable*/,
 124       'title' /*documentTitle*/,
 125       true /*documentHasSelection*/,
 126       false /*selectionOnly*/,
 127       'FooDevice' /*systemDefaultDestinationId*/,
 128       null /*serializedAppStateStr*/,
 129       false /*documentHasSelection*/);
 130     this.localDestinationInfos_ = [
 131       { printerName: 'FooName', deviceName: 'FooDevice' },
 132       { printerName: 'BarName', deviceName: 'BarDevice' }
 133     ];
 134     this.nativeLayer_ = printPreview.nativeLayer_;
 135   }
 136 };
 137
 138 GEN('#include "chrome/test/data/webui/print_preview.h"');
 139
 140 // Test some basic assumptions about the print preview WebUI.
 141 TEST_F('PrintPreviewWebUITest', 'TestPrinterList', function() {
 142   var initialSettingsSetEvent =
 143       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 144   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 145   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 146
 147   var localDestsSetEvent =
 148       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 149   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 150   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 151
 152   var recentList = $('destination-search').querySelector('.recent-list ul');
 153   var localList = $('destination-search').querySelector('.local-list ul');
 154   assertNotEquals(null, recentList);
 155   assertEquals(1, recentList.childNodes.length);
 156   assertEquals('FooName',
 157                recentList.childNodes.item(0).querySelector(
 158                    '.destination-list-item-name').textContent);
 159
 160   assertNotEquals(null, localList);
 161   assertEquals(3, localList.childNodes.length);
 162   assertEquals('Save as PDF',
 163                localList.childNodes.item(PrintPreviewWebUITest.PDF_INDEX).
 164                    querySelector('.destination-list-item-name').textContent);
 165   assertEquals('FooName',
 166                localList.childNodes.item(PrintPreviewWebUITest.FOO_INDEX).
 167                    querySelector('.destination-list-item-name').textContent);
 168   assertEquals('BarName',
 169                localList.childNodes.item(PrintPreviewWebUITest.BAR_INDEX).
 170                    querySelector('.destination-list-item-name').textContent);
 171 });
 172
 173 // Test that the printer list is structured correctly after calling
 174 // addCloudPrinters with an empty list.
 175 TEST_F('PrintPreviewWebUITest', 'TestPrinterListCloudEmpty', function() {
 176   var initialSettingsSetEvent =
 177       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 178   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 179   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 180
 181   var localDestsSetEvent =
 182       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 183   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 184   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 185
 186   var cloudPrintEnableEvent =
 187       new Event(print_preview.NativeLayer.EventType.CLOUD_PRINT_ENABLE);
 188   cloudPrintEnableEvent.baseCloudPrintUrl = 'cloudprint url';
 189   this.nativeLayer_.dispatchEvent(cloudPrintEnableEvent);
 190
 191   var searchDoneEvent =
 192       new Event(cloudprint.CloudPrintInterface.EventType.SEARCH_DONE);
 193   searchDoneEvent.printers = [];
 194   searchDoneEvent.isRecent = true;
 195   searchDoneEvent.email = 'foo@chromium.org';
 196   printPreview.cloudPrintInterface_.dispatchEvent(searchDoneEvent);
 197
 198   var recentList = $('destination-search').querySelector('.recent-list ul');
 199   var localList = $('destination-search').querySelector('.local-list ul');
 200   var cloudList = $('destination-search').querySelector('.cloud-list ul');
 201
 202   assertNotEquals(null, recentList);
 203   assertEquals(1, recentList.childNodes.length);
 204   assertEquals('FooName',
 205                recentList.childNodes.item(0).querySelector(
 206                    '.destination-list-item-name').textContent);
 207
 208   assertNotEquals(null, localList);
 209   assertEquals(3, localList.childNodes.length);
 210   assertEquals('Save as PDF',
 211                localList.childNodes.item(PrintPreviewWebUITest.PDF_INDEX).
 212                    querySelector('.destination-list-item-name').textContent);
 213   assertEquals('FooName',
 214                localList.childNodes.item(PrintPreviewWebUITest.FOO_INDEX).
 215                    querySelector('.destination-list-item-name').textContent);
 216   assertEquals('BarName',
 217                localList.childNodes.item(PrintPreviewWebUITest.BAR_INDEX).
 218                    querySelector('.destination-list-item-name').textContent);
 219
 220   assertNotEquals(null, cloudList);
 221   assertEquals(0, cloudList.childNodes.length);
 222 });
 223
 224 /**
 225  * Verify that |section| visibility matches |visible|.
 226  * @param {HTMLDivElement} section The section to check.
 227  * @param {boolean} visible The expected state of visibility.
 228  */
 229 function checkSectionVisible(section, visible) {
 230   assertNotEquals(null, section);
 231   expectEquals(
 232       visible, section.classList.contains('visible'), 'section=' + section.id);
 233 }
 234
 235 function checkElementDisplayed(el, isDisplayed) {
 236   assertNotEquals(null, el);
 237   expectEquals(isDisplayed,
 238                !el.hidden,
 239                'element="' + el.id + '" of class "' + el.classList + '"');
 240 }
 241
 242 function getCddTemplate(printerId) {
 243   return {
 244     printerId: printerId,
 245     capabilities: {
 246       version: '1.0',
 247       printer: {
 248         supported_content_type: [{content_type: 'application/pdf'}],
 249         collate: {},
 250         color: {
 251           option: [
 252             {type: 'STANDARD_COLOR', is_default: true},
 253             {type: 'STANDARD_MONOCHROME'}
 254           ]
 255         },
 256         copies: {},
 257         duplex: {
 258           option: [
 259             {type: 'NO_DUPLEX', is_default: true},
 260             {type: 'LONG_EDGE'},
 261             {type: 'SHORT_EDGE'}
 262           ]
 263         },
 264         page_orientation: {
 265           option: [
 266             {type: 'PORTRAIT', is_default: true},
 267             {type: 'LANDSCAPE'},
 268             {type: 'AUTO'}
 269           ]
 270         },
 271         media_size: {
 272           option: [
 273             { name: 'NA_LETTER',
 274               width_microns: 215900,
 275               height_microns: 279400,
 276               is_default: true
 277             }
 278           ]
 279         }
 280       }
 281     }
 282   };
 283 }
 284
 285 // Test that disabled settings hide the disabled sections.
 286 TEST_F('PrintPreviewWebUITest', 'TestSystemDialogLinkIsHiddenInAppKiosMode',
 287     function() {
 288   var initialSettingsSetEvent =
 289       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 290   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 291   initialSettingsSetEvent.initialSettings.isInAppKioskMode_ = true;
 292   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 293
 294   checkElementDisplayed($('system-dialog-link'), false);
 295 });
 296
 297 // Test that disabled settings hide the disabled sections.
 298 TEST_F('PrintPreviewWebUITest', 'TestSectionsDisabled', function() {
 299   checkSectionVisible($('layout-settings'), false);
 300   checkSectionVisible($('color-settings'), false);
 301   checkSectionVisible($('copies-settings'), false);
 302
 303   var initialSettingsSetEvent =
 304       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 305   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 306   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 307
 308   var localDestsSetEvent =
 309       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 310   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 311   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 312
 313   var capsSetEvent =
 314       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 315   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 316   capsSetEvent.settingsInfo.capabilities.printer.color = {
 317     "option": [
 318       {"is_default": true, "type": "STANDARD_COLOR"}
 319     ]
 320   };
 321   delete capsSetEvent.settingsInfo.capabilities.printer.copies;
 322   this.nativeLayer_.dispatchEvent(capsSetEvent);
 323
 324   checkSectionVisible($('layout-settings'), true);
 325   checkSectionVisible($('color-settings'), false);
 326   checkSectionVisible($('copies-settings'), false);
 327 });
 328
 329 // When the source is 'PDF' and 'Save as PDF' option is selected, we hide the
 330 // fit to page option.
 331 TEST_F('PrintPreviewWebUITest', 'PrintToPDFSelectedCapabilities', function() {
 332   // Add PDF printer.
 333   this.initialSettings_.isDocumentModifiable_ = false;
 334   this.initialSettings_.systemDefaultDestinationId_ = 'Save as PDF';
 335
 336   var initialSettingsSetEvent =
 337       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 338   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 339   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 340
 341   var capsSetEvent =
 342       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 343   capsSetEvent.settingsInfo = {
 344     printerId: 'Save as PDF',
 345     capabilities: {
 346       version: '1.0',
 347       printer: {
 348         page_orientation: {
 349           option: [
 350             {type: 'AUTO', is_default: true},
 351             {type: 'PORTRAIT'},
 352             {type: 'LANDSCAPE'}
 353           ]
 354         },
 355         color: {
 356           option: [
 357             {type: 'STANDARD_COLOR', is_default: true}
 358           ]
 359         },
 360         media_size: {
 361           option: [
 362             { name: 'NA_LETTER',
 363               width_microns: 0,
 364               height_microns: 0,
 365               is_default: true
 366             }
 367           ]
 368         }
 369       }
 370     }
 371   };
 372   this.nativeLayer_.dispatchEvent(capsSetEvent);
 373
 374   checkSectionVisible($('other-options-settings'), false);
 375   checkSectionVisible($('media-size-settings'), false);
 376 });
 377
 378 // When the source is 'HTML', we always hide the fit to page option and show
 379 // media size option.
 380 TEST_F('PrintPreviewWebUITest', 'SourceIsHTMLCapabilities', function() {
 381   var initialSettingsSetEvent =
 382       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 383   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 384   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 385
 386   var localDestsSetEvent =
 387       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 388   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 389   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 390
 391   var capsSetEvent =
 392       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 393   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 394   this.nativeLayer_.dispatchEvent(capsSetEvent);
 395
 396   var moreSettingsDiv = $('more-settings');
 397   var mediaSizeDiv = $('media-size-settings');
 398   var otherOptionsDiv = $('other-options-settings');
 399   var fitToPageEl = otherOptionsDiv.querySelector('.fit-to-page-container');
 400
 401   // Check that options are collapsed (section is visible, because duplex is
 402   // available).
 403   checkSectionVisible(otherOptionsDiv, true);
 404   checkElementDisplayed(fitToPageEl, false);
 405   checkSectionVisible(mediaSizeDiv, false);
 406   // Expand it.
 407   checkSectionVisible(moreSettingsDiv, true);
 408   moreSettingsDiv.click();
 409
 410   checkElementDisplayed(fitToPageEl, false);
 411   checkSectionVisible(mediaSizeDiv, true);
 412 });
 413
 414 // When the source is "PDF", depending on the selected destination printer, we
 415 // show/hide the fit to page option and hide media size selection.
 416 TEST_F('PrintPreviewWebUITest', 'SourceIsPDFCapabilities', function() {
 417   this.initialSettings_.isDocumentModifiable_ = false;
 418
 419   var initialSettingsSetEvent =
 420       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 421   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 422   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 423
 424   var localDestsSetEvent =
 425       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 426   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 427   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 428
 429   var capsSetEvent =
 430       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 431   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 432   this.nativeLayer_.dispatchEvent(capsSetEvent);
 433
 434   var otherOptionsDiv = $('other-options-settings');
 435
 436   checkSectionVisible(otherOptionsDiv, true);
 437   checkElementDisplayed(
 438       otherOptionsDiv.querySelector('.fit-to-page-container'), true);
 439   expectTrue(
 440       otherOptionsDiv.querySelector('.fit-to-page-checkbox').checked);
 441   checkSectionVisible($('media-size-settings'), true);
 442 });
 443
 444 // When the print scaling is disabled for the source "PDF", we show the fit
 445 // to page option but the state is unchecked by default.
 446 TEST_F('PrintPreviewWebUITest', 'PrintScalingDisabledForPlugin', function() {
 447   this.initialSettings_.isDocumentModifiable_ = false;
 448
 449   var initialSettingsSetEvent =
 450       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 451   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 452   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 453
 454   var localDestsSetEvent =
 455       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 456   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 457   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 458
 459   var capsSetEvent =
 460       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 461   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 462   this.nativeLayer_.dispatchEvent(capsSetEvent);
 463
 464   // Indicate that the PDF does not support scaling by default.
 465   cr.dispatchSimpleEvent(
 466       this.nativeLayer_, print_preview.NativeLayer.EventType.DISABLE_SCALING);
 467
 468   var otherOptionsDiv = $('other-options-settings');
 469
 470   checkSectionVisible(otherOptionsDiv, true);
 471
 472   checkElementDisplayed(
 473       otherOptionsDiv.querySelector('.fit-to-page-container'), true);
 474   expectFalse(
 475       otherOptionsDiv.querySelector('.fit-to-page-checkbox').checked);
 476 });
 477
 478 // Make sure that custom margins controls are properly set up.
 479 TEST_F('PrintPreviewWebUITest', 'CustomMarginsControlsCheck', function() {
 480   var initialSettingsSetEvent =
 481       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 482   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 483   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 484
 485   var localDestsSetEvent =
 486       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 487   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 488   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 489
 490   var capsSetEvent =
 491       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 492   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 493   this.nativeLayer_.dispatchEvent(capsSetEvent);
 494
 495   printPreview.printTicketStore_.marginsType.updateValue(
 496       print_preview.ticket_items.MarginsType.Value.CUSTOM);
 497
 498   ['left', 'top', 'right', 'bottom'].forEach(function(margin) {
 499     var control = $('preview-area').querySelector('.margin-control-' + margin);
 500     assertNotEquals(null, control);
 501     var input = control.querySelector('.margin-control-textbox');
 502     assertTrue(input.hasAttribute('aria-label'));
 503     assertNotEquals('undefined', input.getAttribute('aria-label'));
 504   });
 505 });
 506
 507 // Page layout has zero margins. Hide header and footer option.
 508 TEST_F('PrintPreviewWebUITest', 'PageLayoutHasNoMarginsHideHeaderFooter',
 509     function() {
 510   var initialSettingsSetEvent =
 511       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 512   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 513   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 514
 515   var localDestsSetEvent =
 516       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 517   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 518   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 519
 520   var capsSetEvent =
 521       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 522   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 523   this.nativeLayer_.dispatchEvent(capsSetEvent);
 524
 525   var moreSettingsDiv = $('more-settings');
 526   var otherOptionsDiv = $('other-options-settings');
 527   var headerFooterEl =
 528       otherOptionsDiv.querySelector('.header-footer-container');
 529
 530   // Check that options are collapsed (section is visible, because duplex is
 531   // available).
 532   checkSectionVisible(otherOptionsDiv, true);
 533   checkElementDisplayed(headerFooterEl, false);
 534   // Expand it.
 535   checkSectionVisible(moreSettingsDiv, true);
 536   moreSettingsDiv.click();
 537
 538   checkElementDisplayed(headerFooterEl, true);
 539
 540   printPreview.printTicketStore_.marginsType.updateValue(
 541       print_preview.ticket_items.MarginsType.Value.CUSTOM);
 542   printPreview.printTicketStore_.customMargins.updateValue(
 543       new print_preview.Margins(0, 0, 0, 0));
 544
 545   checkElementDisplayed(headerFooterEl, false);
 546 });
 547
 548 // Page layout has half-inch margins. Show header and footer option.
 549 TEST_F('PrintPreviewWebUITest', 'PageLayoutHasMarginsShowHeaderFooter',
 550     function() {
 551   var initialSettingsSetEvent =
 552       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 553   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 554   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 555
 556   var localDestsSetEvent =
 557       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 558   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 559   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 560
 561   var capsSetEvent =
 562       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 563   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 564   this.nativeLayer_.dispatchEvent(capsSetEvent);
 565
 566   var moreSettingsDiv = $('more-settings');
 567   var otherOptionsDiv = $('other-options-settings');
 568   var headerFooterEl =
 569       otherOptionsDiv.querySelector('.header-footer-container');
 570
 571   // Check that options are collapsed (section is visible, because duplex is
 572   // available).
 573   checkSectionVisible(otherOptionsDiv, true);
 574   checkElementDisplayed(headerFooterEl, false);
 575   // Expand it.
 576   checkSectionVisible(moreSettingsDiv, true);
 577   moreSettingsDiv.click();
 578
 579   checkElementDisplayed(headerFooterEl, true);
 580
 581   printPreview.printTicketStore_.marginsType.updateValue(
 582       print_preview.ticket_items.MarginsType.Value.CUSTOM);
 583   printPreview.printTicketStore_.customMargins.updateValue(
 584       new print_preview.Margins(36, 36, 36, 36));
 585
 586   checkElementDisplayed(headerFooterEl, true);
 587 });
 588
 589 // Page layout has zero top and bottom margins. Hide header and footer option.
 590 TEST_F('PrintPreviewWebUITest',
 591        'ZeroTopAndBottomMarginsHideHeaderFooter',
 592        function() {
 593   var initialSettingsSetEvent =
 594       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 595   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 596   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 597
 598   var localDestsSetEvent =
 599       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 600   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 601   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 602
 603   var capsSetEvent =
 604       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 605   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 606   this.nativeLayer_.dispatchEvent(capsSetEvent);
 607
 608   var moreSettingsDiv = $('more-settings');
 609   var otherOptionsDiv = $('other-options-settings');
 610   var headerFooterEl =
 611       otherOptionsDiv.querySelector('.header-footer-container');
 612
 613   // Check that options are collapsed (section is visible, because duplex is
 614   // available).
 615   checkSectionVisible(otherOptionsDiv, true);
 616   checkElementDisplayed(headerFooterEl, false);
 617   // Expand it.
 618   checkSectionVisible(moreSettingsDiv, true);
 619   moreSettingsDiv.click();
 620
 621   checkElementDisplayed(headerFooterEl, true);
 622
 623   printPreview.printTicketStore_.marginsType.updateValue(
 624       print_preview.ticket_items.MarginsType.Value.CUSTOM);
 625   printPreview.printTicketStore_.customMargins.updateValue(
 626       new print_preview.Margins(0, 36, 0, 36));
 627
 628   checkElementDisplayed(headerFooterEl, false);
 629 });
 630
 631 // Page layout has zero top and half-inch bottom margin. Show header and footer
 632 // option.
 633 TEST_F('PrintPreviewWebUITest',
 634        'ZeroTopAndNonZeroBottomMarginShowHeaderFooter',
 635        function() {
 636   var initialSettingsSetEvent =
 637       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 638   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 639   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 640
 641   var localDestsSetEvent =
 642       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 643   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 644   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 645
 646   var capsSetEvent =
 647       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 648   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 649   this.nativeLayer_.dispatchEvent(capsSetEvent);
 650
 651   var moreSettingsDiv = $('more-settings');
 652   var otherOptionsDiv = $('other-options-settings');
 653   var headerFooterEl =
 654       otherOptionsDiv.querySelector('.header-footer-container');
 655
 656   // Check that options are collapsed (section is visible, because duplex is
 657   // available).
 658   checkSectionVisible(otherOptionsDiv, true);
 659   checkElementDisplayed(headerFooterEl, false);
 660   // Expand it.
 661   checkSectionVisible(moreSettingsDiv, true);
 662   moreSettingsDiv.click();
 663
 664   checkElementDisplayed(headerFooterEl, true);
 665
 666   printPreview.printTicketStore_.marginsType.updateValue(
 667       print_preview.ticket_items.MarginsType.Value.CUSTOM);
 668   printPreview.printTicketStore_.customMargins.updateValue(
 669       new print_preview.Margins(0, 36, 36, 36));
 670
 671   checkElementDisplayed(headerFooterEl, true);
 672 });
 673
 674 // Test that the color settings, one option, standard monochrome.
 675 TEST_F('PrintPreviewWebUITest', 'TestColorSettingsMonochrome', function() {
 676   this.setUpPreview();
 677
 678   // Only one option, standard monochrome.
 679   var capsSetEvent =
 680       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 681   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 682   capsSetEvent.settingsInfo.capabilities.printer.color = {
 683     "option": [
 684       {"is_default": true, "type": "STANDARD_MONOCHROME"}
 685     ]
 686   };
 687   this.nativeLayer_.dispatchEvent(capsSetEvent);
 688
 689   checkSectionVisible($('color-settings'), false);
 690 });
 691
 692 // Test that the color settings, one option, custom monochrome.
 693 TEST_F('PrintPreviewWebUITest', 'TestColorSettingsCustomMonochrome',
 694     function() {
 695   this.setUpPreview();
 696
 697   // Only one option, standard monochrome.
 698   var capsSetEvent =
 699       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 700   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 701   capsSetEvent.settingsInfo.capabilities.printer.color = {
 702     "option": [
 703       {"is_default": true, "type": "CUSTOM_MONOCHROME", "vendor_id": "42"}
 704     ]
 705   };
 706   this.nativeLayer_.dispatchEvent(capsSetEvent);
 707
 708   checkSectionVisible($('color-settings'), false);
 709 });
 710
 711 // Test that the color settings, one option, standard color.
 712 TEST_F('PrintPreviewWebUITest', 'TestColorSettingsColor', function() {
 713   this.setUpPreview();
 714
 715   var capsSetEvent =
 716       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 717   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 718   capsSetEvent.settingsInfo.capabilities.printer.color = {
 719     "option": [
 720       {"is_default": true, "type": "STANDARD_COLOR"}
 721     ]
 722   };
 723   this.nativeLayer_.dispatchEvent(capsSetEvent);
 724
 725   checkSectionVisible($('color-settings'), false);
 726 });
 727
 728 // Test that the color settings, one option, custom color.
 729 TEST_F('PrintPreviewWebUITest', 'TestColorSettingsCustomColor', function() {
 730   this.setUpPreview();
 731
 732   var capsSetEvent =
 733      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 734   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 735   capsSetEvent.settingsInfo.capabilities.printer.color = {
 736     "option": [
 737       {"is_default": true, "type": "CUSTOM_COLOR", "vendor_id": "42"}
 738     ]
 739   };
 740   this.nativeLayer_.dispatchEvent(capsSetEvent);
 741
 742   checkSectionVisible($('color-settings'), false);
 743 });
 744
 745 // Test that the color settings, two options, both standard, defaults to color.
 746 TEST_F('PrintPreviewWebUITest', 'TestColorSettingsBothStandardDefaultColor',
 747     function() {
 748   this.setUpPreview();
 749
 750   var capsSetEvent =
 751       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 752   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 753   capsSetEvent.settingsInfo.capabilities.printer.color = {
 754     "option": [
 755       {"type": "STANDARD_MONOCHROME"},
 756       {"is_default": true, "type": "STANDARD_COLOR"}
 757     ]
 758   };
 759   this.nativeLayer_.dispatchEvent(capsSetEvent);
 760
 761   checkSectionVisible($('color-settings'), true);
 762   expectEquals(
 763       'color',
 764       $('color-settings').querySelector('.color-settings-select').value);
 765 });
 766
 767 // Test that the color settings, two options, both standard, defaults to
 768 // monochrome.
 769 TEST_F('PrintPreviewWebUITest',
 770     'TestColorSettingsBothStandardDefaultMonochrome', function() {
 771   this.setUpPreview();
 772
 773   var capsSetEvent =
 774      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 775   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 776   capsSetEvent.settingsInfo.capabilities.printer.color = {
 777     "option": [
 778       {"is_default": true, "type": "STANDARD_MONOCHROME"},
 779       {"type": "STANDARD_COLOR"}
 780     ]
 781   };
 782   this.nativeLayer_.dispatchEvent(capsSetEvent);
 783
 784   checkSectionVisible($('color-settings'), true);
 785   expectEquals(
 786       'bw', $('color-settings').querySelector('.color-settings-select').value);
 787 });
 788
 789 // Test that the color settings, two options, both custom, defaults to color.
 790 TEST_F('PrintPreviewWebUITest',
 791     'TestColorSettingsBothCustomDefaultColor', function() {
 792   this.setUpPreview();
 793
 794   var capsSetEvent =
 795       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 796   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 797   capsSetEvent.settingsInfo.capabilities.printer.color = {
 798     "option": [
 799       {"type": "CUSTOM_MONOCHROME", "vendor_id": "42"},
 800       {"is_default": true, "type": "CUSTOM_COLOR", "vendor_id": "43"}
 801     ]
 802   };
 803   this.nativeLayer_.dispatchEvent(capsSetEvent);
 804
 805   checkSectionVisible($('color-settings'), true);
 806   expectEquals(
 807       'color',
 808       $('color-settings').querySelector('.color-settings-select').value);
 809 });
 810
 811 // Test to verify that duplex settings are set according to the printer
 812 // capabilities.
 813 TEST_F('PrintPreviewWebUITest', 'TestDuplexSettingsTrue', function() {
 814   var initialSettingsSetEvent =
 815       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 816   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 817   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 818
 819   var localDestsSetEvent =
 820       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 821   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 822   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 823
 824   var otherOptionsDiv = $('other-options-settings');
 825   var duplexDiv = otherOptionsDiv.querySelector('.duplex-container');
 826   var duplexCheckbox = otherOptionsDiv.querySelector('.duplex-checkbox');
 827
 828   var capsSetEvent =
 829       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 830   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 831   this.nativeLayer_.dispatchEvent(capsSetEvent);
 832
 833   checkSectionVisible(otherOptionsDiv, true);
 834   expectFalse(duplexDiv.hidden);
 835   expectFalse(duplexCheckbox.checked);
 836 });
 837
 838 // Test to verify that duplex settings are set according to the printer
 839 // capabilities.
 840 TEST_F('PrintPreviewWebUITest', 'TestDuplexSettingsFalse', function() {
 841   var initialSettingsSetEvent =
 842      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 843   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 844   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 845
 846   var localDestsSetEvent =
 847      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 848   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 849   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 850
 851   var moreSettingsDiv = $('more-settings');
 852   var otherOptionsDiv = $('other-options-settings');
 853   var duplexDiv = otherOptionsDiv.querySelector('.duplex-container');
 854
 855   var capsSetEvent =
 856      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 857   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 858   delete capsSetEvent.settingsInfo.capabilities.printer.duplex;
 859   this.nativeLayer_.dispatchEvent(capsSetEvent);
 860
 861   // Check that it is collapsed.
 862   checkSectionVisible(otherOptionsDiv, false);
 863   // Expand it.
 864   checkSectionVisible(moreSettingsDiv, true);
 865   moreSettingsDiv.click();
 866   // Now it should be visible.
 867   checkSectionVisible(otherOptionsDiv, true);
 868   expectTrue(duplexDiv.hidden);
 869 });
 870
 871 // Test that changing the selected printer updates the preview.
 872 TEST_F('PrintPreviewWebUITest', 'TestPrinterChangeUpdatesPreview', function() {
 873
 874   var initialSettingsSetEvent =
 875       new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
 876   initialSettingsSetEvent.initialSettings = this.initialSettings_;
 877   this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
 878
 879   var localDestsSetEvent =
 880       new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
 881   localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
 882   this.nativeLayer_.dispatchEvent(localDestsSetEvent);
 883
 884   var capsSetEvent =
 885       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 886   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
 887   this.nativeLayer_.dispatchEvent(capsSetEvent);
 888
 889   var previewGenerator = mock(print_preview.PreviewGenerator);
 890   printPreview.previewArea_.previewGenerator_ = previewGenerator.proxy();
 891   previewGenerator.expects(exactly(6)).requestPreview();
 892
 893   var barDestination;
 894   var destinations = printPreview.destinationStore_.destinations();
 895   for (var destination, i = 0; destination = destinations[i]; i++) {
 896     if (destination.id == 'BarDevice') {
 897       barDestination = destination;
 898       break;
 899     }
 900   }
 901
 902   printPreview.destinationStore_.selectDestination(barDestination);
 903
 904   var capsSetEvent =
 905       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
 906   capsSetEvent.settingsInfo = getCddTemplate("BarDevice");
 907   capsSetEvent.settingsInfo.capabilities.printer.color = {
 908     "option": [
 909       {"is_default": true, "type": "STANDARD_MONOCHROME"}
 910     ]
 911   };
 912   this.nativeLayer_.dispatchEvent(capsSetEvent);
 913 });
 914
 915 // Test that error message is displayed when plugin doesn't exist.
 916 TEST_F('PrintPreviewWebUITest', 'TestNoPDFPluginErrorMessage', function() {
 917   var previewAreaEl = $('preview-area');
 918
 919   var loadingMessageEl =
 920       previewAreaEl.getElementsByClassName('preview-area-loading-message')[0];
 921   expectEquals(true, loadingMessageEl.hidden);
 922
 923   var previewFailedMessageEl = previewAreaEl.getElementsByClassName(
 924       'preview-area-preview-failed-message')[0];
 925   expectEquals(true, previewFailedMessageEl.hidden);
 926
 927   var printFailedMessageEl =
 928       previewAreaEl.getElementsByClassName('preview-area-print-failed')[0];
 929   expectEquals(true, printFailedMessageEl.hidden);
 930
 931   var customMessageEl =
 932       previewAreaEl.getElementsByClassName('preview-area-custom-message')[0];
 933   expectEquals(false, customMessageEl.hidden);
 934 });