Update Typography and Icon tests. (elastic#13081)

cjcenizal · Aug 16, 2017 · f09d5b1 · f09d5b1
1 parent e807c77
commit f09d5b1
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 21 deletions.
diff --git a/ui_framework/src/components/icon/__snapshots__/icon.test.js.snap b/ui_framework/src/components/icon/__snapshots__/icon.test.js.snap
@@ -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"
   />
@@ -46,6 +84,9 @@ exports[`KuiIcon renders type dashboardApp 1`] = `
 <svg
   class="kuiIcon kuiIcon--medium"
 >
+  <title>
+    dashboard app icon
+  </title>
   <use
     href="#app_dashboard"
   />
@@ -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"
   />
@@ -66,6 +110,9 @@ exports[`KuiIcon renders type discoverApp 1`] = `
 <svg
   class="kuiIcon kuiIcon--medium"
 >
+  <title>
+    discover app icon
+  </title>
   <use
     href="#app_discover"
   />
@@ -76,6 +123,9 @@ exports[`KuiIcon renders type graphApp 1`] = `
 <svg
   class="kuiIcon kuiIcon--medium"
 >
+  <title>
+    graph app icon
+  </title>
   <use
     href="#app_graph"
   />
@@ -86,6 +136,9 @@ exports[`KuiIcon renders type kibanaLogo 1`] = `
 <svg
   class="kuiIcon kuiIcon--medium"
 >
+  <title>
+    kibana logo icon
+  </title>
   <use
     href="#logo"
   />
@@ -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"
   />
@@ -106,6 +162,9 @@ exports[`KuiIcon renders type search 1`] = `
 <svg
   class="kuiIcon kuiIcon--medium"
 >
+  <title>
+    search icon
+  </title>
   <use
     href="#search"
   />
@@ -116,6 +175,9 @@ exports[`KuiIcon renders type timelionApp 1`] = `
 <svg
   class="kuiIcon kuiIcon--medium"
 >
+  <title>
+    timelion app icon
+  </title>
   <use
     href="#app_timelion"
   />
@@ -126,6 +188,9 @@ exports[`KuiIcon renders type user 1`] = `
 <svg
   class="kuiIcon kuiIcon--medium"
 >
+  <title>
+    user icon
+  </title>
   <use
     href="#user"
   />
@@ -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>
+`;
diff --git a/ui_framework/src/components/icon/icon.js b/ui_framework/src/components/icon/icon.js
@@ -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

diff --git a/ui_framework/src/components/icon/icon.test.js b/ui_framework/src/components/icon/icon.test.js
@@ -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)

diff --git a/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap b/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap
@@ -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>

diff --git a/ui_framework/src/components/typography/typography.js b/ui_framework/src/components/typography/typography.js
@@ -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);