Skip to content

Commit

Permalink
test: directly wrap svg component with memo/forwardRef in snapshots (g…
Browse files Browse the repository at this point in the history 
…regberge#440)
  • Loading branch information
@katywings
katywings committed Apr 26, 2020
1 parent b49874b commit 4ff0db0
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 75 deletions.
55 changes: 16 additions & 39 deletions packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,27 +90,22 @@ export default SvgComponent;"
exports[`plugin javascript with "ref" and "expandProps" option expands props 1`] = `
"import * as React from \\"react\\";
function SvgComponent({
svgRef,
...props
}) {
function SvgComponent(props, svgRef) {
return <svg><g /></svg>;
}
const ForwardRef = React.forwardRef((props, ref) => <SvgComponent svgRef={ref} {...props} />);
const ForwardRef = React.forwardRef(SvgComponent);
export default ForwardRef;"
`;
exports[`plugin javascript with "ref" option adds ForwardRef component 1`] = `
"import * as React from \\"react\\";
function SvgComponent({
svgRef
}) {
function SvgComponent(props, svgRef) {
return <svg><g /></svg>;
}
const ForwardRef = React.forwardRef((props, ref) => <SvgComponent svgRef={ref} {...props} />);
const ForwardRef = React.forwardRef(SvgComponent);
export default ForwardRef;"
`;
Expand All @@ -130,15 +125,13 @@ export default SvgComponent;"
exports[`plugin javascript with both "memo" and "ref" option wrap component in "React.memo" and "React.forwardRef" 1`] = `
"import * as React from \\"react\\";
function SvgComponent({
svgRef
}) {
function SvgComponent(props, svgRef) {
return <svg><g /></svg>;
}
const MemoSvgComponent = React.memo(SvgComponent);
const ForwardRef = React.forwardRef((props, ref) => <MemoSvgComponent svgRef={ref} {...props} />);
export default ForwardRef;"
const ForwardRef = React.forwardRef(SvgComponent);
const MemoForwardRef = React.memo(ForwardRef);
export default MemoForwardRef;"
`;
exports[`plugin typescript custom templates support basic template 1`] = `
Expand Down Expand Up @@ -214,34 +207,23 @@ export default SvgComponent;"
exports[`plugin typescript with "ref" and "expandProps" option expands props 1`] = `
"import * as React from \\"react\\";
interface SVGRProps {
svgRef?: React.Ref<SVGSVGElement>
}
function SvgComponent({
svgRef,
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) {
function SvgComponent(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) {
return <svg><g /></svg>;
}
const ForwardRef = React.forwardRef((props, ref: React.Ref<SVGSVGElement>) => <SvgComponent svgRef={ref} {...props} />);
const ForwardRef = React.forwardRef(SvgComponent);
export default ForwardRef;"
`;
exports[`plugin typescript with "ref" option adds ForwardRef component 1`] = `
"import * as React from \\"react\\";
interface SVGRProps {
svgRef?: React.Ref<SVGSVGElement>
}
function SvgComponent({
svgRef
}: SVGRProps) {
function SvgComponent(props: {}, svgRef?: React.Ref<SVGSVGElement>) {
return <svg><g /></svg>;
}
const ForwardRef = React.forwardRef((props, ref: React.Ref<SVGSVGElement>) => <SvgComponent svgRef={ref} {...props} />);
const ForwardRef = React.forwardRef(SvgComponent);
export default ForwardRef;"
`;
Expand All @@ -264,17 +246,12 @@ export default SvgComponent;"
exports[`plugin typescript with both "memo" and "ref" option wrap component in "React.memo" and "React.forwardRef" 1`] = `
"import * as React from \\"react\\";
interface SVGRProps {
svgRef?: React.Ref<SVGSVGElement>
}
function SvgComponent({
svgRef
}: SVGRProps) {
function SvgComponent(props: {}, svgRef?: React.Ref<SVGSVGElement>) {
return <svg><g /></svg>;
}
const MemoSvgComponent = React.memo(SvgComponent);
const ForwardRef = React.forwardRef((props, ref: React.Ref<SVGSVGElement>) => <MemoSvgComponent svgRef={ref} {...props} />);
export default ForwardRef;"
const ForwardRef = React.forwardRef(SvgComponent);
const MemoForwardRef = React.memo(ForwardRef);
export default MemoForwardRef;"
`;
42 changes: 14 additions & 28 deletions packages/cli/src/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,17 +235,15 @@ exports[`cli should support various args: --native --ref 1`] = `
"import * as React from 'react'
import Svg, { Path } from 'react-native-svg'
function SvgFile({ svgRef, ...props }) {
function SvgFile(props, svgRef) {
return (
<Svg width={48} height={1} ref={svgRef} {...props}>
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</Svg>
)
}
const ForwardRef = React.forwardRef((props, ref) => (
<SvgFile svgRef={ref} {...props} />
))
const ForwardRef = React.forwardRef(SvgFile)
export default ForwardRef
"
Expand Down Expand Up @@ -339,17 +337,15 @@ export default SvgFile
exports[`cli should support various args: --ref 1`] = `
"import * as React from 'react'
function SvgFile({ svgRef, ...props }) {
function SvgFile(props, svgRef) {
return (
<svg width={48} height={1} ref={svgRef} {...props}>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
}
const ForwardRef = React.forwardRef((props, ref) => (
<SvgFile svgRef={ref} {...props} />
))
const ForwardRef = React.forwardRef(SvgFile)
export default ForwardRef
"
Expand Down Expand Up @@ -407,17 +403,14 @@ export default SvgFile
exports[`cli should support various args: --typescript --ref --title-prop 1`] = `
"import * as React from 'react'
interface SVGRProps {
svgRef?: React.Ref<SVGSVGElement>;
title?: string;
titleId?: string;
}
function SvgFile({
svgRef,
title,
titleId,
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) {
function SvgFile(
{ title, titleId, ...props }: React.SVGProps<SVGSVGElement> & SVGRProps,
svgRef?: React.Ref<SVGSVGElement>,
) {
return (
<svg
width={48}
Expand All @@ -432,34 +425,27 @@ function SvgFile({
)
}
const ForwardRef = React.forwardRef((props, ref: React.Ref<SVGSVGElement>) => (
<SvgFile svgRef={ref} {...props} />
))
const ForwardRef = React.forwardRef(SvgFile)
export default ForwardRef
"
`;
exports[`cli should support various args: --typescript --ref 1`] = `
"import * as React from 'react'
interface SVGRProps {
svgRef?: React.Ref<SVGSVGElement>;
}
function SvgFile({
svgRef,
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) {
function SvgFile(
props: React.SVGProps<SVGSVGElement>,
svgRef?: React.Ref<SVGSVGElement>,
) {
return (
<svg width={48} height={1} ref={svgRef} {...props}>
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
</svg>
)
}
const ForwardRef = React.forwardRef((props, ref: React.Ref<SVGSVGElement>) => (
<SvgFile svgRef={ref} {...props} />
))
const ForwardRef = React.forwardRef(SvgFile)
export default ForwardRef
"
Expand Down
12 changes: 4 additions & 8 deletions packages/core/src/__snapshots__/convert.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ exports[`convert config should support options 8 1`] = `
"import * as React from 'react'
import Svg, { G, Path } from 'react-native-svg'
function SvgComponent({ svgRef, ...props }) {
function SvgComponent(props, svgRef) {
return (
<Svg width={88} height={88} ref={svgRef} {...props}>
<G
Expand All @@ -208,17 +208,15 @@ function SvgComponent({ svgRef, ...props }) {
)
}
const ForwardRef = React.forwardRef((props, ref) => (
<SvgComponent svgRef={ref} {...props} />
))
const ForwardRef = React.forwardRef(SvgComponent)
export default ForwardRef
"
`;

exports[`convert config should support options 9 1`] = `
"import * as React from 'react'
function SvgComponent({ svgRef, ...props }) {
function SvgComponent(props, svgRef) {
return (
<svg width={88} height={88} ref={svgRef} {...props}>
<g
Expand All @@ -234,9 +232,7 @@ function SvgComponent({ svgRef, ...props }) {
)
}
const ForwardRef = React.forwardRef((props, ref) => (
<SvgComponent svgRef={ref} {...props} />
))
const ForwardRef = React.forwardRef(SvgComponent)
export default ForwardRef
"
`;
Expand Down

0 comments on commit 4ff0db0

Please sign in to comment.