babel-plugin-react-native-testid/dest/index.test.js

babel plugin for react native testid attributes

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
// @ts-nocheck
const babel_plugin_tester_1 = __importDefault(require("babel-plugin-tester"));
const _1 = __importDefault(require("."));
babel_plugin_tester_1.default({
    plugin: _1.default,
    babelOptions: { parserOpts: { plugins: ['jsx'] } },
    snapshot: true,
    tests: [
        {
            title: 'should generate chained testID for nested components',
            code: `
function MyButton() {
  return <Text>Click Me</Text>
}
function MyComponent() {
  return (
    <View>
      <MyButton />
    </View>
  )
}
`,
        },
        {
            title: 'should not add testID to non-component functions (lowercase)',
            code: `
function MyComponent() {
  const renderHeader = () => <Text>Header</Text>
  return (
    <View>
      {renderHeader()}
    </View>
  )
}
`,
        },
        {
            title: 'should not override an existing testID',
            code: `
function MyButton() {
  return <Text>A button</Text>
}
function MyComponent() {
  return (
    <View>
      <MyButton testID="custom-id" />
    </View>
  )
}
`,
        },
        {
            title: 'should not override an existing id',
            code: `
function MyButton() {
  return <Text>A button</Text>
}
function MyComponent() {
  return (
    <View>
      <MyButton id="custom-id" />
    </View>
  )
}
`,
        },
        {
            title: 'should extract testID from meaningful attributes (placeholder)',
            code: `
function MyComponent() {
  return (
    <View>
      <TextInput placeholder="请输入用户名" />
    </View>
  )
}
`,
        },
        {
            title: 'should extract testID from meaningful attributes (title)',
            code: `
function MyComponent() {
  return (
    <View>
      <Button title="登录">Login</Button>
    </View>
  )
}
`,
        },
        {
            title: 'should extract testID from meaningful attributes (label)',
            code: `
function MyComponent() {
  return (
    <View>
      <Input label="用户名" />
    </View>
  )
}
`,
        },
        {
            title: 'should extract testID from meaningful attributes (name with prefix)',
            code: `
function MyComponent() {
  return (
    <View>
      <Icon name="settings" />
    </View>
  )
}
`,
        },
        {
            title: 'should extract testID from text content',
            code: `
function MyComponent() {
  return (
    <View>
      <Button>登录</Button>
      <Text>用户名</Text>
    </View>
  )
}
`,
        },
        {
            title: 'should extract testID from i18n keys (t function)',
            code: `
function MyComponent() {
  return (
    <View>
      <Text>{t('user.profile.nickname')}</Text>
      <Button>{t('common.save')}</Button>
    </View>
  )
}
`,
        },
        {
            title: 'should extract testID from i18n keys (i18n.t function)',
            code: `
function MyComponent() {
  return (
    <View>
      <Text>{i18n.t('user.profile.settings')}</Text>
      <Button>{i18n.t('actions.confirm')}</Button>
    </View>
  )
}
`,
        },
        {
            title: 'should prioritize meaningful attributes over text content',
            code: `
function MyComponent() {
  return (
    <View>
      <Button title="保存">登录</Button>
    </View>
  )
}
`,
        },
        {
            title: 'should prioritize text content over component hierarchy',
            code: `
function MyComponent() {
  return (
    <View>
      <Button>登录</Button>
    </View>
  )
}
`,
        },
        {
            title: 'should fallback to component hierarchy when no other options',
            code: `
function MyComponent() {
  return (
    <View>
      <Button />
    </View>
  )
}
`,
        },
        {
            title: 'should handle Fragments correctly',
            code: `
function MyButton() {
  return <Text>A button</Text>
}
function MyComponent() {
  return (
    <View>
      <>
        <MyButton />
      </>
      <React.Fragment>
        <MyButton />
      </React.Fragment>
    </View>
  )
}
`,
        },
        {
            title: 'should handle deeply nested components',
            code: `
function Icon() {
  return <Image />
}
function MyButton() {
  return (
    <TouchableOpacity>
      <Icon />
      <Text>A button</Text>
    </TouchableOpacity>
  )
}
function MyComponent() {
  return (
    <View>
      <MyButton />
    </View>
  )
}
`,
        },
        {
            title: 'should handle class components',
            code: `
import React from 'react';
class MyButton extends React.Component {
  render() {
    return <Text>A button</Text>
  }
}
function MyComponent() {
  return (
    <View>
      <MyButton />
    </View>
  )
}
`,
        },
        {
            title: 'should handle conditional rendering with &&',
            code: `
const MyButton = () => <Text>Click Me</Text>
function MyComponent({ show }) {
  return (
    <View>
      {show && <MyButton />}
    </View>
  )
}
`,
        },
        {
            title: 'should handle conditional rendering with ternary operator',
            code: `
const MyButton = () => <Text>Click Me</Text>
const MyOtherButton = () => <Text>Do Not Click</Text>
function MyComponent({ show }) {
  return (
    <View>
      {show ? <MyButton /> : <MyOtherButton />}
    </View>
  )
}
`,
        },
        {
            title: 'should handle components returning null',
            code: `
function MyComponent({ show }) {
  if (!show) {
    return null;
  }
  return <View><Text>Content</Text></View>
}
`,
        },
        {
            title: 'should ignore anonymous default export',
            code: `
export default () => {
  return <View><Text>Content</Text></View>
}
`,
        },
        {
            title: 'should work with existing props on a component',
            code: `
const MyButton = ({ label }) => <Text>{label}</Text>
function MyComponent() {
  return (
    <View>
      <MyButton label="Click Me" />
    </View>
  )
}
`,
        },
    ],
});
babel_plugin_tester_1.default({
    title: 'with custom plugin options',
    plugin: _1.default,
    pluginOptions: {
        attributes: ['testID', 'data-cy'],
        delimiter: '_',
        ignoreElements: ['View', 'TouchableOpacity'],
        meaningfulAttributes: ['title', 'placeholder', 'customLabel'],
    },
    babelOptions: { parserOpts: { plugins: ['jsx'] } },
    snapshot: true,
    tests: [
        {
            title: 'should respect custom options',
            code: `
function MyButton() {
  // Now, Text is NOT ignored
  return <Text>Click Me</Text>
}
function MyComponent() {
  return (
    <View>
      <TouchableOpacity>
        <MyButton />
      </TouchableOpacity>
    </View>
  )
}
`,
        },
        {
            title: 'should use custom meaningful attributes',
            code: `
function MyComponent() {
  return (
    <View>
      <Input customLabel="自定义标签" />
    </View>
  )
}
`,
        },
    ],
});
//# sourceMappingURL=index.test.js.map