mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-05 22:56:11 +00:00
a089cc2efc
<!-- 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>
51 lines
2.7 KiB
Diff
51 lines
2.7 KiB
Diff
diff --git a/node_modules/react-native-view-shot/ios/RNViewShot.m b/node_modules/react-native-view-shot/ios/RNViewShot.m
|
|
index bd55b92..6a20e9d 100644
|
|
--- a/node_modules/react-native-view-shot/ios/RNViewShot.m
|
|
+++ b/node_modules/react-native-view-shot/ios/RNViewShot.m
|
|
@@ -106,7 +106,7 @@ - (dispatch_queue_t)methodQueue
|
|
scrollView.frame = CGRectMake(0, 0, scrollView.contentSize.width, scrollView.contentSize.height);
|
|
}
|
|
|
|
- UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:size];
|
|
+ UIGraphicsBeginImageContextWithOptions(size, NO, 0);
|
|
|
|
if (renderInContext) {
|
|
// this comes with some trade-offs such as inability to capture gradients or scrollview's content in full but it works for large views
|
|
@@ -117,8 +117,8 @@ - (dispatch_queue_t)methodQueue
|
|
// this doesn't work for large views and reports incorrect success even though the image is blank
|
|
success = [rendered drawViewHierarchyInRect:(CGRect){CGPointZero, size} afterScreenUpdates:YES];
|
|
}
|
|
-
|
|
- UIImage *image = [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {}];
|
|
+ UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
|
|
+ UIGraphicsEndImageContext();
|
|
|
|
if (snapshotContentContainer) {
|
|
// Restore scroll & frame
|
|
@@ -152,11 +152,11 @@ - (dispatch_queue_t)methodQueue
|
|
NSString *res = nil;
|
|
if ([result isEqualToString:@"base64"]) {
|
|
// Return as a base64 raw string
|
|
- res = [data base64EncodedStringWithOptions: 0];
|
|
+ res = [data base64EncodedStringWithOptions: NSDataBase64EncodingEndLineWithLineFeed];
|
|
}
|
|
else if ([result isEqualToString:@"data-uri"]) {
|
|
// Return as a base64 data uri string
|
|
- NSString *base64 = [data base64EncodedStringWithOptions: 0];
|
|
+ NSString *base64 = [data base64EncodedStringWithOptions: NSDataBase64EncodingEndLineWithLineFeed];
|
|
NSString *imageFormat = ([format isEqualToString:@"jpg"]) ? @"jpeg" : format;
|
|
res = [NSString stringWithFormat:@"data:image/%@;base64,%@", imageFormat, base64];
|
|
}
|
|
diff --git a/node_modules/react-native-view-shot/src/specs/NativeRNViewShot.ts b/node_modules/react-native-view-shot/src/specs/NativeRNViewShot.ts
|
|
index a6f4c00..1e9e6ce 100644
|
|
--- a/node_modules/react-native-view-shot/src/specs/NativeRNViewShot.ts
|
|
+++ b/node_modules/react-native-view-shot/src/specs/NativeRNViewShot.ts
|
|
@@ -2,7 +2,7 @@ import type { TurboModule } from 'react-native';
|
|
import { TurboModuleRegistry } from 'react-native';
|
|
|
|
export interface Spec extends TurboModule {
|
|
- releaseCapture: () => string;
|
|
+ releaseCapture: (uri: string) => void;
|
|
captureRef: (tag: number, options: Object) => Promise<string>
|
|
captureScreen: (options: Object) => Promise<string>;
|
|
}
|