mirror of
https://github.com/gradio-app/gradio.git
synced 2024-11-21 01:01:05 +08:00
Add mobile Chromatic tests (#7222)
* Add mobile story tests * add layout stories * add changeset * configure viewports * formatting * Remove tablet stories + add plot story * add changeset * add mobile tests to layout stories * fix story * fix story --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> Co-authored-by: pngwn <hello@pngwn.io>
This commit is contained in:
Hannah
GitHub
parent
fdd15213c2
commit
5181957706
7
.changeset/cruel-bats-behave.md
Normal file
7
.changeset/cruel-bats-behave.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
"@gradio/plot": minor
|
||||
"@gradio/storybook": minor
|
||||
"gradio": minor
|
||||
---
|
||||
|
||||
feat:Add mobile Chromatic tests
|
||||
27
js/accordion/Accordion.stories.svelte
Normal file
27
js/accordion/Accordion.stories.svelte
Normal file
@ -0,0 +1,27 @@
|
||||
<script context="module">
|
||||
import { Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import Accordion from "./Index.svelte";
|
||||
import Button from "../button/shared/Button.svelte";
|
||||
import { allModes } from "../storybook/modes";
|
||||
|
||||
export const meta = {
|
||||
title: "Layout Elements/Accordion",
|
||||
component: Accordion,
|
||||
parameters: {
|
||||
chromatic: {
|
||||
modes: {
|
||||
desktop: allModes["desktop"],
|
||||
mobile: allModes["mobile"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<Template let:args>
|
||||
<Accordion {...args} label="Open Me!" open={false}>
|
||||
<Button elem_id="btn" size="lg">test</Button>
|
||||
</Accordion>
|
||||
</Template>
|
||||
|
||||
<Story name="Accordion Layout" />
|
||||
@ -1,9 +1,21 @@
|
||||
<script>
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
<script context="module">
|
||||
import { Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import Audio from "./Index.svelte";
|
||||
</script>
|
||||
import { allModes } from "../storybook/modes";
|
||||
|
||||
<Meta title="Components/Audio" component={Audio} />
|
||||
export const meta = {
|
||||
title: "Components/Audio",
|
||||
component: Audio,
|
||||
parameters: {
|
||||
chromatic: {
|
||||
modes: {
|
||||
desktop: allModes["desktop"],
|
||||
mobile: allModes["mobile"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<Template let:args>
|
||||
<Audio value="Audio" {...args} />
|
||||
|
||||
@ -1,31 +1,40 @@
|
||||
<script>
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
<script context="module">
|
||||
import { Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import Chatbot from "./Index.svelte";
|
||||
</script>
|
||||
import { allModes } from "../storybook/modes";
|
||||
|
||||
<Meta
|
||||
title="Components/Chatbot"
|
||||
component={Chatbot}
|
||||
argTypes={{
|
||||
label: {
|
||||
control: "text",
|
||||
description: "The textbox label",
|
||||
name: "label"
|
||||
export const meta = {
|
||||
title: "Components/Chatbot",
|
||||
component: Chatbot,
|
||||
parameters: {
|
||||
chromatic: {
|
||||
modes: {
|
||||
desktop: allModes["desktop"],
|
||||
mobile: allModes["mobile"]
|
||||
}
|
||||
}
|
||||
},
|
||||
show_label: {
|
||||
options: [true, false],
|
||||
description: "Whether to show the label",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: true
|
||||
},
|
||||
rtl: {
|
||||
options: [true, false],
|
||||
description: "Whether to render right-to-left",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: false
|
||||
argTypes: {
|
||||
label: {
|
||||
control: "text",
|
||||
description: "The textbox label",
|
||||
name: "label"
|
||||
},
|
||||
show_label: {
|
||||
options: [true, false],
|
||||
description: "Whether to show the label",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: true
|
||||
},
|
||||
rtl: {
|
||||
options: [true, false],
|
||||
description: "Whether to render right-to-left",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: false
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
};
|
||||
</script>
|
||||
|
||||
<Template let:args>
|
||||
<Chatbot
|
||||
|
||||
28
js/column/Column.stories.svelte
Normal file
28
js/column/Column.stories.svelte
Normal file
@ -0,0 +1,28 @@
|
||||
<script context="module">
|
||||
import { Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import Column from "./Index.svelte";
|
||||
import Button from "../button/shared/Button.svelte";
|
||||
import { allModes } from "../storybook/modes";
|
||||
|
||||
export const meta = {
|
||||
title: "Layout Elements/Column",
|
||||
component: Column,
|
||||
parameters: {
|
||||
chromatic: {
|
||||
modes: {
|
||||
desktop: allModes["desktop"],
|
||||
mobile: allModes["mobile"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<Template let:args>
|
||||
<Column {...args}>
|
||||
<Button elem_id="btn" size="lg">test</Button>
|
||||
<Button elem_id="btn" size="lg">test</Button>
|
||||
</Column>
|
||||
</Template>
|
||||
|
||||
<Story name="Column Layout" />
|
||||
@ -1,68 +1,77 @@
|
||||
<script>
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
<script context="module">
|
||||
import { Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import Gallery from "./Index.svelte";
|
||||
</script>
|
||||
import { allModes } from "../storybook/modes";
|
||||
|
||||
<Meta
|
||||
title="Components/Gallery"
|
||||
component={Gallery}
|
||||
argTypes={{
|
||||
label: {
|
||||
control: "text",
|
||||
description: "The gallery label",
|
||||
name: "label",
|
||||
value: "Gradio Button"
|
||||
export const meta = {
|
||||
title: "Components/Gallery",
|
||||
component: Gallery,
|
||||
argTypes: {
|
||||
label: {
|
||||
control: "text",
|
||||
description: "The gallery label",
|
||||
name: "label",
|
||||
value: "Gradio Button"
|
||||
},
|
||||
show_label: {
|
||||
options: [true, false],
|
||||
description: "Whether to show the label",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: true
|
||||
},
|
||||
columns: {
|
||||
options: [1, 2, 3, 4],
|
||||
description: "The number of columns to show in grid",
|
||||
control: { type: "select" },
|
||||
defaultValue: 2
|
||||
},
|
||||
rows: {
|
||||
options: [1, 2, 3, 4],
|
||||
description: "The number of rows to show in grid",
|
||||
control: { type: "select" },
|
||||
defaultValue: 2
|
||||
},
|
||||
height: {
|
||||
options: ["auto", 500, 600],
|
||||
description: "The height of the grid",
|
||||
control: { type: "select" },
|
||||
defaultValue: "auto"
|
||||
},
|
||||
preview: {
|
||||
options: [true, false],
|
||||
description: "Whether to start the gallery in preview mode",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: true
|
||||
},
|
||||
allow_preview: {
|
||||
options: [true, false],
|
||||
description: "Whether to allow a preview mode in the gallery",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: true
|
||||
},
|
||||
object_fit: {
|
||||
options: ["contain", "cover", "fill", "none", "scale-down"],
|
||||
description: "How to display each indivial image in the grid",
|
||||
control: { type: "select" },
|
||||
defaultValue: "contain"
|
||||
},
|
||||
show_share_button: {
|
||||
options: [true, false],
|
||||
description: "Whether to show the share button in the gallery",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: false
|
||||
}
|
||||
},
|
||||
show_label: {
|
||||
options: [true, false],
|
||||
description: "Whether to show the label",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: true
|
||||
},
|
||||
columns: {
|
||||
options: [1, 2, 3, 4],
|
||||
description: "The number of columns to show in grid",
|
||||
control: { type: "select" },
|
||||
defaultValue: 2
|
||||
},
|
||||
rows: {
|
||||
options: [1, 2, 3, 4],
|
||||
description: "The number of rows to show in grid",
|
||||
control: { type: "select" },
|
||||
defaultValue: 2
|
||||
},
|
||||
height: {
|
||||
options: ["auto", 500, 600],
|
||||
description: "The height of the grid",
|
||||
control: { type: "select" },
|
||||
defaultValue: "auto"
|
||||
},
|
||||
preview: {
|
||||
options: [true, false],
|
||||
description: "Whether to start the gallery in preview mode",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: true
|
||||
},
|
||||
allow_preview: {
|
||||
options: [true, false],
|
||||
description: "Whether to allow a preview mode in the gallery",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: true
|
||||
},
|
||||
object_fit: {
|
||||
options: ["contain", "cover", "fill", "none", "scale-down"],
|
||||
description: "How to display each indivial image in the grid",
|
||||
control: { type: "select" },
|
||||
defaultValue: "contain"
|
||||
},
|
||||
show_share_button: {
|
||||
options: [true, false],
|
||||
description: "Whether to show the share button in the gallery",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: false
|
||||
parameters: {
|
||||
chromatic: {
|
||||
modes: {
|
||||
desktop: allModes["desktop"],
|
||||
mobile: allModes["mobile"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
};
|
||||
</script>
|
||||
|
||||
<Template let:args>
|
||||
<Gallery
|
||||
|
||||
28
js/group/Group.stories.svelte
Normal file
28
js/group/Group.stories.svelte
Normal file
@ -0,0 +1,28 @@
|
||||
<script context="module">
|
||||
import { Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import Group from "./Index.svelte";
|
||||
import Button from "../button/shared/Button.svelte";
|
||||
import { allModes } from "../storybook/modes";
|
||||
|
||||
export const meta = {
|
||||
title: "Layout Elements/Group",
|
||||
component: Group,
|
||||
parameters: {
|
||||
chromatic: {
|
||||
modes: {
|
||||
desktop: allModes["desktop"],
|
||||
mobile: allModes["mobile"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<Template let:args>
|
||||
<Group {...args}>
|
||||
<Button elem_id="btn" size="lg">test</Button>
|
||||
<Button elem_id="btn" size="lg">test</Button>
|
||||
</Group>
|
||||
</Template>
|
||||
|
||||
<Story name="Group Layout" />
|
||||
@ -1,10 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
<script context="module">
|
||||
import { Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import StaticImage from "./Index.svelte";
|
||||
import { userEvent, within } from "@storybook/testing-library";
|
||||
</script>
|
||||
import { allModes } from "../storybook/modes";
|
||||
|
||||
<Meta title="Components/Image" component={Image} />
|
||||
export const meta = {
|
||||
title: "Components/Image",
|
||||
component: StaticImage,
|
||||
parameters: {
|
||||
chromatic: {
|
||||
modes: {
|
||||
desktop: allModes["desktop"],
|
||||
mobile: allModes["mobile"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<Template let:args>
|
||||
<div
|
||||
|
||||
@ -1,12 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
<script context="module">
|
||||
import { Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import ImageEditor from "./Index.svelte";
|
||||
import { format } from "svelte-i18n";
|
||||
import { get } from "svelte/store";
|
||||
import { userEvent, within } from "@storybook/testing-library";
|
||||
</script>
|
||||
import { allModes } from "../storybook/modes";
|
||||
|
||||
<Meta title="Components/Image Editor" component={ImageEditor} />
|
||||
export const meta = {
|
||||
title: "Components/Audio",
|
||||
component: Audio,
|
||||
parameters: {
|
||||
chromatic: {
|
||||
modes: {
|
||||
desktop: allModes["desktop"],
|
||||
mobile: allModes["mobile"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<Template let:args>
|
||||
<div
|
||||
|
||||
38
js/plot/Plot.stories.svelte
Normal file
38
js/plot/Plot.stories.svelte
Normal file
@ -0,0 +1,38 @@
|
||||
<script context="module">
|
||||
import { Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import PlotComponent from "./Index.svelte";
|
||||
import { allModes } from "../storybook/modes";
|
||||
import { test_plot } from "./testplot";
|
||||
|
||||
export const meta = {
|
||||
title: "Components/Plot",
|
||||
component: PlotComponent,
|
||||
parameters: {
|
||||
chromatic: {
|
||||
modes: {
|
||||
desktop: allModes["desktop"],
|
||||
mobile: allModes["mobile"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<Template let:args>
|
||||
<PlotComponent value="Plot" {...args} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="with value"
|
||||
args={{
|
||||
value: test_plot,
|
||||
label: "Plot"
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="with no value"
|
||||
args={{
|
||||
label: "Plot"
|
||||
}}
|
||||
/>
|
||||
4
js/plot/testplot.js
Normal file
4
js/plot/testplot.js
Normal file
File diff suppressed because one or more lines are too long
@ -1,10 +1,22 @@
|
||||
<script>
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
<script context="module">
|
||||
import { Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import Row from "./Index.svelte";
|
||||
import Button from "../button/shared/Button.svelte";
|
||||
</script>
|
||||
import { allModes } from "../storybook/modes";
|
||||
|
||||
<Meta title="Layout Elements/Row" component={Row} />
|
||||
export const meta = {
|
||||
title: "Layout Elements/Row",
|
||||
component: Row,
|
||||
parameters: {
|
||||
chromatic: {
|
||||
modes: {
|
||||
desktop: allModes["desktop"],
|
||||
mobile: allModes["mobile"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<Template let:args>
|
||||
<Row {...args}>
|
||||
|
||||
11
js/storybook/modes.js
Normal file
11
js/storybook/modes.js
Normal file
@ -0,0 +1,11 @@
|
||||
export const allModes = {
|
||||
mobile: {
|
||||
viewport: "mobile"
|
||||
},
|
||||
tablet: {
|
||||
viewport: "tablet"
|
||||
},
|
||||
desktop: {
|
||||
viewport: "desktop"
|
||||
}
|
||||
};
|
||||
@ -41,6 +41,16 @@ const preview: Preview = {
|
||||
storySort: {
|
||||
order: ["Design System", "Components"]
|
||||
}
|
||||
},
|
||||
viewport: {
|
||||
viewports: {
|
||||
mobile: { name: "mobile", styles: { width: "320px", height: "400px" } },
|
||||
tablet: { name: "tablet", styles: { width: "640px", height: "800px" } },
|
||||
desktop: {
|
||||
name: "desktop",
|
||||
styles: { width: "1024px", height: "1000px" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,12 +1,24 @@
|
||||
<script>
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
<script context="module">
|
||||
import { Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import Video from "./Index.svelte";
|
||||
import { format } from "svelte-i18n";
|
||||
import { get } from "svelte/store";
|
||||
import { userEvent, within } from "@storybook/testing-library";
|
||||
</script>
|
||||
import { allModes } from "../storybook/modes";
|
||||
|
||||
<Meta title="Components/Video" component={Video} />
|
||||
export const meta = {
|
||||
title: "Components/Video",
|
||||
component: Video,
|
||||
parameters: {
|
||||
chromatic: {
|
||||
modes: {
|
||||
desktop: allModes["desktop"],
|
||||
mobile: allModes["mobile"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<Template let:args>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user