Skip to content

Commit

Permalink
feat(TDP-1703): removed react-native use of its own <Image/> component (
Browse files Browse the repository at this point in the history 
newsuk#2906)

* feat(TDP-1703): removed react-native use of its <Image/> component

* feat(TDP-1703): updated a few snapshots and minor changes to readme

* feat(TDP-1703): just a random space to force ciricleCi to restart as dont believe was working after yesterdays outage

* feat(TDP-1703): updated tests and linting

* feat(TDP-1703): updated package list

* updated unit tests for section and removed redundant magazine test

* added test to check onPress for button for ArticleListPageError

* feat(TDP-1703): updated linting and updated snapshot for unit tests

* feat(TDP-1703): updated test

Co-authored-by: Fayeez Ahmed <fahmed@mc112325.fritz.box>
  • Loading branch information
@adamosborne-tnl @fayeez-tnl
adamosborne-tnl and fayeez-tnl committed Apr 8, 2022
1 parent b2b7b1c commit 2717c6f
Show file tree
Hide file tree
Showing 64 changed files with 881 additions and 3,456 deletions.
44 changes: 40 additions & 4 deletions packages/article-image/__tests__/web/__snapshots__/article-image-with-style.web.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,24 @@

exports[`1. mobile primary image with caption and credits 1`] = `
.c0 {
border: 0px solid black;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 0px;
min-height: 0px;
min-width: 0px;
padding: 0px;
position: relative;
z-index: 0;
}
.c1 {
display: block;
opacity: 0;
position: absolute;
Expand All @@ -11,12 +29,12 @@ exports[`1. mobile primary image with caption and credits 1`] = `
z-index: 2;
}
.c1 {
.c2 {
padding-left: 10px;
}
@media (min-width:768px) {
.c1 {
.c2 {
padding-left: 0px;
}
}
Expand Down Expand Up @@ -55,7 +73,7 @@ Array [
"componentStyle": ComponentStyle {
"componentId": "responsive__InsetCaptionStyle-sc-1io40fc-2",
"isStatic": true,
"lastClassName": "c1",
"lastClassName": "c2",
"rules": Array [
"padding-left:",
"10px",
Expand All @@ -77,7 +95,7 @@ Array [
forwardedRef={null}
>
<div
className="c1 responsive__InsetCaptionStyle-sc-1io40fc-2 c1 css-view-1dbjc4n"
className="c2 responsive__InsetCaptionStyle-sc-1io40fc-2 c2 css-view-1dbjc4n"
>
<div
className="css-view-1dbjc4n"
Expand Down Expand Up @@ -106,6 +124,24 @@ Array [

exports[`2. secondary image with caption and credits 1`] = `
.c0 {
border: 0px solid black;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 0px;
min-height: 0px;
min-width: 0px;
padding: 0px;
position: relative;
z-index: 0;
}
.c1 {
display: block;
opacity: 0;
position: absolute;
Expand Down
216 changes: 123 additions & 93 deletions packages/article-image/__tests__/web/__snapshots__/article-image.web.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,43 +28,53 @@ exports[`4. inline image with no ratio only shows caption and credits 1`] = `
exports[`5. image with no caption 1`] = `
Array [
<div>
<div
data-testid="Image"
<tc-view__TcView
testID="Image"
>
<div>
<responsive
alt={null}
isLoaded={false}
src="https://img/someImage"
zIndex={2}
>
<img
<div>
<responsive
alt={null}
isLoaded={false}
src="https://img/someImage"
/>
</responsive>
<div>
<svg
height="auto"
version="1.1"
viewBox="145 50 108 120"
zIndex={2}
>
<img
alt={null}
src="https://img/someImage"
/>
</responsive>
<tc-view__TcView
height="100%"
width="100%"
>
<g
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1"
<div
height="100%"
width="100%"
>
<path
d="M211.26076,54 L211.231367,54 L147.67512,54 L145,85.7081465 L146.922096,86.4489102 C146.922096,86.4489102 164.867589,68.1355181 168.301115,65.0001546 C171.728017,61.8689133 174.237132,61.0885763 176.436179,60.3527593 C180.998206,59.169681 185.977937,59.2150255 185.977937,59.2150255 L186.109581,59.2150255 L186.109581,156.560932 L169.259886,164.473953 L169.259886,166 L228.735147,166 L228.735147,164.473953 L211.889177,156.560932 L211.889177,59.2150255 L212.01751,59.2150255 C212.01751,59.2150255 216.992272,59.169681 221.558854,60.3527593 C223.757072,61.0885763 226.266601,61.8689133 229.691848,65.0001546 C233.130341,68.1355181 251.071695,86.4489102 251.071695,86.4489102 L253,85.7081465 L250.317842,54 L211.270695,54 L211.242545,54"
fill="#FFFFFF"
/>
</g>
</svg>
<svg
height="auto"
version="1.1"
viewBox="145 50 108 120"
width="100%"
>
<g
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1"
>
<path
d="M211.26076,54 L211.231367,54 L147.67512,54 L145,85.7081465 L146.922096,86.4489102 C146.922096,86.4489102 164.867589,68.1355181 168.301115,65.0001546 C171.728017,61.8689133 174.237132,61.0885763 176.436179,60.3527593 C180.998206,59.169681 185.977937,59.2150255 185.977937,59.2150255 L186.109581,59.2150255 L186.109581,156.560932 L169.259886,164.473953 L169.259886,166 L228.735147,166 L228.735147,164.473953 L211.889177,156.560932 L211.889177,59.2150255 L212.01751,59.2150255 C212.01751,59.2150255 216.992272,59.169681 221.558854,60.3527593 C223.757072,61.0885763 226.266601,61.8689133 229.691848,65.0001546 C233.130341,68.1355181 251.071695,86.4489102 251.071695,86.4489102 L253,85.7081465 L250.317842,54 L211.270695,54 L211.242545,54"
fill="#FFFFFF"
/>
</g>
</svg>
</div>
</tc-view__TcView>
</div>
</div>
</div>
</tc-view__TcView>
</div>,
"",
]
Expand Down Expand Up @@ -97,43 +107,53 @@ exports[`7. image with no display only shows given credits 1`] = `
exports[`8. primary image renders with caption and credits 1`] = `
Array [
<div>
<div
data-testid="Image"
<tc-view__TcView
testID="Image"
>
<div>
<responsive
alt="Some caption"
isLoaded={false}
src="https://img/someImage"
zIndex={2}
>
<img
<div>
<responsive
alt="Some caption"
isLoaded={false}
src="https://img/someImage"
/>
</responsive>
<div>
<svg
height="auto"
version="1.1"
viewBox="145 50 108 120"
zIndex={2}
>
<img
alt="Some caption"
src="https://img/someImage"
/>
</responsive>
<tc-view__TcView
height="100%"
width="100%"
>
<g
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1"
<div
height="100%"
width="100%"
>
<path
d="M211.26076,54 L211.231367,54 L147.67512,54 L145,85.7081465 L146.922096,86.4489102 C146.922096,86.4489102 164.867589,68.1355181 168.301115,65.0001546 C171.728017,61.8689133 174.237132,61.0885763 176.436179,60.3527593 C180.998206,59.169681 185.977937,59.2150255 185.977937,59.2150255 L186.109581,59.2150255 L186.109581,156.560932 L169.259886,164.473953 L169.259886,166 L228.735147,166 L228.735147,164.473953 L211.889177,156.560932 L211.889177,59.2150255 L212.01751,59.2150255 C212.01751,59.2150255 216.992272,59.169681 221.558854,60.3527593 C223.757072,61.0885763 226.266601,61.8689133 229.691848,65.0001546 C233.130341,68.1355181 251.071695,86.4489102 251.071695,86.4489102 L253,85.7081465 L250.317842,54 L211.270695,54 L211.242545,54"
fill="#FFFFFF"
/>
</g>
</svg>
<svg
height="auto"
version="1.1"
viewBox="145 50 108 120"
width="100%"
>
<g
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1"
>
<path
d="M211.26076,54 L211.231367,54 L147.67512,54 L145,85.7081465 L146.922096,86.4489102 C146.922096,86.4489102 164.867589,68.1355181 168.301115,65.0001546 C171.728017,61.8689133 174.237132,61.0885763 176.436179,60.3527593 C180.998206,59.169681 185.977937,59.2150255 185.977937,59.2150255 L186.109581,59.2150255 L186.109581,156.560932 L169.259886,164.473953 L169.259886,166 L228.735147,166 L228.735147,164.473953 L211.889177,156.560932 L211.889177,59.2150255 L212.01751,59.2150255 C212.01751,59.2150255 216.992272,59.169681 221.558854,60.3527593 C223.757072,61.0885763 226.266601,61.8689133 229.691848,65.0001546 C233.130341,68.1355181 251.071695,86.4489102 251.071695,86.4489102 L253,85.7081465 L250.317842,54 L211.270695,54 L211.242545,54"
fill="#FFFFFF"
/>
</g>
</svg>
</div>
</tc-view__TcView>
</div>
</div>
</div>
</tc-view__TcView>
</div>,
<div>
<responsive__InsetCaptionStyle>
Expand All @@ -157,54 +177,64 @@ Array [
exports[`9. primary image with given resolutions 1`] = `
Array [
<div>
<div
data-testid="Image"
<tc-view__TcView
testID="Image"
>
<div>
<responsive
alt="Some caption"
isLoaded={false}
src="https://img/someImage?resize=900"
zIndex={2}
>
<img
<div>
<responsive
alt="Some caption"
isLoaded={false}
src="https://img/someImage?resize=900"
/>
</responsive>
<responsive
alt="Some caption"
isLoaded={true}
src="https://img/someImage?resize=50"
zIndex={1}
>
<img
zIndex={2}
>
<img
alt="Some caption"
src="https://img/someImage?resize=900"
/>
</responsive>
<responsive
alt="Some caption"
isLoaded={true}
src="https://img/someImage?resize=50"
/>
</responsive>
<div>
<svg
height="auto"
version="1.1"
viewBox="145 50 108 120"
zIndex={1}
>
<img
alt="Some caption"
src="https://img/someImage?resize=50"
/>
</responsive>
<tc-view__TcView
height="100%"
width="100%"
>
<g
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1"
<div
height="100%"
width="100%"
>
<path
d="M211.26076,54 L211.231367,54 L147.67512,54 L145,85.7081465 L146.922096,86.4489102 C146.922096,86.4489102 164.867589,68.1355181 168.301115,65.0001546 C171.728017,61.8689133 174.237132,61.0885763 176.436179,60.3527593 C180.998206,59.169681 185.977937,59.2150255 185.977937,59.2150255 L186.109581,59.2150255 L186.109581,156.560932 L169.259886,164.473953 L169.259886,166 L228.735147,166 L228.735147,164.473953 L211.889177,156.560932 L211.889177,59.2150255 L212.01751,59.2150255 C212.01751,59.2150255 216.992272,59.169681 221.558854,60.3527593 C223.757072,61.0885763 226.266601,61.8689133 229.691848,65.0001546 C233.130341,68.1355181 251.071695,86.4489102 251.071695,86.4489102 L253,85.7081465 L250.317842,54 L211.270695,54 L211.242545,54"
fill="#FFFFFF"
/>
</g>
</svg>
<svg
height="auto"
version="1.1"
viewBox="145 50 108 120"
width="100%"
>
<g
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1"
>
<path
d="M211.26076,54 L211.231367,54 L147.67512,54 L145,85.7081465 L146.922096,86.4489102 C146.922096,86.4489102 164.867589,68.1355181 168.301115,65.0001546 C171.728017,61.8689133 174.237132,61.0885763 176.436179,60.3527593 C180.998206,59.169681 185.977937,59.2150255 185.977937,59.2150255 L186.109581,59.2150255 L186.109581,156.560932 L169.259886,164.473953 L169.259886,166 L228.735147,166 L228.735147,164.473953 L211.889177,156.560932 L211.889177,59.2150255 L212.01751,59.2150255 C212.01751,59.2150255 216.992272,59.169681 221.558854,60.3527593 C223.757072,61.0885763 226.266601,61.8689133 229.691848,65.0001546 C233.130341,68.1355181 251.071695,86.4489102 251.071695,86.4489102 L253,85.7081465 L250.317842,54 L211.270695,54 L211.242545,54"
fill="#FFFFFF"
/>
</g>
</svg>
</div>
</tc-view__TcView>
</div>
</div>
</div>
</tc-view__TcView>
</div>,
<div>
<responsive__InsetCaptionStyle>
Expand Down
2 changes: 1 addition & 1 deletion packages/article-image/src/inline-image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const InlineImage = ({ imageOptions, captionOptions }) => {
<figure style={{ margin: 0 }}>
<InsetImageStyle key="img">
<Image
alt={caption}
accessibilityLabel={caption}
aspectRatio={aspectRatio}
highResSize={highResSize}
lowResSize={lowResSize}
Expand Down
6 changes: 4 additions & 2 deletions packages/article-list/__tests__/shared-error.base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,12 @@ export default () => {
{
name: "page error",
test() {
const refetchMock = jest.fn();
const testInstance = TestRenderer.create(
<ArticleListPageError refetch={() => {}} />
<ArticleListPageError refetch={refetchMock} />
);

testInstance.root.findByType("Button").props.onPress();
expect(refetchMock).toHaveBeenCalled();
expect(testInstance).toMatchSnapshot();
}
},
Expand Down
Loading

0 comments on commit 2717c6f

Please sign in to comment.