add button-test.js

Author: hayanisaid

packages/react-ape/renderer/elements/Button.js

@@ -7,9 +7,11 @@
 
 import {ButtonDefaults} from '../constants';
 
+//TODO adjust Opacity when focus, Blur
+type PressEvent = {||};
 type ButtonProps = {|
   title: string,
-  onPress: (event?: any) => mixed,
+  onPress: (event?: PressEvent) => mixed,
   touchSoundDisabled?: ?boolean,
   color?: ?string,
   /**
@@ -62,34 +64,34 @@ type ButtonProps = {|
   testID?: ?string,
 |};
 
-function renderButton(props, apeContext, parentLayout) {
-  const {spatialGeometry = {}, relativeIndex} = parentLayout;
+function renderButton(props: ButtonProps, apeContext, parentLayout) {
+  const {spatialGeometry = {x: 0, y: 0}, relativeIndex} = parentLayout;
   const {ctx} = apeContext;
   // If is relative and x and y haven't be processed, don't render
   if (!spatialGeometry) return null;
   // start drawing the canvas
   const {title, color} = props;
   const borderRadius = ButtonDefaults.containerStyle.borderRadius;
   const backgroundColor = ButtonDefaults.containerStyle.backgroundColor;
-  let x = spatialGeometry.x || 20;
-  let y = spatialGeometry.y || 40;
-  const width = x + y;
-  const height = ButtonDefaults.containerStyle.height;
+  let x = spatialGeometry.x || 0;
+  let y = spatialGeometry.y || 0;
+  let width = x + y;
+  let height = ButtonDefaults.containerStyle.height;
+  // if(parentLayout && parentLayout.style){
+  //   width = parentLayout.style.width
+  //   height = parentLayout.style.height
+  // }
   ctx.beginPath();
-  //ctx.lineWidth = borderWidth
   ctx.fillStyle = backgroundColor;
-  //ctx.strokeStyle = borderColor
-  //ctx.rect(x,y,borderRadius,width,height,antiClockWise)
-  //ctx.rect(x,y,width,height)
   ctx.moveTo(x, y);
   /**
-        *  Top Right Radius
-        */
+*  Top Right Radius
+*/
   ctx.lineTo(x + width - borderRadius, y);
   ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
   /**
-        *  Bottom right Radius
-        */
+*  Bottom right Radius
+*/
 
   ctx.lineTo(x + width, y + height - borderRadius);
   ctx.quadraticCurveTo(
@@ -100,8 +102,8 @@ function renderButton(props, apeContext, parentLayout) {
   );
 
   /**
-        *  Bottom Left Radius
-        */
+*  Bottom Left Radius
+*/
   ctx.lineTo(x + borderRadius, y + height);
   ctx.quadraticCurveTo(x, y + height, x, y + height - borderRadius);
   /** Top left Radius */
@@ -119,7 +121,7 @@ function renderButton(props, apeContext, parentLayout) {
   ctx.closePath();
 }
 
-export default function createButtonInstance(props: Props): mixed {
+export default function createButtonInstance(props: ButtonProps): mixed {
   return {
     type: 'Button',
     render: renderButton.bind(this, props),

packages/react-ape/renderer/elements/__tests__/Button-test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {ButtonDefaults} from '../../constants'
+import CreateButtonInstance from '../Button';
+
+describe('Button', () => {
+  describe('Call the button with Props', () => {
+    it('Should render properly', () => {
+      const title = 'Press Me'
+      const color = '#f8a978'
+      const x = 40
+      const y = 20
+      const width = x + y
+      const height = ButtonDefaults.containerStyle.height
+      const props = {title, color};
+      const apeContext = {
+        ctx: {
+          beginPath: jest.fn(),
+          fillStyle: jest.fn(),
+          moveTo: jest.fn(),
+          fillText: jest.fn(),
+          fill: jest.fn(),
+          stroke: jest.fn(),
+          closePath: jest.fn(),
+          lineTo: jest.fn(),
+          quadraticCurveTo: jest.fn(),
+          font: 'Helvetica',
+        },
+      };
+
+      const Button = CreateButtonInstance(props);
+      Button.render(apeContext, {spatialGeometry: {x, y}});
+      const {
+        beginPath,
+        fillStyle,
+        moveTo,
+        fillText,
+        fill,
+        stroke,
+        closePath,
+        lineTo,
+        quadraticCurveTo,
+        font,
+      } = apeContext.ctx;
+      expect(beginPath.mock.calls.length).toBe(1);
+      expect(beginPath).toBeCalledWith()
+      expect(closePath).toBeCalledWith()
+      expect(stroke).toBeCalledWith()
+      expect(moveTo).toBeCalledWith(x,y)
+      expect(lineTo.mock.calls.length).toEqual(4)
+      expect(fill.mock.calls.length).toBe(1)
+      expect(fillText.mock.calls.length).toBe(1)
+      expect(fillText).toBeCalledWith(title,x + width/2,y+height/2)
+      expect(font).toEqual(`${ButtonDefaults.textStyle.fontSize} Helvetica`)
+      expect(quadraticCurveTo.mock.calls.length).toEqual(4)
+      expect(fillStyle).toBe(color)
+    });
+  });
+});