Merge pull request #538 from recurly/3ds-set-container-dimenstions

Sets ThreeDSecureStrategy#container height and width to 100%
recurly · Aug 9, 2019 · 5038091 · 5038091
2 parents 83aa0f6 + 85e16e9
commit 5038091
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/lib/recurly/risk/three-d-secure/strategy/strategy.js b/lib/recurly/risk/three-d-secure/strategy/strategy.js
@@ -19,6 +19,8 @@ export default class ThreeDSecureStrategy extends ReadinessEmitter {
     if (!parent) return;
     const container = this._container = document.createElement('div');
     container.setAttribute('data-recurly', 'three-d-secure-container');
+    container.style.height = '100%';
+    container.style.width = '100%';
     parent.appendChild(container);
     return container;
   }

diff --git a/test/risk/three-d-secure/strategy.test.js b/test/risk/three-d-secure/strategy.test.js
@@ -36,10 +36,20 @@ describe('ThreeDSecureStrategy', function () {
         strategy.attach(target);
       });
 
-      it('returns a container div element', function () {
-        const { strategy } = this;
-        assert(strategy.container instanceof HTMLDivElement);
-        assert.strictEqual(strategy.container.getAttribute('data-recurly'), 'three-d-secure-container');
+      it('is a div element', function () {
+        const { container } = this.strategy;
+        assert(container instanceof HTMLDivElement);
+      });
+
+      it('has a data-recurly attribute', function () {
+        const { container } = this.strategy;
+        assert.strictEqual(container.getAttribute('data-recurly'), 'three-d-secure-container')
+      });
+
+      it('sets its height and width to 100%', function () {
+        const { container } = this.strategy;
+        assert.strictEqual(container.style.height, '100%');
+        assert.strictEqual(container.style.width, '100%');
       });
 
       it('is a single child of the target element', function () {