Merge pull request #21 from chilllab/test

wwayne · web-flow · commit 3e570a671927 · 2021-06-28T23:33:41.000+08:00
Test
diff --git a/.eslintrc b/.eslintrc
@@ -69,6 +69,7 @@
     "import/no-extraneous-dependencies": "off",
     "jsx-a11y/control-has-associated-label": "off",
     "jsx-a11y/anchor-has-content": "off",
-    "react/no-access-state-in-setstate": "off"
+    "react/no-access-state-in-setstate": "off",
+    "no-plusplus": "off"
   }
 }
diff --git a/.npmignore b/.npmignore
@@ -2,21 +2,23 @@
 *.log
 .DS_Store*
 .idea/
+report.*.json
 
 // specific files
 node_modules/
 test/
 CHANGELOG.md
 src/
 demo/
+test/
 
 // setting files
 .babelrc
 .travis.yml
 .eslintrc
 .eslintignore
+.travis.yml
 
 Makefile
 README.md
-rollup.config.js
-rollup.config.demo.js
+rollup.config.js
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,12 @@
+language: node_js
+cache:
+  directories:
+    - node_modules
+node_js:
+  - "16"
+notifications:
+  email: false
+install:
+  - yarn
+script:
+  - make test
diff --git a/Makefile b/Makefile
@@ -7,9 +7,15 @@ lint-fix:
 	@npx eslint --fix .
 dev:
 	@echo "Start server..."
-	@NODE_ENV=development npx rollup -c rollup.config.demo.js -w
+	@NODE_ENV=development npx rollup -c ./demo/rollup.config.js -w
 .PHONY: lint lint-fix dev
 
+# Test
+test: lint-fix
+	@echo "Running test..."
+	@npx jest
+.PHONY: test
+
 # Deployment
 build:
 	@echo "Building lib..."
@@ -20,5 +26,5 @@ build:
 build-demo:
 	@echo "Building demo..."
 	@rm -rf ./demo/dist
-	@NODE_ENV=production npx rollup -c rollup.config.demo.js
+	@NODE_ENV=production npx rollup -c ./demo/rollup.config.js
 .PHONY: build build-demo
diff --git a/README.md b/README.md
@@ -99,12 +99,23 @@ The options can be passed into genConfig or as React props
     ```sh
     $ make dev
     ```
-5. Open the browser to reivew the demo:
+4. Open the browser to reivew the demo:
     ```sh
     $ open http://localhost:5555
     ```
-7. Edit the files inside [src](/src).
+5. Edit the files inside [src](/src).
 
+## Test
+
+1. Lint test:
+    ```sh
+    $ make lint-test
+    ```
+
+2. code test:
+    ```sh
+    $ make test
+    ```
 
 ## License
 
diff --git a/demo/rollup.config.js b/demo/rollup.config.js
@@ -1,3 +1,4 @@
+import path from "path";
 import babel from "rollup-plugin-babel";
 import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
@@ -23,19 +24,19 @@ if (process.env.NODE_ENV === "development" && process.env.MODE !== "build") {
     serve({
       open: false,
       verbose: true,
-      contentBase: ["demo"],
+      contentBase: [path.resolve(__dirname, "./")],
       host: "localhost",
       port: 5555
     }),
-    livereload({ watch: "demo" })
+    livereload({ watch: path.resolve(__dirname, "./") })
   ]);
 }
 
 export default {
-  input: "demo/index.js",
+  input: path.resolve(__dirname, "./index.js"),
   output: [
     {
-      file: "demo/dist/index.js",
+      file: path.resolve(__dirname, "./dist/index.js"),
       format: "iife",
       sourcemap: true
     }
diff --git a/package.json b/package.json
@@ -31,13 +31,15 @@
     "babel-eslint": "^10.1.0",
     "classnames": "^2.3.1",
     "dom-to-image": "^2.6.0",
+    "enzyme": "^3.11.0",
     "eslint": "^7.27.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.23.3",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "file-saver": "^2.0.5",
+    "jest": "^27.0.5",
     "prop-types": "^15.7.2",
     "rc-slider": "^9.7.2",
     "react": "^17.0.2",
@@ -54,5 +56,17 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/chilllab/react-nice-avatar"
-  }
+  },
+  "jest": {
+    "testRegex": ".*\\.(test|spec)\\.js$",
+    "moduleFileExtensions": [
+      "js"
+    ],
+    "moduleDirectories": [
+      "node_modules"
+    ]
+  },
+  "browserslist": [
+    "last 2 versions"
+  ]
 }
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
+import { genConfig } from "./utils";
+
 import Face from "./face";
 import Hair from "./hair";
 import Hat from "./hat";
@@ -12,42 +14,6 @@ import Nose from "./nose";
 import Mouth from "./mouth";
 import Shirt from "./shirt";
 
-const sex = ["man", "woman"];
-const faceColor = ["#F9C9B6", "#AC6651"];
-const earSize = ["small", "big"];
-const hairColor = ["#000", "#fff", "#77311D", "#FC909F", "#D2EFF3", "#506AF4", "#F48150"];
-const hairStyleMan = ["normal", "thick", "mohawk"];
-const hairStyleWoman = ["normal", "womanLong", "womanShort"];
-const hatColor = ["#000", "#fff", "#77311D", "#FC909F", "#D2EFF3", "#506AF4", "#F48150"];
-const hatStyle = ["beanie", "turban", "none"];
-const eyeBrowWoman = ["up", "upWoman"];
-const eyeStyle = ["circle", "oval", "smile"];
-const noseStyle = ["short", "long", "round"];
-const mouthStyle = ["laugh", "smile", "peace"];
-const shirtStyle = ["hoody", "short", "polo"];
-const shirtColor = ["#9287FF", "#6BD9E9", "#FC909F", "#F4D150", "#77311D"];
-const bgColor = ["#9287FF", "#6BD9E9", "#FC909F", "#F4D150", "#E0DDFF", "#D2EFF3", "#FFEDEF", "#FFEBA4", "#506AF4", "#F48150", "#74D153"];
-const glassesStyle = ["round", "square", "none"];
-
-const _pickRandomFromList = (data, { avoidList = [], usually = [] } = {}) => {
-  // Filter out avoid options
-  const avoidSet = new Set(
-    avoidList.filter((item) => Boolean(item))
-  );
-  let myData = data.filter((item) => !avoidSet.has(item));
-
-  // Increase selecting possibility of usually options
-  const usuallyData = usually
-    .filter((item) => Boolean(item))
-    .reduce((acc, cur) => acc.concat(new Array(15).fill(cur)), []);
-  myData = myData.concat(usuallyData);
-
-  // Pick randon one from the list
-  const amount = myData.length;
-  const randomIdx = Math.floor(Math.random() * amount);
-  return myData[randomIdx];
-};
-
 export default class ReactNiceAvatar extends Component {
   static propTypes = {
     id: PropTypes.string,
@@ -160,69 +126,4 @@ export default class ReactNiceAvatar extends Component {
   }
 }
 
-export const genConfig = (userConfig = {}) => {
-  const response = {};
-
-  response.sex = userConfig.sex || _pickRandomFromList(sex);
-  response.faceColor = userConfig.faceColor || _pickRandomFromList(faceColor);
-  response.earSize = userConfig.earSize || _pickRandomFromList(earSize);
-  response.eyeStyle = userConfig.eyeStyle || _pickRandomFromList(eyeStyle);
-  response.noseStyle = userConfig.noseStyle || _pickRandomFromList(noseStyle);
-  response.mouthStyle = userConfig.mouthStyle || _pickRandomFromList(mouthStyle);
-  response.shirtStyle = userConfig.shirtStyle || _pickRandomFromList(shirtStyle);
-  response.glassesStyle = userConfig.glassesStyle || _pickRandomFromList(glassesStyle, { usually: ["none"] });
-
-  // Hair
-  let hairColorAvoidList = [];
-  let hairColorUsually = [];
-  if (!userConfig.hairColor) {
-    switch (response.sex) {
-      case "woman": {
-        hairColorAvoidList = response.faceColor === faceColor[1] && ["#77311D"] || [];
-        break;
-      }
-      case "man": {
-        hairColorUsually = ["#000"];
-      }
-    }
-  }
-  response.hairColor = userConfig.hairColor || _pickRandomFromList(hairColor, {
-    avoidList: hairColorAvoidList,
-    usually: hairColorUsually
-  });
-
-  let myHairStyle = userConfig.hairStyle;
-  if (!myHairStyle) {
-    switch (response.sex) {
-      case "man": {
-        myHairStyle = _pickRandomFromList(hairStyleMan, { usually: ["normal", "thick"] });
-        break;
-      }
-      case "woman": {
-        myHairStyle = _pickRandomFromList(hairStyleWoman);
-        break;
-      }
-    }
-  }
-  response.hairStyle = myHairStyle;
-
-  // Hat
-  response.hatStyle = userConfig.hatStyle || _pickRandomFromList(hatStyle, { usually: ["none"] });
-  response.hatColor = userConfig.hatColor || _pickRandomFromList(hatColor);
-  const _hairOrHatColor = response.hatStyle === "none" && response.hairColor || response.hatColor;
-
-  // Eyebrow
-  let myEyeBrowStyle = userConfig.eyeBrowStyle || "up";
-  if (!userConfig.eyeBrowStyle && response.sex === "woman") {
-    myEyeBrowStyle = _pickRandomFromList(eyeBrowWoman);
-  }
-  response.eyeBrowStyle = myEyeBrowStyle;
-
-  // Shirt color
-  response.shirtColor = userConfig.shirtColor || _pickRandomFromList(shirtColor, { avoidList: [_hairOrHatColor] });
-
-  // Background color
-  response.bgColor = userConfig.bgColor || _pickRandomFromList(bgColor, { avoidList: [_hairOrHatColor, response.shirtColor] });
-
-  return response;
-};
+export { genConfig } from "./utils";
diff --git a/src/utils.js b/src/utils.js
@@ -0,0 +1,108 @@
+/**
+ * Pick random one from the list
+ */
+export const pickRandomFromList = (data, { avoidList = [], usually = [] } = {}) => {
+  // Filter out avoid options
+  const avoidSet = new Set(
+    avoidList.filter((item) => Boolean(item))
+  );
+  let myData = data.filter((item) => !avoidSet.has(item));
+
+  // Increase selecting possibility of usually options
+  const usuallyData = usually
+    .filter((item) => Boolean(item))
+    .reduce((acc, cur) => acc.concat(new Array(15).fill(cur)), []);
+  myData = myData.concat(usuallyData);
+
+  // Pick randon one from the list
+  const amount = myData.length;
+  const randomIdx = Math.floor(Math.random() * amount);
+  return myData[randomIdx];
+};
+
+/**
+ * Gennerate avatar configurations
+ */
+export const defaultOptions = {
+  sex: ["man", "woman"],
+  faceColor: ["#F9C9B6", "#AC6651"],
+  earSize: ["small", "big"],
+  hairColor: ["#000", "#fff", "#77311D", "#FC909F", "#D2EFF3", "#506AF4", "#F48150"],
+  hairStyleMan: ["normal", "thick", "mohawk"],
+  hairStyleWoman: ["normal", "womanLong", "womanShort"],
+  hatColor: ["#000", "#fff", "#77311D", "#FC909F", "#D2EFF3", "#506AF4", "#F48150"],
+  hatStyle: ["beanie", "turban", "none"],
+  eyeBrowWoman: ["up", "upWoman"],
+  eyeStyle: ["circle", "oval", "smile"],
+  glassesStyle: ["round", "square", "none"],
+  noseStyle: ["short", "long", "round"],
+  mouthStyle: ["laugh", "smile", "peace"],
+  shirtStyle: ["hoody", "short", "polo"],
+  shirtColor: ["#9287FF", "#6BD9E9", "#FC909F", "#F4D150", "#77311D"],
+  bgColor: ["#9287FF", "#6BD9E9", "#FC909F", "#F4D150", "#E0DDFF", "#D2EFF3", "#FFEDEF", "#FFEBA4", "#506AF4", "#F48150", "#74D153"]
+};
+export const genConfig = (userConfig = {}) => {
+  const response = {};
+  response.sex = userConfig.sex || pickRandomFromList(defaultOptions.sex);
+  response.faceColor = userConfig.faceColor || pickRandomFromList(defaultOptions.faceColor);
+  response.earSize = userConfig.earSize || pickRandomFromList(defaultOptions.earSize);
+  response.eyeStyle = userConfig.eyeStyle || pickRandomFromList(defaultOptions.eyeStyle);
+  response.noseStyle = userConfig.noseStyle || pickRandomFromList(defaultOptions.noseStyle);
+  response.mouthStyle = userConfig.mouthStyle || pickRandomFromList(defaultOptions.mouthStyle);
+  response.shirtStyle = userConfig.shirtStyle || pickRandomFromList(defaultOptions.shirtStyle);
+  response.glassesStyle = userConfig.glassesStyle || pickRandomFromList(defaultOptions.glassesStyle, { usually: ["none"] });
+
+  // Hair
+  let hairColorAvoidList = [];
+  let hairColorUsually = [];
+  if (!userConfig.hairColor) {
+    switch (response.sex) {
+      case "woman": {
+        hairColorAvoidList = response.faceColor === defaultOptions.faceColor[1] && ["#77311D"] || [];
+        break;
+      }
+      case "man": {
+        hairColorUsually = ["#000"];
+      }
+    }
+  }
+  response.hairColor = userConfig.hairColor || pickRandomFromList(defaultOptions.hairColor, {
+    avoidList: hairColorAvoidList,
+    usually: hairColorUsually
+  });
+
+  let myHairStyle = userConfig.hairStyle;
+  if (!myHairStyle) {
+    switch (response.sex) {
+      case "man": {
+        myHairStyle = pickRandomFromList(defaultOptions.hairStyleMan, { usually: ["normal", "thick"] });
+        break;
+      }
+      case "woman": {
+        myHairStyle = pickRandomFromList(defaultOptions.hairStyleWoman);
+        break;
+      }
+    }
+  }
+  response.hairStyle = myHairStyle;
+
+  // Hat
+  response.hatStyle = userConfig.hatStyle || pickRandomFromList(defaultOptions.hatStyle, { usually: ["none"] });
+  response.hatColor = userConfig.hatColor || pickRandomFromList(defaultOptions.hatColor);
+  const _hairOrHatColor = response.hatStyle === "none" && response.hairColor || response.hatColor;
+
+  // Eyebrow
+  let myEyeBrowStyle = userConfig.eyeBrowStyle || "up";
+  if (!userConfig.eyeBrowStyle && response.sex === "woman") {
+    myEyeBrowStyle = pickRandomFromList(defaultOptions.eyeBrowWoman);
+  }
+  response.eyeBrowStyle = myEyeBrowStyle;
+
+  // Shirt color
+  response.shirtColor = userConfig.shirtColor || pickRandomFromList(defaultOptions.shirtColor, { avoidList: [_hairOrHatColor] });
+
+  // Background color
+  response.bgColor = userConfig.bgColor || pickRandomFromList(defaultOptions.bgColor, { avoidList: [_hairOrHatColor, response.shirtColor] });
+
+  return response;
+};
diff --git a/test/utils.test.js b/test/utils.test.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,7 @@`
`69`	`69`	`"import/no-extraneous-dependencies": "off",`
`70`	`70`	`"jsx-a11y/control-has-associated-label": "off",`
`71`	`71`	`"jsx-a11y/anchor-has-content": "off",`
`72`		`- "react/no-access-state-in-setstate": "off"`
	`72`	`+ "react/no-access-state-in-setstate": "off",`
	`73`	`+ "no-plusplus": "off"`
`73`	`74`	`}`
`74`	`75`	`}`