Skip to content

Commit 8cdee0e

Browse files
fiosmaninsomnia-infra
fiosman
authored and
insomnia-infra
committed
fix(linting): fixes linting styling / UI issues for v13 (#10073)
* fix: fixes issue where custom ruleset modal would not inherit the active theme styles; collapse the lint panel toolbar by default * chore: address copilot feedback * test: update test * fix: increase minSize * test: update tests * test: attempt to fix test again * test: attempt to fix test again (cherry picked from commit 271ac44)
1 parent e6f6f9a commit 8cdee0e

3 files changed

Lines changed: 49 additions & 25 deletions

File tree

‎packages/insomnia-smoke-test/tests/smoke/custom-lint-rules.test.ts‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,13 @@ const USER_B_SESSION = {
6161
* does not include `info.x-smoke-test-marker`, so once our custom ruleset is
6262
* uploaded the rule defined in fixtures/files/custom.spectral.yaml will fire.
6363
*/
64+
async function expandLintPanel(page: Page) {
65+
const lintButton = page.getByTestId('lint-panel-toggle');
66+
await expect.soft(lintButton).toBeVisible({ timeout: 15_000 });
67+
await lintButton.click();
68+
await expect.soft(page.getByTestId('lint-panel')).toBeAttached({ timeout: 15_000 });
69+
}
70+
6471
async function openPetStoreDesignDoc(page: Page) {
6572
await page.getByRole('button', { name: 'Create document' }).click();
6673
await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
@@ -73,7 +80,9 @@ async function uploadRuleset(insomnia: InsomniaApp, page: Page) {
7380
await insomnia.queueOpenDialogResponse([RULESET_FIXTURE]);
7481
await page.getByLabel('Upload custom ruleset').click();
7582
// Soft assert per ESLint rule; a failure here will surface downstream as well.
76-
await expect.soft(page.getByRole('button', { name: 'View selected ruleset content' })).toBeVisible({ timeout: 10_000 });
83+
await expect
84+
.soft(page.getByRole('button', { name: 'View selected ruleset content' }))
85+
.toBeVisible({ timeout: 10_000 });
7786
}
7887

7988
async function removeRuleset(page: Page) {
@@ -112,7 +121,10 @@ async function createGitDesignDocument(insomnia: InsomniaApp, page: Page, projec
112121
await page.getByRole('textbox', { name: 'Name', exact: true }).fill('Lint Test Spec');
113122
await page.getByRole('textbox', { name: /File name/ }).fill('lint_test_spec');
114123
await page.getByRole('button', { name: 'Create', exact: true }).click();
115-
await page.getByRole('dialog').waitFor({ state: 'hidden', timeout: 10_000 }).catch(() => {});
124+
await page
125+
.getByRole('dialog')
126+
.waitFor({ state: 'hidden', timeout: 10_000 })
127+
.catch(() => {});
116128
// Populate with Pet Store example so the lint panel renders (requires non-empty apiSpec.contents).
117129
await page.getByText('Use example').click();
118130
await page.getByText('Pet Store').click();
@@ -159,10 +171,16 @@ test.describe('Custom Spectral Lint Rules', () => {
159171
await uploadRuleset(insomnia, insomnia.page);
160172

161173
// Our custom rule should now fire on Pet Store.
174+
await expandLintPanel(insomnia.page);
162175
await expect.soft(insomnia.page.getByText(new RegExp(RULESET_RULE_NAME))).toBeVisible({
163176
timeout: 15_000,
164177
});
165178

179+
// Capture error/warning counts before relaunch so we can assert persistence.
180+
const lintToggle = insomnia.page.getByTestId('lint-panel-toggle');
181+
await expect.soft(lintToggle).toBeVisible({ timeout: 15_000 });
182+
const lintSummaryBefore = await lintToggle.textContent();
183+
166184
// Close the Electron process and relaunch it against the same data path.
167185
// This exercises the full persistence boundary: NeDB on disk, main-process
168186
// startup, renderer init, clientLoader.
@@ -175,9 +193,10 @@ test.describe('Custom Spectral Lint Rules', () => {
175193
await expect
176194
.soft(insomnia.page.getByRole('button', { name: 'View selected ruleset content' }))
177195
.toBeVisible({ timeout: 15_000 });
178-
await expect.soft(insomnia.page.getByText(new RegExp(RULESET_RULE_NAME))).toBeVisible({
179-
timeout: 15_000,
180-
});
196+
197+
// Assert same error/warning counts as before relaunch (ruleset persisted).
198+
const lintToggleAfter = insomnia.page.getByTestId('lint-panel-toggle');
199+
await expect.soft(lintToggleAfter).toHaveText(lintSummaryBefore ?? '', { timeout: 15_000 });
181200
});
182201

183202
// ---------------------------------------------------------------------------
@@ -186,6 +205,7 @@ test.describe('Custom Spectral Lint Rules', () => {
186205
test('remove custom ruleset reverts to default OAS, persists after app relaunch', async ({ insomnia }) => {
187206
await openPetStoreDesignDoc(insomnia.page);
188207
await uploadRuleset(insomnia, insomnia.page);
208+
await expandLintPanel(insomnia.page);
189209
await expect.soft(insomnia.page.getByText(new RegExp(RULESET_RULE_NAME))).toBeVisible({
190210
timeout: 15_000,
191211
});
@@ -204,7 +224,9 @@ test.describe('Custom Spectral Lint Rules', () => {
204224
// ---------------------------------------------------------------------------
205225
// 3. Invalid ruleset — error modal appears, ruleset is not applied
206226
// ---------------------------------------------------------------------------
207-
test('uploading a ruleset with disallowed keys shows an error and leaves default ruleset active', async ({ insomnia }) => {
227+
test('uploading a ruleset with disallowed keys shows an error and leaves default ruleset active', async ({
228+
insomnia,
229+
}) => {
208230
await openPetStoreDesignDoc(insomnia.page);
209231
await expect.soft(insomnia.page.getByText('Default OAS Ruleset')).toBeVisible();
210232

@@ -218,9 +240,7 @@ test.describe('Custom Spectral Lint Rules', () => {
218240

219241
// Default ruleset should still be active; no custom upload button state change.
220242
await expect.soft(insomnia.page.getByText('Default OAS Ruleset')).toBeVisible();
221-
await expect
222-
.soft(insomnia.page.getByRole('button', { name: 'View selected ruleset content' }))
223-
.toBeHidden();
243+
await expect.soft(insomnia.page.getByRole('button', { name: 'View selected ruleset content' })).toBeHidden();
224244
});
225245

226246
// ---------------------------------------------------------------------------
@@ -293,9 +313,8 @@ test.describe('Custom Spectral Lint Rules', () => {
293313
await expect
294314
.soft(machineB.page.getByRole('button', { name: 'View selected ruleset content' }))
295315
.toBeVisible({ timeout: 15_000 });
296-
await expect
297-
.soft(machineB.page.getByText(new RegExp(RULESET_RULE_NAME)))
298-
.toBeVisible({ timeout: 15_000 });
316+
await expandLintPanel(machineB.page);
317+
await expect.soft(machineB.page.getByText(new RegExp(RULESET_RULE_NAME))).toBeVisible({ timeout: 15_000 });
299318

300319
await fetch(`${devServerUrl}/__test-config/cloud-sync/reset`, { method: 'POST' });
301320
});
@@ -334,9 +353,8 @@ test.describe('Custom Spectral Lint Rules', () => {
334353
await expect
335354
.soft(userB.page.getByRole('button', { name: 'View selected ruleset content' }))
336355
.toBeVisible({ timeout: 15_000 });
337-
await expect
338-
.soft(userB.page.getByText(new RegExp(RULESET_RULE_NAME)))
339-
.toBeVisible({ timeout: 15_000 });
356+
await expandLintPanel(userB.page);
357+
await expect.soft(userB.page.getByText(new RegExp(RULESET_RULE_NAME))).toBeVisible({ timeout: 15_000 });
340358

341359
await fetch(`${devServerUrl}/__test-config/cloud-sync/reset`, { method: 'POST' });
342360
});

‎packages/insomnia-smoke-test/tests/smoke/openapi.test.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ test('can render Spectral OpenAPI lint errors', async ({ page }) => {
1919
const lintSummary = page.getByRole('button', { name: /error/ });
2020
await expect.soft(lintSummary).toBeVisible();
2121

22-
// Expand the lint error message group & assert line number occurence
22+
// Expand the lint panel
23+
await page.getByTestId('lint-panel-toggle').click();
24+
await expect.soft(page.getByTestId('lint-panel')).toBeVisible();
2325
const lintEntry = page.getByText(/oas3-schema/);
2426
await expect.soft(lintEntry).toBeVisible();
2527
await lintEntry.click();

‎packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.spec.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -660,7 +660,7 @@ const Component = ({ params }: Route.ComponentProps) => {
660660

661661
const lintToolbar = (
662662
<div
663-
className={`flex flex-wrap items-center gap-2 border-solid border-(--hl-md) p-(--padding-sm) ${isLintPaneOpen ? 'border-b' : ''}`}
663+
className={`flex h-(--line-height-sm) items-center gap-2 overflow-hidden border-solid border-(--hl-md) px-(--padding-sm) ${isLintPaneOpen ? 'border-b' : ''}`}
664664
>
665665
<div className="inline-flex items-center gap-2">
666666
<Icon icon={selectedRulesetPath ? 'file-circle-check' : 'file-circle-xmark'} />
@@ -774,6 +774,7 @@ const Component = ({ params }: Route.ComponentProps) => {
774774
'No lint problems'
775775
) : (
776776
<Button
777+
data-testid="lint-panel-toggle"
777778
onPress={() => (isLintPaneOpen ? lintPanelRef.current?.collapse() : lintPanelRef.current?.expand())}
778779
>
779780
<span className="underline">
@@ -881,6 +882,7 @@ const Component = ({ params }: Route.ComponentProps) => {
881882
)}
882883
<ToggleButton
883884
aria-label="Toggle preview"
885+
data-testid="preview-toggle"
884886
isSelected={isSpecPaneOpen}
885887
className="flex h-full items-center justify-center gap-2 rounded-xs px-2 text-sm text-(--color-font) ring-1 ring-transparent transition-all hover:bg-(--hl-xs) focus:ring-(--hl-md) focus:ring-inset aria-pressed:bg-(--hl-sm)"
886888
onChange={value => {
@@ -1306,9 +1308,9 @@ const Component = ({ params }: Route.ComponentProps) => {
13061308
isOpen={isViewRulesetModalOpen}
13071309
onOpenChange={setIsViewRulesetModalOpen}
13081310
isDismissable
1309-
className="theme--transparent-overlay fixed top-0 left-0 z-10 flex h-(--visual-viewport-height) w-full justify-center bg-(--color-bg) py-[100px]"
1311+
className="fixed top-0 left-0 z-10 flex h-(--visual-viewport-height) w-full items-center justify-center bg-black/30"
13101312
>
1311-
<Modal className="theme--dialog h-fit max-h-full w-full max-w-[900px] overflow-y-auto rounded-md border border-solid border-(--hl-sm) bg-(--color-bg) p-[32px] text-(--color-font)">
1313+
<Modal className="max-h-full w-full max-w-[900px] overflow-y-auto rounded-md border border-solid border-(--hl-sm) bg-(--color-bg) p-(--padding-lg) text-(--color-font)">
13121314
<Dialog className="relative outline-hidden">
13131315
{({ close }) => (
13141316
<>
@@ -1355,17 +1357,19 @@ const Component = ({ params }: Route.ComponentProps) => {
13551357
<Panel
13561358
ref={lintPanelRef}
13571359
id="lint-panel"
1358-
defaultSize={20}
1359-
minSize={5}
1360+
defaultSize={0}
1361+
minSize={10}
13601362
collapsible
13611363
onCollapse={() => setIsLintPaneOpen(false)}
13621364
onExpand={() => setIsLintPaneOpen(true)}
13631365
className="flex flex-col overflow-hidden"
13641366
>
1365-
<div className="box-border flex h-full flex-col">
1366-
{lintToolbar}
1367-
{lintMessageList}
1368-
</div>
1367+
{isLintPaneOpen && (
1368+
<div data-testid="lint-panel" className="box-border flex h-full flex-col">
1369+
{lintToolbar}
1370+
{lintMessageList}
1371+
</div>
1372+
)}
13691373
</Panel>
13701374
</>
13711375
)}

0 commit comments

Comments
 (0)