From e6c560b58b02afabd123457a246a3e3a4c8a03d7 Mon Sep 17 00:00:00 2001 From: Sebastian Martinez Date: Thu, 16 Nov 2023 13:45:10 +0100 Subject: [PATCH] Fix cob commit listing borderline not expanding --- httpd-client/tests/project.test.ts | 2 +- .../projects/Cob/CobCommitListing.svelte | 67 ------------------- src/views/projects/Cob/CobCommitTeaser.svelte | 2 +- src/views/projects/Cob/Revision.svelte | 41 +++++++++++- tests/e2e/project/patch.spec.ts | 41 ++++++------ tests/support/cobs/patch.ts | 7 +- tests/support/fixtures.ts | 14 ++-- tests/visual/cob.spec.ts | 21 ++++-- tests/visual/mobile/cob.spec.ts | 4 +- tests/visual/project.spec.ts | 2 +- 10 files changed, 95 insertions(+), 106 deletions(-) delete mode 100644 src/views/projects/Cob/CobCommitListing.svelte diff --git a/httpd-client/tests/project.test.ts b/httpd-client/tests/project.test.ts index 300a4727b..a0360e853 100644 --- a/httpd-client/tests/project.test.ts +++ b/httpd-client/tests/project.test.ts @@ -210,7 +210,7 @@ describe("project", () => { test("#getPatchById(id, patchId)", async () => { await api.project.getPatchById( cobRid, - "679b2c84a8e15ce1f73c4c231b55431b89b2559a", + "fa393edeb28bdd189bd0c0d7a262cb30d9109595", ); }); diff --git a/src/views/projects/Cob/CobCommitListing.svelte b/src/views/projects/Cob/CobCommitListing.svelte deleted file mode 100644 index ac4d8836c..000000000 --- a/src/views/projects/Cob/CobCommitListing.svelte +++ /dev/null @@ -1,67 +0,0 @@ - - - - -
- {#each commits.reverse() as commit, index} -
-
- -
- {/each} -
diff --git a/src/views/projects/Cob/CobCommitTeaser.svelte b/src/views/projects/Cob/CobCommitTeaser.svelte index 28ea12b3d..53565e739 100644 --- a/src/views/projects/Cob/CobCommitTeaser.svelte +++ b/src/views/projects/Cob/CobCommitTeaser.svelte @@ -56,7 +56,7 @@ } -
+
{formatCommit(commit.id)} diff --git a/src/views/projects/Cob/Revision.svelte b/src/views/projects/Cob/Revision.svelte index ad2f5e681..2b1e4d1d3 100644 --- a/src/views/projects/Cob/Revision.svelte +++ b/src/views/projects/Cob/Revision.svelte @@ -12,7 +12,7 @@ import { HttpdClient } from "@httpd-client"; import { onMount } from "svelte"; - import CobCommitListing from "@app/views/projects/Cob/CobCommitListing.svelte"; + import CobCommitTeaser from "@app/views/projects/Cob/CobCommitTeaser.svelte"; import CommentComponent from "@app/components/Comment.svelte"; import DiffStatBadge from "@app/components/DiffStatBadge.svelte"; import DropdownList from "@app/components/DropdownList.svelte"; @@ -24,8 +24,8 @@ import Link from "@app/components/Link.svelte"; import Loading from "@app/components/Loading.svelte"; import Markdown from "@app/components/Markdown.svelte"; - import Popover from "@app/components/Popover.svelte"; import NodeId from "@app/components/NodeId.svelte"; + import Popover from "@app/components/Popover.svelte"; import Thread from "@app/components/Thread.svelte"; export let baseUrl: BaseUrl; @@ -196,9 +196,37 @@ font-size: var(--font-size-small); color: var(--color-fill-gray); } + .commits { + position: relative; + display: flex; + flex-direction: column; + font-size: 0.875rem; + margin-left: 1rem; + gap: 0.5rem; + padding: 1rem 1rem; + border-left: 1px solid var(--color-fill-separator); + } + + .commit:last-of-type::after { + content: ""; + position: absolute; + left: -17px; + top: 12px; + bottom: -1rem; + border-left: 1px solid var(--color-background-default); + } .expanded { box-shadow: 0 0 0 1px var(--color-border-hint); } + .commit-dot { + border-radius: var(--border-radius-round); + width: 4px; + height: 4px; + position: absolute; + top: 0.5rem; + left: -18.5px; + background-color: var(--color-fill-separator); + } .connector { width: 1px; height: 1.5rem; @@ -373,7 +401,14 @@
{/if} {#if response?.commits} - +
+ {#each response.commits.reverse() as commit} +
+
+ +
+ {/each} +
{/if}
{#if error} diff --git a/tests/e2e/project/patch.spec.ts b/tests/e2e/project/patch.spec.ts index 17727bd93..94899fd82 100644 --- a/tests/e2e/project/patch.spec.ts +++ b/tests/e2e/project/patch.spec.ts @@ -21,7 +21,7 @@ test("navigate patch details", async ({ page }) => { }); test("use revision selector", async ({ page }) => { - await page.goto(`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a`); + await page.goto(`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595`); await page.getByRole("link", { name: "Changes" }).click(); // Validating the latest revision state @@ -29,7 +29,7 @@ test("use revision selector", async ({ page }) => { page.getByRole("cell", { name: "Had to push a new revision" }), ).toBeVisible(); await page.getByRole("link", { name: "Activity" }).click(); - await expect(page.locator(".commits .teaser")).toHaveCount(2); + await expect(page.getByLabel("commit-teaser")).toHaveCount(2); await expect(page.getByRole("link", { name: "Add more text" })).toBeVisible(); // Open the first revision and close the latest one @@ -37,27 +37,29 @@ test("use revision selector", async ({ page }) => { await page.getByLabel("expand").last().click(); // Validating the initial revision - await expect(page.locator(".commits .teaser")).toHaveCount(1); + await expect(page.getByLabel("commit-teaser")).toHaveCount(3); await expect( - page.getByRole("link", { name: "Rewrite subtitle to README" }), + page.getByRole("link", { name: "Rewrite subtitle to README" }).first(), ).toBeVisible(); await page.getByRole("link", { name: "Changes" }).click(); // Switching to the initial revision - await page.getByText("Revision 2c2f036").click(); - await page.getByRole("link", { name: "Revision 679b2c8" }).click(); + + await page.getByRole("button", { name: "Revision 92f6a0c" }).click(); + await page.getByRole("button", { name: "Revision fa393ed" }).click(); + // getByRole("link", { name: "Revision 92f6a0c" }) await expect( page.getByRole("cell", { name: "Had to push a new revision" }), ).toBeHidden(); await expect(page).toHaveURL( - `${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a/679b2c84a8e15ce1f73c4c231b55431b89b2559a?tab=changes`, + `${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595/fa393edeb28bdd189bd0c0d7a262cb30d9109595?tab=changes`, ); }); test("navigate through revision diffs", async ({ page }) => { - await page.goto(`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a`); + await page.goto(`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595`); const firstRevision = page.locator(".revision").first(); const secondRevision = page.locator(".revision").nth(1); @@ -72,10 +74,10 @@ test("navigate through revision diffs", async ({ page }) => { .getByRole("link", { name: "Compare to main: 38c225e" }) .click(); await expect( - page.getByRole("link", { name: "Compare 38c225..9898da" }), + page.getByRole("button", { name: "Compare 38c225..9e4fea" }), ).toBeVisible(); await expect(page).toHaveURL( - `${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a?diff=38c225e2a0b47ba59def211f4e4825c31d9463ec..9898da6155467adad511f63bf0fb5aa4156b92ef`, + `${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595?diff=38c225e2a0b47ba59def211f4e4825c31d9463ec..9e4feab1b2123dfa5f22bd0e4656060ec9296638`, ); await page.goBack(); await secondRevision @@ -83,22 +85,23 @@ test("navigate through revision diffs", async ({ page }) => { .first() .click(); await secondRevision - .getByRole("link", { name: "Compare to previous revision: 679b2c8" }) + .getByRole("link", { name: "Compare to previous revision: fa393ed" }) .click(); await expect( - page.getByRole("link", { name: "Compare 0dc373..9898da" }), + page.getByRole("button", { name: "Compare 88b7fd..9e4fea" }), ).toBeVisible(); await expect(page).toHaveURL( - `${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a?diff=0dc373db601ccbcffa80dec932e4006516709ca6..9898da6155467adad511f63bf0fb5aa4156b92ef`, + `${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595?diff=88b7fd90389c1a629f91ed7bf838d4b947426622..9e4feab1b2123dfa5f22bd0e4656060ec9296638`, ); await page.goBack(); await secondRevision - .getByRole("link", { name: "Compare 0dc373d..9898da6" }) + .getByRole("link", { name: "Compare 88b7fd9..9e4feab" }) + .getByRole("button") .click(); await expect( - page.getByRole("link", { name: "Compare 0dc373..9898da" }), + page.getByRole("link", { name: "Compare 88b7fd9..9e4fea" }), ).toBeVisible(); await page.goBack(); } @@ -112,20 +115,20 @@ test("navigate through revision diffs", async ({ page }) => { .getByRole("link", { name: "Compare to main: 38c225e" }) .click(); await expect( - page.getByRole("link", { name: "Compare 38c225..0dc373" }), + page.getByRole("button", { name: "Compare 38c225..88b7fd" }), ).toBeVisible(); await expect(page).toHaveURL( - `${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a?diff=38c225e2a0b47ba59def211f4e4825c31d9463ec..0dc373db601ccbcffa80dec932e4006516709ca6`, + `${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595?diff=38c225e2a0b47ba59def211f4e4825c31d9463ec..88b7fd90389c1a629f91ed7bf838d4b947426622`, ); } }); test("view file navigation from changes tab", async ({ page }) => { - await page.goto(`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a`); + await page.goto(`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595`); await page.getByRole("button", { name: "Changes" }).click(); await page.getByRole("button", { name: "View file" }).click(); await expect(page).toHaveURL( - `${cobUrl}/tree/9898da6155467adad511f63bf0fb5aa4156b92ef/README.md`, + `${cobUrl}/tree/9e4feab1b2123dfa5f22bd0e4656060ec9296638/README.md`, ); }); diff --git a/tests/support/cobs/patch.ts b/tests/support/cobs/patch.ts index d9576ced9..449a30f77 100644 --- a/tests/support/cobs/patch.ts +++ b/tests/support/cobs/patch.ts @@ -3,7 +3,7 @@ import type { Options } from "execa"; export async function create( peer: RadiclePeer, - commit: string, + commitLines: string[], branch: string, changeFn: () => Promise, messages: string[], @@ -16,7 +16,10 @@ export async function create( } await changeFn(); await peer.git(["add", "."], options); - await peer.git(["commit", "-m", commit], options); + await peer.git( + ["commit"].concat(...commitLines.map(line => ["-m", line])), + options, + ); const cmd = [ "push", ...messages.map(msg => ["-o", `patch.message=${msg}`]).flat(), diff --git a/tests/support/fixtures.ts b/tests/support/fixtures.ts index e2f57cd54..263a809f4 100644 --- a/tests/support/fixtures.ts +++ b/tests/support/fixtures.ts @@ -483,7 +483,7 @@ export async function createCobsFixture(peer: RadiclePeer) { const patchOne = await patch.create( peer, - "Add README\n\nThis commit adds more information to the README", + ["Add README", "This commit adds more information to the README"], "feature/add-readme", () => Fs.writeFile(Path.join(projectFolder, "README.md"), "# Cobs Repo"), ["Let's add a README", "This repo needed a README"], @@ -563,7 +563,7 @@ export async function createCobsFixture(peer: RadiclePeer) { const patchTwo = await patch.create( peer, - "Add subtitle to README", + ["Add subtitle to README"], "feature/add-more-text", () => Fs.appendFile(Path.join(projectFolder, "README.md"), "\n\n## Subtitle"), @@ -577,7 +577,11 @@ export async function createCobsFixture(peer: RadiclePeer) { const patchThree = await patch.create( peer, - "Rewrite subtitle to README", + [ + "Rewrite subtitle to README", + "This was really necessary", + "Blazingly fast", + ], "feature/better-subtitle", () => Fs.appendFile(Path.join(projectFolder, "README.md"), "\n\n## Better?"), @@ -621,7 +625,7 @@ export async function createCobsFixture(peer: RadiclePeer) { const patchFour = await patch.create( peer, - "This patch is going to be archived", + ["This patch is going to be archived"], "feature/archived", () => Fs.writeFile(Path.join(projectFolder, "CONTRIBUTING.md"), "# Archived"), @@ -636,7 +640,7 @@ export async function createCobsFixture(peer: RadiclePeer) { const patchFive = await patch.create( peer, - "This patch is going to be reverted to draft", + ["This patch is going to be reverted to draft"], "feature/draft", () => Fs.writeFile(Path.join(projectFolder, "LICENSE"), "Draft"), [], diff --git a/tests/visual/cob.spec.ts b/tests/visual/cob.spec.ts index 5be6eacb3..aca3038e3 100644 --- a/tests/visual/cob.spec.ts +++ b/tests/visual/cob.spec.ts @@ -65,13 +65,13 @@ test("patch page", async ({ page }) => { await expect(page).toHaveScreenshot({ fullPage: true }); // Archived patch await page.goto( - `${cobUrl}/patches/43ae785a9ceaf289b2445fb5b8e01036d456b2be`, + `${cobUrl}/patches/08d97e8cb6f94448d0452884a9bf686beecc8549`, { waitUntil: "networkidle" }, ); await expect(page).toHaveScreenshot({ fullPage: true }); // Merged patch await page.goto( - `${cobUrl}/patches/6a51e1d2e350136e7bcfad8f13d16488c1f1c99a`, + `${cobUrl}/patches/cf0b92b99dd3e36d251f3d75e12b626c62d20e4c`, { waitUntil: "networkidle" }, ); await expect(page).toHaveScreenshot({ fullPage: true }); @@ -83,12 +83,23 @@ test("patch page", async ({ page }) => { await expect(page).toHaveScreenshot({ fullPage: true }); // Open patch "Taking another stab at the README" await page.goto( - `${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a`, + `${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595`, { waitUntil: "networkidle" }, ); await expect(page).toHaveScreenshot({ fullPage: true }); + + // Expand commit messages to check border line height + await page.getByLabel("expand").nth(2).click(); + await expect(page).toHaveScreenshot({ fullPage: true }); + + // Expand the commit message in the first revision + await page.getByLabel("expand").first().click(); + await expect(page).toHaveScreenshot({ fullPage: true }); + await page.getByLabel("expand").nth(1).click(); + await expect(page).toHaveScreenshot({ fullPage: true }); + await page.goto( - `${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a?tab=changes`, + `${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595?tab=changes`, { waitUntil: "networkidle" }, ); await expect(page).toHaveScreenshot({ fullPage: true }); @@ -100,6 +111,6 @@ test("failed diff loading for a specific revision", async ({ page }) => { route => route.fulfill({ status: 500 }), ); - await page.goto(`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a`); + await page.goto(`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595`); await expect(page).toHaveScreenshot({ fullPage: true }); }); diff --git a/tests/visual/mobile/cob.spec.ts b/tests/visual/mobile/cob.spec.ts index bd63b6ed8..74feb0512 100644 --- a/tests/visual/mobile/cob.spec.ts +++ b/tests/visual/mobile/cob.spec.ts @@ -84,12 +84,12 @@ test("patch page", async ({ page }) => { await expect(page).toHaveScreenshot({ fullPage: true }); // Open patch await page.goto( - `${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a`, + `${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595`, { waitUntil: "networkidle" }, ); await expect(page).toHaveScreenshot({ fullPage: true }); await page.goto( - `${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a?tab=changes`, + `${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595?tab=changes`, { waitUntil: "networkidle" }, ); await expect(page).toHaveScreenshot({ fullPage: true }); diff --git a/tests/visual/project.spec.ts b/tests/visual/project.spec.ts index b5bd2085e..9f8a51052 100644 --- a/tests/visual/project.spec.ts +++ b/tests/visual/project.spec.ts @@ -64,7 +64,7 @@ test("diff selection", async ({ page }) => { }); await page.goto( - `${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a?tab=changes#README.md:H0L0H0L3`, + `${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595?tab=changes#README.md:H0L0H0L3`, ); await expect(page).toHaveScreenshot({ fullPage: true }); });