Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(action bar): adds slots for title and description
- Loading branch information
1 parent
8f2b280
commit 4bdbf1c
Showing
5 changed files
with
189 additions
and
30 deletions.
There are no files selected for viewing
File renamed without changes.
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,26 @@ | ||
| <title>Action bar with title and description as slots.</title> | ||
|
|
||
| <template> | ||
| <FdActionBar title="Page Title" description="Action bar Description"> | ||
| <template #title> | ||
| <FdIdentifier size="s" circle thumbnail url="/images/headshot-male.jpg" /> | ||
| <span class="name">Matthew Spark</span> | ||
| </template> | ||
| <template #description> | ||
| <FdBadge pill type="success">UI/UX</FdBadge> | ||
| <FdBadge pill type="success">Developer</FdBadge> | ||
| <FdBadge pill type="success">VIP</FdBadge> | ||
| <FdBadge pill type="success">Star</FdBadge> | ||
| </template> | ||
| <FdButton slot="back" styling="light" compact icon="nav-back" /> | ||
| </FdActionBar> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .name { | ||
| margin-left: 5px; | ||
| } | ||
| .fd-badge { | ||
| margin-right: 3px; | ||
| } | ||
| </style> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,98 @@ | ||
| import { mount } from "@vue/test-utils"; | ||
| import { CreateElement, VNode } from "vue"; | ||
| import { shallowMount } from "@vue/test-utils"; | ||
| import ActionBar from "../ActionBar.vue"; | ||
|
|
||
| describe("ActionBar", () => { | ||
| const title = "Page Title"; | ||
| const description = "Action bar description"; | ||
| const back = "Back"; | ||
| const actions = "Actions"; | ||
|
|
||
| const wrapper = shallowMount(ActionBar, { | ||
| propsData: { | ||
| title, | ||
| description | ||
| }, | ||
| slots: { | ||
| back, | ||
| default: actions | ||
| } | ||
| }); | ||
|
|
||
| it("renders correctly", () => { | ||
| const wrapper = mount(ActionBar, { | ||
| expect(wrapper.element).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("renders correct props and slots", () => { | ||
| expect(wrapper.find(".fd-action-bar__title").text()).toEqual(title); | ||
| expect(wrapper.find(".fd-action-bar__description").text()).toEqual( | ||
| description | ||
| ); | ||
| expect(wrapper.find(".fd-action-bar__back").text()).toEqual(back); | ||
| expect(wrapper.find(".fd-action-bar__actions").text()).toEqual(actions); | ||
| }); | ||
|
|
||
| describe("Without description", () => { | ||
| const wrapper = shallowMount(ActionBar, { | ||
| propsData: { | ||
| title: "Page Title", | ||
| description: "Action bar descrtiption" | ||
| title: "Page Title" | ||
| }, | ||
| slots: { | ||
| back: "Back", | ||
| default: "Actions" | ||
| } | ||
| }); | ||
| expect(wrapper.element).toMatchSnapshot(); | ||
|
|
||
| it("renders correctly", () => { | ||
| expect(wrapper.element).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("does not have description", () => { | ||
| expect(wrapper.contains(".fd-action-bar__description")).toBe(false); | ||
| }); | ||
| }); | ||
|
|
||
| it("renders without description", () => { | ||
| const wrapper = mount(ActionBar, { | ||
| propsData: { | ||
| title: "Page Title" | ||
| }, | ||
| describe("Title as slot", () => { | ||
| const title = "Page Title (slot)"; | ||
| const wrapper = shallowMount(ActionBar, { | ||
| slots: { | ||
| back: "Back", | ||
| default: "Actions" | ||
| title: { | ||
| render(h: CreateElement): VNode { | ||
| return h("div", {}, title); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| expect(wrapper.element).toMatchSnapshot(); | ||
| expect(wrapper.find(".fd-action-bar__description").exists()).toBe(false); | ||
|
|
||
| it("renders correctly", () => { | ||
| expect(wrapper.element).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("renders title as slot", () => { | ||
| expect(wrapper.find(".fd-action-bar__title div").text()).toBe(title); | ||
| }); | ||
| }); | ||
|
|
||
| describe("Description as slot", () => { | ||
| const description = "Page Description (slot)"; | ||
| const wrapper = shallowMount(ActionBar, { | ||
| slots: { | ||
| description: { | ||
| render(h: CreateElement): VNode { | ||
| return h("div", {}, description); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| it("renders correctly", () => { | ||
| expect(wrapper.element).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("renders title as slot", () => { | ||
| expect(wrapper.find(".fd-action-bar__description div").text()).toBe( | ||
| description | ||
| ); | ||
| }); | ||
| }); | ||
| }); |
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