test: add counter-regression test for #524

packages/render-html/src/__tests__/regression.524.img-enable-exp-percent-width.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import RenderHTML from '../RenderHTML';
+import { render } from '@testing-library/react-native';
+
+/**
+ * https://github.com/meliorence/react-native-render-html/issues/524
+ **/
+describe('RenderHTML component', () => {
+  describe('should pass regression regarding percent width', () => {
+    it('dimensions should not be derived from aspect ratio', async () => {
+      const renderersProps = {
+        img: {
+          enableExperimentalPercentWidth: true
+        }
+      };
+      const { findByTestId } = render(
+        <RenderHTML
+          debug={false}
+          contentWidth={300}
+          renderersProps={renderersProps}
+          source={{
+            html: '<img style="width:100%" src="https://img.com/1920x1080" width="800" height="400"/>'
+          }}
+        />
+      );
+      const img = await findByTestId('image-success');
+      expect(img).toHaveStyle({
+        width: 300,
+        height: 400
+      });
+    });
+  });
+});

packages/render-html/src/elements/__tests__/IMGElement.test.tsx

@@ -313,10 +313,11 @@ describe('IMGElement', () => {
       const image = await findByTestId('image-success');
       expect(image).toBeTruthy();
       expect(image).toHaveStyle({
-        width: 640
+        width: 640,
+        height: 360
       });
     });
-    it('should support strings for width and height which can be parsed to floats', async () => {
+    it('should support strings for width and height which can be parsed to numbers', async () => {
       const source = { uri: 'http://via.placeholder.com/640x360' };
       const style = {
         width: '50'
@@ -340,7 +341,7 @@ describe('IMGElement', () => {
         const { findByTestId } = render(
           <HTMLImgElement
             enableExperimentalPercentWidth
-            contentWidth={250}
+            contentWidth={contentWidth}
             {...style}
             source={source}
           />