fix(kit): InputMonth reopen calendar with year of the selected value

taiga-family · May 17, 2022 · 9c7b1d8 · 9c7b1d8
1 parent dbf83f7
commit 9c7b1d8
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 9 deletions.
diff --git a/projects/kit/components/calendar-month/calendar-month.component.ts b/projects/kit/components/calendar-month/calendar-month.component.ts
@@ -192,8 +192,7 @@ export class TuiCalendarMonthComponent implements TuiWithOptionalMinMax<TuiMonth
             return;
         }
 
-        this.year = year;
-        this.yearChange.emit(year);
+        this.updateActiveYear(year);
     }
 
     onItemClick(month: TuiMonth): void {
@@ -209,11 +208,11 @@ export class TuiCalendarMonthComponent implements TuiWithOptionalMinMax<TuiMonth
     }
 
     onNextYear(): void {
-        this.year = this.year.append({year: 1});
+        this.updateActiveYear(this.year.append({year: 1}));
     }
 
     onPreviousYear(): void {
-        this.year = this.year.append({year: -1});
+        this.updateActiveYear(this.year.append({year: -1}));
     }
 
     onItemHovered(hovered: boolean, item: TuiMonth): void {
@@ -258,4 +257,9 @@ export class TuiCalendarMonthComponent implements TuiWithOptionalMinMax<TuiMonth
     private updatePressedItem(item: TuiMonth | null): void {
         this.pressedItem = item;
     }
+
+    private updateActiveYear(year: TuiYear): void {
+        this.year = year;
+        this.yearChange.emit(year);
+    }
 }
diff --git a/projects/kit/components/calendar-month/calendar-month.template.html b/projects/kit/components/calendar-month/calendar-month.template.html
@@ -20,6 +20,7 @@
     >
         <button
             tuiLink
+            automation-id="tui-calendar-month__active-year"
             [tuiFocusable]="false"
             (click)="onYearClick()"
         >

diff --git a/...lendar-month/test/month.component.spec.ts → ...nth/test/calendar-month.component.spec.ts b/...lendar-month/test/month.component.spec.ts → ...nth/test/calendar-month.component.spec.ts
@@ -9,7 +9,7 @@ import {TuiCalendarMonthModule} from '../calendar-month.module';
 
 const TODAY = TuiDay.currentLocal();
 
-describe('Month', () => {
+describe('CalendarMonth', () => {
     @Component({
         template: `
             <tui-calendar-month
@@ -210,6 +210,7 @@ describe('Month', () => {
             component.onNextYear();
 
             expect(component.year.year).toBe(year.year + 1);
+            expect(testComponent.year.year).toBe(year.year + 1);
         });
 
         it('append year on next', () => {
@@ -220,6 +221,7 @@ describe('Month', () => {
             component.onPreviousYear();
 
             expect(component.year.year).toBe(year.year - 1);
+            expect(testComponent.year.year).toBe(year.year - 1);
         });
     });
 });
diff --git a/projects/kit/components/input-month/input-month.component.ts b/projects/kit/components/input-month/input-month.component.ts
@@ -15,10 +15,12 @@ import {
     TUI_FIRST_DAY,
     TUI_LAST_DAY,
     TuiBooleanHandler,
+    TuiDay,
     tuiDefaultProp,
     TuiFocusableElementAccessor,
     TuiHandler,
     TuiMonth,
+    TuiYear,
 } from '@taiga-ui/cdk';
 import {
     sizeBigger,
@@ -60,6 +62,7 @@ export class TuiInputMonthComponent
     disabledItemHandler: TuiBooleanHandler<TuiMonth> = ALWAYS_FALSE_HANDLER;
 
     open = false;
+    activeYear: TuiYear = this.value || TuiDay.currentLocal();
 
     constructor(
         @Optional()
@@ -112,6 +115,10 @@ export class TuiInputMonthComponent
     }
 
     onOpenChange(open: boolean): void {
+        if (open && this.value) {
+            this.activeYear = this.value;
+        }
+
         this.open = open;
     }
 

diff --git a/projects/kit/components/input-month/input-month.template.html b/projects/kit/components/input-month/input-month.template.html
@@ -34,6 +34,7 @@
             [min]="min"
             [max]="max"
             [value]="value"
+            [(year)]="activeYear"
             (monthClick)="onMonthClick($event)"
         ></tui-calendar-month>
     </ng-template>

diff --git a/projects/kit/components/input-month/test/input-month.component.spec.ts b/projects/kit/components/input-month/test/input-month.component.spec.ts
@@ -2,16 +2,19 @@ import {Component, ViewChild} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {TuiMonth} from '@taiga-ui/cdk';
-import {configureTestSuite} from '@taiga-ui/testing';
+import {TuiDay, TuiMonth} from '@taiga-ui/cdk';
+import {TuiRootModule} from '@taiga-ui/core';
+import {configureTestSuite, NativeInputPO, PageObject} from '@taiga-ui/testing';
 
 import {TuiInputMonthComponent} from '../input-month.component';
 import {TuiInputMonthModule} from '../input-month.module';
 
 describe('InputMonth', () => {
     @Component({
         template: `
-            <tui-input-month [formControl]="control"></tui-input-month>
+            <tui-root>
+                <tui-input-month [formControl]="control"></tui-input-month>
+            </tui-root>
         `,
     })
     class TestComponent {
@@ -22,21 +25,31 @@ describe('InputMonth', () => {
     }
 
     let fixture: ComponentFixture<TestComponent>;
+    let pageObject: PageObject<TestComponent>;
     let testComponent: TestComponent;
     let component: TuiInputMonthComponent;
+    let inputPO: NativeInputPO;
 
     configureTestSuite(() => {
         TestBed.configureTestingModule({
-            imports: [ReactiveFormsModule, NoopAnimationsModule, TuiInputMonthModule],
+            imports: [
+                TuiRootModule,
+                ReactiveFormsModule,
+                NoopAnimationsModule,
+                TuiInputMonthModule,
+            ],
             declarations: [TestComponent],
         });
     });
 
     beforeEach(() => {
         fixture = TestBed.createComponent(TestComponent);
+        pageObject = new PageObject(fixture);
         testComponent = fixture.componentInstance;
         component = testComponent.component;
         fixture.detectChanges();
+
+        inputPO = new NativeInputPO(fixture, `tui-primitive-textfield__native-input`);
     });
 
     describe('computedValue', () => {
@@ -75,4 +88,34 @@ describe('InputMonth', () => {
             expect(component.open).toBe(false);
         });
     });
+
+    describe('open calendar', () => {
+        it('shows current year (if NO value is selected)', async () => {
+            testComponent.control.setValue(null);
+            fixture.detectChanges();
+            inputPO.click();
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(getActiveYear()).toBe(`${TuiDay.currentLocal().year}`);
+        });
+
+        it('shows year of the selected value (control has selected value)', async () => {
+            testComponent.control.setValue(new TuiMonth(2020, 4));
+            fixture.detectChanges();
+            inputPO.click();
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(getActiveYear()).toBe('2020');
+        });
+    });
+
+    function getActiveYear(): string {
+        return (
+            pageObject
+                .getByAutomationId('tui-calendar-month__active-year')
+                ?.nativeElement?.textContent.trim() || ''
+        );
+    }
 });