Ensure that consent-ui correctly resumes loading of sub-resources (#3…

…2480) * Ensure that consent-ui correctly resumes loading of sub-resources * fix null-condition * cleanup
ampproject · Feb 8, 2021 · 541c3e2 · 541c3e2
1 parent e28f933
commit 541c3e2
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 10 deletions.
diff --git a/extensions/amp-consent/0.1/amp-consent.js b/extensions/amp-consent/0.1/amp-consent.js
@@ -160,6 +160,20 @@ export class AmpConsent extends AMP.BaseElement {
     });
   }
 
+  /** @override */
+  pauseCallback() {
+    if (this.consentUI_) {
+      this.consentUI_.pause();
+    }
+  }
+
+  /** @override */
+  resumeCallback() {
+    if (this.consentUI_) {
+      this.consentUI_.resume();
+    }
+  }
+
   /**
    *
    * @param {!JsonObject} validatedConfig

diff --git a/extensions/amp-consent/0.1/consent-ui.js b/extensions/amp-consent/0.1/consent-ui.js
@@ -285,15 +285,7 @@ export class ConsentUI {
           this.elementWithFocusBeforeShowing_ = this.document_.activeElement;
 
           this.maybeShowOverlay_();
-
-          // scheduleLayout is required everytime because some AMP element may
-          // get un laid out after toggle display (#unlayoutOnPause)
-          // for example <amp-iframe>
-          Services.ownersForDoc(this.baseInstance_.element).scheduleLayout(
-            this.baseInstance_.element,
-            this.ui_
-          );
-
+          this.resume();
           this.ui_./*OK*/ focus();
         }
       };
@@ -322,6 +314,8 @@ export class ConsentUI {
       return;
     }
 
+    this.pause();
+
     this.baseInstance_.mutateElement(() => {
       if (this.isCreatedIframe_) {
         this.resetIframe_();
@@ -363,6 +357,33 @@ export class ConsentUI {
     });
   }
 
+  /** */
+  pause() {
+    if (this.ui_) {
+      Services.ownersForDoc(this.baseInstance_.element).schedulePause(
+        this.baseInstance_.element,
+        this.ui_
+      );
+    }
+  }
+
+  /** */
+  resume() {
+    if (this.ui_) {
+      // scheduleLayout is required everytime because some AMP element may
+      // get un laid out after toggle display (#unlayoutOnPause)
+      // for example <amp-iframe>
+      Services.ownersForDoc(this.baseInstance_.element).scheduleLayout(
+        this.baseInstance_.element,
+        this.ui_
+      );
+      Services.ownersForDoc(this.baseInstance_.element).scheduleResume(
+        this.baseInstance_.element,
+        this.ui_
+      );
+    }
+  }
+
   /**
    * Handle the ready event from the CMP iframe
    * @param {!JsonObject} data

diff --git a/extensions/amp-consent/0.1/test/test-consent-ui.js b/extensions/amp-consent/0.1/test/test-consent-ui.js
@@ -47,6 +47,7 @@ describes.realWin(
     let consentUI;
     let mockInstance;
     let parent;
+    let ownersStubs;
 
     beforeEach(() => {
       doc = env.win.document;
@@ -84,7 +85,12 @@ describes.realWin(
           return Promise.resolve();
         },
       };
-      Services.ownersForDoc(doc).scheduleLayout = env.sandbox.mock();
+      const owners = Services.ownersForDoc(doc);
+      ownersStubs = {
+        scheduleLayout: env.sandbox.stub(owners, 'scheduleLayout'),
+        schedulePause: env.sandbox.stub(owners, 'schedulePause'),
+        scheduleResume: env.sandbox.stub(owners, 'scheduleResume'),
+      };
       resetServiceForTesting(win, 'consentStateManager');
       registerServiceBuilder(win, 'consentStateManager', function () {
         return Promise.resolve({
@@ -158,9 +164,32 @@ describes.realWin(
         consentUI.show(false);
         expect(parent.classList.contains('amp-active')).to.be.true;
         expect(parent).to.not.have.display('none');
+        expect(ownersStubs.scheduleLayout).to.be.calledOnce;
+        expect(ownersStubs.scheduleResume).to.be.calledOnce;
         consentUI.hide();
         expect(parent.classList.contains('amp-active')).to.be.false;
         expect(parent.classList.contains('amp-hidden')).to.be.true;
+        expect(ownersStubs.schedulePause).to.be.calledOnce;
+      });
+
+      it('should support pause/resume lifecycle', () => {
+        const config = dict({
+          'promptUI': 'test1',
+        });
+        consentUI = new ConsentUI(mockInstance, config);
+        consentUI.show(false);
+        expect(ownersStubs.scheduleLayout).to.be.calledOnce;
+        expect(ownersStubs.scheduleResume).to.be.calledOnce;
+
+        consentUI.pause();
+        expect(ownersStubs.schedulePause).to.be.calledOnce;
+        expect(ownersStubs.scheduleLayout).to.be.calledOnce; // no change.
+        expect(ownersStubs.scheduleResume).to.be.calledOnce; // no change.
+
+        consentUI.resume();
+        expect(ownersStubs.scheduleLayout).to.be.calledTwice;
+        expect(ownersStubs.scheduleResume).to.be.calledTwice;
+        expect(ownersStubs.schedulePause).to.be.calledOnce; // no change.
       });
 
       it('append/remove iframe', async () => {