Make running test app easier

[johnboxall]

commerce-sdk-isomorphic ships with a neat little test app based on [email protected]

It is challenging to get the app working.

• The app is served over HTTPS, but certificate used with it is self signed and not trusted by browsers. I think it comes from an older version of webpack dev server. To get past browser warnings about this, in Chrome you can type thisisunsafe.
• The default proxy configuration needs to be modified in package.json, providing a valid shortcode.
• The default config in src/config.js needs to be updated with valid values.
• The SLAS client you're using needs to be updated to have https://localhost:3000/callback be a valid redirect URI.
• Next you'll hit an issue with 404s, because in a browser, the redirect from authorize will be followed, and CRA doesn't know how to render /callback:

  commerce-sdk-isomorphic/src/static/helpers/slasHelper.ts

  Lines 140 to 145 in 414ff58

  	// url is a read only property we unfortunately cannot mock out using nock
  	// meaning redirectUrl will not have a falsy value for unit tests
  	/* istanbul ignore next */
  	if (response.status >= 400 || searchParams.error) {
  	throw new ResponseError(response);
  	}

• Finally, you'll need to make sure the default search query actually load a product, because there seems to be some subtle bug with the text input if no search results are returned.

It is possible to jump through these hoops, but challenging:

A few ideas:

1. Consider not running the test app using HTTPS:

   commerce-sdk-isomorphic/package.json

   Line 39 in 414ff58

   "start": "HTTPS=true react-scripts start",

2. Consider updating the authorize helper to be more forgiving. We do care if the initial call to authorizeCustomer failed, but in the event that we're running in a browser, we actually do not care if we followed a redirect and the redirect failed to load, as we can still get the usid/code out of the URL, regardless of the status code of loading redirect_uri.
3. Commit valid configuration for the test app to this repo. We have public settings that we can use.
4. Chase down whatever the zero results bug in the app is!

[joeluong-sfcc]

Thanks @johnboxall for raising this issue, we've created a work item in our backlog to track this work

[johnboxall]

I tried the steps above again but it appears no longer possible to get the test app to successfully run.

First I build the lib:

nvm use 18
corepack enable
yarn install
yarn run renderTemplates
yarn build:lib 

Second I tried to run the app:

NODE_OPTIONS=--openssl-legacy-provider HTTPS=true react-scripts start

The cert that shipped with the older version of CRA we use appears to not be compatible with modern Node versions so I introduced a new flag. Though I was able to get it to start (and bypass the TLS warning with thisisunsafe) I still had TLS errors in browser when trying to connect via the proxy to Commerce API.

In addition I needed to make the following changes:

1. Update package.json::proxy to use a real shortcode.
2. Update the default searchText in src/environment/App/App.jsx to refer to something that returns results (eg. dress)
3. Update src/environment/config.js with real settings
4. Update src/static/helpers/slasHelper.ts to skip handling errors from following the callback

Going forward, I think we have a few options:

1. Seek to update to a later version of CRA, hopefully removing the TLS issues. However, I believe later versions of CRA don't include the proxy feature which we use.
2. Create a standalone little app

All of this might be easier when SCAPI ships support for CORS (removing the need for a proxy) which should come up in B2C Commerce ~24.10-ish.

Until then, an easy-ish way to test this library is to use pwa-kit-create-app@2 to generate a project where you can then edit calls to the PWA Kit:

npx pwa-kit-create-app --outputDir pwa-kit-2

Now edit this file:

https://github.com/SalesforceCommerceCloud/pwa-kit/blob/5af2acf055beb6259b30c434891f502bdf164c7e/packages/template-retail-react-app/app/commerce-api/index.js#L48