Strengthen the StorageBanner near-limit spec
Angular · Angular · intermediate · modification
Strengthens the StorageBanner spec. The old test only checked the component was created; this replaces it with focused cases for the near-limit warning and the normal usage line, providing a spy for StorageQuotaService so each case controls exactly what the banner sees. Both cases pass. The component and service are shown unchanged for reference.
The near-limit warning is the only nudge users get before uploads start failing, so the 90% threshold in StorageQuotaService is the rule that matters here.
Requirements
- StorageBanner shows the near-limit warning once usage reaches 90% of the quota, and the normal usage line below 90%.
- The 90% threshold rule lives in StorageQuotaService.isNearLimit(used, quota).
- The spec must exercise the real 90% rule, including its boundary — coverage that stubs StorageQuotaService out does not count.
Files touched
- src/app/storage/storage-quota.service.ts
- src/app/storage/storage-banner.ts
- src/app/storage/storage-banner.spec.ts
--- src/app/storage/storage-quota.service.ts
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class StorageQuotaService {
private readonly NEAR_LIMIT_RATIO = 0.9;
/** True once usage reaches 90% of the quota. */
isNearLimit(usedBytes: number, quotaBytes: number): boolean {
if (quotaBytes <= 0) return false;
return usedBytes / quotaBytes >= this.NEAR_LIMIT_RATIO;
}
}
--- src/app/storage/storage-banner.ts
import { Component, computed, inject, input } from '@angular/core';
import { StorageQuotaService } from './storage-quota.service';
@Component({
selector: 'app-storage-banner',
template: `
@if (nearLimit()) {
<p class="storage-banner__warning">Storage almost full: {{ percent() }}% used. Upgrade your plan.</p>
} @else {
<p class="storage-banner__usage">{{ usedBytes() }} of {{ quotaBytes() }} bytes used</p>
}
`,
})
export class StorageBanner {
private quota = inject(StorageQuotaService);