✅ Make cypress record_http deterministic (somehow)

mon-entreprise/cypress/integration/mon-entreprise/english/gérer.js

@@ -4,11 +4,13 @@ const FIXTURES_FOLDER = 'cypress/fixtures'
 const GERER_FIXTURES_FOLDER = `${FIXTURES_FOLDER}/gérer`
 const writeFixtures = Cypress.env('record_http') !== undefined
 const stubFixtures = !writeFixtures
-const setInterceptResponses = (responses, hostnames) => {
+const setInterceptResponses = (pendingRequests, responses, hostnames) => {
 	if (writeFixtures) {
 		cy.intercept('*', (req) => {
 			if (!hostnames.includes(new URL(req.url).hostname)) return
+			pendingRequests.add(req.url)
 			req.on('after:response', (res) => {
+				pendingRequests.delete(req.url)
 				responses[res.url] = res.body
 			})
 		})
@@ -29,11 +31,12 @@ const setInterceptResponses = (responses, hostnames) => {
 			})
 	}
 }
-const waitResponses = (responses) => {
+const writeResponses = (pendingRequests, responses) => {
 	if (writeFixtures) {
-		// No need to `cy.wait`, we anyway don't care about not-yet-received
-		// responses, as we don't care about responses not yet utilized in the
-		// test itself. Caveat: fixtures folder is undeterministic when recording.
+		// We need to wait on all catched requests to be fulfilled and recorded,
+		// otherwise the stubbed cy run might error when a request is not stubbed.
+		// Caveat: we assume request.url to be unique amongst recorded requests.
+		cy.waitUntil(() => pendingRequests.size === 0)
 		Object.keys(responses).map((url) => {
 			if (responses[url] === undefined) return
 			cy.writeFile(
@@ -47,15 +50,17 @@ const waitResponses = (responses) => {
 describe(`Manage page test (${
 	writeFixtures ? 'record mode' : 'stubbed mode'
 })`, function () {
+	let pendingRequests = new Set()
 	let responses = {}
 	const hostnamesToRecord = ['entreprise.data.gouv.fr', 'geo.api.gouv.fr']
 	beforeEach(() => {
+		pendingRequests = new Set()
 		responses = {}
-		setInterceptResponses(responses, hostnamesToRecord)
+		setInterceptResponses(pendingRequests, responses, hostnamesToRecord)
 		cy.visit(fr ? encodeURI('/gérer') : '/manage')
 	})
 	afterEach(() => {
-		waitResponses(responses)
+		writeResponses(pendingRequests, responses)
 	})
 	it('should not crash', function () {
 		cy.contains(fr ? 'Gérer mon activité' : 'Manage my business')

mon-entreprise/cypress/support/commands.js

@@ -28,3 +28,4 @@ Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe) => {
 		setTimeout(() => resolve($iframe.contents().find('body')), 6000)
 	})
 })
+import 'cypress-wait-until'

mon-entreprise/package.json

@@ -46,6 +46,7 @@
 		"copy-webpack-plugin": "^4.5.2",
 		"cypress": "^7.4.0",
 		"cypress-plugin-tab": "^1.0.5",
+		"cypress-wait-until": "^1.7.1",
 		"eslint-plugin-react": "^7.12.4",
 		"html-webpack-plugin": "^3.2.0",
 		"i18next-parser": "^3.3.0",

yarn.lock

@@ -5122,6 +5122,11 @@ cypress-plugin-tab@^1.0.5:
   dependencies:
     ally.js "^1.4.1"
 
+cypress-wait-until@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/cypress-wait-until/-/cypress-wait-until-1.7.1.tgz#3789cd18affdbb848e3cfc1f918353c7ba1de6f8"
+  integrity sha512-8DL5IsBTbAxBjfYgCzdbohPq/bY+IKc63fxtso1C8RWhLnQkZbVESyaclNr76jyxfId6uyzX8+Xnt0ZwaXNtkA==
+
 cypress@^7.4.0:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-7.4.0.tgz#679bfe75335b9a4873d44f0d989e9f0367f00665"