Kevin C.
I love sharing my learning journey in the technology land and hopefully you can also takeaway some interesting tidbits from mine for your own learning and inspire many others to pass on these knowledges. Enjoy and happy learning & sharing!
CORS API Mocking via Service Worker
Image source: https://mswjs.io/
2020 Dec Hack Day #16
Kevin C Chen
Today DevExp - Testing Website
https://pendo.improveops.com/
https://d05fmabcdo23e9.cloudfront.net/
https://qa.improveops.com/
https://e17fmwxyzo16a.cloudfront.net/
Custom AWS CloudFront
Distribution URL
Today DevExp - Testing Website
✅ Testing In Parallel
✅ Independent Environment
✅ No Impact to Staging & Prod
Today DevExp - Testing Website
https://pendo.improveops.com/
https://d05fmabcdo23e9.cloudfront.net/
https://qa.improveops.com/
https://e17fmwxyzo16a.cloudfront.net/
Custom AWS CloudFront
Distribution URL
https://pendo.improveops.com/
https://d05fmabcdo23e9.cloudfront.net/
https://qa.improveops.com/
https://e17fmwxyzo16a.cloudfront.net/
Custom AWS CloudFront
Distribution URL
Dedicated https://ssov1.dev-cloud.../
Waiting...
Testing...
Waiting...
Waiting...timeout...giving up
CORS - Failed Attempts via Frontend
Won't work with credential mode with cookie forwarding...
CORS - Failed Attempts via Frontend
Won't intercept API fetch calls blocked by CORS...
Need a way to automate the provisioning of backend service with appropriate CORS headers set...
But ... it's complicated
Testing Productivity Throughput
📉 Goes Down 📉
Service Worker API Mocking
Image source: https://mswjs.io/
DEMO
New Experience?
REST
GraphQL
Test with Confidence
Network Level Interception
Tech Stack
Agnostic
Tomorrow DevExp - Testing Website
https://pendo.improveops.com/
https://d05fmabcdo23e9.cloudfront.net/
https://qa.improveops.com/
https://e17fmwxyzo16a.cloudfront.net/
Custom AWS CloudFront
Distribution URL
😍 Improved Dev & Test Exp
🚀 Restore Productivity Throughput 📈
✅ Zero Application Code Change
✅ No Impact to Staging & Prod
🎁😊 Thank you 😊🎄
CORS API Mocking via Service Worker
By Kevin C.
CORS API Mocking via Service Worker
This is a hack day project I did in a day with the goal to help improve dev website testability and increase the overall team productivity throughput. The presentation provides the context of the challenge when website cannot be tested with custom AWS CloudFront distribution due to cross-origin resource sharing (CORS) API calls. Although CORS issue requires backend service adjustment to provide appropriate headers, there are times frontend teams need to iterate quickly with feature development and testing that does not depend on data for CORS API calls, in those cases, how can we continue using custom AWS CloudFront distribution for testing? Introducing API mocking at network level with Mock Service Worker, the API mocking library for browser and Node that received the 2020 Open Source award as: The Most Exciting Use of Technology of the year.
