Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[K7] Update Typography and Icon tests. #13081

Merged
merged 1 commit into from
Jul 24, 2017
Merged

[K7] Update Typography and Icon tests. #13081

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 99 additions & 5 deletions ui_framework/src/components/icon/__snapshots__/icon.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,75 @@ exports[`KuiIcon is rendered 1`] = `
aria-label="aria-label"
class="kuiIcon testClass1 testClass2 kuiIcon--medium"
data-test-subj="test subject string"
/>
>
<title>
search icon
</title>
<use
href="#search"
/>
</svg>
`;

exports[`KuiIcon renders size large 1`] = `
<svg
class="kuiIcon kuiIcon--large"
/>
>
<title>
search icon
</title>
<use
href="#search"
/>
</svg>
`;

exports[`KuiIcon renders size medium 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
/>
>
<title>
search icon
</title>
<use
href="#search"
/>
</svg>
`;

exports[`KuiIcon renders size xLarge 1`] = `
<svg
class="kuiIcon kuiIcon--xLarge"
/>
>
<title>
search icon
</title>
<use
href="#search"
/>
</svg>
`;

exports[`KuiIcon renders size xxLarge 1`] = `
<svg
class="kuiIcon kuiIcon--xxLarge"
/>
>
<title>
search icon
</title>
<use
href="#search"
/>
</svg>
`;

exports[`KuiIcon renders type apps 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
apps icon
</title>
<use
href="#apps"
/>
Expand All @@ -46,6 +84,9 @@ exports[`KuiIcon renders type dashboardApp 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
dashboard app icon
</title>
<use
href="#app_dashboard"
/>
Expand All @@ -56,6 +97,9 @@ exports[`KuiIcon renders type devToolsApp 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
dev tools app icon
</title>
<use
href="#app_devtools"
/>
Expand All @@ -66,6 +110,9 @@ exports[`KuiIcon renders type discoverApp 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
discover app icon
</title>
<use
href="#app_discover"
/>
Expand All @@ -76,6 +123,9 @@ exports[`KuiIcon renders type graphApp 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
graph app icon
</title>
<use
href="#app_graph"
/>
Expand All @@ -86,6 +136,9 @@ exports[`KuiIcon renders type kibanaLogo 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
kibana logo icon
</title>
<use
href="#logo"
/>
Expand All @@ -96,6 +149,9 @@ exports[`KuiIcon renders type machineLearningApp 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
machine learning app icon
</title>
<use
href="#app_ml"
/>
Expand All @@ -106,6 +162,9 @@ exports[`KuiIcon renders type search 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
search icon
</title>
<use
href="#search"
/>
Expand All @@ -116,6 +175,9 @@ exports[`KuiIcon renders type timelionApp 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
timelion app icon
</title>
<use
href="#app_timelion"
/>
Expand All @@ -126,6 +188,9 @@ exports[`KuiIcon renders type user 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
user icon
</title>
<use
href="#user"
/>
Expand All @@ -136,8 +201,37 @@ exports[`KuiIcon renders type visualizeApp 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
visualize app icon
</title>
<use
href="#app_visualize"
/>
</svg>
`;

exports[`KuiIcon title defaults to a humanized version of the type 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
dashboard app icon
</title>
<use
href="#app_dashboard"
/>
</svg>
`;

exports[`KuiIcon title is rendered 1`] = `
<svg
class="kuiIcon kuiIcon--medium"
>
<title>
a custom title
</title>
<use
href="#search"
/>
</svg>
`;
2 changes: 1 addition & 1 deletion ui_framework/src/components/icon/icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const KuiIcon = ({
title
? <title>{title}</title>
: <title>{`${humanizeCamelCase(type)} icon`}</title>;
const svgReference = type ? <use href={`#${typeToIconMap[type]}`} /> : undefined;
const svgReference = <use href={`#${typeToIconMap[type]}`} />;

return (
<svg
Expand Down
24 changes: 22 additions & 2 deletions ui_framework/src/components/icon/icon.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,38 @@ import {
describe('KuiIcon', () => {
test('is rendered', () => {
const component = render(
<KuiIcon { ...requiredProps } />
<KuiIcon type="search" { ...requiredProps } />
);

expect(component)
.toMatchSnapshot();
});

describe('title', () => {
test('defaults to a humanized version of the type', () => {
const component = render(
<KuiIcon type="dashboardApp" />
);

expect(component)
.toMatchSnapshot();
});

test('is rendered', () => {
const component = render(
<KuiIcon type="search" title="a custom title" />
);

expect(component)
.toMatchSnapshot();
});
});

describe('renders size', () => {
SIZES.forEach(size => {
test(size, () => {
const component = render(
<KuiIcon size={size} />
<KuiIcon type="search" size={size} />
);

expect(component)
Expand Down
20 changes: 8 additions & 12 deletions ui_framework/src/components/typography/__snapshots__/typography.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`KuiLargeTitle is rendered 1`] = `
exports[`KuiText is rendered 1`] = `
<h1
aria-label="aria-label"
class="kuiLargeTitle testClass1 testClass2"
class="kuiText testClass1 testClass2"
data-test-subj="test subject string"
>
Hello
</h1>
`;

exports[`KuiMediumTitle is rendered 1`] = `
exports[`KuiTitle is rendered 1`] = `
<h1
aria-label="aria-label"
class="kuiMediumTitle testClass1 testClass2"
class="kuiTitle testClass1 testClass2"
data-test-subj="test subject string"
>
Hello
</h1>
`;

exports[`KuiSmallTitle is rendered 1`] = `
exports[`KuiTitle renders size large 1`] = `
<h1
aria-label="aria-label"
class="kuiSmallTitle testClass1 testClass2"
data-test-subj="test subject string"
class="kuiTitle kuiTitle--large"
>
Hello
</h1>
`;

exports[`KuiText is rendered 1`] = `
exports[`KuiTitle renders size small 1`] = `
<h1
aria-label="aria-label"
class="kuiText testClass1 testClass2"
data-test-subj="test subject string"
class="kuiTitle kuiTitle--small"
>
Hello
</h1>
Expand Down
2 changes: 1 addition & 1 deletion ui_framework/src/components/typography/typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const sizeToClassNameMap = {
large: 'kuiTitle--large',
};

const SIZES = Object.keys(sizeToClassNameMap);
export const SIZES = Object.keys(sizeToClassNameMap);

export const KuiTitle = ({ size, children, className, ...rest }) => {
const classes = classNames('kuiTitle', sizeToClassNameMap[size], className);
Expand Down