frontend-toegevoegd

agiledancers-fe/src/app/shared/group-members.spec.ts

@@ -0,0 +1,76 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Subject } from 'rxjs';
+import { SchoolApi } from '../core/school-api';
+import { GroupMembers } from './group-members';
+
+describe('Group membership persistence', () => {
+  const api = { membership: vi.fn() };
+  beforeEach(() => {
+    vi.resetAllMocks();
+    TestBed.configureTestingModule({
+      imports: [GroupMembers],
+      providers: [{ provide: SchoolApi, useValue: api }],
+    });
+  });
+  function component() {
+    const fixture = TestBed.createComponent(GroupMembers);
+    fixture.componentRef.setInput('schoolId', 7);
+    fixture.componentRef.setInput('group', {
+      id: 0,
+      category: 'Teens',
+      type: 'REGULAR',
+      startAge: 12,
+      endAge: 18,
+      styles: [],
+      dancerIds: [],
+    });
+    fixture.componentRef.setInput('dancers', [{ id: 3, name: 'Sam', birthDate: '2010-01-01' }]);
+    fixture.componentInstance.ngOnInit();
+    return fixture.componentInstance;
+  }
+  function change(checked: boolean): { checkbox: HTMLInputElement; event: Event } {
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.checked = checked;
+    const event = new Event('change');
+    Object.defineProperty(event, 'target', { value: checkbox });
+    return { checkbox, event };
+  }
+
+  it('shows the pending choice but emits new membership only after the server confirms', async () => {
+    const request = new Subject<void>();
+    api.membership.mockReturnValue(request);
+    const members = component();
+    const changed = vi.fn();
+    members.changed.subscribe(changed);
+    const { checkbox, event } = change(true);
+    const pending = members.toggle(3, event);
+    expect(checkbox.checked).toBe(true);
+    expect(members.busy()).toBe(true);
+    expect(changed).not.toHaveBeenCalled();
+    request.next();
+    request.complete();
+    await pending;
+    expect(changed).toHaveBeenCalledWith([3]);
+    expect(members.memberIds()).toEqual([3]);
+    expect(members.busy()).toBe(false);
+  });
+
+  it('restores the previous checkbox state when saving fails', async () => {
+    const request = new Subject<void>();
+    api.membership.mockReturnValue(request);
+    const members = component();
+    const changed = vi.fn();
+    members.changed.subscribe(changed);
+    const { checkbox, event } = change(true);
+    const pending = members.toggle(3, event);
+    request.error(new HttpErrorResponse({ status: 0 }));
+    await pending;
+    expect(checkbox.checked).toBe(false);
+    expect(members.memberIds()).toEqual([]);
+    expect(changed).not.toHaveBeenCalled();
+    expect(members.error()).toContain('niet bereikbaar');
+    expect(members.busy()).toBe(false);
+  });
+});