Skip to content

Commit

Permalink
added BreadcrumbItem and updated ref for Tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@dfee
dfee committed Dec 1, 2018
1 parent a46c62a commit 45c55ad
Show file tree
Hide file tree
Showing 8 changed files with 148 additions and 279 deletions.
10 changes: 8 additions & 2 deletions src/__tests__/__snapshots__/index.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,15 @@ Object {
},
"Breadcrumb": Object {
"$$typeof": Symbol(react.forward_ref),
"Item": Object {
"$$typeof": Symbol(react.forward_ref),
"defaultProps": Object {
"as": "a",
},
"render": [Function],
},
"defaultProps": Object {
"as": "a",
"items": Array [],
"as": "nav",
},
"render": [Function],
},
Expand Down
118 changes: 18 additions & 100 deletions src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,14 @@ exports[`Breadcrumb component should be a Breadcrumb 1`] = `
className="breadcrumb"
>
<ul>
<li
className=""
>
<li>
<a
href="/"
>
Home
</a>
</li>
<li
className=""
>
<li>
<a
href="/section"
>
Expand All @@ -36,60 +32,6 @@ exports[`Breadcrumb component should be a Breadcrumb 1`] = `
</nav>
`;

exports[`Breadcrumb component should not pass along item.url as hrefAttr prop on 'as' component when hrefAttr is not supplied 1`] = `
<nav
className="breadcrumb"
>
<ul>
<li
className=""
>
<div />
</li>
<li
className=""
>
<div />
</li>
<li
className="is-active"
>
<div />
</li>
</ul>
</nav>
`;

exports[`Breadcrumb component should pass along item.url as hrefAttr prop on 'as' component when hrefAttr is supplied 1`] = `
<nav
className="breadcrumb"
>
<ul>
<li
className=""
>
<div>
#1
</div>
</li>
<li
className=""
>
<div>
#2
</div>
</li>
<li
className="is-active"
>
<div>
#3
</div>
</li>
</ul>
</nav>
`;

exports[`Breadcrumb component should use inline style and custom size 1`] = `
<nav
className="breadcrumb is-large"
Expand All @@ -100,18 +42,14 @@ exports[`Breadcrumb component should use inline style and custom size 1`] = `
}
>
<ul>
<li
className=""
>
<li>
<a
href="/"
>
Home
</a>
</li>
<li
className=""
>
<li>
<a
href="/section"
>
Expand All @@ -136,18 +74,14 @@ exports[`Breadcrumb component should use separator arrow 1`] = `
className="breadcrumb has-arrow-separator"
>
<ul>
<li
className=""
>
<li>
<a
href="#1"
>
Storybook
</a>
</li>
<li
className=""
>
<li>
<a
href="#2"
>
Expand All @@ -172,18 +106,14 @@ exports[`Breadcrumb component should use separator bullet 1`] = `
className="breadcrumb has-bullet-separator"
>
<ul>
<li
className=""
>
<li>
<a
href="#1"
>
Storybook
</a>
</li>
<li
className=""
>
<li>
<a
href="#2"
>
Expand All @@ -208,18 +138,14 @@ exports[`Breadcrumb component should use separator dot 1`] = `
className="breadcrumb has-dot-separator"
>
<ul>
<li
className=""
>
<li>
<a
href="#1"
>
Storybook
</a>
</li>
<li
className=""
>
<li>
<a
href="#2"
>
Expand All @@ -239,23 +165,19 @@ exports[`Breadcrumb component should use separator dot 1`] = `
</nav>
`;

exports[`Breadcrumb component should use separator null 1`] = `
exports[`Breadcrumb component should use separator succeeds 1`] = `
<nav
className="breadcrumb"
className="breadcrumb has-succeeds-separator"
>
<ul>
<li
className=""
>
<li>
<a
href="#1"
>
Storybook
</a>
</li>
<li
className=""
>
<li>
<a
href="#2"
>
Expand All @@ -275,23 +197,19 @@ exports[`Breadcrumb component should use separator null 1`] = `
</nav>
`;

exports[`Breadcrumb component should use separator succeeds 1`] = `
exports[`Breadcrumb component should use separator undefined 1`] = `
<nav
className="breadcrumb has-succeeds-separator"
className="breadcrumb"
>
<ul>
<li
className=""
>
<li>
<a
href="#1"
>
Storybook
</a>
</li>
<li
className=""
>
<li>
<a
href="#2"
>
Expand Down
129 changes: 35 additions & 94 deletions src/components/breadcrumb/__tests__/breadcrumb.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,58 @@
import React from "react";
import renderer from "react-test-renderer";

import { Breadcrumb, BreadcrumbProps } from "../breadcrumb";
import { Breadcrumb, BREADCRUMB_SEPARATORS } from "../breadcrumb";

describe("Breadcrumb component", () => {
it("should be a Breadcrumb", () => {
const component = renderer.create(
<Breadcrumb
items={[
{
name: "Home",
url: "/",
},
{
name: "Section",
url: "/section",
},
{
active: true,
name: "Details",
url: "/detail",
},
]}
/>,
<Breadcrumb>
{[
{ href: "/", name: "Home" },
{ href: "/section", name: "Section" },
{ active: true, href: "/detail", name: "Details" },
].map(({ active, href, name }, i) => (
<Breadcrumb.Item active={active} href={href} key={i}>
{name}
</Breadcrumb.Item>
))}
</Breadcrumb>,
);
expect(component.toJSON()).toMatchSnapshot();
});

[undefined, "identifier"].map(hrefAttr =>
it(`should ${
hrefAttr ? "" : "not "
}pass along item.url as hrefAttr prop on 'as' component when hrefAttr is ${
hrefAttr ? "" : "not "
}supplied`, () => {
interface CustomProps {
identifier?: string;
}
const Custom: React.FC<CustomProps> = ({ identifier }) => (
<div>{identifier}</div>
);

const component = renderer.create(
<Breadcrumb<typeof Custom>
as={Custom}
hrefAttr={hrefAttr}
items={[
{
name: "Storybook",
url: "#1",
},
{
name: "Breadcrumb",
url: "#2",
},
{
active: true,
name: "Breadcrumb Types",
url: "#3",
},
]}
/>,
);
expect(component.toJSON()).toMatchSnapshot();
}),
);

[null, "arrow", "dot", "bullet", "succeeds"].map(separator =>
[undefined, ...BREADCRUMB_SEPARATORS].map(separator =>
it(`should use separator ${separator}`, () => {
const component = renderer.create(
<Breadcrumb
separator={separator as BreadcrumbProps["separator"]}
items={[
{
name: "Storybook",
url: "#1",
},
{
name: "Breadcrumb",
url: "#2",
},
{
active: true,
name: "Breadcrumb Types",
url: "#3",
},
]}
/>,
<Breadcrumb separator={separator}>
{[
{ href: "#1", name: "Storybook" },
{ href: "#2", name: "Breadcrumb" },
{ active: true, href: "#3", name: "Breadcrumb Types" },
].map(({ active, href, name }, i) => (
<Breadcrumb.Item active={active} href={href} key={i}>
{name}
</Breadcrumb.Item>
))}
</Breadcrumb>,
);
expect(component.toJSON()).toMatchSnapshot();
}),
);

it("should use inline style and custom size", () => {
const component = renderer.create(
<Breadcrumb
style={{ marginTop: 10 }}
size="large"
items={[
{
name: "Home",
url: "/",
},
{
name: "Section",
url: "/section",
},
{
active: true,
name: "Details",
url: "/detail",
},
]}
/>,
<Breadcrumb style={{ marginTop: 10 }} size="large">
{[
{ href: "/", name: "Home" },
{ href: "/section", name: "Section" },
{ active: true, href: "/detail", name: "Details" },
].map(({ active, href, name }, i) => (
<Breadcrumb.Item active={active} href={href} key={i}>
{name}
</Breadcrumb.Item>
))}
</Breadcrumb>,
);
expect(component.toJSON()).toMatchSnapshot();
});
Expand Down
Loading

0 comments on commit 45c55ad

Please sign in to comment.