Update static/js/publisher/pages/RegisterSnap/__tests__/RegisterSnap.test.tsx

steverydz · bartaz · steverydz · commit 8a313d5bb890 · 2025-04-01T15:49:04.000+01:00
Co-authored-by: Bartek Szopka &lt;83575+bartaz@users.noreply.github.com&gt;
diff --git a/static/js/publisher/pages/RegisterSnap/RegisterSnap.tsx b/static/js/publisher/pages/RegisterSnap/RegisterSnap.tsx
@@ -2,6 +2,7 @@ import { ReactNode, useState } from "react";
 import { Link } from "react-router-dom";
 import { Notification } from "@canonical/react-components";
 
+import RegistrationError from "./RegistrationError";
 import RegisterSnapForm from "./RegisterSnapForm";
 
 import { filterAvailableStores } from "../../utils";
@@ -17,6 +18,7 @@ function RegisterSnap(): ReactNode {
   const { data, isLoading } = useBrandStores();
 
   const availableStores = filterAvailableStores(data || []);
+  const [selectedStore, setSelectedStore] = useState<string>("ubuntu");
 
   return (
     <div className="u-fixed-width">
@@ -42,59 +44,28 @@ function RegisterSnap(): ReactNode {
         <h1 className="p-heading--2">Register snap</h1>
       )}
 
-      {registrationResponse?.error_code === "name-review-required" && (
-        <Notification severity="positive">
-          <strong>{registrationResponse?.snap_name}</strong> has been submitted
-          for review
-        </Notification>
-      )}
-
-      {registrationResponse?.error_code === "already_owned" && (
-        <Notification severity="caution">
-          You already own '
-          <Link to={`/${registrationResponse.snap_name}/listing`}>
-            <strong>{registrationResponse.snap_name}</strong>
-          </Link>
-          '.
-        </Notification>
-      )}
-
-      {registrationResponse?.error_code === "reserved_name" && (
-        <Notification severity="caution">
-          '<strong>{registrationResponse.snap_name}</strong>' is reserved. You
-          can{" "}
-          <a
-            href={`/request-reserved-name?snap_name=${registrationResponse.snap_name}&store=${registrationResponse.store}&is_private=${registrationResponse.is_private}`}
-          >
-            request a reserved name
-          </a>{" "}
-          or register a new name below.
-        </Notification>
+      {registrationResponse?.error_code && (
+        <RegistrationError
+          snapName={registrationResponse.snap_name}
+          isPrivate={registrationResponse.is_private}
+          store={registrationResponse.store}
+          errorCode={registrationResponse.error_code}
+        />
       )}
 
-      {registrationResponse?.error_code === "no-permission" && (
-        <Notification severity="caution">
-          You do not have permission to register snaps to this store. Contact
-          the store administrator.
+      {selectedStore === "ubuntu" && (
+        <Notification severity="information">
+          Snap name registrations are subject to manual review. You will be able
+          to upload your snap and update its metadata, but you will not be able
+          to make the Snap public until the review has been completed. We aim to
+          review all registrations within 30 days
         </Notification>
       )}
 
-      {registrationResponse?.error_code !== "already_registered" && (
-        <p>
-          Before you can push your snap to the store, its name must be
-          registered
-        </p>
-      )}
-
-      <Notification severity="information">
-        Snap name registrations are subject to manual review. You will be able
-        to upload your snap and update its metadata, but you will not be able to
-        make the Snap public until the review has been completed. We aim to
-        review all registrations within 30 days
-      </Notification>
-
       {!isLoading && availableStores.length > 0 && (
         <RegisterSnapForm
+          selectedStore={selectedStore}
+          setSelectedStore={setSelectedStore}
           isSending={isSending}
           setIsSending={setIsSending}
           setRegistrationResponse={setRegistrationResponse}
diff --git a/static/js/publisher/pages/RegisterSnap/RegisterSnapForm.tsx b/static/js/publisher/pages/RegisterSnap/RegisterSnapForm.tsx
@@ -1,4 +1,10 @@
-import { ReactNode, useState, Dispatch, SetStateAction } from "react";
+import {
+  ReactNode,
+  useState,
+  Dispatch,
+  SetStateAction,
+  FormEvent,
+} from "react";
 import { Link, useNavigate } from "react-router-dom";
 import {
   Form,
@@ -19,57 +25,60 @@ type Props = {
     SetStateAction<RegistrationResponse | undefined>
   >;
   availableStores: { name: string; id: string }[];
+  selectedStore: string;
+  setSelectedStore: Dispatch<SetStateAction<string>>;
 };
 
 function RegisterSnapForm({
   isSending,
   setIsSending,
   setRegistrationResponse,
   availableStores,
+  selectedStore,
+  setSelectedStore,
 }: Props): ReactNode {
   const [snapName, setSnapName] = useState<string>();
-  const [selectedStore, setSelectedStore] = useState<string>("ubuntu");
-  const [isPrivate, setIsPrivate] = useState<string>("private");
+  const [privacy, setPrivacy] = useState<string>("private");
 
   const navigate = useNavigate();
 
-  return (
-    <Form
-      onSubmit={async (e) => {
-        e.preventDefault();
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
 
-        setIsSending(true);
+    setIsSending(true);
 
-        const formData = new FormData();
-        formData.set("csrf_token", window.CSRF_TOKEN);
-        formData.set("snap_name", snapName || "");
-        formData.set("store", selectedStore);
+    const formData = new FormData();
+    formData.set("csrf_token", window.CSRF_TOKEN);
+    formData.set("snap_name", snapName || "");
+    formData.set("store", selectedStore);
 
-        const response = await fetch("/api/register-snap", {
-          method: "POST",
-          headers: {
-            "X-CSRFToken": window.CSRF_TOKEN,
-          },
-          body: formData,
-        });
+    const response = await fetch("/api/register-snap", {
+      method: "POST",
+      headers: {
+        "X-CSRFToken": window.CSRF_TOKEN,
+      },
+      body: formData,
+    });
 
-        if (!response.ok) {
-          setIsSending(false);
-          throw new Error("Unable to register snap name");
-        }
+    if (!response.ok) {
+      setIsSending(false);
+      throw new Error("Unable to register snap name");
+    }
 
-        const responseData = await response.json();
+    const responseData = await response.json();
 
-        setTimeout(() => {
-          if (responseData.success) {
-            navigate("/snaps");
-          } else {
-            setRegistrationResponse(responseData.data);
-            setIsSending(false);
-          }
-        }, 1000);
-      }}
-    >
+    setTimeout(() => {
+      if (responseData.success) {
+        navigate("/snaps");
+      } else {
+        setRegistrationResponse(responseData.data);
+        setIsSending(false);
+      }
+    }, 1000);
+  };
+
+  return (
+    <Form onSubmit={handleSubmit}>
       <Row>
         <Col size={8}>
           <Select
@@ -82,7 +91,7 @@ function RegisterSnapForm({
               setSelectedStore(e.target.value);
 
               if (e.target.value === "ubuntu") {
-                setIsPrivate("private");
+                setPrivacy("private");
               }
             }}
             required
@@ -106,9 +115,9 @@ function RegisterSnapForm({
             name="public"
             disabled={selectedStore === "ubuntu"}
             value="public"
-            checked={isPrivate === "public"}
+            checked={privacy === "public"}
             onChange={(e) => {
-              setIsPrivate(e.target.value);
+              setPrivacy(e.target.value);
             }}
           />
           <Input
@@ -118,9 +127,9 @@ function RegisterSnapForm({
             help="Snap is hidden in stores and only accessible by the publisher and collaborators"
             disabled={selectedStore === "ubuntu"}
             value="private"
-            checked={isPrivate === "private" || selectedStore === "ubuntu"}
+            checked={privacy === "private" || selectedStore === "ubuntu"}
             onChange={(e) => {
-              setIsPrivate(e.target.value);
+              setPrivacy(e.target.value);
             }}
           />
         </Col>
diff --git a/static/js/publisher/pages/RegisterSnap/RegistrationError.tsx b/static/js/publisher/pages/RegisterSnap/RegistrationError.tsx
@@ -0,0 +1,64 @@
+import { Link } from "react-router-dom";
+import { Notification } from "@canonical/react-components";
+
+type Props = {
+  errorCode: string;
+  snapName: string;
+  isPrivate: string;
+  store: string;
+};
+
+function RegistrationError({ snapName, errorCode, isPrivate, store }: Props) {
+  if (errorCode === "name-review-required") {
+    return (
+      <Notification severity="information">
+        <strong>{snapName}</strong> has been submitted for review
+      </Notification>
+    );
+  }
+
+  if (errorCode === "already_owned") {
+    return (
+      <Notification severity="information">
+        You already own '
+        <Link to={`/${snapName}/listing`}>
+          <strong>{snapName}</strong>
+        </Link>
+        '.
+      </Notification>
+    );
+  }
+
+  if (errorCode === "reserved_name") {
+    return (
+      <Notification severity="information">
+        '<strong>{snapName}</strong>' is reserved. You can{" "}
+        <a
+          href={`/request-reserved-name?snap_name=${snapName}&store=${store}&is_isPrivate=${isPrivate}`}
+        >
+          request a reserved name
+        </a>{" "}
+        or register a new name below.
+      </Notification>
+    );
+  }
+
+  if (errorCode === "no-permission") {
+    return (
+      <Notification severity="information">
+        You do not have permission to register snaps to this store. Contact the
+        store administrator.
+      </Notification>
+    );
+  }
+
+  if (errorCode !== "already_registered") {
+    return (
+      <Notification severity="information">
+        Before you can push your snap to the store, its name must be registered
+      </Notification>
+    );
+  }
+}
+
+export default RegistrationError;
diff --git a/static/js/publisher/pages/RegisterSnap/__tests__/RegisterSnap.test.tsx b/static/js/publisher/pages/RegisterSnap/__tests__/RegisterSnap.test.tsx
@@ -131,7 +131,7 @@ describe("RegisterSnap", () => {
     });
   });
 
-  test("enabled public and private fields if not global store", async () => {
+  test("enables public and private fields if not global store", async () => {
     const user = userEvent.setup();
 
     server.use(
diff --git a/tests/publisher/tests_register_name.py b/tests/publisher/tests_register_name.py
@@ -20,15 +20,6 @@ def test_register_name_logged_in(self):
         self.assert_template_used("store/publisher.html")
 
 
-class PostRegisterNamePageNotAuth(BaseTestCases.EndpointLoggedOut):
-    def setUp(self):
-        endpoint_url = "/api/register-snap"
-
-        super().setUp(
-            snap_name=None, endpoint_url=endpoint_url, method_endpoint="POST"
-        )
-
-
 class PostRegisterNamePage(BaseTestCases.EndpointLoggedIn):
     def setUp(self):
         endpoint_url = "/api/register-snap"
@@ -111,6 +102,9 @@ def test_name_already_registered(self):
         response = self.client.post(self.endpoint_url, data=self.data)
 
         assert response.status_code == 200
+        assert (
+            response.get_json()["data"]["error_code"] == "already_registered"
+        )
 
     @responses.activate
     def test_name_reserved(self):
@@ -125,6 +119,7 @@ def test_name_reserved(self):
         response = self.client.post(self.endpoint_url, data=self.data)
 
         assert response.status_code == 200
+        assert response.get_json()["data"]["error_code"] == "reserved_name"
 
     @responses.activate
     def test_claim_dispute(self):
@@ -142,3 +137,4 @@ def test_claim_dispute(self):
         response = self.client.post(self.endpoint_url, data=self.data)
 
         assert response.status_code == 200
+        assert response.get_json()["success"] is True
