{"size": 5112, "ext": "js", "max_stars_repo_path": "packages/mp-loader/src/transpiler/__tests__/ali-template-transpiler.js", "max_stars_repo_name": "wiltonlazary/rax", "max_stars_repo_stars_event_min_datetime": "2021-12-02T15:00:25.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-02T15:00:25.000Z", "max_issues_repo_path": "packages/mp-loader/src/transpiler/__tests__/ali-template-transpiler.js", "max_issues_repo_name": "wiltonlazary/rax", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "packages/mp-loader/src/transpiler/__tests__/ali-template-transpiler.js", "max_forks_repo_name": "wiltonlazary/rax", "max_forks_repo_forks_event_min_datetime": "2019-06-25T06:30:39.000Z", "max_forks_repo_forks_event_max_datetime": "2019-06-25T06:30:39.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 27.6324324324, "max_line_length": 86, "alphanum_fraction": 0.6142410016}
const babylon = require('babylon');
const createGenerate = require('../createGenerator');
const createParse = require('../createParser');
const { createAdapter } = require('../adapter');

createAdapter();
const modules = require('../transformModules');

const generate = createGenerate(modules);
const parse = createParse(modules);
const transpilerOptions = { modules: modules };
/**
 * Check whether a js string is valid.
 */
function checkValidJavaScriptStr(str) {
  try {
    babylon.parseExpression(str, {
      allowImportExportEverywhere: true,
      plugins: ['objectRestSpread'],
    });
  } catch (err) {
    return false;
  }
  return true;
}

describe('Transpiler parse', () => {
  it('nested', () => {
    const content = `
      <view foo="bar">
        <text>hello</text>
        <text>world</text>
      </view>
    `;
    const ast = parse(content, transpilerOptions);
    expect(ast).toMatchSnapshot();

    const generated = generate(ast, transpilerOptions);
    expect(generated.render).toMatchSnapshot();
  });

  it('bind props', () => {
    const content = `
      <view foo="bar {{someVal}} {{otherVal}}">
        <text>hello</text>
        <text>world</text>
      </view>
    `;

    const ast = parse(content, transpilerOptions);
    expect(ast).toMatchSnapshot();

    const generated = generate(ast, transpilerOptions);
    expect(generated.render).toMatchSnapshot();
  });

  it('a:key', () => {
    const content = `
      <view a:key="{{key}}"></view>
    `;
    const ast = parse(content, transpilerOptions);
    expect(ast).toMatchSnapshot();

    const generated = generate(ast, transpilerOptions);
    expect(generated.render).toMatchSnapshot();
  });

  it('style and class', () => {
    const content = `
      <view style="color: red; {{style}}" class="staticClass {{dynamicClass}}"></view>
    `;
    const ast = parse(content, transpilerOptions);
    expect(ast).toMatchSnapshot();

    const generated = generate(ast, transpilerOptions);
    expect(generated.render).toMatchSnapshot();
  });


  it('a:if', () => {
    const content = `
      <view a:if="{{condition}}">IF</view>
      <view a:elif="{{anotherCondition}}">ELSEIF</view>
      <view a:else>ELSE</view>
    `;
    const ast = parse(content, transpilerOptions);
    expect(ast).toMatchSnapshot();

    const generated = generate(ast, transpilerOptions);
    expect(generated.render).toMatchSnapshot();
  });

  it('a:for', () => {
    const content = `
      <view a:for="todos"></view>
    `;
    const ast = parse(content, transpilerOptions);
    expect(ast).toMatchSnapshot();

    const generated = generate(ast, transpilerOptions);
    expect(generated.render).toMatchSnapshot();
  });

  it('a:for with a:if and a:key', () => {
    const content = `
      <view
        a:key="{{item.id}}"
        a:for="todos"
        a:if="{{item.checked}}"
        checked="{{item.checked}}"
      ></view>
    `;
    const ast = parse(content, transpilerOptions);
    expect(ast).toMatchSnapshot();

    const generated = generate(ast, transpilerOptions);
    expect(generated.render).toMatchSnapshot();
  });

  it('should use a:for with other rules', () => {
    const content = `
      <view a:for="todos" a:key="{{item.id}}" checked="{{item.checked}}"></view>
    `;
    const ast = parse(content, transpilerOptions);
    expect(ast).toMatchSnapshot();

    const generated = generate(ast, transpilerOptions);
    expect(generated.render).toMatchSnapshot();
  });

  it('should parse instant array expression', () => {
    const content = `
      <single-item
        a:for="{{[{},{},{},{}]}}"
        empty="{{1}}"></single-item>
    `;
    const ast = parse(content, transpilerOptions);
    expect(ast).toMatchSnapshot();

    const generated = generate(ast, transpilerOptions);
    expect(checkValidJavaScriptStr(generated.render)).toBe(true);
    expect(generated).toMatchSnapshot();
  });

  it('should parse instant nested object expression', () => {
    const content = `
      <view foo="{{x:{y:2}}}"></view>
    `;
    const ast = parse(content, transpilerOptions);
    const generated = generate(ast, transpilerOptions);
    expect(checkValidJavaScriptStr(generated.render)).toBe(true);
    expect(generated).toMatchSnapshot();
  });

  it('expression with special chars', () => {
    const content = `
      <template a:if="{{orderData.operationConfirm}}" data="{{
        btnText: defaultData.confirm,
        action: 'confirmOrder',
        btnType: btnType.green
      }}">
      </template>
      <view
        data-info="{{item.name}},{{item.order_item_id}}"
      ></view>
    `;
    const ast = parse(content, transpilerOptions);
    const generated = generate(ast, transpilerOptions);
    expect(checkValidJavaScriptStr(generated.render)).toBe(true);
    expect(generated).toMatchSnapshot();
  });

  it('test for scoped-slot', () => {
    const ast = parse(`
      <component onTap="handler">
        <view slot="item" slot-scope="props">
          <text>{{props.item.text}}</text>
        </view>
      </component>
    `, transpilerOptions);

    expect(ast).toMatchSnapshot();
  });
});
