Jan 24, 2024 · Jan 23, 2024 · Jan 23, 2024 · Jan 24, 2024 · Jan 24, 2024 · Jan 24, 2024
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx
  MockUser,
  MockWorkspace,
  MockWorkspaceQuota,
  MockWorkspaceRequest,
  MockWorkspaceRichParametersRequest,
  MockTemplateVersionParameter1,
  MockTemplateVersionParameter2,
  MockTemplateVersionParameter3,
  MockTemplateVersionExternalAuthGithub,
  MockOrganization,
  MockTemplateVersionExternalAuthGithubAuthenticated,
 } from "testHelpers/entities";
 import {
  renderWithAuth,
  waitForLoaderToBeRemoved,
 } from "testHelpers/renderHelpers";
 import CreateWorkspacePage from "./CreateWorkspacePage";
 import { Language } from "./CreateWorkspacePageView";
 import { server } from "testHelpers/server";
 import { rest } from "msw";

 const nameLabelText = "Workspace Name";
 const createWorkspaceText = "Create Workspace";
    expect(validationError).toBeInTheDocument();
  });

  it("external auth authenticates and succeeds", async () => {
    jest
      .spyOn(API, "getWorkspaceQuota")
      .mockResolvedValueOnce(MockWorkspaceQuota);
    jest
      .spyOn(API, "getUsers")
      .mockResolvedValueOnce({ users: [MockUser], count: 1 });
    jest.spyOn(API, "createWorkspace").mockResolvedValueOnce(MockWorkspace);
    jest
      .spyOn(API, "getTemplateVersionExternalAuth")
      .mockResolvedValue([MockTemplateVersionExternalAuthGithub]);

    renderCreateWorkspacePage();
    await waitForLoaderToBeRemoved();

    const nameField = await screen.findByLabelText(nameLabelText);
    // have to use fireEvent b/c userEvent isn't cleaning up properly between tests
    fireEvent.change(nameField, {
      target: { value: "test" },
    });

    const githubButton = await screen.findByText("Login with GitHub");
    await userEvent.click(githubButton);

    jest
      .spyOn(API, "getTemplateVersionExternalAuth")
      .mockResolvedValue([MockTemplateVersionExternalAuthGithubAuthenticated]);

    await screen.findByText("Authenticated with GitHub");

    const submitButton = screen.getByText(createWorkspaceText);
    await userEvent.click(submitButton);

    await waitFor(() =>
      expect(API.createWorkspace).toBeCalledWith(
        MockUser.organization_ids[0],
        MockUser.id,
        expect.objectContaining({
          ...MockWorkspaceRequest,
        }),
      ),
    );
  });

  it("external auth: errors if unauthenticated", async () => {
    jest
      .spyOn(API, "getTemplateVersionExternalAuth")
      .mockResolvedValueOnce([MockTemplateVersionExternalAuthGithub]);

    renderCreateWorkspacePage();
    await waitForLoaderToBeRemoved();

    await screen.findByText(
      "To create a workspace using the selected template, please ensure you are authenticated with all the external providers listed below.",
    );
  });

  it("auto create a workspace if uses mode=auto", async () => {
    const param = "first_parameter";
    const paramValue = "It works!";
    expect(warningMessage).toHaveTextContent(Language.duplicationWarning);
    expect(nameInput).toHaveValue(`${MockWorkspace.name}-copy`);
  });

  it("displays the form after connecting to all the external services", async () => {
    jest.spyOn(window, "open").mockImplementation(() => null);
    const user = userEvent.setup();
    const notAuthenticatedExternalAuth = {
      ...MockTemplateVersionExternalAuthGithub,
      authenticated: false,
    };
    server.use(
      rest.get(
        "/api/v2/templateversions/:versionId/external-auth",
        (req, res, ctx) => {
          return res(ctx.json([notAuthenticatedExternalAuth]));
        },
      ),
    );
    renderCreateWorkspacePage();

    await screen.findByText("External authentication");
    expect(screen.queryByRole("form")).not.toBeInTheDocument();

    const connectButton = screen.getByRole("button", {
      name: /connect/i,
    });
    server.use(
      rest.get(
        "/api/v2/templateversions/:versionId/external-auth",
        (req, res, ctx) => {
          const authenticatedExternalAuth = {
            ...MockTemplateVersionExternalAuthGithub,
            authenticated: true,
          };
          return res(ctx.json([authenticatedExternalAuth]));
        },
      ),
    );
    await user.click(connectButton);
    // TODO: Consider improving the timeout by simulating react-query polling.
    // Current implementation could not achieve this, further research is
    // needed.
    await screen.findByRole("form", undefined, { timeout: 10_000 });
  });
 });
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
  },
 };

 export constExternalAuth: Story = {
 export constRequiresExternalAuth: Story = {
  args: {
    externalAuth: [
      {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,21 +6,21 @@ import {
		MockUser,
		MockWorkspace,
		MockWorkspaceQuota,
		MockWorkspaceRequest,
		MockWorkspaceRichParametersRequest,
		MockTemplateVersionParameter1,
		MockTemplateVersionParameter2,
		MockTemplateVersionParameter3,
		MockTemplateVersionExternalAuthGithub,
		MockOrganization,
		MockTemplateVersionExternalAuthGithubAuthenticated,
		} from "testHelpers/entities";
		import {
		renderWithAuth,
		waitForLoaderToBeRemoved,
		} from "testHelpers/renderHelpers";
		import CreateWorkspacePage from "./CreateWorkspacePage";
		import { Language } from "./CreateWorkspacePageView";
		import { server } from "testHelpers/server";
		import { rest } from "msw";

		const nameLabelText = "Workspace Name";
		const createWorkspaceText = "Create Workspace";
Expand DownExpand Up		@@ -157,63 +157,6 @@ describe("CreateWorkspacePage", () => {
		expect(validationError).toBeInTheDocument();
		});

		it("external auth authenticates and succeeds", async () => {
		jest
		.spyOn(API, "getWorkspaceQuota")
		.mockResolvedValueOnce(MockWorkspaceQuota);
		jest
		.spyOn(API, "getUsers")
		.mockResolvedValueOnce({ users: [MockUser], count: 1 });
		jest.spyOn(API, "createWorkspace").mockResolvedValueOnce(MockWorkspace);
		jest
		.spyOn(API, "getTemplateVersionExternalAuth")
		.mockResolvedValue([MockTemplateVersionExternalAuthGithub]);

		renderCreateWorkspacePage();
		await waitForLoaderToBeRemoved();

		const nameField = await screen.findByLabelText(nameLabelText);
		// have to use fireEvent b/c userEvent isn't cleaning up properly between tests
		fireEvent.change(nameField, {
		target: { value: "test" },
		});

		const githubButton = await screen.findByText("Login with GitHub");
		await userEvent.click(githubButton);

		jest
		.spyOn(API, "getTemplateVersionExternalAuth")
		.mockResolvedValue([MockTemplateVersionExternalAuthGithubAuthenticated]);

		await screen.findByText("Authenticated with GitHub");

		const submitButton = screen.getByText(createWorkspaceText);
		await userEvent.click(submitButton);

		await waitFor(() =>
		expect(API.createWorkspace).toBeCalledWith(
		MockUser.organization_ids[0],
		MockUser.id,
		expect.objectContaining({
		...MockWorkspaceRequest,
		}),
		),
		);
		});

		it("external auth: errors if unauthenticated", async () => {
		jest
		.spyOn(API, "getTemplateVersionExternalAuth")
		.mockResolvedValueOnce([MockTemplateVersionExternalAuthGithub]);

		renderCreateWorkspacePage();
		await waitForLoaderToBeRemoved();

		await screen.findByText(
		"To create a workspace using the selected template, please ensure you are authenticated with all the external providers listed below.",
		);
		});

		it("auto create a workspace if uses mode=auto", async () => {
		const param = "first_parameter";
		const paramValue = "It works!";
Expand DownExpand Up		@@ -284,4 +227,46 @@ describe("CreateWorkspacePage", () => {
		expect(warningMessage).toHaveTextContent(Language.duplicationWarning);
		expect(nameInput).toHaveValue(`${MockWorkspace.name}-copy`);
		});

		it("displays the form after connecting to all the external services", async () => {
		jest.spyOn(window, "open").mockImplementation(() => null);
		const user = userEvent.setup();
		const notAuthenticatedExternalAuth = {
		...MockTemplateVersionExternalAuthGithub,
		authenticated: false,
		};
		server.use(
		rest.get(
		"/api/v2/templateversions/:versionId/external-auth",
		(req, res, ctx) => {
		return res(ctx.json([notAuthenticatedExternalAuth]));
		},
		),
		);
		renderCreateWorkspacePage();

		await screen.findByText("External authentication");
		expect(screen.queryByRole("form")).not.toBeInTheDocument();

		const connectButton = screen.getByRole("button", {
		name: /connect/i,
		});
		server.use(
		rest.get(
		"/api/v2/templateversions/:versionId/external-auth",
		(req, res, ctx) => {
		const authenticatedExternalAuth = {
		...MockTemplateVersionExternalAuthGithub,
		authenticated: true,
		};
		return res(ctx.json([authenticatedExternalAuth]));
		},
		),
		);
		await user.click(connectButton);
		// TODO: Consider improving the timeout by simulating react-query polling.
		// Current implementation could not achieve this, further research is
		// needed.
		await screen.findByRole("form", undefined, { timeout: 10_000 });
		});
		});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -89,7 +89,7 @@ export const Parameters: Story = {
		},
		};

		export constExternalAuth: Story = {
		export constRequiresExternalAuth: Story = {
		args: {
		externalAuth: [
		{
Expand Down