tests.rs

use super::*;
use lightningcss::targets::Browsers;
use regex::Regex;
use std::collections::HashMap;

fn transform(specifer: &str, source: &str, is_dev: bool, options: &EmitOptions) -> (String, Rc<RefCell<Resolver>>) {
  let importmap = import_map::parse_from_json(
    &Url::from_str("file:///").unwrap(),
    r#"{
      "imports": {
        "~/": "./",
        "react": "https://esm.sh/react@18"
      }
    }"#,
  )
  .expect("could not pause the import map")
  .import_map;
  let mut graph_versions: HashMap<String, String> = HashMap::new();
  graph_versions.insert("./foo.ts".into(), "100".into());
  let module =
    SWC::parse(specifer, source, swc_ecmascript::ast::EsVersion::Es2022, None).expect("could not parse module");
  let resolver = Rc::new(RefCell::new(Resolver::new(
    specifer,
    "https://deno.land/x/aleph",
    importmap,
    graph_versions,
    Some("1.0.0".into()),
    true,
    is_dev,
  )));
  let (code, _) = module.transform(resolver.clone(), options).unwrap();
  println!("{}", code);
  (code, resolver)
}

#[test]
fn typescript() {
  let source = r#"
    enum D {
      A,
      B,
      C,
    }

    function enumerable(value: boolean) {
      return function (
        _target: any,
        _propertyKey: string,
        descriptor: PropertyDescriptor,
      ) {
        descriptor.enumerable = value;
      };
    }

    export class A {
      #a: string;
      private b: string;
      protected c: number = 1;
      e: "foo";
      constructor (public d = D.A) {
        const e = "foo" as const;
        this.e = e;
      }
      @enumerable(false)
      bar() {}
    }

    console.log(`${toString({class: A})}`)
  "#;
  let (code, _) = transform("mod.ts", source, false, &EmitOptions::default());
  assert!(code.contains("var D;"));
  assert!(Regex::new(r"\[\s*enumerable\(false\)\s*\]").unwrap().is_match(&code));
}

#[test]
fn parcel_css() {
  let source = r#"
    @custom-media --modern (color), (hover);

    .foo {
      background: yellow;

      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;

      -webkit-transition: background 200ms;
      -moz-transition: background 200ms;
      transition: background 200ms;

      &.bar {
        color: green;
      }
    }

    @media (--modern) and (width > 1024px) {
      .a {
        color: green;
      }
    }
  "#;
  let cfg = css::Config {
    targets: Some(Browsers {
      chrome: Some(95),
      ..Browsers::default()
    }),
    minify: Some(true),
    source_map: None,
    css_modules: None,
    pseudo_classes: None,
    unused_symbols: None,
    analyze_dependencies: None,
    drafts: Some(css::Drafts {
      nesting: true,
      custom_media: true,
    }),
  };
  let res = css::compile("style.css".into(), source, &cfg).unwrap();
  assert_eq!(res.code, ".foo{background:#ff0;border-radius:2px;transition:background .2s}.foo.bar{color:green}@media ((color) or (hover)) and (min-width:1024px){.a{color:green}}");
}

#[test]
fn import_resolving() {
  let source = r#"
    import React from "react"
    import { foo } from "~/foo.ts"
    import Layout from "./Layout.tsx"
    import "https://esm.sh/@fullcalendar/daygrid?css&dev"
    import "../../style/app.css"

    foo()
    export default () => <Layout />

    setTimeout(() => {
      import("https://esm.sh/asksomeonelse")
      new Worker("https://esm.sh/asksomeonelse")
    }, 1000)
  "#;
  let (code, _) = transform("./pages/blog/$id.tsx", source, false, &EmitOptions::default());
  assert!(code.contains("\"/-/esm.sh/react@18\""));
  assert!(code.contains("\"../../foo.ts?v=100\""));
  assert!(code.contains("\"./Layout.tsx?v=1.0.0\""));
  assert!(code.contains("\"/-/esm.sh/@fullcalendar/daygrid?css&dev&module\""));
  assert!(code.contains("\"../../style/app.css?module&v=1.0.0\""));
  assert!(code.contains("import(\"/-/esm.sh/asksomeonelse\")"));
  assert!(code.contains("new Worker(\"/-/esm.sh/asksomeonelse\")"));
}

#[test]
fn jsx_preserve() {
  let source = r#"
    export default function App() {
      return (
        <>
          <h1 className="title">Hello world!</h1>
        </>
      )
    }
  "#;
  let (code, _) = transform(
    "./app.tsx",
    source,
    false,
    &EmitOptions {
      jsx: Some("preserve".into()),
      ..Default::default()
    },
  );
  assert!(code.contains("<h1 className=\"title\">Hello world!</h1>"));
  assert!(code.contains("<>"));
  assert!(code.contains("</>"));
}

#[test]
fn jsx_classic() {
  let source = r#"
    import React from "react"
    export default function App() {
      return (
        <>
          <h1 className="title">Hello world!</h1>
        </>
      )
    }
  "#;
  let (code, _) = transform(
    "./app.tsx",
    source,
    false,
    &EmitOptions {
      jsx: Some("classic".into()),
      ..Default::default()
    },
  );
  assert!(code.contains("React.createElement(\"h1\""));
  assert!(code.contains("React.createElement(React.Fragment,"));
}

#[test]
fn jsx_automtic() {
  let source = r#"
    /** @jsxImportSource https://esm.sh/react@18 */
    export default function App() {
      return (
        <>
          <h1 className="title">Hello world!</h1>
        </>
      )
    }
  "#;
  let (code, resolver) = transform(
    "./app.tsx",
    source,
    false,
    &EmitOptions {
      jsx: Some("automatic".into()),
      jsx_import_source: Some("https://esm.sh/react@18".to_owned()),
      ..Default::default()
    },
  );
  assert!(code.contains("import { jsx as _jsx, Fragment as _Fragment } from \"/-/esm.sh/react@18/jsx-runtime\""));
  assert!(code.contains("_jsx(_Fragment, {"));
  assert!(code.contains("_jsx(\"h1\", {"));
  assert!(code.contains("children: \"Hello world!\""));
  assert_eq!(
    resolver.borrow().deps.get(0).unwrap().specifier,
    "https://esm.sh/react@18/jsx-runtime"
  );
}

#[test]
fn react_refresh() {
  let source = r#"
    import { useState } from "react"
    export default function App() {
      const [ msg ] = useState('Hello world!')
      return (
        <h1 className="title">{msg}{foo()}</h1>
      )
    }
  "#;
  let (code, _) = transform(
    "./app.tsx",
    source,
    true,
    &EmitOptions {
      react_refresh: true,
      jsx: Some("automatic".into()),
      jsx_import_source: Some("https://esm.sh/react@18".to_owned()),
      ..Default::default()
    },
  );
  assert!(code.contains(
    "import { __REACT_REFRESH_RUNTIME__, __REACT_REFRESH__ } from \"/-/deno.land/x/aleph/framework/react/refresh.ts\""
  ));
  assert!(code.contains("const prevRefreshReg = $RefreshReg$"));
  assert!(code.contains("const prevRefreshSig = $RefreshSig$"));
  assert!(code.contains(
    "window.$RefreshReg$ = (type, id)=>__REACT_REFRESH_RUNTIME__.register(type, \"./app.tsx\" + (\"#\" + id))"
  ));
  assert!(code.contains("window.$RefreshSig$ = __REACT_REFRESH_RUNTIME__.createSignatureFunctionForTransform"));
  assert!(code.contains("var _s = $RefreshSig$()"));
  assert!(code.contains("_s()"));
  assert!(code.contains("_c = App"));
  assert!(code.contains("$RefreshReg$(_c, \"App\")"));
  assert!(code.contains("window.$RefreshReg$ = prevRefreshReg"));
  assert!(code.contains("window.$RefreshSig$ = prevRefreshSig;"));
  assert!(code.contains("import.meta.hot?.accept(__REACT_REFRESH__)"));
}

#[test]
fn strip_data_export() {
  let source = r#"
    import { json } from "./helper.ts"
    const count = 0;
    export const data = {
      defer: true,
      fake: false,
      fetch: (req: Request) => {
        return json({ count })
      },
    }
    export const mutation = {
      POST: (req: Request) => {
        return json({ count })
      },
      DELETE: (req: Request) => {
        return json({ count })
      },
    }
    export const GET = (req: Request) => {
      return json({ count })
    }
    export const POST = (req: Request) => {
      return json({ count })
    }
    export const PUT = (req: Request) => {
      return json({ count })
    }
    export function PATCH(req: Request) {
      return json({ count })
    }
    export function DELETE(req: Request) {
      return json({ count })
    }
    export function log(msg: string) {
      console.log(msg)
    }
    export default function App() {
      return <div>Hello world!</div>
    }
  "#;
  let (code, r) = transform(
    "./app.tsx",
    source,
    false,
    &EmitOptions {
      strip_data_export: true,
      jsx: Some("automatic".into()),
      jsx_import_source: Some("https://esm.sh/react@18".to_owned()),
      ..Default::default()
    },
  );
  assert!(code.contains("export const data = {"));
  assert!(code.contains("defer: true,"));
  assert!(code.contains("fake: false,"));
  assert!(code.contains("fetch: true\n}"));
  assert!(code.contains("export const mutation = {"));
  assert!(code.contains("POST: true,"));
  assert!(code.contains("DELETE: true\n"));
  assert!(code.contains("export const GET = true"));
  assert!(code.contains("export const POST = true"));
  assert!(code.contains("export const PUT = true"));
  assert!(code.contains("export function PATCH() {}"));
  assert!(code.contains("export function DELETE() {}"));
  assert!(code.contains("export function log(msg) {"));
  assert!(!code.contains("import { json } from \"./helper.ts\""));
  assert!(!code.contains("const count = 0"));
  assert_eq!(r.borrow().deps.len(), 1);
}