From 15a21f10242cadf1d320b28850f3ecc6285840f1 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Fri, 2 Dec 2022 11:48:45 -0800 Subject: [PATCH] test: useTransition to wait for states This approach could probably be applied across other flakey tests and could also be documented as a good approach of if there is user-feedback for a specific action when running integration tests. --- integration/transition-state-test.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/integration/transition-state-test.ts b/integration/transition-state-test.ts index 7f56b007119..4d973cb2a83 100644 --- a/integration/transition-state-test.ts +++ b/integration/transition-state-test.ts @@ -43,11 +43,14 @@ test.describe("rendering", () => { - 
+                    {transition.state != "idle" && (
+                      
Loading...

+                    )}
+                  

                     
                       {JSON.stringify(transitions, null, 2)}
                     
-
+

@@ -199,6 +202,8 @@ test.describe("rendering", () => { await app.goto("/", true); await app.clickLink(`/${STATES.NORMAL_LOAD}`); await page.waitForSelector(`#${STATES.NORMAL_LOAD}`); + await page.waitForSelector("#loading-indicator", { state: "hidden" }); + let transitionsCode = await app.getElement("#transitions"); let transitionsJson = transitionsCode.text(); let transitions = JSON.parse(transitionsJson); @@ -224,6 +229,7 @@ test.describe("rendering", () => { await app.goto("/", true); await app.clickLink(`/${STATES.LOADING_REDIRECT}`); await page.waitForURL(/\?redirected/); + await page.waitForSelector("#loading-indicator", { state: "hidden" }); let transitionsCode = await app.getElement("#transitions"); let transitionsJson = transitionsCode.text(); let transitions = JSON.parse(transitionsJson); @@ -266,6 +272,7 @@ test.describe("rendering", () => { await app.goto("/", true); await app.clickSubmitButton(`/${STATES.SUBMITTING_LOADER}`); await page.waitForSelector(`#${STATES.SUBMITTING_LOADER}`); + await page.waitForSelector("#loading-indicator", { state: "hidden" }); let transitionsCode = await app.getElement("#transitions"); let transitionsJson = transitionsCode.text(); let transitions = JSON.parse(transitionsJson); @@ -300,6 +307,7 @@ test.describe("rendering", () => { await app.goto("/", true); await app.clickSubmitButton(`/${STATES.SUBMITTING_LOADER_REDIRECT}`); await page.waitForURL(/\?redirected/); + await page.waitForSelector("#loading-indicator", { state: "hidden" }); let transitionsCode = await app.getElement("#transitions"); let transitionsJson = transitionsCode.text(); let transitions = JSON.parse(transitionsJson); @@ -356,6 +364,7 @@ test.describe("rendering", () => { await app.goto("/", true); await app.clickSubmitButton(`/${STATES.SUBMITTING_ACTION}`); await page.waitForSelector(`#${STATES.SUBMITTING_ACTION}`); + await page.waitForSelector("#loading-indicator", { state: "hidden" }); let transitionsCode = await app.getElement("#transitions"); let transitionsJson = transitionsCode.text(); let transitions = JSON.parse(transitionsJson); @@ -408,6 +417,7 @@ test.describe("rendering", () => { await app.goto("/", true); await app.clickSubmitButton(`/${STATES.SUBMITTING_ACTION_REDIRECT}`); await page.waitForURL(/\?redirected/); + await page.waitForSelector("#loading-indicator", { state: "hidden" }); let transitionsCode = await app.getElement("#transitions"); let transitionsJson = transitionsCode.text(); let transitions = JSON.parse(transitionsJson); @@ -464,6 +474,7 @@ test.describe("rendering", () => { await app.goto("/", true); await app.clickSubmitButton(`/${STATES.FETCHER_REDIRECT}`); await page.waitForURL(/\?redirected/); + await page.waitForSelector("#loading-indicator", { state: "hidden" }); let transitionsCode = await app.getElement("#transitions"); let transitionsJson = transitionsCode.text(); let transitions = JSON.parse(transitionsJson);