Merge pull request #7 from EOS-uiux-Solutions/tests

[React Package] - Tests for generated React SVG components

Author: kaybhutani

.gitignore

@@ -7,5 +7,7 @@ node_modules
 es
 lib
 svg
+tests
+
 
 yarn.lock

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react']
+}

package-lock.json

@@ -12,7 +12,9 @@
     "build:es": "tsc --project tsconfig.build.json --module esnext --outDir es",
     "build:lib": "tsc --project tsconfig.build.json --module commonjs --outDir lib",
     "build": "npm run build:es && npm run build:lib",
-    "generate": "npm run fetch && npm run icon && npm run build"
+    "generate": "npm run fetch && npm run icon && npm run build",
+    "test": "jest --env=jsdom",
+    "test:update": "jest -u"
   },
   "repository": {
     "type": "git",
@@ -25,10 +27,16 @@
   },
   "homepage": "https://github.com/EOS-uiux-Solutions/eos-icons-react#readme",
   "devDependencies": {
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
     "@types/gulp": "^4.0.8",
+    "@types/jest": "^26.0.23",
     "@types/react": "^17.0.11",
     "@typescript-eslint/eslint-plugin": "^4.28.0",
     "@typescript-eslint/parser": "^4.28.0",
+    "babel-jest": "^27.0.5",
     "del": "^6.0.0",
     "eos-icons": "^5.1.0",
     "eslint": "^7.29.0",
@@ -37,6 +45,12 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "gulp": "^4.0.2",
+    "jest": "^27.0.5",
+    "jest-dom": "^4.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
+    "ts-jest": "^27.0.3",
     "ts-node": "^10.0.0",
     "typescript": "^4.3.2"
   },

package.json

@@ -26,7 +26,7 @@ async function generateIconComponents ({ type, from }: IconGenerateScript) {
       }
 
       // eslint-disable-next-line no-template-curly-in-string
-      const propString = 'svg transform={`rotate(${rotate}) translate(${translateX}, ${translateY}) scale(${scaleX}, ${scaleY})`} fill={color} width={size} height={size}'
+      const propString = 'svg data-testid="eos-svg-component" transform={`rotate(${rotate}) translate(${translateX}, ${translateY}) scale(${scaleX}, ${scaleY})`} fill={color} width={size} height={size}'
       data = data.replace('svg', propString)
 
       const render = componentTemplate({ fileName, data })

scripts/iconScript.ts

@@ -0,0 +1,48 @@
+/* eslint-disable no-undef */
+import React from 'react'
+// import renderer from 'react-test-renderer'
+import { EosloadingAnimated } from '../lib'
+import { render, cleanup } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+afterEach(cleanup)
+
+it('Animated SVG Size prop test', () => {
+  const randomSize = Math.floor(Math.random()) + 1
+  const { getByTestId } = render(
+    <EosloadingAnimated size={`${randomSize}`}/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveStyle({
+    width: `${randomSize}`,
+    height: `${randomSize}`
+  })
+})
+
+it('Animated SVG Color prop test', () => {
+  const { getByTestId } = render(
+    <EosloadingAnimated color="blue"/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveAttribute('fill', 'blue')
+})
+
+it('Animated SVG Rotation prop test', () => {
+  const randomDegree = Math.floor(Math.random() * 360) + 1
+  const { getByTestId } = render(
+    <EosloadingAnimated rotate={`${randomDegree}`}/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveAttribute('transform', `rotate(${randomDegree}) translate(0, 0) scale(1, 1)`)
+})
+
+it('Animated SVG horizontalFlip prop test', () => {
+  const { getByTestId } = render(
+    <EosloadingAnimated horizontalFlip={true}/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveAttribute('transform', 'rotate(0) translate(24, 0) scale(-1, 1)')
+})
+
+it('Animated SVG verticalFlip prop test', () => {
+  const { getByTestId } = render(
+    <EosloadingAnimated verticalFlip={true}/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveAttribute('transform', 'rotate(0) translate(0, 24) scale(1, -1)')
+})

test/animatedSvg.test.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-undef */
+import React from 'react'
+// import renderer from 'react-test-renderer'
+import { Eos10kFilled } from '../lib'
+import { render, cleanup } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+afterEach(cleanup)
+
+it('Filled SVG Size prop test', () => {
+  const randomSize = Math.floor(Math.random()) + 1
+  const { getByTestId } = render(
+    <Eos10kFilled size={`${randomSize}`}/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveStyle({
+    width: `${randomSize}`,
+    height: `${randomSize}`
+  })
+})
+
+it('Filled SVG Color prop test', () => {
+  const { getByTestId } = render(
+    <Eos10kFilled color="blue"/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveAttribute('fill', 'blue')
+})
+
+it('Filled SVG Rotation prop test', () => {
+  const randomDegree = Math.floor(Math.random() * 360) + 1
+  const { getByTestId } = render(
+    <Eos10kFilled rotate={`${randomDegree}`}/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveAttribute('transform', `rotate(${randomDegree}) translate(0, 0) scale(1, 1)`)
+})
+
+it('Filled SVG horizontalFlip prop test', () => {
+  const { getByTestId } = render(
+    <Eos10kFilled horizontalFlip={true}/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveAttribute('transform', 'rotate(0) translate(24, 0) scale(-1, 1)')
+})
+
+it('Filled SVG verticalFlip prop test', () => {
+  const { getByTestId } = render(
+    <Eos10kFilled verticalFlip={true}/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveAttribute('transform', 'rotate(0) translate(0, 24) scale(1, -1)')
+})

test/filledsvg.test.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-undef */
+import React from 'react'
+// import renderer from 'react-test-renderer'
+import { Eos10kOutlined } from '../lib'
+import { render, cleanup } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+afterEach(cleanup)
+
+it('Outlined SVG Size prop test', () => {
+  const randomSize = Math.floor(Math.random()) + 1
+  const { getByTestId } = render(
+    <Eos10kOutlined size={`${randomSize}`}/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveStyle({
+    width: `${randomSize}`,
+    height: `${randomSize}`
+  })
+})
+
+it('Outlined SVG Color prop test', () => {
+  const { getByTestId } = render(
+    <Eos10kOutlined color="blue"/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveAttribute('fill', 'blue')
+})
+
+it('Outlined SVG Rotation prop test', () => {
+  const randomDegree = Math.floor(Math.random() * 360) + 1
+  const { getByTestId } = render(
+    <Eos10kOutlined rotate={`${randomDegree}`}/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveAttribute('transform', `rotate(${randomDegree}) translate(0, 0) scale(1, 1)`)
+})
+
+it('Outlined SVG horizontalFlip prop test', () => {
+  const { getByTestId } = render(
+    <Eos10kOutlined horizontalFlip={true}/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveAttribute('transform', 'rotate(0) translate(24, 0) scale(-1, 1)')
+})
+
+it('Outlined SVG verticalFlip prop test', () => {
+  const { getByTestId } = render(
+    <Eos10kOutlined verticalFlip={true}/>
+  )
+  expect(getByTestId('eos-svg-component')).toHaveAttribute('transform', 'rotate(0) translate(0, 24) scale(1, -1)')
+})