Merge branch 'master' into implement-showCheckBox-prop

nexxtway · Aug 5, 2020 · ed8b28d · ed8b28d
2 parents 98f9289 + 5442aac
commit ed8b28d
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 33 deletions.
diff --git a/integration/specs/InternalOverlay/internalOverlay-1.spec.js b/integration/specs/InternalOverlay/internalOverlay-1.spec.js
@@ -1,8 +1,8 @@
 const PageInternalOverlay = require('../../../src/components/InternalOverlay/pageObject');
-const PageInternalOverlayButton = require('../../../src/components/InternalOverlay/pageObject/button');
 
 const BUTTON = '#button-icon-element';
 const OVERLAY = '#overlay-1';
+const CONTAINER = '#overlay-1-container';
 
 describe('InternalOverlay with default position resolver', () => {
     beforeAll(() => {
@@ -15,20 +15,21 @@ describe('InternalOverlay with default position resolver', () => {
     });
 
     it('should exist after one click on trigger and destroy on second click', () => {
-        const button = new PageInternalOverlayButton(BUTTON);
         const internalOverlay = new PageInternalOverlay(OVERLAY);
-        button.click();
+        const triggerButton = $(BUTTON);
+        triggerButton.click();
         expect(internalOverlay.exists()).toBe(true);
-        button.click();
+        triggerButton.click();
         expect(internalOverlay.exists()).toBe(false);
     });
 
     it('should not exists after click outside of element', () => {
-        const button = new PageInternalOverlayButton(BUTTON);
         const internalOverlay = new PageInternalOverlay(OVERLAY);
-        button.click();
+        const internalOverlayContainer = $(CONTAINER);
+        const triggerButton = $(BUTTON);
+        triggerButton.click();
         expect(internalOverlay.exists()).toBe(true);
-        $('[data-preview="InternalOverlay"]').click();
+        internalOverlayContainer.click();
         expect(internalOverlay.exists()).toBe(false);
     });
 });
diff --git a/src/components/InternalOverlay/__tests__/internalOverlay.spec.js b/src/components/InternalOverlay/__tests__/internalOverlay.spec.js
@@ -85,4 +85,58 @@ describe('<InternalOverlay />', () => {
         );
         expect(mockContentMetaResolver).toHaveBeenCalledTimes(1);
     });
+
+    it('should call positionResolver with the right parameters when it is passed', () => {
+        const positionResolverMock = jest.fn();
+        mount(
+            <InternalOverlay
+                render={() => <div id="test-id" />}
+                triggerElementRef={{}}
+                positionResolver={positionResolverMock}
+                isVisible
+            />,
+        );
+        expect(positionResolverMock).toHaveBeenCalledWith({
+            content: expect.any(Object),
+            trigger: expect.any(Object),
+            viewport: expect.any(Object),
+        });
+    });
+
+    it('should call onOpened when isVisible is true', () => {
+        const onOpenedMock = jest.fn();
+        mount(
+            <InternalOverlay
+                render={() => <div id="test-id" />}
+                triggerElementRef={{}}
+                onOpened={onOpenedMock}
+                isVisible
+            />,
+        );
+        expect(onOpenedMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onOpened when isVisible is false', () => {
+        const onOpenedMock = jest.fn();
+        mount(
+            <InternalOverlay
+                render={() => <div id="test-id" />}
+                triggerElementRef={{}}
+                onOpened={onOpenedMock}
+            />,
+        );
+        expect(onOpenedMock).not.toHaveBeenCalled();
+    });
+
+    it('should call triggerElementRef when triggerElementRef is a function', () => {
+        const triggerElementRefMock = jest.fn();
+        mount(
+            <InternalOverlay
+                render={() => <div id="test-id" />}
+                triggerElementRef={triggerElementRefMock}
+                isVisible
+            />,
+        );
+        expect(triggerElementRefMock).toHaveBeenCalledTimes(1);
+    });
 });
diff --git a/src/components/InternalOverlay/index.d.ts b/src/components/InternalOverlay/index.d.ts
@@ -35,6 +35,7 @@ export interface InternalOverlayProps {
     isVisible?: boolean;
     triggerElementRef?: RefObject<HTMLElement> | TriggerElementRefFunction;
     positionResolver?: (opts: PositionResolverOpts) => Position;
+    onOpened?: () => void;
 }
 
 export default function(props: InternalOverlayProps): JSX.Element | null;
diff --git a/src/components/InternalOverlay/pageObject/button.js b/src/components/InternalOverlay/pageObject/button.js
diff --git a/src/components/InternalOverlay/readme.md b/src/components/InternalOverlay/readme.md
@@ -86,7 +86,7 @@ const Component = props => {
     );
 }
 
-<Container>
+<Container id="overlay-1-container">
     <div className="rainbow-flex rainbow-justify_spread">
         <Component id="overlay-1" buttonId="button-icon-element" />
         <Component />

diff --git a/src/components/Rating/star.js b/src/components/Rating/star.js
@@ -41,7 +41,7 @@ export default class Star extends Component {
         const { value, name, readOnly } = this.props;
 
         return (
-            <StyledStartContainer>
+            <StyledStartContainer readOnly={readOnly}>
                 <StyledStartInput
                     type="radio"
                     id={this.starId}

diff --git a/src/components/Rating/styled/starContainer.js b/src/components/Rating/styled/starContainer.js
@@ -7,6 +7,13 @@ const StyledStartContainer = styled.span`
     :not(:last-child) {
         margin-right: 0.25rem;
     }
+
+    display: ${props => (props.readOnly ? '' : 'inline-block')};
+    transition: transform 300ms ease-in-out;
+
+    &:hover {
+        transform: scale(1.5);
+    }
 `;
 
 export default StyledStartContainer;