Merge pull request #8 from chagasaway/detox-with-ts

Detox with ts

README.md

@@ -24,12 +24,29 @@ Start the application
 npm start
 ```
 
-## :heavy_check_mark: Running tests
+## :heavy_check_mark: Running unit and integration tests
 
 ```sh
 npm run test:unit
 npm run test:integration
-npm run test:e2e
+```
+
+## :heavy_check_mark: Running E2E tests
+
+Download the latest Expo client from https://expo.io/tools#client and extract it to a folder named `bin/Exponent.app` inside the project. Run the following commands:
+
+```sh
+brew tap wix/brew
+brew install applesimutils
+npm install -g detox-cli
+detox test
+```
+
+Do not forget to start the mocked server running the following commands:
+
+```sh
+cd server
+npm start
 ```
 
 ## :sparkles: Running lint

e2e/config.json

@@ -1,6 +1,5 @@
 {
-  "setupFilesAfterEnv": [
-    "./init.js"
-  ],
-  "testEnvironment": "node"
+  "preset": "ts-jest",
+  "testEnvironment": "node",
+  "setupTestFrameworkScriptFile": "./init.js"
 }

e2e/index.d.ts

@@ -0,0 +1,5 @@
+declare module 'detox-expo-helpers' {
+
+  export function reloadApp(): void;
+
+}

e2e/page-objects/AmountInputPageObject.ts

@@ -1,13 +1,23 @@
+import { by, element, expect } from 'detox';
+import { QRCodePageObject } from './QRCodePageObject';
+
 export class AmountInputPageObject {
-  public async getScreen() {
-    return element(by.id('AmountInputScreen'));
+
+  public async assertIsVisible() {
+    await expect(element(by.id('AmountInputScreen'))).toBeVisible();
   }
 
   public async fillAmount(amount: number) {
+    await element(by.id('amountInput')).tap();
     await element(by.id('amountInput')).typeText(`${amount}`);
   }
 
-  public async confirm() {
+  public async assertHasAmountOf(amount: number) {
+    await expect(element(by.text(`${amount}`))).toBeVisible();
+  }
+
+  public async confirm(): Promise<QRCodePageObject> {
     await element(by.id('confirmButton')).tap();
+    return new QRCodePageObject();
   }
 }

e2e/page-objects/QRCodePageObject.ts

@@ -1,9 +1,17 @@
+import { by, element, expect } from 'detox';
+
 export class QRCodePageObject {
-  public async getScreen() {
-    return element(by.id('QRCodeScreen'));
+
+  public async assertIsVisible() {
+    await expect(element(by.id('QRCodeScreen'))).toBeVisible();
   }
 
   public async share() {
-    await element(by.id('shareBtn')).tap();
+    await element(by.id('shareButton')).tap();
   }
+
+  public async assertIsShared() {
+    await expect(element(by.text('OK'))).toBeVisible();
+  }
+
 }

e2e/tests/request-money/request-money.spec.ts

@@ -1,27 +1,38 @@
-const { reloadApp } = require('detox-expo-helpers');
+import { reloadApp } from 'detox-expo-helpers';
+import { AmountInputPageObject } from '../../page-objects/AmountInputPageObject';
+import { QRCodePageObject } from '../../page-objects/QRCodePageObject';
 
 describe('Request money', () => {
   beforeAll(async () => {
     await reloadApp();
   });
 
   it('should show amount input screen', async () => {
-    await expect(element(by.id('AmountInputScreen'))).toBeVisible();
+    const amountInputPage = new AmountInputPageObject();
+    await amountInputPage.assertIsVisible();
   });
 
-  it('should type request money amount', async () => {
-    await element(by.id('amountInput')).typeText('5');
+  it('should fill the requested amount', async () => {
+    const amountInputPage = new AmountInputPageObject();
+    await amountInputPage.fillAmount(5);
+    await amountInputPage.assertHasAmountOf(5);
   });
 
-  it('should confirm request money', async () => {
-    await element(by.id('confirmButton')).tap();
+  it('should confirm the requested amount', async () => {
+    const amountInputPage = new AmountInputPageObject();
+    const qrCodePage = await amountInputPage.confirm();
+    await qrCodePage.assertIsVisible();
   });
 
-  it('should should show qrcode screen', async () => {
-    await element(by.id('QRCodeScreen')).toBeVisible();
+  it('should share the QR code', async () => {
+    const qrCodePage = new QRCodePageObject();
+    await qrCodePage.share();
+    await qrCodePage.assertIsShared();
   });
 
-  it('should share the qrcode', async () => {
-    await element(by.id('shareButton')).tap();
+  it('should should show amount input screen again', async () => {
+    const qrCodePage = new AmountInputPageObject();
+    await qrCodePage.assertIsVisible();
   });
+
 });