react-oui-icons - npm Package Compare versions

Comparing version 3.0.1 to 3.1.0

CHANGELOG.md

@@ -9,2 +9,5 @@ # Change Log
 
+## 3.1.0 - 2021-04-13
+- [Feature] Updated component to display custom title.
+
 ## 3.0.1 - 2021-02-17
@@ -11,0 +14,0 @@ - [Patch] Update `ruleset` and `variations` svgs

dist/Icon/index.test.js

@@ -74,16 +74,60 @@ "use strict";
   });
-  it('should contain <title> with name of the icon', function () {
-    var component = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], {
-      name: "ab"
-    }));
-    expect(component.contains(_react["default"].createElement("title", null, "ab"))).toEqual(true);
+  describe('When title prop is provided', function () {
+    var props;
+    var testTitle = 'test title';
+    beforeEach(function () {
+      props = {
+        title: testTitle,
+        name: 'winner'
+      };
+    });
+    describe('When component mounts', function () {
+      var wrapper;
+      beforeEach(function () {
+        wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], props));
+      });
+      it('should contain <title> with the provided title', function () {
+        expect(wrapper.contains(_react["default"].createElement("title", null, testTitle))).toBeTruthy();
+      });
+    });
   });
-  it('should not contain <title> when the "help" icon is used', function () {
-    var component = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], {
-      name: "help"
-    }));
-    expect(component.contains(_react["default"].createElement("title", null, "help"))).toEqual(false);
-  }); //
-  // const component = shallow(<Icon name='bell' />)
-  // console.log(component);
+  describe('When title prop is not provided', function () {
+    var props;
+    describe('When icon is different than "help"', function () {
+      var testName = 'ab';
+      beforeEach(function () {
+        props = {
+          name: testName
+        };
+      });
+      describe('When component mounts', function () {
+        var wrapper;
+        beforeEach(function () {
+          wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], props));
+        });
+        it('should contain <title> with the name of the icon', function () {
+          expect(wrapper.find('title').exists()).toBeTruthy();
+          expect(wrapper.contains(_react["default"].createElement("title", null, testName))).toBeTruthy();
+        });
+      });
+    });
+    describe('When the "help" icon is used', function () {
+      var testName = 'help';
+      beforeEach(function () {
+        props = {
+          name: testName
+        };
+      });
+      describe('When component mounts', function () {
+        var wrapper;
+        beforeEach(function () {
+          wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], props));
+        });
+        it('should not contain a <title> element', function () {
+          expect(wrapper.contains(_react["default"].createElement("title", null, testName))).toBeFalsy();
+          expect(wrapper.find('title').exists()).toBeFalsy();
+        });
+      });
+    });
+  });
 });

package.json

 {
   "name": "react-oui-icons",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "module/index.js",

src/Icon/index.js

@@ -16,2 +16,3 @@ import PropTypes from "prop-types";
   style: PropTypes.object,
+  title: PropTypes.string,
   viewBox: PropTypes.string,
@@ -65,2 +66,3 @@ };
   style = {},
+  title = "",
 }) => {
@@ -97,3 +99,3 @@ const icon = findIcon(`${name}`);
     <svg data-oui-component={true} {...props}>
-      {icon.title !== HELP_ICON_TITLE && <title>{icon.title}</title>}
+      {icon.title !== HELP_ICON_TITLE && <title>{title || icon.title}</title>}
       <desc>{description}</desc>
@@ -100,0 +102,0 @@ {content}

src/Icon/index.test.js

@@ -72,21 +72,75 @@ import React from 'react'
 
-  it('should contain <title> with name of the icon', () => {
-    const component = shallow(
-      <Icon
-        name="ab"
-      />);
-    expect(component.contains(<title>ab</title>)).toEqual(true);
+  describe('When title prop is provided', () => {
+    let props;
+    const testTitle='test title';
+
+    beforeEach(() => {
+      props = {
+        title: testTitle,
+        name: 'winner'
+      };
+    });
+
+    describe('When component mounts', () => {
+      let wrapper;
+
+      beforeEach(() => {
+        wrapper = shallow(<Icon {...props} />);
+      });
+
+      it('should contain <title> with the provided title', () => {
+        expect(wrapper.contains(<title>{testTitle}</title>)).toBeTruthy();
+      });
+    })
   });
 
-  it('should not contain <title> when the "help" icon is used', () => {
-    const component = shallow(
-      <Icon
-        name="help"
-      />);
-    expect(component.contains(<title>help</title>)).toEqual(false);
+  describe('When title prop is not provided', () => {
+    let props;
+
+    describe('When icon is different than "help"', () => {
+      const testName = 'ab';
+
+      beforeEach(() => {
+        props = {
+          name: testName
+        };
+      });
+
+      describe('When component mounts', () => {
+        let wrapper;
+
+        beforeEach(() => {
+          wrapper = shallow(<Icon {...props} />)
+        });
+
+        it('should contain <title> with the name of the icon', () => {
+          expect(wrapper.find('title').exists()).toBeTruthy();
+          expect(wrapper.contains(<title>{testName}</title>)).toBeTruthy();
+        });
+      });
+    });
+
+    describe('When the "help" icon is used', () => {
+      const testName = 'help';
+
+      beforeEach(() => {
+        props = {
+          name: testName
+        };
+      });
+
+      describe('When component mounts', () => {
+        let wrapper;
+
+        beforeEach(() => {
+          wrapper = shallow(<Icon {...props} />);
+        });
+
+        it('should not contain a <title> element', () => {
+          expect(wrapper.contains(<title>{testName}</title>)).toBeFalsy();
+          expect(wrapper.find('title').exists()).toBeFalsy();
+        });
+      });
+    });
   });
-  //
-
-  // const component = shallow(<Icon name='bell' />)
-  // console.log(component);
 });

New alerts

Unpopular package

Quality

This package is not very popular.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

451324

increased by0.64%

Lines of code

7156

increased by1.27%

No dependency changes