From 4c38585a22254fb1d4816a1a9b3286a979d9d3aa Mon Sep 17 00:00:00 2001 From: Manos Konstantinidis Date: Fri, 8 Oct 2021 11:32:57 +0100 Subject: [PATCH 1/3] Store screenshot using the specified filename --- README.md | 16 ++++++------- .../android/{screen.png => homescreen.png} | Bin .../ios/{screen.png => homescreen.png} | Bin example/.prettierrc.js | 5 +---- example/__tests__/App.owl.tsx | 4 ++-- src/take-screenshot.ts | 21 ++++++++++++------ 6 files changed, 25 insertions(+), 21 deletions(-) rename example/.owl/baseline/android/{screen.png => homescreen.png} (100%) rename example/.owl/baseline/ios/{screen.png => homescreen.png} (100%) diff --git a/README.md b/README.md index edb7a41d..c07e20cd 100644 --- a/README.md +++ b/README.md @@ -67,11 +67,11 @@ owl build --platform ios --config ./owl.config.json #### Options -| Name | Required | Default | Options/Types | Description | -| ---------------- | -------- | ----------------- | --------------- | ----------------------------------------------- | -| `config`, `-c` | false | ./owl.config.json | String | Path to the configuration file | -| `platform`, `-p` | true | - | `ios`,`android` | The platform the app should be built on | -| `update`, `-u` | true | false | Boolean | A flag about rewriting existing baseline images | +| Name | Required | Default | Options/Types | Description | +| ------------------ | -------- | ----------------- | --------------- | ----------------------------------------------- | +| `--config`, `-c` | false | ./owl.config.json | String | Path to the configuration file | +| `--platform`, `-p` | true | - | `ios`,`android` | The platform the app should be built on | +| `--update`, `-u` | true | false | Boolean | A flag about rewriting existing baseline images | #### Examples @@ -90,7 +90,7 @@ import { takeScreenshot } from 'react-native-owl'; describe('App.tsx', () => { it('takes a screenshot of the first screen', async () => { - const screen = await takeScreenshot(); + const screen = await takeScreenshot('homescreen'); expect(screen).toMatchBaseline(); }); @@ -99,9 +99,9 @@ describe('App.tsx', () => { ### Methods -#### `takeScreenshot()` +#### `takeScreenshot(filaname: string)` -Grabs a screenshot from the simulator and stores it under `latest` screenshots(ie. `./owl/latest/ios/`). If running the tests using the `--update` or `-u` flag, this will store the screenshot under the `baseline` directory. See example above. +Grabs a screenshot from the simulator and stores it under `latest` screenshots(ie. `./owl/latest/ios/`) with the specifie filaname. If running the tests using the `--update` or `-u` flag, this will store the screenshot under the `baseline` directory. See example above. ### Jest Matchers diff --git a/example/.owl/baseline/android/screen.png b/example/.owl/baseline/android/homescreen.png similarity index 100% rename from example/.owl/baseline/android/screen.png rename to example/.owl/baseline/android/homescreen.png diff --git a/example/.owl/baseline/ios/screen.png b/example/.owl/baseline/ios/homescreen.png similarity index 100% rename from example/.owl/baseline/ios/screen.png rename to example/.owl/baseline/ios/homescreen.png diff --git a/example/.prettierrc.js b/example/.prettierrc.js index 84196d95..d5fd470e 100644 --- a/example/.prettierrc.js +++ b/example/.prettierrc.js @@ -1,7 +1,4 @@ module.exports = { - bracketSpacing: false, - jsxBracketSameLine: true, + tabWidth: 2, singleQuote: true, - trailingComma: 'all', - arrowParens: 'avoid', }; diff --git a/example/__tests__/App.owl.tsx b/example/__tests__/App.owl.tsx index e409199a..ed9b47be 100644 --- a/example/__tests__/App.owl.tsx +++ b/example/__tests__/App.owl.tsx @@ -1,8 +1,8 @@ -import {takeScreenshot} from 'react-native-owl'; +import { takeScreenshot } from 'react-native-owl'; describe('App.tsx', () => { it('takes a screenshot of the first screen', async () => { - const screen = await takeScreenshot(); + const screen = await takeScreenshot('homescreen'); expect(screen).toMatchBaseline(); }); diff --git a/src/take-screenshot.ts b/src/take-screenshot.ts index ed1f7c45..6ea768ad 100644 --- a/src/take-screenshot.ts +++ b/src/take-screenshot.ts @@ -5,24 +5,31 @@ import path from 'path'; import { Platform } from './cli/types'; import { Logger } from './logger'; -export const takeScreenshot = async (): Promise => { +/** + * Takes a screenshot from the simulator. + * @param filename - Required. The filename that will be used to save the screenshot. + * @returns the path to the screenshot. + */ +export const takeScreenshot = async (filename: string): Promise => { const platform = process.env.OWL_PLATFORM as Platform; const debug = process.env.OWL_DEBUG === 'true'; const updateBaseline = process.env.OWL_UPDATE_BASELINE === 'true'; + const screenshotFilename = `${filename}.png`; const stdio = debug ? 'inherit' : 'ignore'; const logger = new Logger(!!debug); - const DEFAULT_FILENAME = 'screen.png'; - const DIR_NAME = updateBaseline ? 'baseline' : 'latest'; - const cwd = path.join(process.cwd(), '.owl', DIR_NAME, platform); + const screenshotsDirPath = path.join(process.cwd(), '.owl'); + await fs.mkdir(screenshotsDirPath, { recursive: true }); + const DIR_NAME = updateBaseline ? 'baseline' : 'latest'; + const cwd = path.join(screenshotsDirPath, DIR_NAME, platform); await fs.mkdir(cwd, { recursive: true }); const screenshotCommand = platform === 'ios' - ? `xcrun simctl io booted screenshot ${DEFAULT_FILENAME}` - : `adb exec-out screencap -p > ${DEFAULT_FILENAME}`; + ? `xcrun simctl io booted screenshot ${screenshotFilename}` + : `adb exec-out screencap -p > ${screenshotFilename}`; logger.info(`[OWL] Will run the screenshot command: ${screenshotCommand}.`); await execa.command(screenshotCommand, { @@ -31,7 +38,7 @@ export const takeScreenshot = async (): Promise => { shell: platform === 'android', }); - const screenshotPath = `${cwd}/${DEFAULT_FILENAME}`; + const screenshotPath = `${cwd}/${screenshotFilename}`; logger.info(`[OWL] Screenshot saved to ${screenshotPath}.`); return screenshotPath; }; From d5119763c036b86b92508c28679a3dbf037ec35a Mon Sep 17 00:00:00 2001 From: Manos Konstantinidis Date: Fri, 8 Oct 2021 11:37:47 +0100 Subject: [PATCH 2/3] Fix tests --- README.md | 2 +- src/take-screenshot.test.ts | 10 ++++++---- src/take-screenshot.ts | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index c07e20cd..4479f2e8 100644 --- a/README.md +++ b/README.md @@ -101,7 +101,7 @@ describe('App.tsx', () => { #### `takeScreenshot(filaname: string)` -Grabs a screenshot from the simulator and stores it under `latest` screenshots(ie. `./owl/latest/ios/`) with the specifie filaname. If running the tests using the `--update` or `-u` flag, this will store the screenshot under the `baseline` directory. See example above. +Grabs a screenshot from the simulator and stores it under `latest` screenshots(ie. `./owl/latest/ios/`) with the specified filename(without the extension). If running the tests using the `--update` or `-u` flag, this will store the screenshot under the `baseline` directory. See example above. ### Jest Matchers diff --git a/src/take-screenshot.test.ts b/src/take-screenshot.test.ts index 6f541aa1..06614d0a 100644 --- a/src/take-screenshot.test.ts +++ b/src/take-screenshot.test.ts @@ -3,6 +3,8 @@ import path from 'path'; import { takeScreenshot } from './take-screenshot'; +const SCREENSHOT_FILENAME = 'screen'; + describe('take-screenshot.ts', () => { const commandMock = jest.spyOn(execa, 'command'); @@ -27,7 +29,7 @@ describe('take-screenshot.ts', () => { }); it('should take a screenshot', async () => { - await takeScreenshot(); + await takeScreenshot(SCREENSHOT_FILENAME); expect(commandMock).toHaveBeenCalledWith( 'xcrun simctl io booted screenshot screen.png', @@ -47,7 +49,7 @@ describe('take-screenshot.ts', () => { }); it('should take a screenshot', async () => { - await takeScreenshot(); + await takeScreenshot(SCREENSHOT_FILENAME); expect(commandMock).toHaveBeenCalledWith( 'adb exec-out screencap -p > screen.png', @@ -73,7 +75,7 @@ describe('take-screenshot.ts', () => { }); it('should take a screenshot', async () => { - await takeScreenshot(); + await takeScreenshot(SCREENSHOT_FILENAME); expect(commandMock).toHaveBeenCalledWith( 'xcrun simctl io booted screenshot screen.png', @@ -93,7 +95,7 @@ describe('take-screenshot.ts', () => { }); it('should take a screenshot', async () => { - await takeScreenshot(); + await takeScreenshot(SCREENSHOT_FILENAME); expect(commandMock).toHaveBeenCalledWith( 'adb exec-out screencap -p > screen.png', diff --git a/src/take-screenshot.ts b/src/take-screenshot.ts index 6ea768ad..d13bf07f 100644 --- a/src/take-screenshot.ts +++ b/src/take-screenshot.ts @@ -7,7 +7,7 @@ import { Logger } from './logger'; /** * Takes a screenshot from the simulator. - * @param filename - Required. The filename that will be used to save the screenshot. + * @param filename - Required. The filename(excluding the extension) that will be used to save the screenshot. ie. 'homepage' * @returns the path to the screenshot. */ export const takeScreenshot = async (filename: string): Promise => { From fccb3d856e3066714fd1ca6cc70d65ae3a88ecf0 Mon Sep 17 00:00:00 2001 From: Manos Konstantinidis Date: Fri, 8 Oct 2021 11:52:01 +0100 Subject: [PATCH 3/3] Fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4479f2e8..1b89ede2 100644 --- a/README.md +++ b/README.md @@ -99,7 +99,7 @@ describe('App.tsx', () => { ### Methods -#### `takeScreenshot(filaname: string)` +#### `takeScreenshot(filename: string)` Grabs a screenshot from the simulator and stores it under `latest` screenshots(ie. `./owl/latest/ios/`) with the specified filename(without the extension). If running the tests using the `--update` or `-u` flag, this will store the screenshot under the `baseline` directory. See example above.