Skip to content

Commit 14fe201

Browse files
lskramarovlskramarov
committed
fix: added e2e
1 parent d9f4723 commit 14fe201

5 files changed

Lines changed: 196 additions & 1 deletion

File tree

‎packages/components-dev/e2e/components/split-button.playwright-spec.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { expect, Locator, Page, test } from '@playwright/test';
2+
import { devEnableDarkTheme, devGoToRootPage } from '../utils';
3+
4+
test.describe('KbqSplitButtonModule', () => {
5+
test.describe('DevSplitButtonStateAndStyle', () => {
6+
const getComponent = (page: Page) => page.getByTestId('e2eSplitButtonStateAndStyle');
7+
const togglePrefix = (locator: Locator) => locator.getByTestId('e2eShowPrefixIcon').click();
8+
const toggleTitle = (locator: Locator) => locator.getByTestId('e2eShowTitle').click();
9+
const getScreenshotTarget = (locator: Locator) => locator.getByTestId('e2eScreenshotTarget');
10+
11+
test('split-button with title', async ({ page }) => {
12+
await devGoToRootPage(page);
13+
const locator = getComponent(page);
14+
15+
await expect(getScreenshotTarget(locator)).toHaveScreenshot();
16+
});
17+
18+
test('split-button with icon', async ({ page }) => {
19+
await devGoToRootPage(page);
20+
const locator = getComponent(page);
21+
22+
await togglePrefix(locator);
23+
await toggleTitle(locator);
24+
25+
await expect(getScreenshotTarget(locator)).toHaveScreenshot();
26+
});
27+
28+
test('split-button with title, prefix', async ({ page }) => {
29+
await devGoToRootPage(page);
30+
const locator = getComponent(page);
31+
32+
await togglePrefix(locator);
33+
34+
await expect(getScreenshotTarget(locator)).toHaveScreenshot();
35+
});
36+
37+
test('split-button with title, prefix (dark theme)', async ({ page }) => {
38+
await devGoToRootPage(page);
39+
await devEnableDarkTheme(page);
40+
41+
const locator = getComponent(page);
42+
43+
await togglePrefix(locator);
44+
45+
await expect(getScreenshotTarget(locator)).toHaveScreenshot();
46+
});
47+
});
48+
});

‎packages/components-dev/e2e/components/split-button.ts‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import { ChangeDetectionStrategy, Component, model } from '@angular/core';
2+
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
3+
import { FormsModule } from '@angular/forms';
4+
import { KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
5+
import { KbqCheckboxModule } from '@koobiq/components/checkbox';
6+
import { KbqComponentColors } from '@koobiq/components/core';
7+
import { KbqIconModule } from '@koobiq/components/icon';
8+
import { KbqSplitButton } from '@koobiq/components/split-button';
9+
import { combineLatest } from 'rxjs';
10+
11+
type DevButtonState = Partial<{
12+
title: string;
13+
disabled: boolean;
14+
disabledSecond: boolean;
15+
hover: boolean;
16+
hoverSecond: boolean;
17+
active: boolean;
18+
activeSecond: boolean;
19+
focused?: boolean;
20+
focusedSecond?: boolean;
21+
progress: boolean;
22+
progressSecond: boolean;
23+
}>;
24+
25+
type DevButtonStyle = Partial<{
26+
style: KbqButtonStyles;
27+
color: KbqComponentColors;
28+
}>;
29+
30+
type DevButton = DevButtonState & DevButtonStyle;
31+
32+
@Component({
33+
standalone: true,
34+
imports: [KbqButtonModule, KbqIconModule, FormsModule, KbqCheckboxModule, KbqSplitButton],
35+
selector: 'dev-split-button-state-and-style',
36+
host: {
37+
'data-testid': 'e2eSplitButtonStateAndStyle'
38+
},
39+
template: `
40+
<div class="dev-options">
41+
<kbq-checkbox data-testid="e2eShowPrefixIcon" [(ngModel)]="showPrefixIcon">show prefix icon</kbq-checkbox>
42+
<kbq-checkbox data-testid="e2eShowTitle" [disabled]="!showPrefixIcon()" [(ngModel)]="showTitle">
43+
show title
44+
</kbq-checkbox>
45+
</div>
46+
47+
<table data-testid="e2eScreenshotTarget">
48+
@for (buttons of rows; track buttons) {
49+
<tr>
50+
@for (button of buttons; track button.title) {
51+
<td>
52+
<kbq-split-button [color]="button.color!" [kbqStyle]="button.style!">
53+
<button
54+
kbq-button
55+
[class.cdk-keyboard-focused]="button.focused"
56+
[class.kbq-active]="button.active"
57+
[class.kbq-hover]="button.hover"
58+
[class.kbq-progress]="button.progress"
59+
[disabled]="button.disabled"
60+
>
61+
@if (showPrefixIcon()) {
62+
<i kbq-icon="kbq-play_16"></i>
63+
}
64+
@if (showTitle()) {
65+
{{ button.title }}
66+
}
67+
</button>
68+
<button
69+
kbq-button
70+
[class.cdk-keyboard-focused]="button.focusedSecond"
71+
[class.kbq-active]="button.activeSecond"
72+
[class.kbq-hover]="button.hoverSecond"
73+
[class.kbq-progress]="button.progressSecond"
74+
[disabled]="button.disabledSecond"
75+
>
76+
<i kbq-icon="kbq-chevron-down-s_16"></i>
77+
</button>
78+
</kbq-split-button>
79+
</td>
80+
}
81+
</tr>
82+
}
83+
</table>
84+
`,
85+
styles: `
86+
.dev-options {
87+
display: flex;
88+
gap: var(--kbq-size-m);
89+
margin-bottom: var(--kbq-size-l);
90+
padding: var(--kbq-size-xxs);
91+
}
92+
93+
table {
94+
border-spacing: 0;
95+
}
96+
97+
td {
98+
padding: var(--kbq-size-xxs);
99+
}
100+
`,
101+
changeDetection: ChangeDetectionStrategy.OnPush
102+
})
103+
export class DevSplitButtonStateAndStyle {
104+
readonly showPrefixIcon = model(false);
105+
readonly showTitle = model(true);
106+
107+
private readonly states: DevButtonState[] = [
108+
{ title: 'disabled', disabled: true },
109+
{ title: 'disabledSecond', disabledSecond: true },
110+
{ title: 'normal' },
111+
{ title: 'hover', hover: true },
112+
{ title: 'hoverSecond', hoverSecond: true },
113+
{ title: 'active', active: true },
114+
{ title: 'activeSecond', activeSecond: true },
115+
{ title: 'focus', focused: true },
116+
{ title: 'focusSecond', focusedSecond: true },
117+
{ title: 'progress', progress: true },
118+
{ title: 'progressSecond', progressSecond: true },
119+
{ title: 'progressAll', progress: true, progressSecond: true }];
120+
121+
private readonly styles: DevButtonStyle[] = [
122+
{},
123+
{ color: KbqComponentColors.Contrast },
124+
{ color: KbqComponentColors.ThemeFade, style: KbqButtonStyles.Outline },
125+
{ color: KbqComponentColors.ContrastFade, style: KbqButtonStyles.Outline },
126+
{ color: KbqComponentColors.Theme, style: KbqButtonStyles.Transparent },
127+
{ color: KbqComponentColors.Contrast, style: KbqButtonStyles.Transparent }];
128+
129+
readonly rows: DevButton[][] = this.styles.map((style) => this.states.map((state) => ({ ...state, ...style })));
130+
131+
constructor() {
132+
combineLatest([toObservable(this.showPrefixIcon)])
133+
.pipe(takeUntilDestroyed())
134+
.subscribe((args) => {
135+
if (args.every((a) => a === false)) this.showTitle.set(true);
136+
});
137+
}
138+
}

‎packages/components-dev/e2e/module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { DevThemeToggle } from '../theme-toggle';
33
import { DevActionsPanelWithOverlayContainer } from './components/actions-panel';
44
import { DevButtonStateAndStyle } from './components/button';
55
import { DevFileUploadStateAndStyle } from './components/file-upload';
6+
import { DevSplitButtonStateAndStyle } from './components/split-button';
67
import { DevTagEditable, DevTagStateAndStyle } from './components/tag';
78
import { DevToggleStateAndStyle, DevToggleWithTextAndCaption } from './components/toggle';
89

@@ -11,6 +12,7 @@ import { DevToggleStateAndStyle, DevToggleWithTextAndCaption } from './component
1112
imports: [
1213
DevThemeToggle,
1314
DevButtonStateAndStyle,
15+
DevSplitButtonStateAndStyle,
1416
DevFileUploadStateAndStyle,
1517
DevActionsPanelWithOverlayContainer,
1618
DevTagStateAndStyle,

‎packages/components-dev/split-button/module.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@ import { KbqLocaleServiceModule } from '@koobiq/components/core';
44
import { KbqIconModule } from '@koobiq/components/icon';
55
import { KbqSplitButtonModule } from '@koobiq/components/split-button';
66
import { SplitButtonExamplesModule } from '../../docs-examples/components/split-button';
7+
import { DevSplitButtonStateAndStyle } from '../e2e/components/split-button';
78

89
@Component({
910
standalone: true,
10-
imports: [SplitButtonExamplesModule],
11+
imports: [SplitButtonExamplesModule, DevSplitButtonStateAndStyle],
1112
selector: 'dev-examples',
1213
template: `
14+
<dev-split-button-state-and-style />
15+
<br />
1316
<split-button-overview-example />
1417
<br />
1518
<split-button-styles-example />

‎packages/components/split-button/_split-button-theme.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@
3333
& + .kbq-button,
3434
& + .kbq-button-icon {
3535
background: var(--kbq-button-filled-contrast-fade-on-states-disabled-background);
36+
37+
&.kbq-contrast.kbq-button_filled .kbq-icon.kbq-empty {
38+
color: var(--kbq-button-filled-contrast-fade-off-states-disabled-left-icon);
39+
}
3640
}
3741
}
3842

0 commit comments

Comments
 (0)