mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-30 11:00:11 +08:00
Fix show_label for Label component (#4713)
* Add code * Add tests * Add CHANGELOG
This commit is contained in:
parent
ed5178acd3
commit
acc72cddee
@ -29,6 +29,7 @@
|
|||||||
- When an error modal is shown in spaces, ensure we scroll to the top so it can be seen by [@pngwn](https://github.com/pngwn) in [PR 4712](https://github.com/gradio-app/gradio/pull/4712)
|
- When an error modal is shown in spaces, ensure we scroll to the top so it can be seen by [@pngwn](https://github.com/pngwn) in [PR 4712](https://github.com/gradio-app/gradio/pull/4712)
|
||||||
- Update depedencies by [@pngwn](https://github.com/pngwn) in [PR 4675](https://github.com/gradio-app/gradio/pull/4675)
|
- Update depedencies by [@pngwn](https://github.com/pngwn) in [PR 4675](https://github.com/gradio-app/gradio/pull/4675)
|
||||||
- Fixes `gr.Dropdown` being cutoff at the bottom by [@abidlabs](https://github.com/abidlabs) in [PR 4691](https://github.com/gradio-app/gradio/pull/4691).
|
- Fixes `gr.Dropdown` being cutoff at the bottom by [@abidlabs](https://github.com/abidlabs) in [PR 4691](https://github.com/gradio-app/gradio/pull/4691).
|
||||||
|
- Fix bug where `show_label` was hiding the entire component for `gr.Label` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4713](https://github.com/gradio-app/gradio/pull/4713)
|
||||||
|
|
||||||
## Other Changes:
|
## Other Changes:
|
||||||
|
|
||||||
|
138
js/app/src/components/Label/Label.component.spec.ts
Normal file
138
js/app/src/components/Label/Label.component.spec.ts
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
import { test, expect } from "@playwright/experimental-ct-svelte";
|
||||||
|
import type { Page, Locator } from "@playwright/test";
|
||||||
|
import Label from "./Label.svelte";
|
||||||
|
import { spy } from "tinyspy";
|
||||||
|
|
||||||
|
import type { LoadingStatus } from "../StatusTracker/types";
|
||||||
|
|
||||||
|
const loading_status: LoadingStatus = {
|
||||||
|
eta: 0,
|
||||||
|
queue_position: 1,
|
||||||
|
queue_size: 1,
|
||||||
|
status: "complete",
|
||||||
|
scroll_to_output: false,
|
||||||
|
visible: true,
|
||||||
|
fn_index: 0,
|
||||||
|
show_progress: "full"
|
||||||
|
};
|
||||||
|
|
||||||
|
test("gr.Label default value and label rendered with confidences", async ({
|
||||||
|
mount,
|
||||||
|
page
|
||||||
|
}) => {
|
||||||
|
const component = await mount(Label, {
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
label: "Good",
|
||||||
|
confidences: [
|
||||||
|
{ label: "Good", confidence: 0.9 },
|
||||||
|
{ label: "Bad", confidence: 0.1 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
label: "My Label",
|
||||||
|
show_label: true,
|
||||||
|
loading_status: loading_status
|
||||||
|
}
|
||||||
|
});
|
||||||
|
await expect(component).toContainText("My Label");
|
||||||
|
await expect(component.getByTestId("block-label")).toBeVisible();
|
||||||
|
await expect(page.getByTestId("label-output-value")).toContainText("Good");
|
||||||
|
await expect(page.getByTestId("Good-confidence-set")).toContainText("90");
|
||||||
|
await expect(page.getByTestId("Bad-confidence-set")).toContainText("10");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("gr.Label hides label when show_label=false", async ({ mount, page }) => {
|
||||||
|
const component = await mount(Label, {
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
label: "Good",
|
||||||
|
confidences: [
|
||||||
|
{ label: "Good", confidence: 0.9 },
|
||||||
|
{ label: "Bad", confidence: 0.1 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
label: "My Label",
|
||||||
|
show_label: false,
|
||||||
|
loading_status: loading_status
|
||||||
|
}
|
||||||
|
});
|
||||||
|
await expect(component.getByTestId("block-label")).toBeHidden();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("gr.Label confidence bars not rendered without confidences", async ({
|
||||||
|
mount
|
||||||
|
}) => {
|
||||||
|
const component = await mount(Label, {
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
label: "Good"
|
||||||
|
},
|
||||||
|
label: "My Label",
|
||||||
|
show_label: true,
|
||||||
|
loading_status: loading_status
|
||||||
|
}
|
||||||
|
});
|
||||||
|
await expect(component).toContainText("My Label");
|
||||||
|
expect(await component.getByTestId("Good-confidence-set").count()).toEqual(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("gr.Label confidence bars trigger select event when clicked", async ({
|
||||||
|
mount,
|
||||||
|
page
|
||||||
|
}) => {
|
||||||
|
const select = spy();
|
||||||
|
const component = await mount(Label, {
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
label: "Good",
|
||||||
|
confidences: [
|
||||||
|
{ label: "Good", confidence: 0.9 },
|
||||||
|
{ label: "Bad", confidence: 0.1 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
label: "My Label",
|
||||||
|
show_label: true,
|
||||||
|
loading_status: loading_status
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
select: select
|
||||||
|
}
|
||||||
|
});
|
||||||
|
await expect(component).toContainText("My Label");
|
||||||
|
await component.getByTestId("Bad-confidence-set").click();
|
||||||
|
expect(select.callCount).toEqual(1);
|
||||||
|
expect(select.calls[0][0]).toEqual({ index: 1, value: "Bad" });
|
||||||
|
});
|
||||||
|
|
||||||
|
test("gr.Label triggers change event", async ({ mount, page }) => {
|
||||||
|
const change = spy();
|
||||||
|
const component = await mount(Label, {
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
label: "Good",
|
||||||
|
confidences: [
|
||||||
|
{ label: "Good", confidence: 0.9 },
|
||||||
|
{ label: "Bad", confidence: 0.1 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
label: "My Label",
|
||||||
|
show_label: true,
|
||||||
|
loading_status: loading_status
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
change: change
|
||||||
|
}
|
||||||
|
});
|
||||||
|
await component.update({
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
label: "Good",
|
||||||
|
confidences: [
|
||||||
|
{ label: "Good", confidence: 0.1 },
|
||||||
|
{ label: "Bad", confidence: 0.9 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
expect(change.callCount).toEqual(1);
|
||||||
|
});
|
@ -43,7 +43,7 @@
|
|||||||
<BlockLabel Icon={LabelIcon} {label} disable={container === false} />
|
<BlockLabel Icon={LabelIcon} {label} disable={container === false} />
|
||||||
{/if}
|
{/if}
|
||||||
{#if _label !== undefined && _label !== null}
|
{#if _label !== undefined && _label !== null}
|
||||||
<Label on:select {selectable} {value} {show_label} {color} />
|
<Label on:select {selectable} {value} {color} />
|
||||||
{:else}
|
{:else}
|
||||||
<Empty unpadded_box={true}><LabelIcon /></Empty>
|
<Empty unpadded_box={true}><LabelIcon /></Empty>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -66,7 +66,7 @@ test("Slider Default Value And Label rendered", async ({ mount }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test("Slider respects show_label", async ({ mount, page }) => {
|
test("Slider respects show_label", async ({ mount, page }) => {
|
||||||
const _ = await mount(Slider, {
|
const component = await mount(Slider, {
|
||||||
props: {
|
props: {
|
||||||
value: 3,
|
value: 3,
|
||||||
minimum: 0,
|
minimum: 0,
|
||||||
@ -78,7 +78,7 @@ test("Slider respects show_label", async ({ mount, page }) => {
|
|||||||
loading_status: loading_status
|
loading_status: loading_status
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
await expect(page.getByTestId("label")).toBeHidden();
|
await expect(component.getByTestId("block-title")).toBeHidden();
|
||||||
});
|
});
|
||||||
|
|
||||||
test("Slider Maximum/Minimum values", async ({ mount, page }) => {
|
test("Slider Maximum/Minimum values", async ({ mount, page }) => {
|
||||||
|
@ -11,6 +11,7 @@
|
|||||||
class:sr-only={!show_label}
|
class:sr-only={!show_label}
|
||||||
class:float
|
class:float
|
||||||
class:hide-label={disable}
|
class:hide-label={disable}
|
||||||
|
data-testid="block-label"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<Icon />
|
<Icon />
|
||||||
|
@ -8,6 +8,7 @@
|
|||||||
class:sr-only={!show_label}
|
class:sr-only={!show_label}
|
||||||
class:hide={!show_label}
|
class:hide={!show_label}
|
||||||
class:has-info={info != null}
|
class:has-info={info != null}
|
||||||
|
data-testid="block-info"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
|
@ -9,15 +9,14 @@
|
|||||||
|
|
||||||
const dispatch = createEventDispatcher<{ select: SelectData }>();
|
const dispatch = createEventDispatcher<{ select: SelectData }>();
|
||||||
|
|
||||||
export let show_label: boolean = true;
|
|
||||||
export let color: string | undefined = undefined;
|
export let color: string | undefined = undefined;
|
||||||
export let selectable: boolean = false;
|
export let selectable: boolean = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div
|
<div
|
||||||
class:sr-only={!show_label}
|
|
||||||
class="output-class"
|
class="output-class"
|
||||||
|
data-testid="label-output-value"
|
||||||
class:no-confidence={!("confidences" in value)}
|
class:no-confidence={!("confidences" in value)}
|
||||||
style:background-color={color || "transparent"}
|
style:background-color={color || "transparent"}
|
||||||
>
|
>
|
||||||
@ -27,6 +26,7 @@
|
|||||||
{#each value.confidences as confidence_set, i}
|
{#each value.confidences as confidence_set, i}
|
||||||
<div
|
<div
|
||||||
class="confidence-set group"
|
class="confidence-set group"
|
||||||
|
data-testid={`${confidence_set.label}-confidence-set`}
|
||||||
class:selectable
|
class:selectable
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
dispatch("select", { index: i, value: confidence_set.label });
|
dispatch("select", { index: i, value: confidence_set.label });
|
||||||
|
Loading…
Reference in New Issue
Block a user