Add tests for feedback panel API

Checks the behaviour of createPanelItem(), attachPanelItem() and
removePanelItem() with different ordering of API calls.

Checks changing feedback panel types.

Adds 2 getters to the feedback panel API to help testing.

Bug: 1009318, 1009853
Tests: browser_tests --gtest_filter="FileManagerJsTest.FilesDisplayPanel"
Change-Id: Ie7b2a198b0259c344418dcb21ca0208de0837cdf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1865915
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#707262}

ui/file_manager/file_manager/foreground/elements/files_xf_elements_unittest.js

@@ -10,7 +10,71 @@ function setUpPage() {
       '<xf-display-panel id="test-xf-display-panel"></xf-display-panel>';
 }
 
-async function testFilesDisplayPanel(done) {
+async function testDisplayPanelAttachPanel(done) {
+  // Get the host display panel container element.
+  /** @type {!DisplayPanel|!Element} */
+  const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
+
+  // Test create/attach/remove sequences.
+  // Create a progress panel item.
+  let progressPanel = displayPanel.createPanelItem('testpanel');
+  progressPanel.panelType = progressPanel.panelTypeProgress;
+
+  // Attach the panel to it's host display panel.
+  displayPanel.attachPanelItem(progressPanel);
+
+  // Verify the panel is attached to the document.
+  assertTrue(!!progressPanel.isConnected);
+
+  // Remove the panel item.
+  displayPanel.removePanelItem(progressPanel);
+
+  // Verify the panel item is not attached to the document.
+  assertFalse(progressPanel.isConnected);
+
+  // Create a progress panel item.
+  progressPanel = displayPanel.createPanelItem('testpanel2');
+  progressPanel.panelType = progressPanel.panelTypeProgress;
+
+  // Remove the panel item.
+  displayPanel.removePanelItem(progressPanel);
+
+  // Try to attach the removed panel to it's host display panel.
+  displayPanel.attachPanelItem(progressPanel);
+
+  // Verify the panel is not attached to the document.
+  assertFalse(progressPanel.isConnected);
+
+  done();
+}
+
+async function testDisplayPanelChangingPanelTypes(done) {
+  // Get the host display panel container element.
+  /** @type {!DisplayPanel|!Element} */
+  const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
+  const panelItem = displayPanel.addPanelItem('testpanel');
+  panelItem.panelType = panelItem.panelTypeProgress;
+
+  // Verify the panel item indicator is progress.
+  assertTrue(
+      panelItem.indicator === 'progress',
+      'Wrong panel indicator, got ' + panelItem.indicator);
+
+  // Change the panel item to an error panel.
+  panelItem.panelType = panelItem.panelTypeError;
+
+  // Verify the panel item indicator is set to error.
+  assertTrue(
+      panelItem.indicator === 'status',
+      'Wrong panel indicator, got ' + panelItem.indicator);
+  assertTrue(
+      panelItem.status === 'failure',
+      'Wrong panel status, got ' + panelItem.status);
+
+  done();
+}
+
+async function testFilesDisplayPanelSummaryPanel(done) {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */
   const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
@@ -68,28 +132,5 @@ async function testFilesDisplayPanel(done) {
   summaryPanelItem = summaryContainer.querySelector('xf-panel-item');
   assertTrue(summaryPanelItem.panelType === summaryPanelItem.panelTypeSummary);
 
-  // Test create/attach/remove sequences.
-  // Create a progress panel item.
-  progressPanel = displayPanel.createPanelItem('testpanel2');
-  progressPanel.panelType = progressPanel.panelTypeProgress;
-  // Attach the panel to it's host display panel.
-  displayPanel.attachPanelItem(progressPanel);
-  // Verify the panel is attached to the document.
-  assertTrue(!!progressPanel.parentNode);
-  // Remove the panel item.
-  displayPanel.removePanelItem(progressPanel);
-  // Verify the panel item is not attached to the document.
-  assertTrue(progressPanel.parentNode === null);
-
-  // Create a progress panel item.
-  progressPanel = displayPanel.createPanelItem('testpanel3');
-  progressPanel.panelType = progressPanel.panelTypeProgress;
-  // Remove the panel item.
-  displayPanel.removePanelItem(progressPanel);
-  // Try to attach the removed panel to it's host display panel.
-  displayPanel.attachPanelItem(progressPanel);
-  // Verify the panel is not attached to the document.
-  assertTrue(progressPanel.parentNode === null);
-
   done();
 }

ui/file_manager/file_manager/foreground/elements/xf_panel_item.js

@@ -444,6 +444,13 @@ class PanelItem extends HTMLElement {
     this.setAttribute('indicator', indicator);
   }
 
+  /**
+   *  Getter for the progress indicator.
+   */
+  get indicator() {
+    return this.getAttribute('indicator');
+  }
+
   /**
    * Setter to set the success/failure indication.
    * @param {string} status Status value being set.
@@ -452,6 +459,13 @@ class PanelItem extends HTMLElement {
     this.setAttribute('status', status);
   }
 
+  /**
+   *  Getter for the success/failure indication.
+   */
+  get status() {
+    return this.getAttribute('status');
+  }
+
   /**
    * Setter to set the progress property, sent to any child indicator.
    * @param {string} progress Progress value being set.