{"size": 3163, "ext": "js", "max_stars_repo_path": "__tests__/conditional.js", "max_stars_repo_name": "Charly1620/babel-plugin-css-in-comments", "max_stars_repo_stars_event_min_datetime": "2021-09-30T19:18:33.000Z", "max_stars_repo_stars_event_max_datetime": "2021-10-12T03:34:00.000Z", "max_issues_repo_path": "__tests__/conditional.js", "max_issues_repo_name": "Charly1620/babel-plugin-css-in-comments", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "__tests__/conditional.js", "max_forks_repo_name": "Charly1620/babel-plugin-css-in-comments", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.5798319328, "max_line_length": 80, "alphanum_fraction": 0.5425229213}
const { transform } = require('@babel/core');
const plugin = require('../');

describe('conditional using scoped class names,', () => {
  test('with test only', () => {
    const input = `<input className='active?' />;`;
    const output = `<input className={active ? styles.active : ""} />;`;

    const { code } = transform(input, {
      plugins: [
        '@babel/plugin-syntax-jsx',
        [plugin, { transpileWithoutCSS: true }],
      ],
    });

    expect(code).toBe(output);
  });

  test('with test and consequent', () => {
    const input = `<input className='active?dark' />;`;
    const output = `<input className={active ? styles.dark : ""} />;`;

    const { code } = transform(input, {
      plugins: [
        '@babel/plugin-syntax-jsx',
        [plugin, { transpileWithoutCSS: true }],
      ],
    });

    expect(code).toBe(output);
  });

  test('with test and alternate', () => {
    const input = `<input className='active?:dark' />;`;
    const output = `<input className={active ? "" : styles.dark} />;`;

    const { code } = transform(input, {
      plugins: [
        '@babel/plugin-syntax-jsx',
        [plugin, { transpileWithoutCSS: true }],
      ],
    });

    expect(code).toBe(output);
  });

  test('with test, consequent and alternate', () => {
    const input = `<input className='active?dark:light' />;`;
    const output = `<input className={active ? styles.dark : styles.light} />;`;

    const { code } = transform(input, {
      plugins: [
        '@babel/plugin-syntax-jsx',
        [plugin, { transpileWithoutCSS: true }],
      ],
    });

    expect(code).toBe(output);
  });
});

describe('conditional using global class names,', () => {
  test('with test only', () => {
    const input = `<input className='.active?' />;`;
    const output = `<input className={active ? "active" : ""} />;`;

    const { code } = transform(input, {
      plugins: [
        '@babel/plugin-syntax-jsx',
        [plugin, { transpileWithoutCSS: true }],
      ],
    });

    expect(code).toBe(output);
  });

  test('with test and consequent', () => {
    const input = `<input className='active?.dark' />;`;
    const output = `<input className={active ? "dark" : ""} />;`;

    const { code } = transform(input, {
      plugins: [
        '@babel/plugin-syntax-jsx',
        [plugin, { transpileWithoutCSS: true }],
      ],
    });

    expect(code).toBe(output);
  });

  test('with test and alternate', () => {
    const input = `<input className='active?:.dark' />;`;
    const output = `<input className={active ? "" : "dark"} />;`;

    const { code } = transform(input, {
      plugins: [
        '@babel/plugin-syntax-jsx',
        [plugin, { transpileWithoutCSS: true }],
      ],
    });

    expect(code).toBe(output);
  });

  test('with test, consequent and alternate', () => {
    const input = `<input className='active?.dark:.light' />;`;
    const output = `<input className={active ? "dark" : "light"} />;`;

    const { code } = transform(input, {
      plugins: [
        '@babel/plugin-syntax-jsx',
        [plugin, { transpileWithoutCSS: true }],
      ],
    });

    expect(code).toBe(output);
  });
});
