From c1936ea3e4cc2b1c56b31c3177c569ce440fd291 Mon Sep 17 00:00:00 2001 From: Johan Castiblanco Date: Mon, 25 Sep 2023 12:54:04 -0500 Subject: [PATCH 1/3] feat: add parser url function to utils --- src/index.js | 1 + src/utils.js | 21 +++++++++++++++++++++ src/utils.test.js | 40 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 62 insertions(+) diff --git a/src/index.js b/src/index.js index 428012f3e..7e0c785f8 100644 --- a/src/index.js +++ b/src/index.js @@ -6,6 +6,7 @@ export { getQueryParameters, ensureDefinedConfig, mix, + parseURL, } from './utils'; export { APP_TOPIC, diff --git a/src/utils.js b/src/utils.js index e173ca75f..79e8231c8 100644 --- a/src/utils.js +++ b/src/utils.js @@ -122,6 +122,27 @@ export function convertKeyNames(object, nameMap) { return modifyObjectKeys(object, transformer); } +/** + * Given a string URL return an element that has been parsed via href. + * This element has the possibility to return different part of the URL. + parser.protocol; // => "http:" + parser.hostname; // => "example.com" + parser.port; // => "3000" + parser.pathname; // => "/pathname/" + parser.search; // => "?search=test" + parser.hash; // => "#hash" + parser.host; // => "example.com:3000" + * https://gist.github.com/jlong/2428561 + * + * @param {string} + * @returns {Object} + */ +export function parseURL(url) { + const parser = document.createElement('a'); + parser.href = url; + return parser; +} + /** * *Deprecated*: A method which converts the supplied query string into an object of * key-value pairs and returns it. Defaults to the current query string - should perform like diff --git a/src/utils.test.js b/src/utils.test.js index 1c366c772..0f887fd58 100644 --- a/src/utils.test.js +++ b/src/utils.test.js @@ -3,6 +3,7 @@ import { camelCaseObject, snakeCaseObject, convertKeyNames, + parseURL, getQueryParameters, mix, } from '.'; @@ -115,6 +116,7 @@ describe('getQueryParameters', () => { }); }); + describe('mix', () => { it('should return rigth value', () => { const expected = '#546e88'; // This value was calculated in https://sass.js.org/ by using sass mix function @@ -130,5 +132,43 @@ describe('mix', () => { const expected = '#8598aa'; // This value was calculated in https://sass.js.org/ by using sass mix function expect(mix('FFFFFF', '0A3055')).toBe(expected); + }); +}); + +describe('ParseURL', () => { + const testURL = 'http://example.com:3000/pathname/?search=test#hash'; + const parsedURL = parseURL(testURL); + it('String URL is correctly parsed', () => { + expect(parsedURL.toString()).toEqual(testURL); + expect(parsedURL.href).toEqual(testURL); + expect(typeof (parsedURL)).toEqual('object'); + }); + + it('should return protocol from URL', () => { + expect(parsedURL.protocol).toEqual('http:'); + }); + + it('should return hostname from URL', () => { + expect(parsedURL.hostname).toEqual('example.com'); + }); + + it('should return port from URL', () => { + expect(parsedURL.port).toEqual('3000'); + }); + + it('should return pathname from URL', () => { + expect(parsedURL.pathname).toEqual('/pathname/'); + }); + + it('should return search rom URL', () => { + expect(parsedURL.search).toEqual('?search=test'); + }); + + it('should return hash from URL', () => { + expect(parsedURL.hash).toEqual('#hash'); + }); + + it('should return host from URL', () => { + expect(parsedURL.host).toEqual('example.com:3000'); }); }); From 2501c539692cfba9a180dcec523eef6fbce6134b Mon Sep 17 00:00:00 2001 From: Johan Castiblanco Date: Mon, 25 Sep 2023 21:04:36 -0500 Subject: [PATCH 2/3] feat: add `getPath` function for `PUBLIC_PATH` This add function to get path from a string url from utils. Also the function is implemented to the history module. In order to match with URLS as webpack allow.(CDN). Test were developed for different shaped of string urls with path. A basic test is also added for the base case in the history variable for the initialize with base case of PUBLIC_PATH=`/`. --- src/index.js | 1 + src/initialize.js | 4 ++-- src/initialize.test.js | 11 +++++++++++ src/utils.js | 11 +++++++++++ src/utils.test.js | 39 +++++++++++++++++++++++++++++++++++++++ 5 files changed, 64 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 7e0c785f8..8a1e93340 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ export { ensureDefinedConfig, mix, parseURL, + getPath, } from './utils'; export { APP_TOPIC, diff --git a/src/initialize.js b/src/initialize.js index 80d4f35df..47b3276ee 100644 --- a/src/initialize.js +++ b/src/initialize.js @@ -54,7 +54,7 @@ Note that the env.config.js file in frontend-platform's root directory is NOT us initialization code, it's just there for the test suite and example application. */ import envConfig from 'env.config'; // eslint-disable-line import/no-unresolved - +import { getPath } from './utils'; import { publish, } from './pubSub'; @@ -101,7 +101,7 @@ import { mix } from './utils'; */ export const history = (typeof window !== 'undefined') ? createBrowserHistory({ - basename: getConfig().PUBLIC_PATH, + basename: getPath(getConfig().PUBLIC_PATH), }) : createMemoryHistory(); /** diff --git a/src/initialize.test.js b/src/initialize.test.js index d33e68b56..137cf43dc 100644 --- a/src/initialize.test.js +++ b/src/initialize.test.js @@ -1,4 +1,5 @@ import PubSub from 'pubsub-js'; +import { createBrowserHistory } from 'history'; import { APP_PUBSUB_INITIALIZED, APP_CONFIG_INITIALIZED, @@ -37,6 +38,7 @@ jest.mock('./auth'); jest.mock('./analytics'); jest.mock('./i18n'); jest.mock('./auth/LocalForageCache'); +jest.mock('history'); let config = null; const newConfig = { @@ -436,3 +438,12 @@ describe('initialize', () => { expect(logError).not.toHaveBeenCalled(); }); }); + +describe('history', () => { + it('browser history called by default path', async () => { + // import history from initialize; + expect(createBrowserHistory).toHaveBeenCalledWith({ + basename: '/', + }); + }); +}); diff --git a/src/utils.js b/src/utils.js index 79e8231c8..5808316ff 100644 --- a/src/utils.js +++ b/src/utils.js @@ -143,6 +143,17 @@ export function parseURL(url) { return parser; } +/** + * Given a string URL return the path of the URL + * + * + * @param {string} + * @returns {string} + */ +export function getPath(url) { + return parseURL(url).pathname; +} + /** * *Deprecated*: A method which converts the supplied query string into an object of * key-value pairs and returns it. Defaults to the current query string - should perform like diff --git a/src/utils.test.js b/src/utils.test.js index 0f887fd58..0f10643fe 100644 --- a/src/utils.test.js +++ b/src/utils.test.js @@ -4,6 +4,7 @@ import { snakeCaseObject, convertKeyNames, parseURL, + getPath, getQueryParameters, mix, } from '.'; @@ -172,3 +173,41 @@ describe('ParseURL', () => { expect(parsedURL.host).toEqual('example.com:3000'); }); }); + +describe('getPath', () => { + it('Path is retrieved with full url', () => { + const testURL = 'http://example.com:3000/pathname/?search=test#hash'; + + expect(getPath(testURL)).toEqual('/pathname/'); + }); + + it('Path is retrieved with only path', () => { + const testURL = '/learning/'; + + expect(getPath(testURL)).toEqual('/learning/'); + }); + + it('Path is retrieved without protocol', () => { + const testURL = '//example.com:3000/accounts/'; + + expect(getPath(testURL)).toEqual('/accounts/'); + }); + + it('Path is retrieved with base `/`', () => { + const testURL = '/'; + + expect(getPath(testURL)).toEqual('/'); + }); + + it('Path is retrieved without port', () => { + const testURL = 'https://example.com/accounts/'; + + expect(getPath(testURL)).toEqual('/accounts/'); + }); + + it('Path is retrieved without CDN shape', () => { + const testURL = 'https://d20blt6w1kfasr.cloudfront.net/learning/'; + + expect(getPath(testURL)).toEqual('/learning/'); + }); +}); From bf4a369105fd98464de997d8fb3eb7e9e09e582a Mon Sep 17 00:00:00 2001 From: andrey-canon Date: Wed, 17 Jan 2024 19:22:28 -0500 Subject: [PATCH 3/3] fix: remove lint errors --- src/initialize.js | 3 +-- src/utils.test.js | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/initialize.js b/src/initialize.js index 47b3276ee..fa7f176a8 100644 --- a/src/initialize.js +++ b/src/initialize.js @@ -54,7 +54,7 @@ Note that the env.config.js file in frontend-platform's root directory is NOT us initialization code, it's just there for the test suite and example application. */ import envConfig from 'env.config'; // eslint-disable-line import/no-unresolved -import { getPath } from './utils'; +import { getPath, mix } from './utils'; import { publish, } from './pubSub'; @@ -90,7 +90,6 @@ import { PRIMARY_COLOR_DEFINITIONS, } from './constants'; import configureCache from './auth/LocalForageCache'; -import { mix } from './utils'; /** * A browser history or memory history object created by the [history](https://github.com/ReactTraining/history) diff --git a/src/utils.test.js b/src/utils.test.js index 0f10643fe..ef92f4bcf 100644 --- a/src/utils.test.js +++ b/src/utils.test.js @@ -117,7 +117,6 @@ describe('getQueryParameters', () => { }); }); - describe('mix', () => { it('should return rigth value', () => { const expected = '#546e88'; // This value was calculated in https://sass.js.org/ by using sass mix function @@ -133,7 +132,7 @@ describe('mix', () => { const expected = '#8598aa'; // This value was calculated in https://sass.js.org/ by using sass mix function expect(mix('FFFFFF', '0A3055')).toBe(expected); - }); + }); }); describe('ParseURL', () => {