feat(tickets-page): conditionally render header and bulk actions based on available tickets
This commit is contained in:
@@ -2,12 +2,12 @@
|
||||
<h1 class="tickets-page__title">MIS TICKETS</h1>
|
||||
|
||||
<div class="tickets-list" aria-busy="{{ isLoading() }}">
|
||||
@if (activeTickets().length) {
|
||||
<header class="tickets-list__header">
|
||||
<label class="tickets-list__select-all">
|
||||
<input
|
||||
type="checkbox"
|
||||
[checked]="allSelected()"
|
||||
[disabled]="activeTickets().length === 0"
|
||||
(change)="toggleAll($any($event.target).checked)"
|
||||
/>
|
||||
<span>TICKETS ACTIVOS</span>
|
||||
@@ -24,6 +24,7 @@
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
}
|
||||
|
||||
@if (isLoading()) {
|
||||
@for (item of [1, 2, 3, 4]; track item) {
|
||||
|
||||
@@ -26,6 +26,33 @@ const ticket = (overrides: Partial<TicketResponse>): TicketResponse => ({
|
||||
});
|
||||
|
||||
describe('TicketsPage', () => {
|
||||
it('hides the active tickets header when there are no available tickets', async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [TicketsPage],
|
||||
providers: [{ provide: ToastService, useValue: { danger: vi.fn() } }],
|
||||
})
|
||||
.overrideComponent(TicketsPage, {
|
||||
set: {
|
||||
providers: [
|
||||
{ provide: TicketService, useValue: { getTickets: () => Promise.resolve([]) } },
|
||||
],
|
||||
},
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
const fixture = TestBed.createComponent(TicketsPage);
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
|
||||
const page = fixture.nativeElement as HTMLElement;
|
||||
|
||||
expect(page.querySelector('.tickets-list__select-all')).toBeNull();
|
||||
expect(page.querySelector('.tickets-list__bulk-actions')).toBeNull();
|
||||
expect(page.textContent).not.toContain('TICKETS ACTIVOS');
|
||||
expect(page.textContent).toContain('Aún no tenés tickets disponibles.');
|
||||
});
|
||||
|
||||
it('separates expired and used tickets into the disabled inactive list', async () => {
|
||||
const tickets = [
|
||||
ticket({ id: 1 }),
|
||||
|
||||
Reference in New Issue
Block a user