-
Notifications
You must be signed in to change notification settings - Fork 4
fix(progress-spinner)!: errors following a full review of the component (#DS-5482) #1979
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
3ffe091
fix(progress-spinner)!: errors following a full review of the component
artembelik 6936c42
fix(progress-spinner): address the review of the component review
artembelik 2cc0cf5
refactor: review
artembelik 075ee05
Merge branch 'main' into fix/progress-spinner-signals
artembelik 13a091f
Merge branch 'main' into fix/progress-spinner-signals
artembelik 57ae8e8
refactor: ci
artembelik aeafe75
Merge branch 'main' into fix/progress-spinner-signals
artembelik File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
199 changes: 124 additions & 75 deletions
199
packages/components/progress-spinner/progress-spinner.component.spec.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,132 +1,181 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { TestBed } from '@angular/core/testing'; | ||
| import { Component, signal } from '@angular/core'; | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { By } from '@angular/platform-browser'; | ||
| import { KbqComponentColors, ThemePalette } from '@koobiq/components/core'; | ||
| import { KbqProgressSpinnerModule } from './index'; | ||
| import { KbqProgressSpinner, KbqProgressSpinnerModule, ProgressSpinnerMode, ProgressSpinnerSize } from './index'; | ||
|
|
||
| const percentPairs = [ | ||
| [40, 0.4], | ||
| [-50, 0], | ||
| [140, 1] | ||
| /** `MAX_DASH_ARRAY - percentage * MAX_DASH_ARRAY`, with `MAX_DASH_ARRAY = 295`. */ | ||
| const dashOffsetPairs: [value: number, dashOffset: string][] = [ | ||
| [40, '177%'], | ||
| [-50, '295%'], | ||
| [140, '0%'] | ||
| ]; | ||
|
|
||
| describe('KbqProgressSpinner', () => { | ||
| let fixture: ComponentFixture<TestApp>; | ||
| let testComponent: TestApp; | ||
|
|
||
| /** The spinner driven by the test component's signals. */ | ||
| let host: HTMLElement; | ||
| let circle: SVGCircleElement; | ||
|
|
||
| /** A spinner with no bindings at all, to assert the defaults. */ | ||
| let defaultHost: HTMLElement; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [KbqProgressSpinnerModule, TestApp] | ||
| }).compileComponents(); | ||
| TestBed.configureTestingModule({ imports: [KbqProgressSpinnerModule, TestApp] }); | ||
|
|
||
| fixture = TestBed.createComponent(TestApp); | ||
| fixture.detectChanges(); | ||
|
|
||
| testComponent = fixture.componentInstance; | ||
| host = fixture.debugElement.query(By.css('.first')).nativeElement; | ||
| circle = host.querySelector('.kbq-progress-spinner__circle')!; | ||
| defaultHost = fixture.debugElement.query(By.css('.default')).nativeElement; | ||
| }); | ||
|
|
||
| it('should apply class based on color attribute', () => { | ||
| const fixture = TestBed.createComponent(TestApp); | ||
| const testComponent = fixture.debugElement.componentInstance; | ||
| const progressSpinnerDebugElement = fixture.debugElement.query(By.css('.first')); | ||
|
|
||
| Object.keys(ThemePalette).forEach((key) => { | ||
| if (ThemePalette[key]) { | ||
| testComponent.color = ThemePalette[key]; | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(progressSpinnerDebugElement.nativeElement.classList.contains(`kbq-${ThemePalette[key]}`)).toBe( | ||
| true | ||
| ); | ||
| } | ||
| }); | ||
| }); | ||
| if (!ThemePalette[key]) return; | ||
|
|
||
| it('should has default Theme color', () => { | ||
| const fixture = TestBed.createComponent(TestApp); | ||
| const progressSpinnerDebugElement = fixture.debugElement.query(By.css('.default')); | ||
| testComponent.color.set(ThemePalette[key]); | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(progressSpinnerDebugElement.nativeElement.classList.contains(`kbq-${KbqComponentColors.Theme}`)).toBe( | ||
| true | ||
| ); | ||
| expect(host.classList.contains(`kbq-${ThemePalette[key]}`)).toBe(true); | ||
| }); | ||
| }); | ||
|
|
||
| it('should return percentage', () => { | ||
| const fixture = TestBed.createComponent(TestApp); | ||
|
|
||
| const testComponent = fixture.debugElement.componentInstance; | ||
| const progressSpinnerDebugElement = fixture.debugElement.query(By.css('.first')); | ||
| it(`should have the ${KbqComponentColors.Theme} color by default`, () => { | ||
| expect(defaultHost.classList.contains(`kbq-${KbqComponentColors.Theme}`)).toBe(true); | ||
| }); | ||
|
|
||
| percentPairs.forEach(([percent, expected]) => { | ||
| testComponent.value = percent; | ||
| it('should clamp the value into a stroke offset', () => { | ||
| dashOffsetPairs.forEach(([value, dashOffset]) => { | ||
| testComponent.value.set(value); | ||
| fixture.detectChanges(); | ||
| expect(progressSpinnerDebugElement.componentInstance.percentage).toBe(expected); | ||
|
|
||
| expect(circle.style.strokeDashoffset).toBe(dashOffset); | ||
| }); | ||
| }); | ||
|
|
||
| it('should return 0 percentage by default', () => { | ||
| const fixture = TestBed.createComponent(TestApp); | ||
| const progressSpinnerDebugElement = fixture.debugElement.query(By.css('.default')); | ||
| it('should render an empty circle by default', () => { | ||
| const defaultCircle = defaultHost.querySelector<SVGCircleElement>('.kbq-progress-spinner__circle')!; | ||
|
|
||
| expect(progressSpinnerDebugElement.componentInstance.percentage).toBe(0); | ||
| expect(defaultCircle.style.strokeDashoffset).toBe('295%'); | ||
| }); | ||
|
|
||
| it('should show determinate circle', () => { | ||
| const fixture = TestBed.createComponent(TestApp); | ||
| const testComponent = fixture.debugElement.componentInstance; | ||
| const progressSpinnerDebugElement = fixture.debugElement.query(By.css('.first')); | ||
|
|
||
| testComponent.mode = 'determinate'; | ||
| it('should not offset the stroke in indeterminate mode', () => { | ||
| testComponent.value.set(40); | ||
| testComponent.mode.set('indeterminate'); | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(progressSpinnerDebugElement.query(By.css('.kbq-progress-spinner__circle_indeterminate'))).toBeNull(); | ||
| expect(progressSpinnerDebugElement.query(By.css('.kbq-progress-spinner__circle'))).not.toBeNull(); | ||
| expect(circle.style.strokeDashoffset).toBe(''); | ||
| }); | ||
|
|
||
| it('should show indeterminate circle', () => { | ||
| const fixture = TestBed.createComponent(TestApp); | ||
| const testComponent = fixture.debugElement.componentInstance; | ||
| it('should mark the host as indeterminate', () => { | ||
| expect(host.classList.contains('kbq-progress-spinner_indeterminate')).toBe(false); | ||
|
|
||
| testComponent.mode = 'indeterminate'; | ||
| testComponent.mode.set('indeterminate'); | ||
| fixture.detectChanges(); | ||
|
|
||
| const progressSpinnerDebugElement = fixture.debugElement.query(By.css('.kbq-progress-spinner_indeterminate')); | ||
| expect(host.classList.contains('kbq-progress-spinner_indeterminate')).toBe(true); | ||
| }); | ||
|
|
||
| expect(progressSpinnerDebugElement).not.toBeNull(); | ||
| it('should be determinate by default', () => { | ||
| expect(defaultHost.classList.contains('kbq-progress-spinner_indeterminate')).toBe(false); | ||
| }); | ||
|
|
||
| it('should show determinate circle by default', () => { | ||
| const fixture = TestBed.createComponent(TestApp); | ||
| const progressSpinnerDebugElement = fixture.debugElement.query(By.css('.first')); | ||
| it('should grow the circle for the big size', () => { | ||
| expect(circle.getAttribute('r')).toBe('42.5%'); | ||
| expect(host.classList.contains('kbq-progress-spinner_big')).toBe(false); | ||
|
|
||
| testComponent.size.set('big'); | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(progressSpinnerDebugElement.query(By.css('.kbq-progress-spinner_indeterminate'))).toBeNull(); | ||
| expect(progressSpinnerDebugElement.query(By.css('.kbq-progress-spinner__circle'))).not.toBeNull(); | ||
| expect(circle.getAttribute('r')).toBe('47%'); | ||
| expect(host.classList.contains('kbq-progress-spinner_big')).toBe(true); | ||
| }); | ||
|
|
||
| it('should set id attribute', () => { | ||
| const fixture = TestBed.createComponent(TestApp); | ||
| const testComponent = fixture.debugElement.componentInstance; | ||
| const progressSpinnerDebugElement = fixture.debugElement.query(By.css('.first')); | ||
| testComponent.id.set('foo'); | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(host.getAttribute('id')).toBe('foo'); | ||
| }); | ||
|
|
||
| it('should auto generate a unique id', () => { | ||
| const generated = fixture.debugElement | ||
| .queryAll(By.css('.default')) | ||
| .map(({ nativeElement }) => nativeElement.getAttribute('id')); | ||
|
|
||
| expect(generated).toHaveLength(2); | ||
| generated.forEach((id) => expect(id).toMatch(/^kbq-progress-spinner-/)); | ||
| expect(new Set(generated).size).toBe(generated.length); | ||
| }); | ||
|
|
||
| it('should coerce a non-numeric value to 0 rather than NaN', () => { | ||
| const spinner = fixture.debugElement.query(By.css('.first')).componentInstance as KbqProgressSpinner; | ||
|
|
||
| testComponent.id = 'foo'; | ||
| testComponent.value.set(40); | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(progressSpinnerDebugElement.nativeElement.getAttribute('id')).toBe('foo'); | ||
| expect(spinner.value()).toBe(40); | ||
| expect(circle.style.strokeDashoffset).toBe('177%'); | ||
|
|
||
| for (const nonNumeric of [null, undefined, '', 'abc', '40px', {}]) { | ||
| testComponent.value.set(nonNumeric as unknown as number); | ||
| fixture.detectChanges(); | ||
|
|
||
| // The input value, not the style: jsdom's cssstyle accepts `NaN%` where a real browser rejects | ||
| // the declaration and keeps the previous one, so a style assertion would encode the wrong thing. | ||
| expect(spinner.value()).toBe(0); | ||
| expect(circle.style.strokeDashoffset).toBe('295%'); | ||
| } | ||
| }); | ||
|
|
||
| it('should auto generate id', () => { | ||
| const fixture = TestBed.createComponent(TestApp); | ||
| const progressSpinnerDebugElement = fixture.debugElement.query(By.css('.default')); | ||
| it('should read a numeric value from a static attribute', () => { | ||
| TestBed.resetTestingModule(); | ||
| TestBed.configureTestingModule({ imports: [KbqProgressSpinnerModule, StaticValueTestApp] }); | ||
|
|
||
| const staticFixture = TestBed.createComponent(StaticValueTestApp); | ||
|
|
||
| expect(progressSpinnerDebugElement.nativeElement.getAttribute('id')).toBeDefined(); | ||
| staticFixture.detectChanges(); | ||
|
|
||
| const staticCircle = staticFixture.nativeElement.querySelector('.kbq-progress-spinner__circle'); | ||
|
|
||
| expect(staticCircle.style.strokeDashoffset).toBe('177%'); | ||
| }); | ||
| }); | ||
|
|
||
| @Component({ | ||
| selector: 'test-app', | ||
| imports: [KbqProgressSpinnerModule], | ||
| template: ` | ||
| <kbq-progress-spinner class="first" [id]="id" [color]="color" [value]="value" [mode]="mode" /> | ||
| <kbq-progress-spinner | ||
| class="first" | ||
| [id]="id()" | ||
| [color]="color()" | ||
| [value]="value()" | ||
| [mode]="mode()" | ||
| [size]="size()" | ||
| /> | ||
| <kbq-progress-spinner class="default" /> | ||
| <kbq-progress-spinner class="default" /> | ||
| ` | ||
| }) | ||
| class TestApp { | ||
| color: ThemePalette; | ||
| value: number = 0; | ||
| mode: string; | ||
| id: string; | ||
| readonly color = signal<ThemePalette>(ThemePalette.Primary); | ||
| readonly value = signal(0); | ||
| readonly mode = signal<ProgressSpinnerMode>('determinate'); | ||
| readonly size = signal<ProgressSpinnerSize>('compact'); | ||
| readonly id = signal('test-spinner'); | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'static-value-test-app', | ||
| imports: [KbqProgressSpinnerModule], | ||
| template: ` | ||
| <kbq-progress-spinner value="40" /> | ||
| ` | ||
| }) | ||
| class StaticValueTestApp {} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.