-
Notifications
You must be signed in to change notification settings - Fork 58
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1783 from dusk-network/feature-1781
explorer: disable block height navigation
- Loading branch information
Showing
12 changed files
with
510 additions
and
23 deletions.
There are no files selected for viewing
66 changes: 66 additions & 0 deletions
66
explorer/src/lib/components/__tests__/AppAnchorButton.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import { afterEach, describe, expect, it, vi } from "vitest"; | ||
| import { cleanup, fireEvent, render } from "@testing-library/svelte"; | ||
| import { base } from "$app/paths"; | ||
|
|
||
| import { AppAnchorButton } from ".."; | ||
|
|
||
| describe("AppAnchorButton", () => { | ||
| const baseProps = { | ||
| className: "foo bar", | ||
| href: "/setup", | ||
| id: "some-id", | ||
| }; | ||
|
|
||
| afterEach(cleanup); | ||
|
|
||
| it("should render an `AnchorButton` with the base path prepended to the `href` attribute, if the `href` represents an absolute URL", () => { | ||
| const { container, getByRole, rerender } = render( | ||
| AppAnchorButton, | ||
| baseProps | ||
| ); | ||
| const anchorA = getByRole("link"); | ||
|
|
||
| expect(container.firstChild).toMatchSnapshot(); | ||
| expect(anchorA).toHaveAttribute("href", `${base}${baseProps.href}`); | ||
| expect(anchorA).toHaveClass("foo bar"); | ||
| expect(anchorA).toHaveAttribute("id", baseProps.id); | ||
|
|
||
| rerender({ ...baseProps, href: "/" }); | ||
|
|
||
| const anchorB = getByRole("link"); | ||
|
|
||
| expect(anchorB).toHaveAttribute("href", `${base}/`); | ||
| expect(anchorB).toHaveClass("foo bar"); | ||
| expect(anchorB).toHaveAttribute("id", baseProps.id); | ||
| }); | ||
|
|
||
| it("should leave the `AnchorButton` as it is if the `href` points to a relative path", () => { | ||
| const { getByRole } = render(AppAnchorButton, { | ||
| ...baseProps, | ||
| href: "foo/bar", | ||
| }); | ||
|
|
||
| expect(getByRole("link")).toHaveAttribute("href", "foo/bar"); | ||
| }); | ||
|
|
||
| it("should leave the `AnchorButton` as it is if the `href` points to an external URL", () => { | ||
| const href = "http://example.com"; | ||
| const { getByRole } = render(AppAnchorButton, { ...baseProps, href }); | ||
|
|
||
| expect(getByRole("link")).toHaveAttribute("href", href); | ||
| }); | ||
|
|
||
| it("should forward the `onclick` event to the `AnchorButton`", async () => { | ||
| const handler = vi.fn(); | ||
| const { component, getByRole } = render(AppAnchorButton, { | ||
| ...baseProps, | ||
| href: "#", | ||
| }); | ||
|
|
||
| component.$on("click", handler); | ||
|
|
||
| await fireEvent.click(getByRole("link")); | ||
|
|
||
| expect(handler).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); |
17 changes: 17 additions & 0 deletions
17
explorer/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html | ||
|
|
||
| exports[`AppAnchorButton > should render an \`AnchorButton\` with the base path prepended to the \`href\` attribute, if the \`href\` represents an absolute URL 1`] = ` | ||
| <div> | ||
| <a | ||
| aria-disabled="false" | ||
| class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal foo bar" | ||
| href="/some-base-path/setup" | ||
| id="some-id" | ||
| > | ||
| </a> | ||
| <!--<Anchor>--> | ||
| <!--<AnchorButton>--> | ||
| <!--<AppAnchorButton>--> | ||
| </div> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
explorer/src/lib/components/app-anchor-button/AppAnchorButton.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <svelte:options immutable={true} /> | ||
|
|
||
| <script> | ||
| import { AnchorButton } from "$lib/dusk/components"; | ||
| import { addBasePath } from "$lib/navigation"; | ||
| /** @type {string} */ | ||
| export let href; | ||
| </script> | ||
|
|
||
| <AnchorButton {...$$restProps} href={addBasePath(href)} on:click /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
87 changes: 87 additions & 0 deletions
87
explorer/src/lib/dusk/components/__tests__/AnchorButton.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { afterEach, describe, expect, it } from "vitest"; | ||
| import { cleanup, render } from "@testing-library/svelte"; | ||
| import { mdiFolderOutline } from "@mdi/js"; | ||
|
|
||
| import { AnchorButton } from ".."; | ||
|
|
||
| describe("AnchorButton", () => { | ||
| const baseProps = { | ||
| href: "/some-url", | ||
| text: "some text", | ||
| }; | ||
| const baseOptions = { | ||
| props: baseProps, | ||
| target: document.body, | ||
| }; | ||
| const iconPositions = /** @type {const} */ (["after", "before", undefined]); | ||
|
|
||
| afterEach(cleanup); | ||
|
|
||
| it("should render the AnchorButton component", () => { | ||
| const { container } = render(AnchorButton, baseOptions); | ||
|
|
||
| expect(container.firstChild).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("should add a disabled class if the related property is `true`", () => { | ||
| const props = { | ||
| ...baseProps, | ||
| disabled: true, | ||
| }; | ||
| const { container } = render(AnchorButton, { ...baseOptions, props }); | ||
|
|
||
| expect(container.firstChild).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("should pass additional class names and attributes to the rendered element", () => { | ||
| const props = { | ||
| ...baseProps, | ||
| className: "foo bar", | ||
| id: "some-id", | ||
| }; | ||
| const { container } = render(AnchorButton, { ...baseOptions, props }); | ||
|
|
||
| expect(container.firstChild).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("should render a AnchorButton without a text", () => { | ||
| const props = { | ||
| ...baseProps, | ||
| text: "", | ||
| }; | ||
| const { container } = render(AnchorButton, { ...baseOptions, props }); | ||
|
|
||
| expect(container.firstChild).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("should be able to render a AnchorButton with an icon and text", () => { | ||
| iconPositions.forEach((position) => { | ||
| const props = { | ||
| ...baseProps, | ||
| icon: { | ||
| path: mdiFolderOutline, | ||
| position, | ||
| }, | ||
| }; | ||
| const { container } = render(AnchorButton, { ...baseOptions, props }); | ||
|
|
||
| expect(container.firstChild).toMatchSnapshot(); | ||
| }); | ||
| }); | ||
|
|
||
| it("should be able to render a AnchorButton with an icon only", () => { | ||
| iconPositions.forEach((position) => { | ||
| const props = { | ||
| ...baseProps, | ||
| icon: { | ||
| path: mdiFolderOutline, | ||
| position, | ||
| }, | ||
| text: "", | ||
| }; | ||
| const { container } = render(AnchorButton, { ...baseOptions, props }); | ||
|
|
||
| expect(container.firstChild).toMatchSnapshot(); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.