Fixing extension banner behavior

mulesoft · Jan 12, 2019 · 09cfb85 · 09cfb85
1 parent ff5f7ba
commit 09cfb85
Show file tree

Hide file tree

Showing 9 changed files with 379 additions and 223 deletions.
diff --git a/analysis.json b/analysis.json
diff --git a/api-console.d.ts b/api-console.d.ts
@@ -141,6 +141,7 @@ declare namespace MulesoftApps {
      * When set the extension banner is rendered.
      */
     readonly extensionBannerActive: boolean|null|undefined;
+    _hasApicCorsExtension: boolean|null|undefined;
 
     /**
      * Forces the console to send headers defined in this string overriding
@@ -473,6 +474,7 @@ declare namespace MulesoftApps {
      * @param value Current value of `noExtensionBanner` property
      */
     _noExtBannerChanged(value: Boolean|null): void;
+    _hasCorsExtensionChanged(value: any): void;
 
     /**
      * Computes value of `isMethod` proiperty.

diff --git a/api-console.html b/api-console.html
@@ -298,7 +298,7 @@ <h1 class="method-title">[[methodName]]</h1>
       <raml-aware raml="{{amfModel}}" scope="[[aware]]"></raml-aware>
     </template>
     <paper-toast class="error-toast" id="apiLoadErrorToast"></paper-toast>
-    <api-console-ext-comm has-extension="{{noExtensionBanner}}"></api-console-ext-comm>
+    <api-console-ext-comm has-extension="{{_hasApicCorsExtension}}"></api-console-ext-comm>
     <!--
     The components below are optional dependencies. They will not be used until
     sources of the components are included into AC bundle.
@@ -454,6 +454,7 @@ <h1 class="method-title">[[methodName]]</h1>
           type: Boolean,
           readOnly: true
         },
+        _hasApicCorsExtension: {type: Boolean, observer: '_hasCorsExtensionChanged'},
         /**
          * Forces the console to send headers defined in this string overriding
          * any used defined header.
@@ -816,7 +817,7 @@ <h1 class="method-title">[[methodName]]</h1>
         return;
       }
       setTimeout(() => {
-        if (!this.noExtensionBanner) {
+        if (!this.noExtensionBanner && !this._hasApicCorsExtension) {
           this._setExtensionBannerActive(true);
         }
       });
@@ -890,6 +891,11 @@ <h1 class="method-title">[[methodName]]</h1>
         this._setExtensionBannerActive(false);
       }
     }
+    _hasCorsExtensionChanged(value) {
+      if (value && this.extensionBannerActive) {
+        this._setExtensionBannerActive(false);
+      }
+    }
     /**
      * Computes value of `isMethod` proiperty.
      * @param {String} selectedShapeType Current value of `selectedShapeType`

diff --git a/bower.json b/bower.json
@@ -5,7 +5,7 @@
     "Pawel Psztyc",
     "The Advanced REST client authors <arc@mulesoft.com>"
   ],
-  "version": "5.0.0-rc.1",
+  "version": "5.0.0-rc.2",
   "keywords": [
     "web-components",
     "polymer",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "api-console",
-  "version": "5.0.0-rc.1",
+  "version": "5.0.0-rc.2",
   "license": "CPAL-1.0",
   "description": "The API console used in RAML platform.",
   "devDependencies": {

diff --git a/test/basic-test.html b/test/basic-test.html
@@ -56,8 +56,8 @@
       assert.isTrue(element.isDocs);
     });
 
-    test('noExtensionBanner is false by default', function() {
-      assert.isFalse(element.noExtensionBanner);
+    test('noExtensionBanner is not set by default', function() {
+      assert.isUndefined(element.noExtensionBanner);
     });
 
     test('extensionBannerActive is not initally set', function() {

diff --git a/test/cors-extension-banner-test.html b/test/cors-extension-banner-test.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+    <link rel="import" href="../../raml-aware/raml-aware.html">
+    <link rel="import" href="../../arc-polyfills/arc-polyfills.html">
+    <link rel="import" href="../api-console.html">
+    <script src="amf-loader.js"></script>
+  </head>
+  <body>
+
+    <test-fixture id="Basic">
+      <template>
+        <api-console></api-console>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="NoExtension">
+      <template>
+        <api-console no-extension-banner></api-console>
+      </template>
+    </test-fixture>
+
+    <script>
+    suite('Declarative use', () => {
+      test('extensionBannerActive is eventually set', (done) => {
+        const element = fixture('NoExtension');
+        element.page = 'request';
+        flush(() => {
+          assert.isUndefined(element.extensionBannerActive);
+          done();
+        });
+      });
+
+      test('The extension banner is not visible', (done) => {
+        const element = fixture('NoExtension');
+        element.page = 'request';
+        flush(() => {
+          const node = element.shadowRoot.querySelector('.extension-banner');
+          const result = getComputedStyle(node).display.trim();
+          assert.equal(result, 'none');
+          done();
+        });
+      });
+    });
+
+    suite('Banner flow', () => {
+      let element;
+      setup(() => {
+        element = fixture('Basic');
+        element.page = 'request';
+      });
+
+      test('extensionBannerActive is set', (done) => {
+        if (!element.isChrome) {
+          done();
+          return;
+        }
+        flush(() => {
+          assert.isTrue(element.extensionBannerActive);
+          done();
+        });
+      });
+
+      test('Renders extension banner', (done) => {
+        if (!element.isChrome) {
+          done();
+          return;
+        }
+        flush(() => {
+          const node = element.shadowRoot.querySelector('.extension-banner');
+          const result = getComputedStyle(node).display.trim();
+          assert.notEqual(result, 'none');
+          done();
+        });
+      });
+
+      test('The banner is hidden when extension is detected', (done) => {
+        if (!element.isChrome) {
+          done();
+          return;
+        }
+        window.postMessage({
+          'api-console-payload': 'init',
+          'api-console-extension': true
+        }, location.origin);
+        flush(() => {
+          assert.isUndefined(element.extensionBannerActive);
+          const node = element.shadowRoot.querySelector('.extension-banner');
+          const result = getComputedStyle(node).display.trim();
+          assert.equal(result, 'none');
+          done();
+        });
+      });
+    });
+    </script>
+  </body>
+</html>
diff --git a/test/index.html b/test/index.html
@@ -15,6 +15,7 @@
         'raml-aware-test.html',
         'amf-computations-test.html',
         'attribution-test.html',
+        'cors-extension-banner-test.html',
         'integration-test.html'
       ]);
     </script>