Removes react-test-renderer npm package

This patch removes `react-test-renderer` npm package as it was used in only two component for snapshot which can be done replaced by enjzyme package. Signed-off-by: Shiv Verma <[email protected]>
tektoncd · Sep 1, 2022 · e4a2e43 · e4a2e43
1 parent 5983d0a
commit e4a2e43
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 176 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -16,7 +16,6 @@
     "@types/react-dom": "^18.0.1",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-syntax-highlighter": "^15.5.2",
-    "@types/react-test-renderer": "^18.0.0",
     "axios": "^0.27.2",
     "fuzzysort": "^2.0.1",
     "mobx": "^6.6.1",
@@ -76,7 +75,6 @@
     "prettier": "2.7.0",
     "process": "^0.11.10",
     "react-app-rewired": "^2.2.1",
-    "react-test-renderer": "^16.14.0",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "url": "^0.11.0"

diff --git a/ui/src/components/Background/Background.test.tsx b/ui/src/components/Background/Background.test.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
 import Background from '.';
 
 it('should render the background component', () => {
-  const component = renderer.create(<Background />).toJSON();
-  expect(component).toMatchSnapshot();
+  const component = shallow(<Background />);
+  expect(component.debug()).toMatchSnapshot();
 });
diff --git a/ui/src/components/Background/__snapshots__/Background.test.tsx.snap b/ui/src/components/Background/__snapshots__/Background.test.tsx.snap
@@ -1,35 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render the background component 1`] = `
-<div
-  className="hub-background-image"
-  style={
-    Object {
-      "backgroundImage": "url(background.jpg)",
-    }
-  }
->
-  <div
-    className="pf-c-content"
-  >
-    <h1
-      className="hub-background-heading"
-      data-ouia-component-id="OUIA-Generated-Text-1"
-      data-ouia-component-type="PF4/Text"
-      data-ouia-safe={true}
-      data-pf-content={true}
-    >
+"<div className=\\"hub-background-image\\" style={{...}}>
+  <TextContent>
+    <Text component=\\"h1\\" className=\\"hub-background-heading\\">
       Welcome to Tekton Hub
-    </h1>
-    <h3
-      className="hub-tag-line"
-      data-ouia-component-id="OUIA-Generated-Text-2"
-      data-ouia-component-type="PF4/Text"
-      data-ouia-safe={true}
-      data-pf-content={true}
-    >
+    </Text>
+    <Text component=\\"h3\\" className=\\"hub-tag-line\\">
       Discover, search and share reusable Tasks and Pipelines
-    </h3>
-  </div>
-</div>
+    </Text>
+  </TextContent>
+</div>"
 `;
diff --git a/ui/src/components/Footer/Footer.test.tsx b/ui/src/components/Footer/Footer.test.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
 import Footer from '.';
 import { FakeDate, ActualDate } from '../../common/testutils';
 
@@ -10,6 +9,6 @@ FakeDate();
 ActualDate();
 
 it('should render the footer component', () => {
-  const component = renderer.create(<Footer />).toJSON();
-  expect(component).toMatchSnapshot();
+  const component = shallow(<Footer />);
+  expect(component.debug()).toMatchSnapshot();
 });
diff --git a/ui/src/components/Footer/__snapshots__/Footer.test.tsx.snap b/ui/src/components/Footer/__snapshots__/Footer.test.tsx.snap
@@ -1,125 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render the footer component 1`] = `
-<article
-  className="pf-c-card hub-footer-card"
-  data-ouia-component-id="OUIA-Generated-Card-1"
-  data-ouia-component-type="PF4/Card"
-  data-ouia-safe={true}
-  id=""
->
-  <div
-    className="pf-l-grid"
-  >
-    <div
-      className="pf-l-grid__item pf-m-12-col hub-footer-info"
-    >
-      <a
-        href="https://cd.foundation"
-        target="_"
-      >
-        <img
-          alt="tekton.dev"
-          src="https://tekton.dev/partner-logos/cdf.png?1609496430000"
-        />
-      </a>
-    </div>
-    <div
-      className="pf-l-grid__item pf-m-12-col hub-footer-info"
-    >
-      <div
-        className="pf-c-content hub-info-color"
-      >
-        <h3
-          className=""
-          data-ouia-component-id="OUIA-Generated-Text-1"
-          data-ouia-component-type="PF4/Text"
-          data-ouia-safe={true}
-          data-pf-content={true}
-        >
-          Tekton is a
+"<Fragment>
+  <Card className=\\"hub-footer-card\\">
+    <Grid>
+      <GridItem span={12} className=\\"hub-footer-info\\">
+        <a href=\\"https://cd.foundation\\" target=\\"_\\">
+          <img src=\\"https://tekton.dev/partner-logos/cdf.png?1609496430000\\" alt=\\"tekton.dev\\" />
+        </a>
+      </GridItem>
+      <GridItem span={12} className=\\"hub-footer-info\\">
+        <TextContent className=\\"hub-info-color\\">
+          <Text component=\\"h3\\">
+            Tekton is a
+             
+            <Text component=\\"a\\" href=\\"https://cd.foundation\\" target=\\"_\\">
+              Continuous Delivery Foundation
+            </Text>
+             
+            project.
+          </Text>
+        </TextContent>
+      </GridItem>
+      <GridItem span={12} className=\\"hub-logo-margin\\">
+        <img src=\\"tekton.png?1609496430000\\" alt=\\"Tekton\\" className=\\"hub-logo-size\\" />
+      </GridItem>
+      <GridItem span={12} className=\\"hub-footer-description\\">
+        <Text>
+          © 
+          2022
+           The Linux Foundation®. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our
            
-          <a
-            className=""
-            data-ouia-component-id="OUIA-Generated-Text-2"
-            data-ouia-component-type="PF4/Text"
-            data-ouia-safe={true}
-            data-pf-content={true}
-            href="https://cd.foundation"
-            target="_"
-          >
-            Continuous Delivery Foundation
-          </a>
+          <Text component=\\"a\\" href=\\"https://www.linuxfoundation.org/trademark-usage/\\" target=\\"_\\">
+            Trademark Usage page
+          </Text>
+          . Linux is a registered trademark of Linus Torvalds.
            
-          project.
-        </h3>
-      </div>
-    </div>
-    <div
-      className="pf-l-grid__item pf-m-12-col hub-logo-margin"
-    >
-      <img
-        alt="Tekton"
-        className="hub-logo-size"
-        src="tekton.png?1609496430000"
-      />
-    </div>
-    <div
-      className="pf-l-grid__item pf-m-12-col hub-footer-description"
-    >
-      <p
-        className=""
-        data-ouia-component-id="OUIA-Generated-Text-3"
-        data-ouia-component-type="PF4/Text"
-        data-ouia-safe={true}
-        data-pf-content={true}
-      >
-        © 
-        2022
-         The Linux Foundation®. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our
-         
-        <a
-          className=""
-          data-ouia-component-id="OUIA-Generated-Text-4"
-          data-ouia-component-type="PF4/Text"
-          data-ouia-safe={true}
-          data-pf-content={true}
-          href="https://www.linuxfoundation.org/trademark-usage/"
-          target="_"
-        >
-          Trademark Usage page
-        </a>
-        . Linux is a registered trademark of Linus Torvalds.
-         
-        <a
-          className=""
-          data-ouia-component-id="OUIA-Generated-Text-5"
-          data-ouia-component-type="PF4/Text"
-          data-ouia-safe={true}
-          data-pf-content={true}
-          href="https://www.linuxfoundation.org/privacy/"
-          target="_"
-        >
-          Privacy Policy
-        </a>
-         
-        and
-         
-        <a
-          className=""
-          data-ouia-component-id="OUIA-Generated-Text-6"
-          data-ouia-component-type="PF4/Text"
-          data-ouia-safe={true}
-          data-pf-content={true}
-          href="https://www.linuxfoundation.org/terms/"
-          target="_"
-        >
-          Terms of Use
-        </a>
-         
-        .
-      </p>
-    </div>
-  </div>
-</article>
+          <Text component=\\"a\\" href=\\"https://www.linuxfoundation.org/privacy/\\" target=\\"_\\">
+            Privacy Policy
+          </Text>
+           
+          and
+           
+          <Text component=\\"a\\" href=\\"https://www.linuxfoundation.org/terms/\\" target=\\"_\\">
+            Terms of Use
+          </Text>
+           
+          .
+        </Text>
+      </GridItem>
+    </Grid>
+  </Card>
+</Fragment>"
 `;