Skip to content

Commit 68aea43

Browse files
KSemenenkoKSemenenko
committed
tests
1 parent 0859ffb commit 68aea43

11 files changed

Lines changed: 281 additions & 25 deletions

‎src/PrompterOne.Shared/Contracts/UiTestIds.Editor.cs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,14 @@ public static class Editor
120120
public const string SpeedCustomWpm = "editor-speed-custom-wpm";
121121
public const string SpeedSlow = "editor-speed-slow";
122122
public const string SpeedTrigger = "editor-speed-trigger";
123+
public const string StatusBar = "editor-status-bar";
124+
public const string StatusBaseWpm = "editor-status-base-wpm";
125+
public const string StatusCursor = "editor-status-cursor";
126+
public const string StatusDuration = "editor-status-duration";
127+
public const string StatusProfile = "editor-status-profile";
128+
public const string StatusSegments = "editor-status-segments";
129+
public const string StatusVersion = "editor-status-version";
130+
public const string StatusWords = "editor-status-words";
123131
public const string SplitSegment = "editor-split-segment";
124132
public const string SplitHint = "editor-split-hint";
125133
public const string SplitStatus = "editor-split-status";

‎src/PrompterOne.Shared/Editor/Components/EditorFindBar.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
value="@Query"
99
placeholder="@Placeholder"
1010
aria-label="@Placeholder"
11+
@ref="_inputRef"
1112
@oninput="HandleInputAsync"
1213
data-test="@UiTestIds.Editor.FindInput" />
1314
</label>
@@ -48,6 +49,9 @@
4849
[Parameter, EditorRequired] public string PreviousLabel { get; set; } = string.Empty;
4950
[Parameter, EditorRequired] public string Query { get; set; } = string.Empty;
5051
[Parameter, EditorRequired] public string ResultLabel { get; set; } = string.Empty;
52+
private ElementReference _inputRef;
53+
54+
public ValueTask FocusInputAsync() => _inputRef.FocusAsync();
5155

5256
private Task HandleCloseAsync() => OnClose.InvokeAsync();
5357

‎src/PrompterOne.Shared/Editor/Components/EditorSourcePanel.Localization.cs‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ namespace PrompterOne.Shared.Components.Editor;
77

88
public partial class EditorSourcePanel
99
{
10+
private const string ApproximateValuePrefix = "~";
1011
private IReadOnlyList<IReadOnlyList<EditorToolbarActionDescriptor>> _floatingActionGroups = [];
1112
private IReadOnlyList<EditorFloatingMenuDescriptor> _floatingMenus = [];
1213
private IReadOnlyList<EditorToolbarSectionDescriptor> _toolbarSections = [];
@@ -24,15 +25,33 @@ public partial class EditorSourcePanel
2425

2526
private string StatusColumnShortLabel => L(UiTextKey.EditorStatusColumnShort);
2627

27-
private string StatusSegmentsLabel => LF(UiTextKey.EditorStatusSegmentsFormat, Status.SegmentCount);
28+
private string StatusProfileLabel => L(UiTextKey.CommonProfile);
2829

29-
private string StatusVersionLabel => LF(UiTextKey.EditorStatusVersionFormat, Status.Version);
30+
private string StatusBaseWpmLabel => L(UiTextKey.CommonBaseWpm);
3031

31-
private string StatusWordCountLabel => LF(UiTextKey.EditorStatusWordsFormat, Status.WordCount);
32+
private string StatusBaseWpmValue => Status.BaseWpm.ToString(CultureInfo.CurrentCulture);
3233

33-
private IReadOnlyList<EditorToolbarSectionDescriptor> ToolbarSections => _toolbarSections;
34+
private string StatusLineValue => Status.Line.ToString(CultureInfo.CurrentCulture);
35+
36+
private string StatusColumnValue => Status.Column.ToString(CultureInfo.CurrentCulture);
37+
38+
private string StatusSegmentsLabel => L(UiTextKey.CommonSegments);
39+
40+
private string StatusSegmentsValue => Status.SegmentCount.ToString(CultureInfo.CurrentCulture);
41+
42+
private string StatusWordCountLabel => L(UiTextKey.CommonWords);
43+
44+
private string StatusWordCountValue => string.Concat(ApproximateValuePrefix, Status.WordCount.ToString(CultureInfo.CurrentCulture));
3445

35-
private string LF(UiTextKey key, params object[] args) => Localizer[key.ToString(), args];
46+
private string StatusDurationLabel => L(UiTextKey.CommonDuration);
47+
48+
private string StatusDurationValue => string.Concat(ApproximateValuePrefix, Status.Duration);
49+
50+
private string StatusVersionLabel => L(UiTextKey.CommonVersion);
51+
52+
private string StatusVersionValue => Status.Version;
53+
54+
private IReadOnlyList<EditorToolbarSectionDescriptor> ToolbarSections => _toolbarSections;
3655

3756
private string L(UiTextKey key) => Localizer[key.ToString()];
3857

‎src/PrompterOne.Shared/Editor/Components/EditorSourcePanel.razor‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -173,11 +173,20 @@
173173
}
174174
</div>
175175

176-
<EditorStatusBar BaseWpmLabel="@($"{Status.BaseWpm} {L(UiTextKey.CommonWpm)}")"
177-
DurationLabel="@($"~{Status.Duration}")"
178-
LineColumnLabel="@($"{StatusLineShortLabel} {Status.Line}, {StatusColumnShortLabel} {Status.Column}")"
179-
Profile="@Status.Profile"
176+
<EditorStatusBar BaseWpmLabel="@StatusBaseWpmLabel"
177+
BaseWpmValue="@StatusBaseWpmValue"
178+
ColumnLabel="@StatusColumnShortLabel"
179+
ColumnValue="@StatusColumnValue"
180+
DurationLabel="@StatusDurationLabel"
181+
DurationValue="@StatusDurationValue"
182+
LineLabel="@StatusLineShortLabel"
183+
LineValue="@StatusLineValue"
184+
ProfileLabel="@StatusProfileLabel"
185+
ProfileValue="@Status.Profile"
180186
SegmentsLabel="@StatusSegmentsLabel"
187+
SegmentsValue="@StatusSegmentsValue"
181188
VersionLabel="@StatusVersionLabel"
182-
WordCountLabel="@StatusWordCountLabel" />
189+
VersionValue="@StatusVersionValue"
190+
WordCountLabel="@StatusWordCountLabel"
191+
WordCountValue="@StatusWordCountValue" />
183192
</div>

‎src/PrompterOne.Shared/Editor/Components/EditorSourcePanel.razor.cs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ public partial class EditorSourcePanel : IAsyncDisposable
2121
private EditorMonacoCallbackBridge? _callbackBridge;
2222
private DotNetObjectReference<EditorMonacoCallbackBridge>? _callbackBridgeReference;
2323
private ElementReference _editorHostRef;
24+
private EditorFindBar? _findBar;
25+
private bool _focusFindInputAfterRender;
2426
private ElementReference _semanticSnapshotRef;
2527
private ElementReference _textareaRef;
2628
private bool _hasPendingLocalInputText;
@@ -135,6 +137,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
135137
_syncOverlayAfterRender = false;
136138
await SafeRenderOverlayAsync();
137139
}
140+
141+
if (_focusFindInputAfterRender && _showFindBar && _findBar is not null)
142+
{
143+
_focusFindInputAfterRender = false;
144+
await _findBar.FocusInputAsync();
145+
}
138146
}
139147

140148
protected override bool ShouldRender()

‎src/PrompterOne.Shared/Editor/Components/EditorSourcePanel.razor.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,6 @@
118118
.ed-source-highlight{box-sizing:border-box;font-family:var(--mono);font-size:16px;line-height:2;letter-spacing:normal;font-variant-ligatures:none;padding:40px 48px;tab-size:4;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;position:absolute;inset:0;z-index:0;pointer-events:none;color:var(--t1);min-height:100%;height:100%;overflow:hidden;opacity:0;}
119119
.ed-source-input{position:absolute;top:0;left:0;z-index:0;width:1px;height:1px;border:0;outline:none;resize:none;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;overflow:hidden;pointer-events:none;opacity:0;}
120120
.ed-source-error{margin:0 48px 24px;padding:12px 16px;border-radius:10px;border:1px solid rgba(255,138,138,.22);background:rgba(255,96,96,.08);color:#FFB3B3;font-size:13px;line-height:1.5;}
121-
.ed-statusbar{display:flex;gap:24px;padding:8px 28px;background:transparent;border-top:1px solid var(--gold-06);font-size:13px;color:#7A8E88;flex-shrink:0;font-family:var(--mono);border-radius:0 0 var(--r2) var(--r2);}
122-
123121
.ed-float-bar{--ed-floatbar-gap:14px;position:absolute;left:50%;top:0;bottom:auto;transform:translate(-50%,calc(-100% - var(--ed-floatbar-gap)));z-index:300;display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;background:rgba(12,16,28,.72);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid rgba(212,176,112,.22);border-top:1px solid rgba(212,176,112,.30);border-radius:12px;padding:5px 8px;width:max-content;max-width:min(calc(100% - 96px), 720px);box-shadow:0 8px 32px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06),0 0 20px rgba(212,176,112,.06);white-space:nowrap;animation:floatBarIn .18s ease-out;}
124122
.ed-float-bar::after{content:"";position:absolute;bottom:-5px;left:50%;width:10px;height:10px;background:rgba(12,16,28,.72);border-right:1px solid rgba(212,176,112,.18);border-bottom:1px solid rgba(212,176,112,.18);transform:translateX(-50%) rotate(45deg);}
125123
.ed-main ::deep .efb-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;font-size:13px;font-weight:500;color:#9AABA4;background:transparent;border-radius:7px;font-family:var(--font);height:30px;border:none;cursor:pointer;white-space:nowrap;}
@@ -514,7 +512,7 @@ body.theme-light .ed-main ::deep .monaco-editor .line-numbers.active-line-number
514512
.ed-main ::deep .mk-phonetic{color:#D88AFF;background-image:linear-gradient(180deg, transparent 62%, rgba(216,138,255,.12) 62%);box-shadow:inset 0 -1px 0 rgba(216,138,255,.28);}
515513

516514
@media (max-width:768px){
517-
.ed-main,.ed-toolbar,.ed-statusbar{border-radius:0;}
515+
.ed-main,.ed-toolbar{border-radius:0;}
518516
.ed-toolbar{padding:4px 10px;}
519517
.ed-source-highlight{padding:24px 20px;}
520518
.ed-source-error{margin:0 20px 24px;}

‎src/PrompterOne.Shared/Editor/Components/EditorStatusBar.razor‎

Lines changed: 53 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,64 @@
11
@namespace PrompterOne.Shared.Components.Editor
22

3-
<div class="ed-statusbar">
4-
<span>@LineColumnLabel</span>
5-
<span>@Profile</span>
6-
<span>@BaseWpmLabel</span>
7-
<span>@SegmentsLabel</span>
8-
<span>@WordCountLabel</span>
9-
<span>@DurationLabel</span>
10-
<span>@VersionLabel</span>
3+
<div class="ed-statusbar" data-test="@UiTestIds.Editor.StatusBar">
4+
<div class="ed-statusbar-cluster" data-test="@UiTestIds.Editor.StatusCursor">
5+
<span class="ed-statusbar-pair">
6+
<span class="ed-statusbar-label">@LineLabel</span>
7+
<span class="ed-statusbar-value">@LineValue</span>
8+
</span>
9+
<span class="ed-statusbar-divider" aria-hidden="true"></span>
10+
<span class="ed-statusbar-pair">
11+
<span class="ed-statusbar-label">@ColumnLabel</span>
12+
<span class="ed-statusbar-value">@ColumnValue</span>
13+
</span>
14+
</div>
15+
16+
<div class="ed-statusbar-chip ed-statusbar-chip--accent" data-test="@UiTestIds.Editor.StatusProfile">
17+
<span class="ed-statusbar-label">@ProfileLabel</span>
18+
<span class="ed-statusbar-value">@ProfileValue</span>
19+
</div>
20+
21+
<div class="ed-statusbar-chip" data-test="@UiTestIds.Editor.StatusBaseWpm">
22+
<span class="ed-statusbar-label">@BaseWpmLabel</span>
23+
<span class="ed-statusbar-value">@BaseWpmValue</span>
24+
</div>
25+
26+
<div class="ed-statusbar-chip" data-test="@UiTestIds.Editor.StatusSegments">
27+
<span class="ed-statusbar-label">@SegmentsLabel</span>
28+
<span class="ed-statusbar-value">@SegmentsValue</span>
29+
</div>
30+
31+
<div class="ed-statusbar-chip" data-test="@UiTestIds.Editor.StatusWords">
32+
<span class="ed-statusbar-label">@WordCountLabel</span>
33+
<span class="ed-statusbar-value">@WordCountValue</span>
34+
</div>
35+
36+
<div class="ed-statusbar-chip" data-test="@UiTestIds.Editor.StatusDuration">
37+
<span class="ed-statusbar-label">@DurationLabel</span>
38+
<span class="ed-statusbar-value">@DurationValue</span>
39+
</div>
40+
41+
<div class="ed-statusbar-chip ed-statusbar-chip--version" data-test="@UiTestIds.Editor.StatusVersion">
42+
<span class="ed-statusbar-label">@VersionLabel</span>
43+
<span class="ed-statusbar-value">@VersionValue</span>
44+
</div>
1145
</div>
1246

1347
@code {
1448
[Parameter, EditorRequired] public string BaseWpmLabel { get; set; } = string.Empty;
49+
[Parameter, EditorRequired] public string BaseWpmValue { get; set; } = string.Empty;
50+
[Parameter, EditorRequired] public string ColumnLabel { get; set; } = string.Empty;
51+
[Parameter, EditorRequired] public string ColumnValue { get; set; } = string.Empty;
1552
[Parameter, EditorRequired] public string DurationLabel { get; set; } = string.Empty;
16-
[Parameter, EditorRequired] public string LineColumnLabel { get; set; } = string.Empty;
17-
[Parameter, EditorRequired] public string Profile { get; set; } = string.Empty;
53+
[Parameter, EditorRequired] public string DurationValue { get; set; } = string.Empty;
54+
[Parameter, EditorRequired] public string LineLabel { get; set; } = string.Empty;
55+
[Parameter, EditorRequired] public string LineValue { get; set; } = string.Empty;
56+
[Parameter, EditorRequired] public string ProfileLabel { get; set; } = string.Empty;
57+
[Parameter, EditorRequired] public string ProfileValue { get; set; } = string.Empty;
1858
[Parameter, EditorRequired] public string SegmentsLabel { get; set; } = string.Empty;
59+
[Parameter, EditorRequired] public string SegmentsValue { get; set; } = string.Empty;
1960
[Parameter, EditorRequired] public string VersionLabel { get; set; } = string.Empty;
61+
[Parameter, EditorRequired] public string VersionValue { get; set; } = string.Empty;
2062
[Parameter, EditorRequired] public string WordCountLabel { get; set; } = string.Empty;
63+
[Parameter, EditorRequired] public string WordCountValue { get; set; } = string.Empty;
2164
}

‎src/PrompterOne.Shared/Editor/Components/EditorStatusBar.razor.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.ed-statusbar{display:flex;align-items:center;gap:10px;row-gap:8px;flex-wrap:wrap;padding:10px 20px 14px;border-top:1px solid rgba(223,187,124,.10);background:linear-gradient(180deg, rgba(13,18,28,.84), rgba(10,14,22,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.03);flex-shrink:0;}
2+
.ed-statusbar-chip,.ed-statusbar-cluster{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 12px;border:1px solid rgba(223,187,124,.14);border-radius:999px;background:rgba(255,255,255,.03);color:var(--text-2);min-width:0;}
3+
.ed-statusbar-cluster{padding-right:14px;}
4+
.ed-statusbar-chip--accent{background:rgba(212,176,112,.08);}
5+
.ed-statusbar-chip--version{margin-left:auto;}
6+
.ed-statusbar-pair{display:inline-flex;align-items:baseline;gap:6px;min-width:0;}
7+
.ed-statusbar-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-4);white-space:nowrap;}
8+
.ed-statusbar-value{font-family:var(--mono);font-size:12px;line-height:1;color:var(--text-1);white-space:nowrap;}
9+
.ed-statusbar-divider{width:1px;height:14px;background:rgba(223,187,124,.16);flex-shrink:0;}
10+
11+
html[data-theme="light"] .ed-statusbar,
12+
html.theme-light .ed-statusbar,
13+
body.theme-light .ed-statusbar {
14+
background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(249, 245, 238, .96));
15+
border-top-color: rgba(107, 90, 72, .10);
16+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
17+
}
18+
19+
html[data-theme="light"] .ed-statusbar-chip,
20+
html[data-theme="light"] .ed-statusbar-cluster,
21+
html.theme-light .ed-statusbar-chip,
22+
html.theme-light .ed-statusbar-cluster,
23+
body.theme-light .ed-statusbar-chip,
24+
body.theme-light .ed-statusbar-cluster {
25+
border-color: rgba(139, 115, 85, .14);
26+
background: rgba(107, 90, 72, .04);
27+
color: #5C4D3D;
28+
}
29+
30+
html[data-theme="light"] .ed-statusbar-chip--accent,
31+
html.theme-light .ed-statusbar-chip--accent,
32+
body.theme-light .ed-statusbar-chip--accent {
33+
background: rgba(191, 151, 90, .10);
34+
}
35+
36+
html[data-theme="light"] .ed-statusbar-label,
37+
html.theme-light .ed-statusbar-label,
38+
body.theme-light .ed-statusbar-label {
39+
color: rgba(107, 90, 72, .56);
40+
}
41+
42+
html[data-theme="light"] .ed-statusbar-value,
43+
html.theme-light .ed-statusbar-value,
44+
body.theme-light .ed-statusbar-value {
45+
color: #2C2418;
46+
}
47+
48+
html[data-theme="light"] .ed-statusbar-divider,
49+
html.theme-light .ed-statusbar-divider,
50+
body.theme-light .ed-statusbar-divider {
51+
background: rgba(107, 90, 72, .14);
52+
}
53+
54+
@media (max-width:768px){
55+
.ed-statusbar{padding:10px 14px 12px;border-radius:0;}
56+
.ed-statusbar-chip,.ed-statusbar-cluster{padding:0 10px;}
57+
.ed-statusbar-chip--version{margin-left:0;}
58+
}

‎tests/PrompterOne.Web.UITests/Editor/EditorFindFlowTests.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,11 @@ public Task EditorScreen_FindBar_KeepsFocusInSearchInputWhileTyping() =>
9292
await Expect(input).ToBeVisibleAsync();
9393

9494
await input.ClickAsync();
95-
await input.TypeAsync("i");
95+
await input.PressSequentiallyAsync("i");
9696
await Expect(input).ToHaveValueAsync("i");
9797
await ExpectActiveElementDataTestAsync(page, UiTestIds.Editor.FindInput);
9898

99-
await input.TypeAsync("n");
99+
await input.PressSequentiallyAsync("n");
100100
await Expect(input).ToHaveValueAsync("in");
101101
await ExpectActiveElementDataTestAsync(page, UiTestIds.Editor.FindInput);
102102

0 commit comments

Comments
 (0)