Skip to content

Commit

Permalink
fix: icon tests
Browse files Browse the repository at this point in the history
  • Loading branch information
ashley-hunter committed Dec 21, 2024
1 parent b547f1a commit b69d4df
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 15 deletions.
1 change: 1 addition & 0 deletions libs/ui/accordion/helm/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"@ng-icons/lucide": ">=29.0.0",
"@spartan-ng/brain": "0.0.1-alpha.357",
"@spartan-ng/ui-core": "0.0.1-alpha.357",
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.357",
"clsx": "^2.1.1"
},
"publishConfig": {
Expand Down
6 changes: 1 addition & 5 deletions libs/ui/icon/helm/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@
"sideEffects": false,
"dependencies": {},
"peerDependencies": {
"@angular/common": ">=18.0.0",
"@angular/core": ">=18.0.0",
"@spartan-ng/ui-core": "0.0.1-alpha.357",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1"
"@angular/core": ">=18.0.0"
},
"publishConfig": {
"access": "public"
Expand Down
35 changes: 25 additions & 10 deletions libs/ui/icon/helm/src/lib/hlm-icon.directive.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,31 +21,46 @@ class HlmMockComponent {

describe('HlmIconDirective', () => {
let r: RenderResult<HlmMockComponent>;
let icon: HTMLElement;

beforeEach(async () => {
r = await render(HlmMockComponent);
icon = r.container.querySelector('ng-icon')!;
});

it('should create', () => {
expect(r).toBeTruthy();
it('should add the xs size', async () => {
await r.rerender({ componentInputs: { size: 'xs' } });
r.fixture.detectChanges();
expect(icon.getAttribute('style')).toContain('--ng-icon__size: 12px');
});

it('should add the sm size', async () => {
await r.rerender({ componentInputs: { size: 'sm' } });
r.fixture.detectChanges();
expect(icon.getAttribute('style')).toContain('--ng-icon__size: 16px');
});

it('should add the appropriate size variant class', () => {
expect(r.container.querySelector('ng-icon')?.classList).toContain('h-6');
expect(r.container.querySelector('ng-icon')?.classList).toContain('w-6');
it('should add the base size', () => {
expect(icon.getAttribute('style')).toContain('--ng-icon__size: 24px');
});

it('should compose the user classes', () => {
expect(r.container.querySelector('ng-icon')?.classList).toContain('inline-flex');
expect(r.container.querySelector('ng-icon')?.classList).toContain('test');
it('should add the lg size', async () => {
await r.rerender({ componentInputs: { size: 'lg' } });
r.fixture.detectChanges();
expect(icon.getAttribute('style')).toContain('--ng-icon__size: 32px');
});

it('should add the xl size', async () => {
await r.rerender({ componentInputs: { size: 'xl' } });
r.fixture.detectChanges();
expect(icon.getAttribute('style')).toContain('--ng-icon__size: 48px');
});

it('should forward the size property if the size is not a pre-defined size', async () => {
await r.rerender({ componentInputs: { size: '2rem' } });
r.fixture.detectChanges();
const debugEl = r.fixture.debugElement.query(By.directive(NgIcon));
expect(debugEl.componentInstance.size()).toBe('2rem');
expect(r.container.querySelector('ng-icon')?.classList).not.toContain('h-6');
expect(r.container.querySelector('ng-icon')?.classList).not.toContain('w-6');
expect(icon.getAttribute('style')).toContain('--ng-icon__size: 2rem');
});
});

0 comments on commit b69d4df

Please sign in to comment.