fix: handle elements script request block (#209)

Basis-Theory · Jul 19, 2022 · 0ced94b · 0ced94b
1 parent 9a72b33
commit 0ced94b
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 27 deletions.
diff --git a/cypress/fixtures/elements.html b/cypress/fixtures/elements.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Elements example</title>
+    <script src="../../dist/basis-theory-js.bundle.js"></script>
+    <script src="./event-informer.js"></script>
+  </head>
+  <body>
+    <script>
+      window.addEventListener('load', async () => {
+        try {
+          await BasisTheory.init('04ab9d12-4959-4c48-ba03-9ef722efcc5a', {
+            elements: true,
+          });
+        } catch (error) {
+          informEventCypress(error?.message || error, 'initError');
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/cypress/fixtures/event-informer.js b/cypress/fixtures/event-informer.js
@@ -0,0 +1,13 @@
+window.informEventCypress = (event, type = event.type) => {
+  if (window.Cypress) {
+    return fetch(`http://cypress.test/events/${type}`, {
+      body: JSON.stringify(event),
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+
+  return Promise.resolve();
+};
diff --git a/cypress/integration/elements.spec.ts b/cypress/integration/elements.spec.ts
@@ -11,11 +11,26 @@ context('Elements example', () => {
           window.BasisTheory.elements = window.BasisTheoryElements;
         }`,
     });
-    cy.visit('examples/elements.html');
+    cy.visit('cypress/fixtures/elements.html');
     cy.on('window:alert', (val) => {
       expect(val).to.equal(
         `BasisTheoryElements 04ab9d12-4959-4c48-ba03-9ef722efcc5a https://elements.basistheory.com`
       );
     });
   });
+  it('should handle blocked BasisTheoryElements script request', () => {
+    cy.intercept(`http://cypress.test/events/initError`, (req) => {
+      req.reply({});
+    }).as(`initErrorEvent`);
+    cy.intercept(/https:\/\/.+?\/elements/u, {
+      statusCode: 400,
+    });
+    cy.visit('cypress/fixtures/elements.html');
+    cy.wait('@initErrorEvent')
+      .its('request.body')
+      .should(
+        'equal',
+        'There was an unknown error when loading Basis Theory Elements. Check the console for details.'
+      );
+  });
 });
diff --git a/examples/elements.html b/examples/elements.html
diff --git a/src/elements/constants.ts b/src/elements/constants.ts
@@ -5,10 +5,10 @@ const ELEMENTS_NOM_DOM_ERROR_MESSAGE =
   'Tried to load BasisTheoryElements in a non-DOM environment.';
 
 const ELEMENTS_SCRIPT_LOAD_ERROR_MESSAGE =
-  'BasisTheoryElements did not load properly.';
+  'Basis Theory Elements did not load properly.';
 
 const ELEMENTS_SCRIPT_UNKNOWN_ERROR_MESSAGE =
-  'There was an unknown error when loading BasisTheoryElements';
+  'There was an unknown error when loading Basis Theory Elements. Check the console for details.';
 
 const CARD_BRANDS = [
   'visa',

diff --git a/test/elements.test.ts b/test/elements.test.ts
@@ -176,7 +176,7 @@ describe('Elements', () => {
 
         loadCallback();
         expect(promise).rejects.toThrow(
-          'BasisTheoryElements did not load properly.'
+          'Basis Theory Elements did not load properly.'
         );
       });
 
@@ -185,7 +185,7 @@ describe('Elements', () => {
 
         errorCallback();
         expect(promise).rejects.toThrow(
-          'There was an unknown error when loading BasisTheoryElements'
+          'There was an unknown error when loading Basis Theory Elements. Check the console for details.'
         );
       });