From 8ebd84f792d38623bb76c6c2d8a47ee1b7496547 Mon Sep 17 00:00:00 2001
From: Tuomas Jaakola <tuomas.jaakola@iki.fi>
Date: Mon, 21 Oct 2019 10:57:20 +0300
Subject: [PATCH] test case for css support

---
 __tests__/__snapshots__/css.test.tsx.snap | 311 ++++++++++++++++++++++
 __tests__/css.test.tsx                    |  49 ++++
 babel.config.js                           |   3 +
 package.json                              |   8 +-
 4 files changed, 370 insertions(+), 1 deletion(-)
 create mode 100644 __tests__/__snapshots__/css.test.tsx.snap
 create mode 100644 __tests__/css.test.tsx
 create mode 100644 babel.config.js

diff --git a/__tests__/__snapshots__/css.test.tsx.snap b/__tests__/__snapshots__/css.test.tsx.snap
new file mode 100644
index 00000000..a322c24e
--- /dev/null
+++ b/__tests__/__snapshots__/css.test.tsx.snap
@@ -0,0 +1,311 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`supports CSS in style element 1`] = `
+<RNSVGSvgView
+  align="xMidYMid"
+  bbHeight="100%"
+  bbWidth="100%"
+  focusable={false}
+  height="100%"
+  meetOrSlice={0}
+  minX={0}
+  minY={0}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+      },
+      undefined,
+      Object {
+        "opacity": 1,
+      },
+      Object {
+        "flex": 0,
+        "height": "100%",
+        "width": "100%",
+      },
+    ]
+  }
+  vbHeight={500}
+  vbWidth={1000}
+  version={1.1}
+  width="100%"
+  xml="<?xml version=\\"1.0\\" standalone=\\"no\\"?>
+<!DOCTYPE svg PUBLIC \\"-//W3C//DTD SVG 1.1//EN\\"
+  \\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\\">
+<svg xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\"
+     width=\\"100%\\" height=\\"100%\\" viewBox=\\"0 0 1000 500\\">
+  <defs>
+    <style type=\\"text/css\\">
+      /* tag selector */
+      rect {
+        stroke: blue;
+        fill: yellow
+      }
+
+      /* class selector */
+      .redbox { fill: red; }
+
+      /* multiple selectors */
+      g .class-1, g .class-2 {
+        stroke-width: 16
+      }
+
+      /* two classes */
+      .class-2.transparent {
+        fill-opacity: 0.3;
+      }
+
+      /* Commented out
+      rect {
+        fill: black;
+      }
+      */
+    </style>
+  </defs>
+  <g>
+    <rect class=\\"redbox class-1\\" x=\\"100\\" y=\\"0\\" width=\\"1000\\" height=\\"200\\" />
+  </g>
+  <g>
+    <rect class=\\"redbox class-2 transparent\\" x=\\"100\\" y=\\"350\\" width=\\"750\\" height=\\"200\\" />
+  </g>
+</svg>"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <RNSVGGroup
+    fill={
+      Array [
+        0,
+        4278190080,
+      ]
+    }
+    fillOpacity={1}
+    fillRule={1}
+    font={Object {}}
+    matrix={
+      Array [
+        1,
+        0,
+        0,
+        1,
+        0,
+        0,
+      ]
+    }
+    opacity={1}
+    originX={0}
+    originY={0}
+    propList={Array []}
+    rotation={0}
+    scaleX={1}
+    scaleY={1}
+    skewX={0}
+    skewY={0}
+    stroke={null}
+    strokeDasharray={null}
+    strokeDashoffset={null}
+    strokeLinecap={0}
+    strokeLinejoin={0}
+    strokeMiterlimit={4}
+    strokeOpacity={1}
+    strokeWidth={1}
+    vectorEffect={0}
+    x={0}
+    y={0}
+  >
+    <RNSVGDefs />
+    <RNSVGGroup
+      fill={
+        Array [
+          0,
+          4278190080,
+        ]
+      }
+      fillOpacity={1}
+      fillRule={1}
+      font={Object {}}
+      matrix={
+        Array [
+          1,
+          0,
+          0,
+          1,
+          0,
+          0,
+        ]
+      }
+      opacity={1}
+      originX={0}
+      originY={0}
+      propList={Array []}
+      rotation={0}
+      scaleX={1}
+      scaleY={1}
+      skewX={0}
+      skewY={0}
+      stroke={null}
+      strokeDasharray={null}
+      strokeDashoffset={null}
+      strokeLinecap={0}
+      strokeLinejoin={0}
+      strokeMiterlimit={4}
+      strokeOpacity={1}
+      strokeWidth={1}
+      vectorEffect={0}
+      x={0}
+      y={0}
+    >
+      <RNSVGRect
+        fill={
+          Array [
+            0,
+            4294901760,
+          ]
+        }
+        fillOpacity={1}
+        fillRule={1}
+        height={200}
+        matrix={
+          Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ]
+        }
+        opacity={1}
+        originX={0}
+        originY={0}
+        propList={
+          Array [
+            "fill",
+            "stroke",
+            "strokeWidth",
+          ]
+        }
+        rotation={0}
+        scaleX={1}
+        scaleY={1}
+        skewX={0}
+        skewY={0}
+        stroke={
+          Array [
+            0,
+            4278190335,
+          ]
+        }
+        strokeDasharray={null}
+        strokeDashoffset={null}
+        strokeLinecap={0}
+        strokeLinejoin={0}
+        strokeMiterlimit={4}
+        strokeOpacity={1}
+        strokeWidth="16"
+        vectorEffect={0}
+        width={1000}
+        x={100}
+        y={0}
+      />
+    </RNSVGGroup>
+    <RNSVGGroup
+      fill={
+        Array [
+          0,
+          4278190080,
+        ]
+      }
+      fillOpacity={1}
+      fillRule={1}
+      font={Object {}}
+      matrix={
+        Array [
+          1,
+          0,
+          0,
+          1,
+          0,
+          0,
+        ]
+      }
+      opacity={1}
+      originX={0}
+      originY={0}
+      propList={Array []}
+      rotation={0}
+      scaleX={1}
+      scaleY={1}
+      skewX={0}
+      skewY={0}
+      stroke={null}
+      strokeDasharray={null}
+      strokeDashoffset={null}
+      strokeLinecap={0}
+      strokeLinejoin={0}
+      strokeMiterlimit={4}
+      strokeOpacity={1}
+      strokeWidth={1}
+      vectorEffect={0}
+      x={0}
+      y={0}
+    >
+      <RNSVGRect
+        fill={
+          Array [
+            0,
+            4294901760,
+          ]
+        }
+        fillOpacity={0.3}
+        fillRule={1}
+        height={200}
+        matrix={
+          Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ]
+        }
+        opacity={1}
+        originX={0}
+        originY={0}
+        propList={
+          Array [
+            "fill",
+            "fillOpacity",
+            "stroke",
+            "strokeWidth",
+          ]
+        }
+        rotation={0}
+        scaleX={1}
+        scaleY={1}
+        skewX={0}
+        skewY={0}
+        stroke={
+          Array [
+            0,
+            4278190335,
+          ]
+        }
+        strokeDasharray={null}
+        strokeDashoffset={null}
+        strokeLinecap={0}
+        strokeLinejoin={0}
+        strokeMiterlimit={4}
+        strokeOpacity={1}
+        strokeWidth="16"
+        vectorEffect={0}
+        width={750}
+        x={100}
+        y={350}
+      />
+    </RNSVGGroup>
+  </RNSVGGroup>
+</RNSVGSvgView>
+`;
diff --git a/__tests__/css.test.tsx b/__tests__/css.test.tsx
new file mode 100644
index 00000000..168b829d
--- /dev/null
+++ b/__tests__/css.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { SvgCss, SvgCssUri, inlineStyles } from '../src/css';
+
+test('supports CSS in style element', () => {
+  const xml = `<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     width="100%" height="100%" viewBox="0 0 1000 500">
+  <defs>
+    <style type="text/css">
+      /* tag selector */
+      rect {
+        stroke: blue;
+        fill: yellow
+      }
+
+      /* class selector */
+      .redbox { fill: red; }
+
+      /* multiple selectors */
+      g .class-1, g .class-2 {
+        stroke-width: 16
+      }
+
+      /* two classes */
+      .class-2.transparent {
+        fill-opacity: 0.3;
+      }
+
+      /* Commented out
+      rect {
+        fill: black;
+      }
+      */
+    </style>
+  </defs>
+  <g>
+    <rect class="redbox class-1" x="100" y="0" width="1000" height="200" />
+  </g>
+  <g>
+    <rect class="redbox class-2 transparent" x="100" y="350" width="750" height="200" />
+  </g>
+</svg>`;
+
+  const tree = renderer.create(<SvgCss xml={xml} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 00000000..f842b77f
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};
diff --git a/package.json b/package.json
index 86102087..95de382d 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "format": "prettier README.md './src/**/*.{ts,tsx}' src/index.d.ts --write",
     "peg": "pegjs -o src/lib/extract/transform.js ./src/lib/extract/transform.peg",
     "tsc": "tsc --noEmit",
-    "test": "npm run lint && npm run tsc && npm run flow",
+    "test": "npm run lint && npm run tsc && npm run flow && jest",
     "prepare": "npm run flowgen && npm run bob",
     "semantic-release": "semantic-release"
   },
@@ -63,6 +63,7 @@
     "@types/react": "^16.9.5",
     "@types/react-native": "^0.60.19",
     "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
     "eslint": "^6.5.1",
     "eslint-plugin-flowtype": "^4.3.0",
     "eslint-plugin-prettier": "^3.1.1",
@@ -70,14 +71,19 @@
     "flow-bin": "^0.109.0",
     "flow-typed": "^2.6.1",
     "flowgen": "^1.10.0",
+    "jest": "^24.9.0",
     "pegjs": "^0.10.0",
     "prettier": "^1.18.2",
     "react": "^16.10.2",
     "react-native": "^0.61.2",
+    "react-test-renderer": "^16.10.2",
     "semantic-release": "^15.13.24",
     "semantic-release-cli": "^5.2.1",
     "typescript": "^3.6.3"
   },
+  "jest": {
+    "preset": "react-native"
+  },
   "release": {
     "plugins": [
       "@semantic-release/commit-analyzer",