Added some styles test case. (#571)

* Added some styles test case.

* Update some test case.

*  Update some test case.

*  Update some test case.

* Update case for Firefox

* Update case for Notification&Alert (#575)

* Update karma config , only use Chrome in develop.

* Update case for Firefox

* Update package-lock use registry.npm.org

karma.conf.js

@@ -1,5 +1,6 @@
 /**
  * Run all tests: `npm run tdd`
+ * Run all styles tests: `M=styles npm run tdd`
  * Run a component test: `M=Button npm run tdd`
  * Run a test of a file: `src/Picker/test/PickerToggleSpec.js npm run tdd`
  */
@@ -77,6 +78,12 @@ module.exports = config => {
       ChromeCi: {
         base: 'Chrome',
         flags: ['--no-sandbox']
+      },
+      FirefoxAutoAllowGUM: {
+        base: 'Firefox',
+        prefs: {
+          'media.navigator.permission.disabled': true
+        }
       }
     },
     coverageReporter: {

package.json

@@ -99,7 +99,6 @@
     "babel-plugin-transform-dev": "^2.0.1",
     "brfs": "^1.6.1",
     "chai": "^4.1.0",
-    "color": "^3.1.2",
     "coveralls": "^2.13.1",
     "css-loader": "^0.28.11",
     "cssnano": "^3.10.0",
@@ -144,6 +143,7 @@
     "style-loader": "^0.20.3",
     "stylelint": "9.2.0",
     "stylelint-config-standard": "^18.2.0",
+    "tinycolor2": "^1.4.1",
     "typescript": "^3.5.2",
     "webpack": "^4.5.0",
     "webpack-bundle-analyzer": "^2.11.1",

src/Alert/test/AlertStylesSpec.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Alert from '../index';
+import { getStyle, toRGB } from '@test/testUtils';
+
+import '../styles/index';
+
+describe('Alert styles', () => {
+  it('Should render the correct background color', () => {
+    Alert.info('This is a informations.', 0);
+    const dom = document.body.querySelector('.rs-alert');
+    assert.equal(
+      getStyle(dom.querySelector('.rs-alert-item-content'), 'backgroundColor'),
+      toRGB('#e9f5fe')
+    );
+  });
+});

src/Avatar/test/AvatarStylesSpec.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Avatar from '../index';
+import { createTestContainer, getDOMNode, getStyle, toRGB, itChrome } from '@test/testUtils';
+
+import '../styles/index';
+
+describe('Avatar styles', () => {
+  it('Should render the correct background', () => {
+    const instanceRef = React.createRef();
+    ReactDOM.render(<Avatar ref={instanceRef} />, createTestContainer());
+    assert.equal(getStyle(getDOMNode(instanceRef.current), 'backgroundColor'), toRGB('#d9d9d9'));
+  });
+
+  it('Should apply size class', () => {
+    const instanceRef = React.createRef();
+    ReactDOM.render(<Avatar size="lg" ref={instanceRef} />, createTestContainer());
+    const dom = getDOMNode(instanceRef.current);
+    assert.equal(getStyle(dom, 'width'), '60px');
+    assert.equal(getStyle(dom, 'width'), getStyle(dom, 'height'));
+    assert.equal(getStyle(dom, 'font-size'), '26px');
+  });
+
+  // @description Can't get border-radius value in other browser except chrome
+  itChrome('Should render circle avatar', () => {
+    const instanceRef = React.createRef();
+    ReactDOM.render(<Avatar ref={instanceRef} circle />, createTestContainer());
+    assert.equal(getStyle(getDOMNode(instanceRef.current), 'borderRadius'), '50%');
+  });
+});

src/Badge/test/BadgeStylesSpec.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Badge from '../index';
+import { createTestContainer, getDOMNode, getStyle, toRGB, itChrome } from '@test/testUtils';
+
+import '../styles/index';
+
+describe('Badge styles', () => {
+  it('Independent should render correct style ', () => {
+    const instanceRef = React.createRef();
+    ReactDOM.render(<Badge ref={instanceRef} />, createTestContainer());
+    const dom = getDOMNode(instanceRef.current);
+    assert.equal(getStyle(dom, 'width'), '8px');
+    assert.equal(getStyle(dom, 'width'), getStyle(dom, 'height'));
+  });
+
+  // @description Can't get border-radius value in other browser except chrome
+  itChrome('Independent should render correct style ', () => {
+    const instanceRef = React.createRef();
+    ReactDOM.render(<Badge ref={instanceRef} />, createTestContainer());
+    const dom = getDOMNode(instanceRef.current);
+    assert.equal(getStyle(dom, 'borderRadius'), '4px');
+  });
+
+  it('Should render correct color', () => {
+    const instanceRef = React.createRef();
+    ReactDOM.render(<Badge ref={instanceRef} />, createTestContainer());
+    const dom = getDOMNode(instanceRef.current);
+    assert.equal(getStyle(dom, 'color'), toRGB('#fff'));
+  });
+});

src/Breadcrumb/test/BreadcrumbItemStylesSpec.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Breadcrumb from '../index';
+import { createTestContainer, getDOMNode, getStyle, toRGB } from '@test/testUtils';
+
+import '../styles/index';
+
+describe('BreadcrumbItem styles', () => {
+  it('Should render correct styles', () => {
+    const instanceRef = React.createRef();
+    ReactDOM.render(
+      <Breadcrumb ref={instanceRef}>
+        <Breadcrumb.Item>1</Breadcrumb.Item>
+        <Breadcrumb.Item>2</Breadcrumb.Item>
+      </Breadcrumb>,
+      createTestContainer()
+    );
+    const dom = getDOMNode(instanceRef.current);
+    const li = dom.firstElementChild;
+    const a = li.querySelector('a');
+    assert.equal(getStyle(li, 'fontSize'), '12px');
+    assert.equal(getStyle(a, 'cursor'), 'pointer');
+  });
+
+  it('Active item should render correct color', () => {
+    const instanceRef = React.createRef();
+    ReactDOM.render(
+      <Breadcrumb ref={instanceRef}>
+        <Breadcrumb.Item active>1</Breadcrumb.Item>
+      </Breadcrumb>,
+      createTestContainer()
+    );
+    const dom = getDOMNode(instanceRef.current);
+    const li = dom.firstElementChild;
+    assert.equal(getStyle(li, 'color'), toRGB('#8e8e93'));
+  });
+});