v7

schiehll · Mar 11, 2020 · 0e9289f · 0e9289f
1 parent 6826861
commit 0e9289f
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 75 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,5 @@
 dist
 coverage
 .DS_Store
+
+yarn-error.log
diff --git a/__tests__/react-alert.spec.js b/__tests__/react-alert.spec.js
@@ -1,14 +1,15 @@
 import React, { useRef, createContext } from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import { render, fireEvent, cleanup, act, wait } from '@testing-library/react'
+import kebabCase from 'lodash.kebabcase'
 import { positions, Provider, useAlert, withAlert } from '../src'
 import { getStyles } from '../src/Wrapper'
 
 jest.useFakeTimers()
 
 const styleString = style =>
   Object.entries(style).reduce((styleString, [propName, propValue]) => {
-    return `${styleString}${propName}:${propValue};`
+    return `${styleString}${kebabCase(propName)}:${propValue};`
   }, '')
 
 describe('react-alert', () => {
@@ -51,14 +52,14 @@ describe('react-alert', () => {
       expect(getByText(/message/i)).toBeInTheDocument()
     })
 
-    it('should remove an alert on close click', () => {
+    it('should remove an alert on close click', async () => {
       fireEvent.click(getByText(/show alert/i))
       const alertElement = getByText(/message/i)
       expect(getByText(/message/i)).toBeInTheDocument()
 
       fireEvent.click(getByText(/close/i))
 
-      act(jest.runAllTimers)
+      await act(async () => jest.runAllTimers())
 
       expect(alertElement).not.toBeInTheDocument()
     })
@@ -145,7 +146,7 @@ describe('react-alert', () => {
   })
 
   describe('react-alert with one Provider and custom options', () => {
-    it('should close an alert automatic after the given timeout', () => {
+    it('should close an alert automatic after the given timeout', async () => {
       const App = () => (
         <Provider template={Template} timeout={2000}>
           <Child />
@@ -158,8 +159,8 @@ describe('react-alert', () => {
 
       expect(alertElement).toBeInTheDocument()
 
-      wait(() => {
-        act(jest.runOnlyPendingTimers)
+      await wait(async () => {
+        await act(async () => jest.runOnlyPendingTimers())
         expect(alertElement).not.toBeInTheDocument()
       })
     })
@@ -182,6 +183,7 @@ describe('react-alert', () => {
         const providerElement = getByTestId('provider')
 
         const styles = styleString(getStyles(position))
+
         expect(providerElement).toHaveStyle(styles)
         cleanup()
       })
@@ -253,7 +255,7 @@ describe('react-alert', () => {
       expect(providerElement).toHaveStyle(styles)
     })
 
-    it('should close an alert automatic after the given alert timeout', () => {
+    it('should close an alert automatic after the given alert timeout', async () => {
       const ChildWithConfig = () => {
         const alert = useAlert()
 
@@ -277,8 +279,8 @@ describe('react-alert', () => {
 
       expect(alertElement).toBeInTheDocument()
 
-      wait(() => {
-        act(jest.runOnlyPendingTimers)
+      await wait(async () => {
+        await act(async () => jest.runOnlyPendingTimers())
         expect(alertElement).not.toBeInTheDocument()
       })
     })
@@ -336,7 +338,7 @@ describe('react-alert', () => {
       })
     })
 
-    it('should remove the alert matching the given id on remove call', () => {
+    it('should remove the alert matching the given id on remove call', async () => {
       Child = () => {
         const alert = useAlert()
         const alertRef = useRef(null)
@@ -373,12 +375,12 @@ describe('react-alert', () => {
       expect(getByText(/message/i)).toBeInTheDocument()
 
       fireEvent.click(getByText(/remove alert/i))
-      act(jest.runOnlyPendingTimers)
+      await act(async () => jest.runOnlyPendingTimers())
 
       expect(alertElement).not.toBeInTheDocument()
     })
 
-    it('should remove all alerts on removeAll call', () => {
+    it('should remove all alerts on removeAll call', async () => {
       Child = () => {
         const alert = useAlert()
 
@@ -426,7 +428,7 @@ describe('react-alert', () => {
       expect(getByText(/message 1/i)).toBeInTheDocument()
 
       fireEvent.click(getByText(/remove all alerts/i))
-      act(jest.runOnlyPendingTimers)
+      await act(async () => jest.runOnlyPendingTimers())
 
       expect(alert0Element).not.toBeInTheDocument()
       expect(alert1Element).not.toBeInTheDocument()

diff --git a/package.json b/package.json
@@ -30,6 +30,8 @@
     "@babel/core": "^7.6.4",
     "@babel/preset-env": "^7.6.3",
     "@babel/preset-react": "^7.6.3",
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^9.5.0",
     "babel-eslint": "10.0.3",
     "babel-preset-stage-1": "^6.24.1",
     "eslint": "^6.5.1",
@@ -38,6 +40,7 @@
     "husky": "^3.0.9",
     "jest-cli": "^24.9.0",
     "lint-staged": "^9.4.2",
+    "lodash.kebabcase": "^4.1.1",
     "pascal-case": "^2.0.1",
     "prettier": "^1.18.2",
     "react": "^16.13.0",
@@ -60,8 +63,6 @@
     ]
   },
   "dependencies": {
-    "@testing-library/jest-dom": "^4.1.2",
-    "@testing-library/react": "^9.3.0",
     "prop-types": "^15.7.2",
     "react-transition-group": "^4.3.0"
   }

diff --git a/src/Provider.js b/src/Provider.js
@@ -33,6 +33,7 @@ const Provider = ({
 
   useEffect(() => {
     root.current = document.createElement('div')
+    root.current.id = '__react-alert__'
     document.body.appendChild(root.current)
     const timersIdRef = timersId.current
 
@@ -155,7 +156,7 @@ const Provider = ({
                     ? alertsByPosition[position].map(alert => (
                         <Transition type={transition} key={alert.id}>
                           <AlertComponent
-                            style={{ margin: offset }}
+                            style={{ margin: offset, pointerEvents: 'all' }}
                             {...alert}
                           />
                         </Transition>
@@ -182,7 +183,11 @@ Provider.propTypes = {
     Object.keys(transitions).map(transition => transitions[transition])
   ),
   containerStyle: PropTypes.object,
-  template: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+  template: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.func,
+    PropTypes.elementType
+  ]).isRequired,
   context: PropTypes.shape({
     Provider: PropTypes.object,
     Consumer: PropTypes.object

diff --git a/src/Wrapper.js b/src/Wrapper.js
@@ -2,67 +2,75 @@ import React, { useMemo } from 'react'
 import { positions } from './options'
 
 export const getStyles = position => {
-  const initialStyles = { position: 'fixed' }
+  const initialStyles = {
+    left: 0,
+    position: 'fixed',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    width: '100%',
+    pointerEvents: 'none'
+  }
+
   switch (position) {
     case positions.TOP_LEFT:
       return {
+        ...initialStyles,
         top: 0,
-        left: 0,
-        ...initialStyles
+        alignItems: 'flex-start'
       }
     case positions.TOP_CENTER:
       return {
-        top: 0,
-        left: '50%',
-        transform: 'translate(-50%, 0%)',
-        ...initialStyles
+        ...initialStyles,
+        top: 0
       }
     case positions.TOP_RIGHT:
       return {
+        ...initialStyles,
         top: 0,
-        right: 0,
-        ...initialStyles
+        alignItems: 'flex-end'
       }
     case positions.MIDDLE_LEFT:
       return {
-        bottom: '50%',
-        left: 0,
-        ...initialStyles
+        ...initialStyles,
+        top: '50%',
+        alignItems: 'flex-start'
       }
     case positions.MIDDLE: {
       return {
-        bottom: '50%',
-        left: '50%',
-        transform: 'translate(-50%, 0%)',
-        ...initialStyles
+        ...initialStyles,
+        top: '50%'
       }
     }
     case positions.MIDDLE_RIGHT:
       return {
-        bottom: '50%',
-        right: 0,
-        ...initialStyles
+        ...initialStyles,
+        top: '50%',
+        alignItems: 'flex-end'
       }
 
     case positions.BOTTOM_LEFT:
       return {
+        ...initialStyles,
         bottom: 0,
-        left: 0,
-        ...initialStyles
+        alignItems: 'flex-start'
       }
     case positions.BOTTOM_CENTER:
       return {
-        bottom: 0,
-        left: '50%',
-        transform: 'translate(-50%, 0%)',
-        ...initialStyles
+        ...initialStyles,
+        bottom: 0
       }
     case positions.BOTTOM_RIGHT:
       return {
-        right: 0,
+        ...initialStyles,
         bottom: 0,
-        ...initialStyles
+        alignItems: 'flex-end'
       }
+
+    default: {
+      return initialStyles
+    }
   }
 }