🐛 Implement waitForHead and change waitForBody to use documentReady (a…

…mpproject#20658)

* check for body along with the document ready check

* remove console.log

* reset whitespace

* one more whitespace

* wait until body is present to to show head is fully parsed

* use onDocumentReady for document ready detection

* add callback

* Fix tests

src/dom.js

@@ -18,6 +18,7 @@ import {Deferred} from './utils/promise';
 import {cssEscape} from '../third_party/css-escape/css-escape';
 import {dev, devAssert} from './log';
 import {dict} from './utils/object';
+import {onDocumentReady, whenDocumentReady} from './document-ready';
 import {startsWith} from './string';
 import {toWin} from './types';
 
@@ -87,14 +88,34 @@ export function waitForChildPromise(parent, checkFunc) {
 }
 
 /**
- * Waits for document's body to be available.
+ * Waits for document's head to be available.
+ * @param {!Document} doc
+ * @param {function()} callback
+ */
+export function waitForHead(doc, callback) {
+  waitForChild(doc.documentElement, () => !!doc.body, callback);
+}
+
+/**
+ * Waits for the document's head to be available.
+ * @param {!Document} doc
+ * @return {!Promise}
+ */
+export function waitForHeadPromise(doc) {
+  return new Promise(resolve => {
+    waitForHead(doc, resolve);
+  });
+}
+
+/**
+ * Waits for document's body to be available and ready.
  * Will be deprecated soon; use {@link AmpDoc#whenBodyAvailable} or
  * @{link DocumentState#onBodyAvailable} instead.
  * @param {!Document} doc
  * @param {function()} callback
  */
 export function waitForBody(doc, callback) {
-  waitForChild(doc.documentElement, () => !!doc.body, callback);
+  return onDocumentReady(doc, callback);
 }
 
 
@@ -104,9 +125,7 @@ export function waitForBody(doc, callback) {
  * @return {!Promise}
  */
 export function waitForBodyPromise(doc) {
-  return new Promise(resolve => {
-    waitForBody(doc, resolve);
-  });
+  return whenDocumentReady(doc);
 }
 
 

test/unit/test-element-service.js

@@ -38,10 +38,30 @@ import {
 describe('getElementServiceIfAvailable()', () => {
   let doc;
   let win;
-  let setIntervalCallback;
+  let readyStateListeners;
 
   beforeEach(() => {
+    let readyState = 'loading';
+    readyStateListeners = [];
     doc = {
+      get readyState() {
+        return readyState;
+      },
+      set readyState(state) {
+        readyState = state;
+        readyStateListeners.forEach(cb => cb());
+      },
+      addEventListener(event, cb) {
+        expect(event).to.equal('readystatechange');
+        readyStateListeners.push(cb);
+      },
+      removeEventListener(event, cb) {
+        expect(event).to.equal('readystatechange');
+        const i = readyStateListeners.indexOf(cb);
+        if (i > -1) {
+          readyStateListeners.splice(i, 1);
+        }
+      },
       head: {},
       body: {},
     };
@@ -52,87 +72,74 @@ describe('getElementServiceIfAvailable()', () => {
 
     win = {
       document: doc,
-      setInterval: callback => {
-        setIntervalCallback = callback;
-      },
-      clearInterval: () => {
-      },
     };
     doc.defaultView = win;
 
     resetServiceForTesting(win, 'e1');
     resetScheduledElementForTesting(win, 'element-1');
   });
 
-  afterEach(() => {
-    setIntervalCallback = undefined;
-  });
-
-  it('should wait for body when not available', () => {
-    doc.body = null; // Body not available
+  it('should wait for doc ready when not available', () => {
     let resolvedService;
     const p1 = getElementServiceIfAvailable(win, 'e1', 'element-1')
         .then(service => {
           resolvedService = service;
           return service;
         });
     return Promise.resolve().then(() => {
-      expect(setIntervalCallback).to.exist;
+      expect(readyStateListeners).to.not.be.empty;
       expect(resolvedService).to.be.undefined;
 
       // Resolve body.
-      doc.body = {};
-      setIntervalCallback();
+      doc.readyState = 'complete';
       return p1;
     }).then(service => {
       expect(resolvedService).to.be.null;
       expect(service).to.be.null;
     });
   });
 
-  it('should resolve with body when not available', () => {
-    doc.body = {}; // Body is available
+  it('should resolve when ready when service not available', () => {
+    doc.readyState = 'complete';
     const p1 = getElementServiceIfAvailable(win, 'e1', 'element-1');
     return Promise.resolve().then(() => {
-      expect(setIntervalCallback).to.be.undefined;
+      expect(readyStateListeners).to.be.empty;
       return p1;
     }).then(service => {
       expect(service).to.be.null;
     });
   });
 
-  it('should wait for body when available', () => {
-    doc.body = null; // Body not available
+  it('should wait for document ready when service available', () => {
     let resolvedService;
     const p1 = getElementServiceIfAvailable(win, 'e1', 'element-1')
         .then(service => {
           resolvedService = service;
           return service;
         });
     return Promise.resolve().then(() => {
-      expect(setIntervalCallback).to.exist;
+      expect(readyStateListeners).to.not.be.empty;
       expect(resolvedService).to.be.undefined;
 
       // Resolve body.
       markElementScheduledForTesting(win, 'element-1');
       registerServiceBuilder(win, 'e1', function() {
         return {str: 'fake1'};
       });
-      doc.body = {};
-      setIntervalCallback();
+      doc.readyState = 'complete';
       return p1;
     }).then(service => {
       expect(resolvedService).to.deep.equal({str: 'fake1'});
       expect(service).to.deep.equal({str: 'fake1'});
     });
   });
 
-  it('should resolve with body when available', () => {
-    doc.body = {}; // Body is available
+  it('should resolve when ready when service available', () => {
+    doc.readyState = 'complete';
     markElementScheduledForTesting(win, 'element-1');
     const p1 = getElementServiceIfAvailable(win, 'e1', 'element-1');
     return Promise.resolve().then(() => {
-      expect(setIntervalCallback).to.be.undefined;
+      expect(readyStateListeners).to.be.empty;
       registerServiceBuilder(win, 'e1', function() {
         return {str: 'fake1'};
       });