Tidy space creation tests and cover a little more of the setup process

Author: andybalaam

test/unit-tests/components/structures/SpaceRoomView-test.tsx

@@ -18,6 +18,7 @@ import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalink
 import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore.ts";
 import DMRoomMap from "../../../../src/utils/DMRoomMap.ts";
 import { type IOpts } from "../../../../src/createRoom.ts";
+import SpaceStore from "../../../../src/stores/spaces/SpaceStore.ts";
 
 describe("SpaceRoomView", () => {
     let cli: MockedObject<MatrixClient>;
@@ -128,99 +129,112 @@ describe("SpaceRoomView", () => {
         });
     });
 
-    describe("SpaceSetupFirstRooms", () => {
-        beforeEach(async () => {
-            await renderSpaceRoomView({
+    describe("Spaces: creating a new community space", () => {
+        it("asks what topics you want to discuss, creates rooms for them and offers to share", async () => {
+            cli.createRoom.mockResolvedValueOnce({ room_id: "room1" }).mockResolvedValueOnce({ room_id: "room2" });
+            SpaceStore.instance.addRoomToSpace = jest.fn();
+
+            // Given we are creating a space
+            const view = await renderSpaceRoomView({
                 createOpts: { preset: Preset.PublicChat },
+                name: "My MySpace Space",
             });
-        });
 
-        it("renders SpaceSetupFirstRooms with correct title and description", () => {
-            expect(
-                screen.getByText("What are some things you want to discuss in !space:example.org?"),
-            ).toBeInTheDocument();
-            // using regex here since there's a stray <br />
-            expect(screen.getByText(/let's create a room for each of them/i)).toBeInTheDocument();
+            // Then we are asked what topics we want
             expect(
-                screen.getByText(/you can add more later too, including already existing ones/i),
+                view.getByRole("heading", { name: "What are some things you want to discuss in My MySpace Space?" }),
             ).toBeInTheDocument();
-        });
 
-        it("renders three input fields with correct placeholders", () => {
-            expect(screen.getAllByPlaceholderText(/general/i)).toHaveLength(1);
-            expect(screen.getAllByPlaceholderText(/random/i)).toHaveLength(1);
-            expect(screen.getAllByPlaceholderText(/support/i)).toHaveLength(1);
-        });
+            // And some defaults are suggested
+            expect(view.getByPlaceholderText(/general/i)).toBeInTheDocument();
+            expect(view.getByPlaceholderText(/random/i)).toBeInTheDocument();
+            expect(view.getByPlaceholderText(/support/i)).toBeInTheDocument();
 
-        it("updates input value when typed", () => {
-            const input = screen.getAllByRole("textbox")[0];
-            fireEvent.change(input, { target: { value: "My Room" } });
-            expect(input).toHaveValue("My Room");
-        });
+            // When we enter some room names
+            const input1 = view.getAllByRole("textbox")[0];
+            const input2 = view.getAllByRole("textbox")[1];
+            fireEvent.change(input1, { target: { value: "Room 1" } });
+            fireEvent.change(input2, { target: { value: "Room 2" } });
 
-        it("shows 'Skip for now' when all fields are empty, 'Continue' when any field is filled", () => {
-            // Clear all fields first
-            screen.getAllByRole("textbox").forEach((input) => fireEvent.change(input, { target: { value: "" } }));
+            // And click "Continue"
+            const button = view.getByRole("button", { name: "Continue" });
+            fireEvent.click(button);
 
-            // Should say 'Skip for now'
-            const button = screen.getByRole("button");
-            expect(button).toHaveValue("Skip for now");
+            // Then we create 2 rooms
+            await waitFor(() => {
+                expect(cli.createRoom).toHaveBeenCalledTimes(2);
+            });
 
-            // Fill a field
-            fireEvent.change(screen.getAllByRole("textbox")[0], { target: { value: "Room" } });
-            expect(button).toHaveValue("Continue");
-        });
+            // And offer the user to share this space
+            await waitFor(() =>
+                expect(view.getByRole("heading", { name: "Share My MySpace Space" })).toBeInTheDocument(),
+            );
+            expect(view.getByRole("button", { name: /Share invite link/ })).toBeInTheDocument();
 
-        it("calls onFinished with no argument when skipping", () => {
-            const button = screen.getByRole("button");
-            fireEvent.click(button);
-            // Since onFinished is handled internally, check that SpaceSetupFirstRooms is no longer rendered
-            expect(screen.queryByText(/setup_rooms_community_heading/i)).not.toBeInTheDocument();
+            // And allow them to continue to the first room
+            expect(view.getByRole("button", { name: "Go to my first room" })).toBeInTheDocument();
         });
 
-        it("calls createRoom for each non-empty field and onFinished with first room id", async () => {
-            cli.createRoom.mockResolvedValueOnce({ room_id: "room1" }).mockResolvedValueOnce({ room_id: "room2" });
+        it("shows 'Skip for now' when all fields are empty, 'Continue' when any field is filled", async () => {
+            // Given we are creating a space
+            const view = await renderSpaceRoomView({
+                createOpts: { preset: Preset.PublicChat },
+            });
 
-            fireEvent.change(screen.getAllByRole("textbox")[0], { target: { value: "Room A" } });
-            fireEvent.change(screen.getAllByRole("textbox")[1], { target: { value: "Room B" } });
-            fireEvent.click(screen.getByRole("button"));
+            // When we clear all the topics
+            view.getAllByRole("textbox").forEach((input) => fireEvent.change(input, { target: { value: "" } }));
 
-            await waitFor(() => {
-                expect(cli.createRoom).toHaveBeenCalledTimes(2);
-            });
-            // After finishing, SpaceSetupFirstRooms should not be rendered
-            expect(screen.queryByText(/setup_rooms_community_heading/i)).not.toBeInTheDocument();
+            // Then the button reads "Skip for now"
+            expect(view.getByRole("button", { name: "Skip for now" })).toBeVisible();
+
+            // But when we enter a topic
+            fireEvent.change(view.getAllByRole("textbox")[0], { target: { value: "Room" } });
+
+            // Then the button says "Continue"
+            expect(view.getByRole("button", { name: "Continue" })).toBeVisible();
         });
 
         it("shows error message if room creation fails", async () => {
-            // Force failure.
+            // Given we are creating a space
+            const view = await renderSpaceRoomView({
+                createOpts: { preset: Preset.PublicChat },
+            });
+
+            // And when we create a room it will fail
             cli.createRoom.mockRejectedValue(new Error("fail"));
 
-            // Create a room.
-            fireEvent.change(screen.getAllByRole("textbox")[0], { target: { value: "Room A" } });
-            fireEvent.click(screen.getByRole("button"));
+            // When we create the space
+            fireEvent.change(view.getAllByRole("textbox")[0], { target: { value: "Room A" } });
+            fireEvent.click(view.getByRole("button", { name: "Continue" }));
 
+            // Then we display an error message because it failed
             await waitFor(() => {
                 expect(
-                    screen.getByText((content) =>
-                        content.toLowerCase().includes("failed to create initial space rooms"),
-                    ),
+                    view.getByText((content) => content.toLowerCase().includes("failed to create initial space rooms")),
                 ).toBeInTheDocument();
             });
         });
 
         it("disables button and shows 'Creating rooms' while busy", async () => {
+            // Given we are creating a space
+            const view = await renderSpaceRoomView({
+                createOpts: { preset: Preset.PublicChat },
+            });
+
+            // And creating a room will be slow
             cli.createRoom.mockImplementation(
                 () =>
-                    new Promise((resolve) => {
-                        /* intentionally unresolved to mock work by the server */
+                    new Promise(() => {
+                        // This promise never resolves
                     }),
             );
 
-            fireEvent.change(screen.getAllByRole("textbox")[0], { target: { value: "Room A" } });
-            fireEvent.click(screen.getByRole("button"));
+            // When we create the space
+            fireEvent.change(view.getAllByRole("textbox")[0], { target: { value: "Room A" } });
+            fireEvent.click(view.getByRole("button", { name: "Continue" }));
 
-            const button = screen.getByRole("button");
+            // Then the "Creating rooms..." message is displayed
+            const button = view.getByRole("button");
             expect(button).toBeDisabled();
             expect(button).toHaveValue("Creating rooms…"); // Note the ellipsis
         });