From a2e49c1286ec1653a06bac695e3e1f01ecf48fde Mon Sep 17 00:00:00 2001 From: perco12 <141269770+perco12@users.noreply.github.com> Date: Tue, 19 Nov 2024 13:06:49 -0600 Subject: [PATCH] refactor: update request to accept raw JSON or encoded (#1157) --- src/components/message/Message.js | 5 +-- .../src/components/message/Message.test.js | 13 +++++++- utils/devServerProxy/lib/miscellaneous.js | 31 ++----------------- utils/devServerProxy/messages.js | 6 ++-- utils/devServerProxy/modals.js | 10 +++--- 5 files changed, 26 insertions(+), 39 deletions(-) diff --git a/src/components/message/Message.js b/src/components/message/Message.js index c1ce4bf2e2..852b80b309 100644 --- a/src/components/message/Message.js +++ b/src/components/message/Message.js @@ -186,8 +186,9 @@ const Message = function ({ markup, meta, parentStyles, warnings }) { request('GET', `${window.location.origin}/credit-presentment/smart/message?${query}`).then( ({ data: resData }) => { - const encodedData = resData.slice(resData.indexOf('')); - const data = parseObjFromEncoding(encodedData); + const jsonData = resData.slice(resData.indexOf('')); + // TODO: Cleanup ternary and remove 'parseObjFromEncoding' from utils; only JSON.parse will be needed. + const data = jsonData.startsWith('{') ? JSON.parse(jsonData) : parseObjFromEncoding(jsonData); button.innerHTML = data.markup ?? markup ?? ''; const buttonWidth = button.offsetWidth; const buttonHeight = button.offsetHeight; diff --git a/tests/unit/spec/src/components/message/Message.test.js b/tests/unit/spec/src/components/message/Message.test.js index 2ba9217044..6cab7a3e38 100644 --- a/tests/unit/spec/src/components/message/Message.test.js +++ b/tests/unit/spec/src/components/message/Message.test.js @@ -1,7 +1,7 @@ import { getByText, fireEvent, queryByText } from '@testing-library/dom'; import Message from 'src/components/message/Message'; -import { request, createState } from 'src/utils'; +import { request, createState, parseObjFromEncoding } from 'src/utils'; import xPropsMock from 'utils/xPropsMock'; const ts = { @@ -63,6 +63,7 @@ describe('Message', () => { createState.mockClear(); request.mockClear(); xPropsMock.clear(); + parseObjFromEncoding.mockClear(); }); test('Renders the button with styles', () => { @@ -179,4 +180,14 @@ describe('Message', () => { ts }); }); + + test('raw json data from request', async () => { + request.mockReturnValue( + Promise.resolve({ + data: '' + }) + ); + Message(serverData); + expect(parseObjFromEncoding).not.toHaveBeenCalled(); + }); }); diff --git a/utils/devServerProxy/lib/miscellaneous.js b/utils/devServerProxy/lib/miscellaneous.js index bba4f3c40a..072bf735bc 100644 --- a/utils/devServerProxy/lib/miscellaneous.js +++ b/utils/devServerProxy/lib/miscellaneous.js @@ -61,39 +61,15 @@ export const localizeCurrency = export const waitForTimeout = timeout => new Promise(resolve => setTimeout(resolve, timeout)); -export function btoa(str) { - const buffer = Buffer.from(str.toString(), 'binary'); - return buffer.toString('base64'); -} - -export function toBinary(string) { - const codeUnits = new Uint16Array(string.length); - for (let i = 0; i < codeUnits.length; i++) { - codeUnits[i] = string.charCodeAt(i); - } - return String.fromCharCode(...new Uint8Array(codeUnits.buffer)); -} - -export const createMockZoidMarkup = ({ component, scriptUID, port, encodedData }) => { +export const createMockZoidMarkup = ({ component, scriptUID, port, jsonData }) => { const setupFunctionName = component === 'message' ? 'crc.setupMessage' : 'crc.setupModal'; const interfaceScript = ``; const componentScript = ``; - const initializerScript = ``; - const utilScript = ` - - `; + const initializerScript = ``; return ` - + @@ -104,7 +80,6 @@ export const createMockZoidMarkup = ({ component, scriptUID, port, encodedData } ${component !== 'modal-v2-lander' ? interfaceScript : ''} ${componentScript} - ${utilScript} ${initializerScript} diff --git a/utils/devServerProxy/messages.js b/utils/devServerProxy/messages.js index 7e0f173f72..a594c4170c 100644 --- a/utils/devServerProxy/messages.js +++ b/utils/devServerProxy/messages.js @@ -3,7 +3,7 @@ import path from 'path'; import got from 'got'; import { PORT, VARIANT } from '../../src/server/constants'; -import { populateTemplate, createMockZoidMarkup, waitForTimeout, btoa, toBinary } from './lib/miscellaneous'; +import { populateTemplate, createMockZoidMarkup, waitForTimeout } from './lib/miscellaneous'; import getDevAccountDetails from './lib/devAccountDetails'; // set this environment variable to simulate the time for the request to be answered @@ -104,8 +104,8 @@ export default function createMessageRoutes(app, server, compiler) { app.get('/credit-presentment/smart/message', async (req, res) => { const { scriptUID } = req.query; const props = await getMessageData(req, compiler); - const encodedData = btoa(toBinary(JSON.stringify(props))); - const markup = createMockZoidMarkup({ component: 'message', encodedData, scriptUID, port }); + const jsonData = JSON.stringify(props); + const markup = createMockZoidMarkup({ component: 'message', jsonData, scriptUID, port }); await waitForTimeout(REQUEST_DELAY); diff --git a/utils/devServerProxy/modals.js b/utils/devServerProxy/modals.js index c05586c7c8..67d6c2155a 100644 --- a/utils/devServerProxy/modals.js +++ b/utils/devServerProxy/modals.js @@ -1,4 +1,4 @@ -import { createMockZoidMarkup, populateTemplate, waitForTimeout, btoa, toBinary } from './lib/miscellaneous'; +import { createMockZoidMarkup, populateTemplate, waitForTimeout } from './lib/miscellaneous'; import getDevAccountDetails from './lib/devAccountDetails'; const REQUEST_DELAY = process.env.REQUEST_DELAY ?? 500; @@ -53,7 +53,7 @@ export default function createModalRoutes(app, server) { app.get('/credit-presentment/smart/modal', async (req, res) => { const { scriptUID } = req.query; const props = getModalData(req); - const encodedData = btoa(toBinary(JSON.stringify(props))); + const jsonData = JSON.stringify(props); const postfix = (() => { if (props.views) { @@ -77,7 +77,7 @@ export default function createModalRoutes(app, server) { const markup = createMockZoidMarkup({ component: `modal-${postfix}`, - encodedData, + jsonData, scriptUID, port }); @@ -97,10 +97,10 @@ export default function createModalRoutes(app, server) { app.get('/credit-presentment/lander/modal', async (req, res) => { const props = getModalData(req); - const encodedData = btoa(toBinary(JSON.stringify(props))); + const jsonData = JSON.stringify(props); const markup = createMockZoidMarkup({ component: 'modal-v2-lander', - encodedData, + jsonData, port });