Standardize Codemod checks

[mannycarrera4]

In an effort to make sure we cover some common codemod cases, I want to document things that we should cover so that we have a baseline:

• The codemod should be called out in the Release notes

• Make sure a transform does not touch third party libraries

 it('should properly transform named imports from @workday/canvas-kit-react', () => {
      const input = `
        import { Stack, StackProps } from '@workday/canvas-kit-react';
      `;
      const expected = `
        import { Flex, FlexProps } from '@workday/canvas-kit-react';
      `;

      expectTransform(input, expected);
    });

• When renaming a component, it should handle styled components as well

 it('should properly transform styled Stack JSX identifiers', () => {
      const input = `
      import {Stack} from '@workday/canvas-kit-react/layout';

      const StyledStack = styled(Stack)({
        alignItems: 'center',
        justifyContent: 'space-between'
      });
      `;

      const expected = `
      import {Flex} from '@workday/canvas-kit-react/layout';

      const StyledStack = styled(Flex)({
        alignItems: 'center',
        justifyContent: 'space-between'
      });
      `;

      expectTransform(input, expected);
    });

• If renaming a type or interface, it should rename the reference identifiers

 it('should properly transform StackStyleProps type reference identifiers', () => {
   const input = `
   import { StackStyleProps } from '@workday/canvas-kit-react/layout';

   type CustomStyleProps = StackStyleProps;
   interface AnotherStyleProps extends StackStyleProps {
     specialProp?: boolean;
   }
   `;
   const expected = `
   import { FlexProps } from '@workday/canvas-kit-react/layout';

   type CustomStyleProps = FlexProps;
   interface AnotherStyleProps extends FlexProps {
     specialProp?: boolean;
   }
   `;

   expectTransform(input, expected);
 });

• The transform should handle main and named package imports
• It should not add an additional import if the import already exists

[RayRedGoose]

for multi-component packages, it shouldn't change non-package components if this package import with different components is existing.

Example below: @workday/canvas-kit-react/layout package contains Layout component that should be codemodable. File doesn't have Layout from canvas kit but have its own Layout component and other imports from @workday/canvas-kit-react/layout. SO codemod shouldn't change Layout component because it's non-package component.

it('should ignore if there is no Layout import from existing layout package', () => {
      const input = `
        import { Box, Flex } from '@workday/canvas-kit-react/layout';
        import { styled } from '@workday/canvas-kit-react/common';
        import { Layout } from '../../components/Layout';

        const Containers = () => {
          return (
            <Layout>
              <Box />
              <Flex />
            </Layout>
          );
        };
      `;

      const expected = `
        import { Box, Flex } from '@workday/canvas-kit-react/layout';
        import { Layout } from '../../components/Layout';

        const Containers = () => {
          return (
            <Layout>
              <Box />
              <Flex />
            </Layout>
          );
        };
      `;

      expectTransform(input, expected);
    });

[RayRedGoose]

• Should change as props and as in styled function:

it('should properly transform Stack inside 'as' prop', () => {
      const input = `
      import {Stack} from '@workday/canvas-kit-react/layout';

      <Card as={Stack} />
      `;

      const expected = `
      import {Flex} from '@workday/canvas-kit-react/layout';

      <Card as={Flex} />
      `;

      expectTransform(input, expected);
});

it('should properly transform Stack inside 'as' in styled function', () => {
      const input = `
      import {Stack} from '@workday/canvas-kit-react/layout';

      const StyledCard = styled(Card.as(Stack))({
        alignItems: 'center',
        justifyContent: 'space-between'
      });
      `;

      const expected = `
      import {Flex} from '@workday/canvas-kit-react/layout';

      const StyledCard = styled(Card.as(Flex))({
        alignItems: 'center',
        justifyContent: 'space-between'
      });
      `;

      expectTransform(input, expected);
});