Develogs

필요한 rpm 설치

npm install typescript jest ts-jest @types/jest ts-node
npm i -D puppeteer jest-puppeteer
npm i -D @types/puppeteer @types/jest-environment-puppeteer @types/expect-puppeteer
npm i -D cross-env

tsconfig.json 수정

{
  "compilerOptions": {
  ..........
    "types": [
      "jest",
      "puppeteer",
      "jest-environment-puppeteer",
      "expect-puppeteer"
    ],
  ..........
  },
  "exclude": [
    "node_modules"
  ]
}

프로젝트 루트에 아래와 깉이 설정 파일들을 생성한다. 

preset.js 생성

const ts_preset = require('ts-jest/jest-preset')
const puppeteer_preset = require('jest-puppeteer/jest-preset')

module.exports = Object.assign(
  ts_preset,
  puppeteer_preset
)

jest.config.js 생성

module.exports = {
    preset: "./preset.js",
    testMatch: ["**/tests/*.test.(ts|tsx)"]
};

jest-puppeteer.config.js

module.exports = {
  launch: {
    headless: false,
    timeout: 20000,
  },
};

package.js에 아래 명령어 추가

//.........
  "scripts": {
    "test": "cross-env DEBUG=test JEST_PUPPETEER_CONFIG=./jest-puppeteer.config.js jest --colors --runInBand --detectOpenHandles --config=./jest.config.js"
  },
//.........

프로젝트 루트에 tests폴더 생성 및 테스트 파일 uitest.test.ts 생성

describe('Naver', () => {
  beforeAll(async () => {
    await page.setViewport({ width: 960, height: 540 });
    await page.goto('https://www.naver.com')
  })

  it('should display "naver" text on page', async () => {
      await expect(page.title()).resolves.toMatch('NAVER');
  })

  it('search keyword', async () => {
    await page.type('input[type=search]', 'develogs', {delay: 20})
    await delay(1000);
    const inputElement = await page.$(
      'button[type=submit]',
    );
    if(inputElement) {
      await inputElement.click();
    }
    await delay(1000);
    await page.screenshot({ path: 'search_result.png' }); // 결과 화면 스크린샷
    await delay(1000);
})
})

function delay(ms: number): Promise<void> {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {
          resolve()
    	}, ms)
    })
}

테스트 명령어

npm run test

UI 테스트 자동화 결과

UI 테스트 중 특정 화면을 캡쳐할 수 있음.

1. binary 사용하는 방법

GoogleMaps.json파일 만든 후 아래와 같이 추가

{

    "3.1.0" : "https://dl.google.com/dl/cpdc/d308af63f78a5a1a/GoogleMaps-3.1.0.tar.gz"

}

Cartfile에 위에서 만든 GoogleMaps.json을 추가

binary "GoogleMaps.json" ~> 3.1.0i

2. 누군가 올려놓은 github 사용하는 방법

Cartfile에 아래 github 추가

github "leoneparise/GoogleMaps-Carthage" ~> 2.7

https://github.com/leoneparise/GoogleMaps-Carthage

  React Native는 작년에 해봤고, 몇 주전엔 Flutter로도 앱을 만들어 보았다. React Naitve는 Web(html, css, js)과 거의 유사한 구조로 개발을 할 수 있게 되어 있어서 러닝 커브가 매우 적었다. 동일한 앱을 만드는데 [그림 1] 익숙한 Swift로는 반나절 정도 걸렸고 [그림 2] react native로는 공부 포함 하루 이틀 정도 걸렸다. flutter는 Dart라는 새로운 언어를 학습해야 하지만, 이전에 java나 C++, C#, swift등 oop언어를 다뤄본적 있다면 쉽게 익힐 수 있다. [그림 3] Flutter로 만든 TODO앱도 공부 포함 이틀 정도 걸린 것 같다. 

  개인적인 취향으로 js를 별로 선호하지 않으며, open source 기반으로 서드 파티들에게 디팬던시가 강한게 싫어서 react native보단 flutter가 더 마음에 든다. 앞으로 개인적인 프로젝트는 flutter로 진행할 것 같다. 

  주말에 심심해서 flutter 공부하면서 만든 간단한 TODO + D-Day앱

공부 + 구현하는데 2틀정도 걸린듯. 개인적으로 react native보단 괜찮은거 같다. 

 rm -rf ~/Library/Caches/CocoaPods; rm -rf Pods; rm -rf ~/Library/Developer/Xcode/DerivedData/*; pod deintegrate; pod setup; pod install;

  보통 flutter에서 query를 사용할때, query에 ?를 사용하고 whreArgs로 대체하는데, 이상하게 Like만 해당 방법이 먹히지 않느다.  그래서 아래와 같이 whreArgs를 사용하지 않고 $로 바꾸니 정상적으로 동작한다. 아마 버그인듯하다. 

await db.rawQuery("select * from tbl_todo where title like '%$keyword%'");