feat: set embed height according to embed messages

mon-pix/app/components/challenge-embed-simulator.js

@@ -11,9 +11,17 @@ export default class ChallengeEmbedSimulator extends Component {
   @tracked
   isSimulatorLaunched = false;
 
+  @tracked
+  embedHeight;
+
+  constructor(owner, args) {
+    super(owner, args);
+    this.embedHeight = args.embedDocument?.height;
+  }
+
   get embedDocumentHeightStyle() {
-    if (this.args.embedDocument) {
-      return htmlSafe(`height: ${this.args.embedDocument.height}px`);
+    if (this.embedHeight) {
+      return htmlSafe(`height: ${this.embedHeight}px`);
     }
     return '';
   }
@@ -33,6 +41,12 @@ export default class ChallengeEmbedSimulator extends Component {
     };
 
     iframe.addEventListener('load', loadListener);
+
+    window.addEventListener('message', ({ origin, data }) => {
+      if (!isEmbedAllowedOrigin(origin)) return;
+      if (!isHeightMessage(data)) return;
+      thisComponent.embedHeight = data.height + 20;
+    });
   }
 
   @action
@@ -41,9 +55,9 @@ export default class ChallengeEmbedSimulator extends Component {
     iframe.contentWindow.postMessage('launch', '*');
     iframe.focus();
     this.isSimulatorLaunched = true;
-    window.addEventListener('message', (e) => {
-      if (!isEmbedAllowedOrigin(e.origin)) return;
-      if (typeof e.data !== 'object' || e.data.from !== 'pix' || e.data.type !== 'ready') return;
+    window.addEventListener('message', ({ origin, data }) => {
+      if (!isEmbedAllowedOrigin(origin)) return;
+      if (!isReadyMessage(data)) return;
       iframe.contentWindow.postMessage('launch', '*');
       iframe.focus();
     });
@@ -75,3 +89,26 @@ export default class ChallengeEmbedSimulator extends Component {
     return event.currentTarget.parentElement.parentElement.querySelector('.embed__iframe');
   }
 }
+
+/**
+ * Checks if event is a "ready" message.
+ * @param {unknown} data
+ * @returns {boolean}
+ */
+function isReadyMessage(data) {
+  return isMessageType(data, 'ready');
+}
+
+/**
+ * Checks if event is a "height" message.
+ * @param {unknown} data
+ * @returns {data is { height: number }}
+ */
+function isHeightMessage(data) {
+  return isMessageType(data, 'height');
+}
+
+function isMessageType(data, type) {
+  if (typeof data !== 'object' || data === null) return false;
+  return data.from === 'pix' && data.type === type;
+}

mon-pix/tests/integration/components/challenge-embed-simulator_test.js

@@ -98,5 +98,19 @@ module('Integration | Component | Challenge Embed Simulator', function (hooks) {
     test('should define a src attribute on the iframe element that is the one defined in the referential for field "Embed URL"', function (assert) {
       assert.strictEqual(find('.embed__iframe').src, 'http://embed-simulator.url/');
     });
+
+    module('when embed sends its height', function (hooks) {
+      test('should listen for embed height and resize iframe container', async function (assert) {
+        const event = new MessageEvent('message', {
+          data: { from: 'pix', type: 'height', height: 480 },
+          origin: 'https://epreuves.pix.fr',
+        });
+        window.dispatchEvent(event);
+
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
+        assert.strictEqual(find('.embed__iframe').style.cssText, 'height: 500px;');
+      });
+    });
   });
 });