Files
react-native-svg/e2e/readFailedCases.ts
Bartosz Stefańczyk a089cc2efc feat: e2e snapshot tests (#2338)
<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect -->

# Summary

This PR adds E2E tests based on view screenshots done via
`react-native-view-shot`. It only works with devices that have their
[pixel ratio](https://reactnative.dev/docs/pixelratio) equal `3`. If you
want to use device with different pixel ratio, you need to adjust it in
`e2e/generateReferences.ts` viewport and regenerate reference images
(see below).

Steps to run tests:
- Run Metro server for example app via `yarn start` in example app's
directory
- Run `example` app on platform of your choice (currently only Android &
iOS are supported) via `yarn android` or `yarn ios` in example app's
directory
- Run `yarn e2e` in project's root directory to start Jest server
- Select `E2E` tab in example app
- Wait for tests to finish
- You can see test results, as well as diffs (actual rendered svg vs
reference image) in `e2e/diffs` directory

Steps to add new test cases:
- Put SVG of your choice to `e2e/cases` directory
- Run `yarn generateE2eRefrences`, this will open headless chrome
browser via `puppeteer` and snapshot all rendered SVGs to .png files and
later use them as reference in tests
- You should see new .png files in `e2e/references`
- When you run E2E tests again, it will use new test case(s) you've
added

## Test Plan


https://github.com/software-mansion/react-native-svg/assets/41289688/24ee5447-ce9a-43b6-9dde-76229d25a30a


https://github.com/software-mansion/react-native-svg/assets/41289688/71d1873f-8155-4494-80bd-e4c1fa72a065


### What's required for testing (prerequisites)?
See Summary

### What are the steps to reproduce (after prerequisites)?
See Summary

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    	     |
| Android |         |
| Web | 			 |
## Checklist



<!-- Check completed item, when applicable, via: [X] -->

- [X] I have tested this on a device and a simulator
- [x] I added documentation in `README.md`
- [X] I updated the typed files (typescript)
- [X] I added a test for the API in the `__tests__` folder

---------

Co-authored-by: bohdanprog <bohdan.artiukhov@swmansion.com>
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
2024-08-23 13:29:38 +02:00

57 lines
1.4 KiB
TypeScript

import { Arch, OS } from './types';
import path from 'path';
import fs from 'fs';
const filePath = path.join(__dirname, 'failedCases.json');
function readFileOrCreateIfNotExists(filePath: string): object {
try {
if (fs.existsSync(filePath)) {
const data = fs.readFileSync(filePath, 'utf8');
return JSON.parse(data);
} else {
const emptyObject = {};
fs.writeFileSync(filePath, JSON.stringify(emptyObject, null, 2), 'utf8');
return emptyObject;
}
} catch (error) {
console.error('Error occurred:', error);
return {};
}
}
interface UpdateFailedResults {
ios?: {
paper?: string[];
fabric?: string[];
};
android?: { paper?: string[]; fabric?: string[] };
}
export function storeFailedResult(
platform: OS,
architecture: Arch,
value: string
): void {
try {
const data = readFileOrCreateIfNotExists(filePath) as UpdateFailedResults;
if (!data[platform]) {
data[platform] = {};
}
if (!data[platform]?.[architecture]) {
data[platform]![architecture] = [];
}
if (!data[platform]?.[architecture]?.includes(value)) {
data[platform]?.[architecture]?.push(value);
}
fs.writeFileSync(filePath, JSON.stringify(data, null, 2), 'utf8');
console.log('Data updated successfully:', data);
} catch (error) {
console.error('Error occurred while updating the file:', error);
}
}