[MAJC-110] Bugfix: partial successful API response does not trigger fallback

[luc-lisi]

References

MAJC-110

Problem Statement

There is a bug occurring where if the server responds with only some of the ads requested, then we do not successfully fail over to our fallback experience for the missing ads. This also resulted in content not being defined causing the loading spinner to hang forever.

Proposed Changes

Nothing has changed about the existing fallback logic that occurs when an API response fails or comes back completely empty. However, now during the mapResponseToPlacementsWithContent step where the API response is mapped to our MozAdPlacement's content attribute, we check to see if there are any MozAdPlacements that end up not being filled with content. If that is the case, we perform a check to see if they are able to be filled with a known fallback placement type and either fill that placement with the fallback content, or assign content to be {}. In either case, the display step will recognize that the placement has successfully fetched and either a) display the fallback content or b) display nothing in the case content: {}.

Ideally, we should refactor this entire fetch file to possibly move this mapping logic into a wrapper of fetchAds rather than rely on the default function and types given to us by HeyAPI. This would hopefully make the package much easier to read and clean up the large amount of nested conditionals/catches needed. That said in the spirit of this being a quick bug fix, we will leave that refactor to a future ticket as we already have a larger refactor on the horizon.

We have also made a slight update to the Skyscraper fallback as the width of the SVG asset was incorrect.

Verification Steps

• Verify that all new tests pass
• Using the staging URL, manually go into SideBar.tsx in the example app and set the skyscraper placement to be pocket_skyscraper_1 instead of mock_pocket_skyscraper_1. This should result in nothing coming back from the staging server. Reload the app and you should see still two successful billboards render with the skyscraper falling back. You can verify the response from the API is empty for the skyscraper.
• Removed fixed size and repeat the above process. You should see the space be given back completely.