Fix Text component migration tests and add replacement of identifiers

Author: sam-b-rose

.changeset/fresh-rats-pay.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': patch
+---
+
+Add support to replace Identifiers along with JSXIdentifiers for Text migration

polaris-migrator/src/migrations/react-replace-text-components/steps/replace-display-text.ts

@@ -57,4 +57,11 @@ export function replaceDisplayText<NodeType = ASTNode>(
       insertJSXAttribute(j, element, 'as', 'p');
     }
   });
+
+  source
+    .find(j.Identifier)
+    .filter((path) => path.node.name === localElementName)
+    .forEach((path) => {
+      path.node.name = 'Text';
+    });
 }

polaris-migrator/src/migrations/react-replace-text-components/steps/replace-other.ts

@@ -76,5 +76,12 @@ export function replaceOther<NodeType = ASTNode>(
         insertJSXAttribute(j, element, 'visuallyHidden');
       }
     });
+
+    source
+      .find(j.Identifier)
+      .filter((path) => path.node.name === localElementName)
+      .forEach((path) => {
+        path.node.name = 'Text';
+      });
   });
 }

polaris-migrator/src/migrations/react-replace-text-components/steps/replace-text-style.ts

@@ -113,4 +113,11 @@ export function replaceTextStyle<NodeType = ASTNode>(
       insertJSXAttribute(j, element, 'as', 'span');
     }
   });
+
+  source
+    .find(j.Identifier)
+    .filter((path) => path.node.name === localElementName)
+    .forEach((path) => {
+      path.node.name = 'Text';
+    });
 }

polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.input.tsx

@@ -8,7 +8,12 @@ import {
   VisuallyHidden,
 } from '@shopify/polaris';
 
+const noop = (..._: any) => {};
+
 export function App() {
+  const textStyle = TextStyle;
+  noop(textStyle);
+
   return (
     <>
       <DisplayText size="extraLarge">Display text</DisplayText>

polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.output.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import {Text, InlineCode} from '@shopify/polaris';
 
+const noop = (..._: any) => {};
+
 export function App() {
+  const textStyle = Text;
+  noop(textStyle);
+
   return (
     <>
       <Text variant="heading4xl" as="p">
@@ -16,16 +21,16 @@ export function App() {
       <Text variant="headingLg" as="p">
         Display text
       </Text>
-      <Text as="h1" variant="headingLg">
+      <Text as="h1" variant="headingMd">
         Heading
       </Text>
-      <Text variant="headingLg" as="h2">
+      <Text variant="headingMd" as="h2">
         Heading
       </Text>
-      <Text as="h2" variant="headingSm">
+      <Text as="h2" variant="headingXs">
         Subheading
       </Text>
-      <Text variant="headingSm" as="h3">
+      <Text variant="headingXs" as="h3">
         Subheading
       </Text>
       <Text variant="bodySm" as="p">

polaris-migrator/src/migrations/react-replace-text-components/tests/react-replace-text-components.test.ts

@@ -1,7 +1,11 @@
 import {check} from '../../../utilities/testUtils';
 
 const migration = 'react-replace-text-components';
-const fixtures = ['with-relative'];
+const fixtures = [
+  'react-replace-text-components',
+  'with-identifier',
+  'with-relative',
+];
 
 for (const fixture of fixtures) {
   check(__dirname, {

polaris-migrator/src/migrations/react-replace-text-components/tests/with-identifier.input.tsx

@@ -0,0 +1,27 @@
+import '@shopify/react-testing/matchers';
+
+import React from 'react';
+import {
+  DisplayText,
+  Heading,
+  Subheading,
+  Caption,
+  TextStyle,
+  VisuallyHidden,
+} from '@shopify/polaris';
+
+const mount = (..._: any) => {};
+const MyComponent = () => <div />;
+
+describe('MyComponent', () => {
+  it('renders', () => {
+    const container = mount(<MyComponent />);
+
+    expect(container).not.toContainReactComponent(DisplayText);
+    expect(container).not.toContainReactComponent(Heading);
+    expect(container).not.toContainReactComponent(Subheading);
+    expect(container).not.toContainReactComponent(Caption);
+    expect(container).not.toContainReactComponent(TextStyle);
+    expect(container).not.toContainReactComponent(VisuallyHidden);
+  });
+});

polaris-migrator/src/migrations/react-replace-text-components/tests/with-identifier.output.tsx

@@ -0,0 +1,20 @@
+import '@shopify/react-testing/matchers';
+
+import React from 'react';
+import {Text} from '@shopify/polaris';
+
+const mount = (..._: any) => {};
+const MyComponent = () => <div />;
+
+describe('MyComponent', () => {
+  it('renders', () => {
+    const container = mount(<MyComponent />);
+
+    expect(container).not.toContainReactComponent(Text);
+    expect(container).not.toContainReactComponent(Text);
+    expect(container).not.toContainReactComponent(Text);
+    expect(container).not.toContainReactComponent(Text);
+    expect(container).not.toContainReactComponent(Text);
+    expect(container).not.toContainReactComponent(Text);
+  });
+});