metube/ui/src/app/components/slave-checkbox.component.spec.ts
2025-12-15 23:52:45 +01:00

80 lines
2.4 KiB
TypeScript

/* eslint-disable @angular-eslint/use-component-selector */
import { render, screen } from '@testing-library/angular';
import { SlaveCheckboxComponent } from './slave-checkbox.component';
import { MasterCheckboxComponent } from './master-checkbox.component';
describe('SlaveCheckboxComponent', () => {
async function createSlaveCheckboxComponent(
override: { template?: string; componentProperties?: Record<string, unknown> } = {},
) {
override.template ||= `
<app-slave-checkbox
[id]="'item1'"
[master]="masterCheckbox"
[checkable]="checkable"
/>
`;
const mockMasterCheckbox = {
id: () => 'master',
selectionChanged: vi.fn(),
} as unknown as MasterCheckboxComponent;
const rendered = await render(override.template, {
imports: [SlaveCheckboxComponent],
componentProperties: {
masterCheckbox: mockMasterCheckbox,
checkable: { checked: false },
...override.componentProperties,
},
});
return rendered;
}
it('should create the component', async () => {
const { fixture } = await createSlaveCheckboxComponent();
expect(fixture.componentInstance).toBeTruthy();
expect(screen.getByRole('checkbox')).toBeDefined();
});
it('should render unchecked checkbox by default', async () => {
await createSlaveCheckboxComponent();
const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
expect(checkbox.checked).toBe(false);
});
it('should render checked checkbox when checkable.checked is true', async () => {
await createSlaveCheckboxComponent({
componentProperties: {
checkable: { checked: true },
},
});
const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
expect(checkbox.checked).toBe(true);
});
it('should have correct id attribute', async () => {
const mockMasterCheckbox = {
id: () => 'queue',
selectionChanged: vi.fn(),
} as unknown as MasterCheckboxComponent;
await createSlaveCheckboxComponent({
componentProperties: {
masterCheckbox: mockMasterCheckbox,
checkable: { checked: false },
},
template: `
<app-slave-checkbox
[id]="'url123'"
[master]="masterCheckbox"
[checkable]="checkable"
/>
`,
});
const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
expect(checkbox.id).toBe('queue-url123-select');
});
});