Adjusting authForm spinner to use session.busy (#3218)

Kinto · Apr 17, 2024 · 3a95325 · 3a95325
1 parent 910d046
commit 3a95325
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/src/components/AuthForm.tsx b/src/components/AuthForm.tsx
@@ -291,7 +291,6 @@ export default function AuthForm({
   const { schema: currentSchema, uiSchema: curentUiSchema } =
     authSchemas(authType);
 
-  const [showSpinner, setshowSpinner] = useState(false);
   const [schema, setSchema] = useState(currentSchema);
   const [uiSchema, setUiSchema] = useState(curentUiSchema);
   const [formData, setFormData] = useState({
@@ -305,7 +304,6 @@ export default function AuthForm({
 
   const serverInfoCallback = async auth => {
     await getServerInfo(auth);
-    setshowSpinner(false);
   };
 
   const authMethods = getSupportedAuthMethods(session);
@@ -322,7 +320,6 @@ export default function AuthForm({
 
   const onChange = ({ formData: updatedData }: RJSFSchema) => {
     if (formData.server !== updatedData.server) {
-      setshowSpinner(true);
       const newServer = servers.find(x => x.server === updatedData.server);
       updatedData.authType = newServer?.authType || ANONYMOUS_AUTH;
     }
@@ -382,7 +379,7 @@ export default function AuthForm({
           formData={formData}
           onChange={onChange}
           onSubmit={onSubmit}
-          showSpinner={showSpinner}
+          showSpinner={session.busy}
         >
           <button type="submit" className="btn btn-info">
             {"Sign in using "}

diff --git a/src/sagas/session.ts b/src/sagas/session.ts
@@ -33,6 +33,7 @@ export function* getServerInfo(
   action: ActionType<typeof actions.getServerInfo>
 ): SagaGen {
   const { auth } = action;
+  yield put(actions.sessionBusy(true));
 
   let processedAuth: AuthData = auth;
   if (auth.authType.startsWith("openid-")) {

diff --git a/test/components/AuthForm_test.tsx b/test/components/AuthForm_test.tsx
@@ -77,9 +77,7 @@ describe("AuthForm component", () => {
         fireEvent.change(screen.queryByLabelText("Server*"), {
           target: { value: "http://test.server/v1" },
         });
-        await screen.findByTestId("spinner"); // spinner should show up
         await waitFor(() => new Promise(resolve => setTimeout(resolve, 500))); // debounce wait
-        expect(screen.queryByTestId("spinner")).toBeNull(); // spinner should be gone by now
 
         fireEvent.click(screen.getByLabelText("Basic Auth"));
         fireEvent.change(screen.getByLabelText("Username*"), {

diff --git a/test/sagas/session_test.ts b/test/sagas/session_test.ts
@@ -77,6 +77,11 @@ describe("session sagas", () => {
 
     describe("Success", () => {
       it("should call client.fetchServerInfo", () => {
+        // ensure that sessionBusy is called
+        expect(getServerInfo.next().value).toStrictEqual(
+          put(actions.sessionBusy(true))
+        );
+
         const fetchServerInfoCall = getServerInfo.next().value;
         client = getClient();
         expect(fetchServerInfoCall).toStrictEqual(
@@ -105,6 +110,7 @@ describe("session sagas", () => {
         action = actions.getServerInfo(authData);
         getServerInfo = saga.getServerInfo(getState, action);
         getServerInfo.next();
+        getServerInfo.next();
         expect(setupClient).toHaveBeenCalledWith({
           authType: "openid",
           provider: "google",
@@ -121,6 +127,7 @@ describe("session sagas", () => {
         // the new server fails.
         getServerInfo = saga.getServerInfo(getState, action);
         getServerInfo.next();
+        getServerInfo.next();
         expect(getServerInfo.throw().value).toStrictEqual(
           put(actions.serverInfoSuccess(DEFAULT_SERVERINFO))
         );
@@ -154,6 +161,8 @@ describe("session sagas", () => {
 
       it("should ignore the success of the oldest", () => {
         getServerInfo1.next();
+        getServerInfo1.next();
+        getServerInfo2.next();
         getServerInfo2.next();
         // Latest to have started is getServerInfo2, it's taken into account.
         expect(getServerInfo2.next(serverInfo).value).toStrictEqual(
@@ -165,6 +174,8 @@ describe("session sagas", () => {
 
       it("should ignore the error of the oldest", () => {
         getServerInfo1.next();
+        getServerInfo1.next();
+        getServerInfo2.next();
         getServerInfo2.next();
         // Latest to have started is getServerInfo2, it's taken into account.
         expect(getServerInfo2.next(serverInfo).value).toStrictEqual(