Skip to content

Commit

Permalink
fix(core): dont allow to select disabled dates in calendar
Browse files Browse the repository at this point in the history
  • Loading branch information
splincode committed Dec 17, 2024
1 parent a16071a commit 62489d3
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 0 deletions.
24 changes: 24 additions & 0 deletions projects/core/components/calendar/calendar-sheet.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,10 @@ export class TuiCalendarSheet {
}

protected onItemClick(item: TuiDay): void {
if (this.rangeHasDisabledDay(item)) {
return;
}

this.dayClick.emit(item);
}

Expand All @@ -167,4 +171,24 @@ export class TuiCalendarSheet {
this.hoveredItem = day;
this.hoveredItemChange.emit(day);
}

private rangeHasDisabledDay(item: TuiDay): boolean {
if (this.value instanceof TuiDayRange) {
const range = this.getRange(this.value, item);

for (
const day = range.from.toUtcNativeDate();
day <= range.to.toUtcNativeDate();
day.setDate(day.getDate() + 1)
) {
const tuiDay = TuiDay.fromLocalNativeDate(day);

if (this.disabledItemHandler(tuiDay)) {
return true;
}
}
}

return false;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -92,5 +92,32 @@ test.describe('CalendarRange', () => {

await expect(example).toHaveScreenshot('06-maximum-month-with-items.png');
});

test('Dont allow to select disabled dates in calendar', async ({page}) => {
await tuiGoto(page, `${DemoRoute.CalendarRange}/API?disabledItemHandler$=1`);

await expect(example).toHaveScreenshot('08-disabled-dates-1-default.png');

const getCells = (): Locator =>
page.locator('[automation-id="tui-calendar-sheet__cell"]');

await getCells().nth(1).click();

await expect(example).toHaveScreenshot('08-disabled-dates-2-select-from.png');

await getCells().nth(9).hover();

await expect(example).toHaveScreenshot('08-disabled-dates-3-hover-to.png');

await getCells().nth(9).click();
await page.mouse.click(100, 100); // clear focus

await expect(example).toHaveScreenshot('08-disabled-dates-4-click-to.png');

Check failure on line 115 in projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright / ubuntu-latest / 6 of 9

[chromium] › tests/kit/calendar-range/calendar-range.pw.spec.ts:96:13 › CalendarRange › API › Dont allow to select disabled dates in calendar

1) [chromium] › tests/kit/calendar-range/calendar-range.pw.spec.ts:96:13 › CalendarRange › API › Dont allow to select disabled dates in calendar Error: expect(locator).toHaveScreenshot(expected) 21693 pixels (ratio 0.03 of all image pixels) are different. Expected: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/snapshots/tests/kit/calendar-range/calendar-range.pw.spec.ts-snapshots/08-disabled-dates-4-click-to-chromium-linux.png Received: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-kit-calendar-range-c-47c90--disabled-dates-in-calendar-chromium/08-disabled-dates-4-click-to-actual.png Diff: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-kit-calendar-range-c-47c90--disabled-dates-in-calendar-chromium/08-disabled-dates-4-click-to-diff.png Call log: - expect.toHaveScreenshot(08-disabled-dates-4-click-to.png) with timeout 5000ms - verifying given screenshot expectation - waiting for locator('#demo-content') - locator resolved to <div id="demo-content" _ngcontent-ng-c2476019924="">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 21693 pixels (ratio 0.03 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#demo-content') - locator resolved to <div id="demo-content" _ngcontent-ng-c2476019924="">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 21693 pixels (ratio 0.03 of all image pixels) are different. 113 | await page.mouse.click(100, 100); // clear focus 114 | > 115 | await expect(example).toHaveScreenshot('08-disabled-dates-4-click-to.png'); | ^ 116 | 117 | await getCells().nth(0).click(); 118 | await page.mouse.click(100, 100); // clear focus at /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts:115:35

Check failure on line 115 in projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright / ubuntu-latest / 6 of 9

[chromium] › tests/kit/calendar-range/calendar-range.pw.spec.ts:96:13 › CalendarRange › API › Dont allow to select disabled dates in calendar

1) [chromium] › tests/kit/calendar-range/calendar-range.pw.spec.ts:96:13 › CalendarRange › API › Dont allow to select disabled dates in calendar Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) 21693 pixels (ratio 0.03 of all image pixels) are different. Expected: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/snapshots/tests/kit/calendar-range/calendar-range.pw.spec.ts-snapshots/08-disabled-dates-4-click-to-chromium-linux.png Received: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-kit-calendar-range-c-47c90--disabled-dates-in-calendar-chromium-retry1/08-disabled-dates-4-click-to-actual.png Diff: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-kit-calendar-range-c-47c90--disabled-dates-in-calendar-chromium-retry1/08-disabled-dates-4-click-to-diff.png Call log: - expect.toHaveScreenshot(08-disabled-dates-4-click-to.png) with timeout 5000ms - verifying given screenshot expectation - waiting for locator('#demo-content') - locator resolved to <div id="demo-content" _ngcontent-ng-c2476019924="">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 21693 pixels (ratio 0.03 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#demo-content') - locator resolved to <div id="demo-content" _ngcontent-ng-c2476019924="">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 21693 pixels (ratio 0.03 of all image pixels) are different. 113 | await page.mouse.click(100, 100); // clear focus 114 | > 115 | await expect(example).toHaveScreenshot('08-disabled-dates-4-click-to.png'); | ^ 116 | 117 | await getCells().nth(0).click(); 118 | await page.mouse.click(100, 100); // clear focus at /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts:115:35

Check failure on line 115 in projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright / ubuntu-latest / 6 of 9

[chromium] › tests/kit/calendar-range/calendar-range.pw.spec.ts:96:13 › CalendarRange › API › Dont allow to select disabled dates in calendar

1) [chromium] › tests/kit/calendar-range/calendar-range.pw.spec.ts:96:13 › CalendarRange › API › Dont allow to select disabled dates in calendar Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) 21693 pixels (ratio 0.03 of all image pixels) are different. Expected: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/snapshots/tests/kit/calendar-range/calendar-range.pw.spec.ts-snapshots/08-disabled-dates-4-click-to-chromium-linux.png Received: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-kit-calendar-range-c-47c90--disabled-dates-in-calendar-chromium-retry2/08-disabled-dates-4-click-to-actual.png Diff: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-kit-calendar-range-c-47c90--disabled-dates-in-calendar-chromium-retry2/08-disabled-dates-4-click-to-diff.png Call log: - expect.toHaveScreenshot(08-disabled-dates-4-click-to.png) with timeout 5000ms - verifying given screenshot expectation - waiting for locator('#demo-content') - locator resolved to <div id="demo-content" _ngcontent-ng-c2476019924="">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 21693 pixels (ratio 0.03 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#demo-content') - locator resolved to <div id="demo-content" _ngcontent-ng-c2476019924="">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 21693 pixels (ratio 0.03 of all image pixels) are different. 113 | await page.mouse.click(100, 100); // clear focus 114 | > 115 | await expect(example).toHaveScreenshot('08-disabled-dates-4-click-to.png'); | ^ 116 | 117 | await getCells().nth(0).click(); 118 | await page.mouse.click(100, 100); // clear focus at /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts:115:35

Check failure on line 115 in projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright / macos-latest / 6 of 9

[webkit] › tests/kit/calendar-range/calendar-range.pw.spec.ts:96:13 › CalendarRange › API › Dont allow to select disabled dates in calendar

1) [webkit] › tests/kit/calendar-range/calendar-range.pw.spec.ts:96:13 › CalendarRange › API › Dont allow to select disabled dates in calendar Error: expect(locator).toHaveScreenshot(expected) 34358 pixels (ratio 0.05 of all image pixels) are different. Expected: /Users/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/snapshots/tests/kit/calendar-range/calendar-range.pw.spec.ts-snapshots/08-disabled-dates-4-click-to-webkit-darwin.png Received: /Users/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-kit-calendar-range-c-47c90--disabled-dates-in-calendar-webkit/08-disabled-dates-4-click-to-actual.png Diff: /Users/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-kit-calendar-range-c-47c90--disabled-dates-in-calendar-webkit/08-disabled-dates-4-click-to-diff.png Call log: - expect.toHaveScreenshot(08-disabled-dates-4-click-to.png) with timeout 5000ms - verifying given screenshot expectation - waiting for locator('#demo-content') - locator resolved to <div id="demo-content" _ngcontent-ng-c2476019924="">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 34358 pixels (ratio 0.05 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#demo-content') - locator resolved to <div id="demo-content" _ngcontent-ng-c2476019924="">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 34358 pixels (ratio 0.05 of all image pixels) are different. 113 | await page.mouse.click(100, 100); // clear focus 114 | > 115 | await expect(example).toHaveScreenshot('08-disabled-dates-4-click-to.png'); | ^ 116 | 117 | await getCells().nth(0).click(); 118 | await page.mouse.click(100, 100); // clear focus at /Users/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts:115:35

Check failure on line 115 in projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright / macos-latest / 6 of 9

[webkit] › tests/kit/calendar-range/calendar-range.pw.spec.ts:96:13 › CalendarRange › API › Dont allow to select disabled dates in calendar

1) [webkit] › tests/kit/calendar-range/calendar-range.pw.spec.ts:96:13 › CalendarRange › API › Dont allow to select disabled dates in calendar Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) 34358 pixels (ratio 0.05 of all image pixels) are different. Expected: /Users/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/snapshots/tests/kit/calendar-range/calendar-range.pw.spec.ts-snapshots/08-disabled-dates-4-click-to-webkit-darwin.png Received: /Users/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-kit-calendar-range-c-47c90--disabled-dates-in-calendar-webkit-retry1/08-disabled-dates-4-click-to-actual.png Diff: /Users/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-kit-calendar-range-c-47c90--disabled-dates-in-calendar-webkit-retry1/08-disabled-dates-4-click-to-diff.png Call log: - expect.toHaveScreenshot(08-disabled-dates-4-click-to.png) with timeout 5000ms - verifying given screenshot expectation - waiting for locator('#demo-content') - locator resolved to <div id="demo-content" _ngcontent-ng-c2476019924="">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 34358 pixels (ratio 0.05 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#demo-content') - locator resolved to <div id="demo-content" _ngcontent-ng-c2476019924="">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 34358 pixels (ratio 0.05 of all image pixels) are different. 113 | await page.mouse.click(100, 100); // clear focus 114 | > 115 | await expect(example).toHaveScreenshot('08-disabled-dates-4-click-to.png'); | ^ 116 | 117 | await getCells().nth(0).click(); 118 | await page.mouse.click(100, 100); // clear focus at /Users/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts:115:35

Check failure on line 115 in projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright / macos-latest / 6 of 9

[webkit] › tests/kit/calendar-range/calendar-range.pw.spec.ts:96:13 › CalendarRange › API › Dont allow to select disabled dates in calendar

1) [webkit] › tests/kit/calendar-range/calendar-range.pw.spec.ts:96:13 › CalendarRange › API › Dont allow to select disabled dates in calendar Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) 34358 pixels (ratio 0.05 of all image pixels) are different. Expected: /Users/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/snapshots/tests/kit/calendar-range/calendar-range.pw.spec.ts-snapshots/08-disabled-dates-4-click-to-webkit-darwin.png Received: /Users/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-kit-calendar-range-c-47c90--disabled-dates-in-calendar-webkit-retry2/08-disabled-dates-4-click-to-actual.png Diff: /Users/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-kit-calendar-range-c-47c90--disabled-dates-in-calendar-webkit-retry2/08-disabled-dates-4-click-to-diff.png Call log: - expect.toHaveScreenshot(08-disabled-dates-4-click-to.png) with timeout 5000ms - verifying given screenshot expectation - waiting for locator('#demo-content') - locator resolved to <div id="demo-content" _ngcontent-ng-c2476019924="">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 34358 pixels (ratio 0.05 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#demo-content') - locator resolved to <div id="demo-content" _ngcontent-ng-c2476019924="">…</div> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 34358 pixels (ratio 0.05 of all image pixels) are different. 113 | await page.mouse.click(100, 100); // clear focus 114 | > 115 | await expect(example).toHaveScreenshot('08-disabled-dates-4-click-to.png'); | ^ 116 | 117 | await getCells().nth(0).click(); 118 | await page.mouse.click(100, 100); // clear focus at /Users/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests/kit/calendar-range/calendar-range.pw.spec.ts:115:35

await getCells().nth(0).click();
await page.mouse.click(100, 100); // clear focus

await expect(example).toHaveScreenshot('08-disabled-dates-5-click-to.png');
});
});
});

0 comments on commit 62489d3

Please sign in to comment.