Skip to content
Snippets Groups Projects
Commit 37d30ab7 authored by Jan Zickermann's avatar Jan Zickermann
Browse files

OZG-4993 OZG-5147 Add OeidListComponent

parent 564a58fc
No related branches found
No related tags found
No related merge requests found
......@@ -11,6 +11,7 @@ import { OeidContainerComponent } from './oeid/oeid-container/oeid-container.com
import { OeidFormComponent } from './oeid/oeid-container/oeid-form/oeid-form.component';
import { PrimaryButtonComponent } from './shared/primary-button/primary-button.component';
import { SecondaryButtonComponent } from './shared/secondary-button/secondary-button.component';
import { OeidListComponent } from './oeid/oeid-container/oeid-list/oeid-list.component';
@NgModule({
declarations: [
......@@ -22,6 +23,7 @@ import { SecondaryButtonComponent } from './shared/secondary-button/secondary-bu
OeidFormComponent,
PrimaryButtonComponent,
SecondaryButtonComponent,
OeidListComponent,
],
imports: [CommonModule, TechSharedModule, RouterModule, ReactiveFormsModule],
exports: [PostfachContainerComponent, OeidContainerComponent, NavigationItemComponent],
......
export type KeycloakGroup = {
id: string;
name: string;
oeid: string;
};
<table
*ngIf="groups.length; else emptyMessage"
aria-label="Keycloak-Gruppen mit OrganisationseinheitIDs"
class="mb-2 mt-2 table-fixed"
data-test-id="oeid-table"
>
<tr class="invisible">
<th scope="col">Name</th>
<th scope="col">Attribute</th>
</tr>
<tr *ngFor="let group of groups" [id]="group.id">
<td
[attr.data-test-id]="'oeid-name-' + group.id | convertForDataTest"
class="w-96 border border-slate-500"
>
{{ group.name }}
</td>
<td
[attr.data-test-id]="'oeid-attr-' + group.id | convertForDataTest"
class="w-96 border border-slate-500"
>
OrganisationseinheitID: {{ group.oeid }}
</td>
</tr>
</table>
<ng-template #emptyMessage
><span data-test-id="oeid-empty-message">Keine OrganisationseinheitIDs konfiguriert.</span>
</ng-template>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { OeidListComponent } from './oeid-list.component';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import {
existsAsHtmlElement,
getElementFromFixture,
notExistsAsHtmlElement,
} from '@alfa-client/test-utils';
import { createKeycloakGroup } from '../../../../../test/keycloak/keycloak';
import { KeycloakGroup } from '../../../keycloak/keycloak.model';
import { convertForDataTest, ConvertForDataTestPipe } from '@alfa-client/tech-shared';
describe('OeidListComponent', () => {
let component: OeidListComponent;
let fixture: ComponentFixture<OeidListComponent>;
const emptyMessage = getDataTestIdOf('oeid-empty-message');
const tableSelector = getDataTestIdOf('oeid-table');
const groupCellSelector = (group: KeycloakGroup, cell: string) =>
getDataTestIdOf(convertForDataTest(`oeid-${cell}-${group.id}`));
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [OeidListComponent, ConvertForDataTestPipe],
}).compileComponents();
fixture = TestBed.createComponent(OeidListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('table rows', () => {
describe('without groups', () => {
it('should show empty message', () => {
existsAsHtmlElement(fixture, emptyMessage);
});
it('should not show table', () => {
notExistsAsHtmlElement(fixture, tableSelector);
});
});
describe('with groups', () => {
const groups: KeycloakGroup[] = [createKeycloakGroup(), createKeycloakGroup()];
beforeEach(() => {
component.groups = groups;
fixture.detectChanges();
});
it('should show table', () => {
existsAsHtmlElement(fixture, tableSelector);
});
it('should not show empty message', () => {
notExistsAsHtmlElement(fixture, emptyMessage);
});
it('should show rows in order', () => {
const tableElement: HTMLTableElement = getElementFromFixture(fixture, tableSelector);
const rows: HTMLTableRowElement[] = Array.from(tableElement.querySelectorAll('tr[id]'));
const rowIds = rows.map((row) => row.id);
expect(rowIds).toEqual(groups.map((group) => group.id));
});
it.each(groups)('should show name of group %#', (group) => {
const nameTableCell = getElementFromFixture(fixture, groupCellSelector(group, 'name'));
expect(nameTableCell.textContent.trim()).toBe(group.name);
});
it.each(groups)('should show oeid of group %#', (group) => {
const attrTableCell = getElementFromFixture(fixture, groupCellSelector(group, 'attr'));
expect(attrTableCell.textContent.trim()).toBe(`OrganisationseinheitID: ${group.oeid}`);
});
});
});
});
import { Component, Input } from '@angular/core';
import { KeycloakGroup } from '../../../keycloak/keycloak.model';
@Component({
selector: 'admin-oeid-list',
templateUrl: './oeid-list.component.html',
})
export class OeidListComponent {
@Input()
groups: KeycloakGroup[] = [];
}
import { KeycloakGroup } from '../../src/lib/keycloak/keycloak.model';
import { faker } from '@faker-js/faker';
export function createKeycloakGroup(): KeycloakGroup {
return {
id: faker.random.alphaNumeric(16),
name: faker.name.jobTitle(),
oeid: faker.random.numeric(10),
};
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment