Adding Organiztion, environment and project. Segment fix, tag fix

2026-04-14 14:10:37 -07:00
parent 4195d384d0
commit b75f5f602e
20 changed files with 3370 additions and 61 deletions
--- a/src/admin/tests/unit/components/EnvironmentTabBar.spec.ts
+++ b/src/admin/tests/unit/components/EnvironmentTabBar.spec.ts
@@ -15,6 +15,8 @@ jest.mock('@/api/client', () => ({

 import * as envApi from '@/api/environments';

+const dialogStub = { template: '<div><slot /></div>' };
+
 const mockProject: ProjectResponse = {
  id: 10,
  name: 'Website',
@@ -33,7 +35,10 @@ function mountComponent() {
    routes: [{ path: '/', component: { template: '<div />' } }],
  });
  return mount(EnvironmentTabBar, {
-    global: { plugins: [router] },
+    global: {
+      plugins: [router],
+      stubs: { 'v-dialog': dialogStub },
+    },
  });
 }

@@ -57,6 +62,13 @@ describe('EnvironmentTabBar', () => {

      expect(wrapper.find('[data-testid="env-no-project-message"]').exists()).toBe(true);
    });
+
+    it('ThenCreateEnvironmentButtonIsDisabled', async () => {
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      expect(wrapper.find('[data-testid="create-env-btn"]').attributes('disabled')).toBeDefined();
+    });
  });

  describe('WhenProjectIsSetInContextStore', () => {
@@ -96,6 +108,18 @@ describe('EnvironmentTabBar', () => {

      expect(contextStore.currentEnvironment).toEqual(mockEnvironments[0]);
    });
+
+    it('ThenCreateEnvironmentButtonIsEnabled', async () => {
+      jest.mocked(envApi.listEnvironments).mockResolvedValue(mockEnvironments);
+
+      const contextStore = useContextStore();
+      contextStore.setProject(mockProject);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      expect(wrapper.find('[data-testid="create-env-btn"]').attributes('disabled')).toBeUndefined();
+    });
  });

  describe('WhenEnvironmentChipIsClicked', () => {
@@ -108,7 +132,6 @@ describe('EnvironmentTabBar', () => {
      contextStore.setProject(mockProject);
      await flushPromises();

-      // Simulate chip-group selecting index 1 (Production)
      await wrapper.findComponent({ name: 'VChipGroup' }).vm.$emit('update:modelValue', 1);

      expect(contextStore.currentEnvironment).toEqual(mockEnvironments[1]);
@@ -147,4 +170,149 @@ describe('EnvironmentTabBar', () => {
      expect(wrapper.find('[data-testid="env-empty-message"]').exists()).toBe(true);
    });
  });
+
+  describe('WhenCreateEnvironmentButtonIsClicked', () => {
+    it('ThenCreateDialogIsShown', async () => {
+      jest.mocked(envApi.listEnvironments).mockResolvedValue([]);
+
+      const contextStore = useContextStore();
+      contextStore.setProject(mockProject);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-env-btn"]').trigger('click');
+
+      expect(wrapper.find('[data-testid="create-env-dialog"]').exists()).toBe(true);
+    });
+
+    it('ThenNameInputIsPresentInDialog', async () => {
+      jest.mocked(envApi.listEnvironments).mockResolvedValue([]);
+
+      const contextStore = useContextStore();
+      contextStore.setProject(mockProject);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-env-btn"]').trigger('click');
+
+      expect(wrapper.find('[data-testid="env-name-input"]').exists()).toBe(true);
+    });
+  });
+
+  describe('WhenCreateEnvironmentIsConfirmed', () => {
+    const newEnv: EnvironmentResponse = {
+      id: 200, name: 'Staging', apiKey: 'env-key-staging', projectId: 10, createdAt: '2026-04-14T00:00:00Z',
+    };
+
+    it('ThenCreateEnvironmentApiIsCalled', async () => {
+      jest.mocked(envApi.listEnvironments).mockResolvedValue([]);
+      jest.mocked(envApi.createEnvironment).mockResolvedValue(newEnv);
+
+      const contextStore = useContextStore();
+      contextStore.setProject(mockProject);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-env-btn"]').trigger('click');
+      (wrapper.vm as any).newEnvName = 'Staging';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect(envApi.createEnvironment).toHaveBeenCalledWith({ name: 'Staging', projectId: mockProject.id });
+    });
+
+    it('ThenNewEnvironmentIsAutoSelectedInContextStore', async () => {
+      jest.mocked(envApi.listEnvironments).mockResolvedValue([]);
+      jest.mocked(envApi.createEnvironment).mockResolvedValue(newEnv);
+
+      const contextStore = useContextStore();
+      contextStore.setProject(mockProject);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-env-btn"]').trigger('click');
+      (wrapper.vm as any).newEnvName = 'Staging';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect(contextStore.currentEnvironment).toEqual(newEnv);
+    });
+
+    it('ThenDialogIsClosedAfterSuccessfulCreate', async () => {
+      jest.mocked(envApi.listEnvironments).mockResolvedValue([]);
+      jest.mocked(envApi.createEnvironment).mockResolvedValue(newEnv);
+
+      const contextStore = useContextStore();
+      contextStore.setProject(mockProject);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-env-btn"]').trigger('click');
+      (wrapper.vm as any).newEnvName = 'Staging';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect((wrapper.vm as any).showDialog).toBe(false);
+    });
+  });
+
+  describe('WhenCreateEnvironmentFails', () => {
+    it('ThenErrorMessageIsDisplayed', async () => {
+      jest.mocked(envApi.listEnvironments).mockResolvedValue([]);
+      jest.mocked(envApi.createEnvironment).mockRejectedValue(new Error('Server error'));
+
+      const contextStore = useContextStore();
+      contextStore.setProject(mockProject);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-env-btn"]').trigger('click');
+      (wrapper.vm as any).newEnvName = 'Bad Env';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect((wrapper.vm as any).createError).toBeTruthy();
+    });
+
+    it('ThenDialogRemainsOpen', async () => {
+      jest.mocked(envApi.listEnvironments).mockResolvedValue([]);
+      jest.mocked(envApi.createEnvironment).mockRejectedValue(new Error('Server error'));
+
+      const contextStore = useContextStore();
+      contextStore.setProject(mockProject);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-env-btn"]').trigger('click');
+      (wrapper.vm as any).newEnvName = 'Bad Env';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect((wrapper.vm as any).showDialog).toBe(true);
+    });
+  });
+
+  describe('WhenCancelIsClicked', () => {
+    it('ThenDialogIsClosed', async () => {
+      jest.mocked(envApi.listEnvironments).mockResolvedValue([]);
+
+      const contextStore = useContextStore();
+      contextStore.setProject(mockProject);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-env-btn"]').trigger('click');
+      await wrapper.find('[data-testid="create-env-cancel-btn"]').trigger('click');
+
+      expect((wrapper.vm as any).showDialog).toBe(false);
+    });
+  });
 });
--- a/src/admin/tests/unit/components/OrgSelector.spec.ts
+++ b/src/admin/tests/unit/components/OrgSelector.spec.ts
@@ -15,6 +15,8 @@ jest.mock('@/api/client', () => ({

 import * as orgsApi from '@/api/organizations';

+const dialogStub = { template: '<div><slot /></div>' };
+
 const mockOrgs: OrganizationResponse[] = [
  { id: 1, name: 'Acme Corp', createdAt: '2026-01-01T00:00:00Z' },
  { id: 2, name: 'Globex', createdAt: '2026-01-01T00:00:00Z' },
@@ -26,7 +28,10 @@ function mountComponent() {
    routes: [{ path: '/', component: { template: '<div />' } }],
  });
  return mount(OrgSelector, {
-    global: { plugins: [router] },
+    global: {
+      plugins: [router],
+      stubs: { 'v-dialog': dialogStub },
+    },
  });
 }

@@ -55,6 +60,15 @@ describe('OrgSelector', () => {
      const select = wrapper.find('[data-testid="org-select"]');
      expect(select.exists()).toBe(true);
    });
+
+    it('ThenCreateOrganizationButtonIsAlwaysVisible', async () => {
+      jest.mocked(orgsApi.listOrganizations).mockResolvedValue(mockOrgs);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      expect(wrapper.find('[data-testid="create-org-btn"]').exists()).toBe(true);
+    });
  });

  describe('WhenOrganizationIsSelected', () => {
@@ -65,7 +79,6 @@ describe('OrgSelector', () => {
      await flushPromises();

      const contextStore = useContextStore();
-      // Simulate the v-select emitting an update
      await wrapper.findComponent({ name: 'VSelect' }).vm.$emit('update:modelValue', mockOrgs[0]);

      expect(contextStore.currentOrganization).toEqual(mockOrgs[0]);
@@ -73,14 +86,13 @@ describe('OrgSelector', () => {
  });

  describe('WhenApiReturnsNoOrganizations', () => {
-    it('ThenEmptyMessageIsDisplayed', async () => {
+    it('ThenCreateButtonIsStillVisible', async () => {
      jest.mocked(orgsApi.listOrganizations).mockResolvedValue([]);

      const wrapper = mountComponent();
      await flushPromises();

-      const emptyMsg = wrapper.find('[data-testid="org-empty-message"]');
-      expect(emptyMsg.exists()).toBe(true);
+      expect(wrapper.find('[data-testid="create-org-btn"]').exists()).toBe(true);
    });
  });

@@ -91,8 +103,129 @@ describe('OrgSelector', () => {
      const wrapper = mountComponent();
      await flushPromises();

-      // No crash — component stays rendered
      expect(wrapper.find('[data-testid="org-selector"]').exists()).toBe(true);
    });
  });
+
+  describe('WhenCreateOrganizationButtonIsClicked', () => {
+    it('ThenCreateDialogIsShown', async () => {
+      jest.mocked(orgsApi.listOrganizations).mockResolvedValue([]);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-org-btn"]').trigger('click');
+
+      expect(wrapper.find('[data-testid="create-org-dialog"]').exists()).toBe(true);
+    });
+
+    it('ThenNameInputIsPresentInDialog', async () => {
+      jest.mocked(orgsApi.listOrganizations).mockResolvedValue([]);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-org-btn"]').trigger('click');
+
+      expect(wrapper.find('[data-testid="org-name-input"]').exists()).toBe(true);
+    });
+  });
+
+  describe('WhenCreateOrganizationIsConfirmed', () => {
+    const newOrg: OrganizationResponse = { id: 3, name: 'New Org', createdAt: '2026-04-13T00:00:00Z' };
+
+    it('ThenCreateOrganizationApiIsCalled', async () => {
+      jest.mocked(orgsApi.listOrganizations).mockResolvedValue([]);
+      jest.mocked(orgsApi.createOrganization).mockResolvedValue(newOrg);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-org-btn"]').trigger('click');
+      (wrapper.vm as any).newOrgName = 'New Org';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect(orgsApi.createOrganization).toHaveBeenCalledWith({ name: 'New Org' });
+    });
+
+    it('ThenNewOrgIsAutoSelectedInContextStore', async () => {
+      jest.mocked(orgsApi.listOrganizations).mockResolvedValue([]);
+      jest.mocked(orgsApi.createOrganization).mockResolvedValue(newOrg);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      const contextStore = useContextStore();
+
+      await wrapper.find('[data-testid="create-org-btn"]').trigger('click');
+      (wrapper.vm as any).newOrgName = 'New Org';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect(contextStore.currentOrganization).toEqual(newOrg);
+    });
+
+    it('ThenDialogIsClosedAfterSuccessfulCreate', async () => {
+      jest.mocked(orgsApi.listOrganizations).mockResolvedValue([]);
+      jest.mocked(orgsApi.createOrganization).mockResolvedValue(newOrg);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-org-btn"]').trigger('click');
+      (wrapper.vm as any).newOrgName = 'New Org';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect((wrapper.vm as any).showDialog).toBe(false);
+    });
+  });
+
+  describe('WhenCreateOrganizationFails', () => {
+    it('ThenErrorMessageIsDisplayed', async () => {
+      jest.mocked(orgsApi.listOrganizations).mockResolvedValue([]);
+      jest.mocked(orgsApi.createOrganization).mockRejectedValue(new Error('Server error'));
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-org-btn"]').trigger('click');
+      (wrapper.vm as any).newOrgName = 'Bad Org';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect((wrapper.vm as any).createError).toBeTruthy();
+    });
+
+    it('ThenDialogRemainsOpen', async () => {
+      jest.mocked(orgsApi.listOrganizations).mockResolvedValue([]);
+      jest.mocked(orgsApi.createOrganization).mockRejectedValue(new Error('Server error'));
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-org-btn"]').trigger('click');
+      (wrapper.vm as any).newOrgName = 'Bad Org';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect((wrapper.vm as any).showDialog).toBe(true);
+    });
+  });
+
+  describe('WhenCancelIsClicked', () => {
+    it('ThenDialogIsClosed', async () => {
+      jest.mocked(orgsApi.listOrganizations).mockResolvedValue([]);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-org-btn"]').trigger('click');
+      await wrapper.find('[data-testid="create-org-cancel-btn"]').trigger('click');
+
+      const vm = wrapper.vm as any;
+      expect(vm.showDialog).toBe(false);
+    });
+  });
 });
--- a/src/admin/tests/unit/components/ProjectSelector.spec.ts
+++ b/src/admin/tests/unit/components/ProjectSelector.spec.ts
@@ -15,6 +15,8 @@ jest.mock('@/api/client', () => ({

 import * as projectsApi from '@/api/projects';

+const dialogStub = { template: '<div><slot /></div>' };
+
 const mockOrg: OrganizationResponse = { id: 1, name: 'Acme', createdAt: '2026-01-01T00:00:00Z' };
 const mockProjects: ProjectResponse[] = [
  { id: 10, name: 'Website', organizationId: 1, hideDisabledFlags: false, createdAt: '2026-01-01T00:00:00Z' },
@@ -27,7 +29,10 @@ function mountComponent() {
    routes: [{ path: '/', component: { template: '<div />' } }],
  });
  return mount(ProjectSelector, {
-    global: { plugins: [router] },
+    global: {
+      plugins: [router],
+      stubs: { 'v-dialog': dialogStub },
+    },
  });
 }

@@ -45,6 +50,15 @@ describe('ProjectSelector', () => {
      expect(projectsApi.listProjects).not.toHaveBeenCalled();
      expect(wrapper.find('[data-testid="project-selector"]').exists()).toBe(true);
    });
+
+    it('ThenCreateProjectButtonIsDisabled', async () => {
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      const btn = wrapper.find('[data-testid="create-project-btn"]');
+      expect(btn.exists()).toBe(true);
+      expect(btn.attributes('disabled')).toBeDefined();
+    });
  });

  describe('WhenOrganizationIsSetInContextStore', () => {
@@ -59,6 +73,19 @@ describe('ProjectSelector', () => {

      expect(projectsApi.listProjects).toHaveBeenCalledWith(mockOrg.id);
    });
+
+    it('ThenCreateProjectButtonIsEnabled', async () => {
+      jest.mocked(projectsApi.listProjects).mockResolvedValue(mockProjects);
+
+      const contextStore = useContextStore();
+      contextStore.setOrganization(mockOrg);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      const btn = wrapper.find('[data-testid="create-project-btn"]');
+      expect(btn.attributes('disabled')).toBeUndefined();
+    });
  });

  describe('WhenProjectIsSelected', () => {
@@ -95,4 +122,149 @@ describe('ProjectSelector', () => {
      expect(projectsApi.listProjects).toHaveBeenLastCalledWith(newOrg.id);
    });
  });
+
+  describe('WhenCreateProjectButtonIsClicked', () => {
+    it('ThenCreateDialogIsShown', async () => {
+      jest.mocked(projectsApi.listProjects).mockResolvedValue([]);
+
+      const contextStore = useContextStore();
+      contextStore.setOrganization(mockOrg);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-project-btn"]').trigger('click');
+
+      expect(wrapper.find('[data-testid="create-project-dialog"]').exists()).toBe(true);
+    });
+
+    it('ThenNameInputIsPresentInDialog', async () => {
+      jest.mocked(projectsApi.listProjects).mockResolvedValue([]);
+
+      const contextStore = useContextStore();
+      contextStore.setOrganization(mockOrg);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-project-btn"]').trigger('click');
+
+      expect(wrapper.find('[data-testid="project-name-input"]').exists()).toBe(true);
+    });
+  });
+
+  describe('WhenCreateProjectIsConfirmed', () => {
+    const newProject: ProjectResponse = {
+      id: 99, name: 'New Project', organizationId: 1, hideDisabledFlags: false, createdAt: '2026-04-13T00:00:00Z',
+    };
+
+    it('ThenCreateProjectApiIsCalled', async () => {
+      jest.mocked(projectsApi.listProjects).mockResolvedValue([]);
+      jest.mocked(projectsApi.createProject).mockResolvedValue(newProject);
+
+      const contextStore = useContextStore();
+      contextStore.setOrganization(mockOrg);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-project-btn"]').trigger('click');
+      (wrapper.vm as any).newProjectName = 'New Project';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect(projectsApi.createProject).toHaveBeenCalledWith({ name: 'New Project', organizationId: mockOrg.id });
+    });
+
+    it('ThenNewProjectIsAutoSelectedInContextStore', async () => {
+      jest.mocked(projectsApi.listProjects).mockResolvedValue([]);
+      jest.mocked(projectsApi.createProject).mockResolvedValue(newProject);
+
+      const contextStore = useContextStore();
+      contextStore.setOrganization(mockOrg);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-project-btn"]').trigger('click');
+      (wrapper.vm as any).newProjectName = 'New Project';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect(contextStore.currentProject).toEqual(newProject);
+    });
+
+    it('ThenDialogIsClosedAfterSuccessfulCreate', async () => {
+      jest.mocked(projectsApi.listProjects).mockResolvedValue([]);
+      jest.mocked(projectsApi.createProject).mockResolvedValue(newProject);
+
+      const contextStore = useContextStore();
+      contextStore.setOrganization(mockOrg);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-project-btn"]').trigger('click');
+      (wrapper.vm as any).newProjectName = 'New Project';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect((wrapper.vm as any).showDialog).toBe(false);
+    });
+  });
+
+  describe('WhenCreateProjectFails', () => {
+    it('ThenErrorMessageIsDisplayed', async () => {
+      jest.mocked(projectsApi.listProjects).mockResolvedValue([]);
+      jest.mocked(projectsApi.createProject).mockRejectedValue(new Error('Server error'));
+
+      const contextStore = useContextStore();
+      contextStore.setOrganization(mockOrg);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-project-btn"]').trigger('click');
+      (wrapper.vm as any).newProjectName = 'Bad Project';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect((wrapper.vm as any).createError).toBeTruthy();
+    });
+
+    it('ThenDialogRemainsOpen', async () => {
+      jest.mocked(projectsApi.listProjects).mockResolvedValue([]);
+      jest.mocked(projectsApi.createProject).mockRejectedValue(new Error('Server error'));
+
+      const contextStore = useContextStore();
+      contextStore.setOrganization(mockOrg);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-project-btn"]').trigger('click');
+      (wrapper.vm as any).newProjectName = 'Bad Project';
+      await (wrapper.vm as any).onCreateConfirm();
+      await flushPromises();
+
+      expect((wrapper.vm as any).showDialog).toBe(true);
+    });
+  });
+
+  describe('WhenCancelIsClicked', () => {
+    it('ThenDialogIsClosed', async () => {
+      jest.mocked(projectsApi.listProjects).mockResolvedValue([]);
+
+      const contextStore = useContextStore();
+      contextStore.setOrganization(mockOrg);
+
+      const wrapper = mountComponent();
+      await flushPromises();
+
+      await wrapper.find('[data-testid="create-project-btn"]').trigger('click');
+      await wrapper.find('[data-testid="create-project-cancel-btn"]').trigger('click');
+
+      expect((wrapper.vm as any).showDialog).toBe(false);
+    });
+  });
 });