feat: add stories for IdpOrgSyncPageview

jaaydenh · jaaydenh · commit ba0ad6f77eb5 · 2024-12-02T20:20:49.000Z
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx
@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
+import {
+	MockOrganization,
+	MockOrganization2,
+	MockOrganizationSyncSettings,
+	MockOrganizationSyncSettings2,
+} from "testHelpers/entities";
+import { IdpOrgSyncPageView } from "./IdpOrgSyncPageView";
+
+const meta: Meta<typeof IdpOrgSyncPageView> = {
+	title: "pages/IdpOrgSyncPageView",
+	component: IdpOrgSyncPageView,
+};
+
+export default meta;
+type Story = StoryObj<typeof IdpOrgSyncPageView>;
+
+export const Empty: Story = {
+	args: {
+		organizationSyncSettings: {
+			field: "",
+			mapping: {},
+			organization_assign_default: true,
+		},
+		organizations: [MockOrganization, MockOrganization2],
+		error: undefined,
+	},
+};
+
+export const Default: Story = {
+	args: {
+		organizationSyncSettings: MockOrganizationSyncSettings2,
+		organizations: [MockOrganization, MockOrganization2],
+		error: undefined,
+	},
+};
+
+export const HasError: Story = {
+	args: {
+		...Default.args,
+		error: "This is a test error",
+	},
+};
+
+export const MissingGroups: Story = {
+	args: {
+		...Default.args,
+		organizationSyncSettings: MockOrganizationSyncSettings,
+	},
+};
+
+// export const RolesTab: Story = {
+// 	args: {
+// 		...Default.args,
+// 	},
+// 	play: async ({ canvasElement }) => {
+// 		const user = userEvent.setup();
+// 		const canvas = within(canvasElement);
+// 		const rolesTab = await canvas.findByText("Role Sync Settings");
+// 		await user.click(rolesTab);
+// 		await expect(canvas.findByText("IdP Role")).resolves.toBeVisible();
+// 	},
+// };
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -2686,6 +2686,16 @@ export const MockOrganizationSyncSettings: TypesGen.OrganizationSyncSettings = {
 	organization_assign_default: true,
 };
 
+export const MockOrganizationSyncSettings2: TypesGen.OrganizationSyncSettings =
+	{
+		field: "organization-test",
+		mapping: {
+			"idp-org-1": ["my-organization-id", "my-organization-2-id"],
+			"idp-org-2": ["my-organization-id"],
+		},
+		organization_assign_default: true,
+	};
+
 export const MockGroup: TypesGen.Group = {
 	id: "fbd2116a-8961-4954-87ae-e4575bd29ce0",
 	name: "Front-End",
