discourse/spec/lib/discourse_js_processor_spec.rb

270 lines
8.5 KiB
Ruby

# frozen_string_literal: true
require "discourse_js_processor"
RSpec.describe DiscourseJsProcessor do
describe "should_transpile?" do
it "returns false for empty strings" do
expect(DiscourseJsProcessor.should_transpile?(nil)).to eq(false)
expect(DiscourseJsProcessor.should_transpile?("")).to eq(false)
end
it "returns false for a regular js file" do
expect(DiscourseJsProcessor.should_transpile?("file.js")).to eq(false)
end
it "returns true for deprecated .es6 files" do
expect(DiscourseJsProcessor.should_transpile?("file.es6")).to eq(true)
expect(DiscourseJsProcessor.should_transpile?("file.js.es6")).to eq(true)
expect(DiscourseJsProcessor.should_transpile?("file.js.es6.erb")).to eq(true)
end
end
describe "skip_module?" do
it "returns false for empty strings" do
expect(DiscourseJsProcessor.skip_module?(nil)).to eq(false)
expect(DiscourseJsProcessor.skip_module?("")).to eq(false)
end
it "returns true if the header is present" do
expect(DiscourseJsProcessor.skip_module?("// cool comment\n// discourse-skip-module")).to eq(
true,
)
end
it "returns false if the header is not present" do
expect(DiscourseJsProcessor.skip_module?("// just some JS\nconsole.log()")).to eq(false)
end
end
it "passes through modern JS syntaxes which are supported in our target browsers" do
script = <<~JS.chomp
optional?.chaining;
const template = func`test`;
let numericSeparator = 100_000_000;
logicalAssignment ||= 2;
nullishCoalescing ?? 'works';
try {
"optional catch binding";
} catch {
"works";
}
async function* asyncGeneratorFunction() {
yield await Promise.resolve('a');
}
let a = {
x,
y,
...spreadRest
};
JS
result = DiscourseJsProcessor.transpile(script, "blah", "blah/mymodule")
expect(result).to eq <<~JS.strip
define("blah/mymodule", [], function () {
"use strict";
#{script.indent(2)}
});
JS
end
it "supports decorators and class properties without error" do
script = <<~JS.chomp
class MyClass {
classProperty = 1;
#privateProperty = 1;
#privateMethod() {
console.log("hello world");
}
@decorated
myMethod(){
}
}
JS
result = DiscourseJsProcessor.transpile(script, "blah", "blah/mymodule")
expect(result).to include("_applyDecoratedDescriptor")
end
it "correctly transpiles widget hbs" do
result = DiscourseJsProcessor.transpile(<<~JS, "blah", "blah/mymodule")
import hbs from "discourse/widgets/hbs-compiler";
const template = hbs`{{somevalue}}`;
JS
expect(result).to eq <<~JS.strip
define("blah/mymodule", [], function () {
"use strict";
const template = function (attrs, state) {
var _r = [];
_r.push(somevalue);
return _r;
};
});
JS
end
it "correctly transpiles ember hbs" do
result = DiscourseJsProcessor.transpile(<<~JS, "blah", "blah/mymodule")
import { hbs } from 'ember-cli-htmlbars';
const template = hbs`{{somevalue}}`;
JS
expect(result).to eq <<~JS.strip
define("blah/mymodule", ["@ember/template-factory"], function (_templateFactory) {
"use strict";
const template = (0, _templateFactory.createTemplateFactory)(
/*
{{somevalue}}
*/
{
"id": null,
"block": "[[[1,[34,0]]],[],false,[\\"somevalue\\"]]",
"moduleName": "/blah/mymodule",
"isStrictMode": false
});
});
JS
end
describe "Raw template theme transformations" do
# For the raw templates, we can easily render them serverside, so let's do that
let(:compiler) { DiscourseJsProcessor::Transpiler.new }
let(:theme_id) { 22 }
let(:helpers) { <<~JS }
Handlebars.registerHelper('theme-prefix', function(themeId, string) {
return `theme_translations.${themeId}.${string}`
})
Handlebars.registerHelper('theme-i18n', function(themeId, string) {
return `translated(theme_translations.${themeId}.${string})`
})
Handlebars.registerHelper('theme-setting', function(themeId, string) {
return `setting(${themeId}:${string})`
})
Handlebars.registerHelper('dummy-helper', function(string) {
return `dummy(${string})`
})
JS
let(:mini_racer) do
ctx = MiniRacer::Context.new
ctx.eval(
File.open(
"#{Rails.root}/app/assets/javascripts/node_modules/handlebars/dist/handlebars.js",
).read,
)
ctx.eval(helpers)
ctx
end
def render(template)
compiled = compiler.compile_raw_template(template, theme_id: theme_id)
mini_racer.eval "Handlebars.template(#{compiled.squish})({})"
end
it "adds the theme id to the helpers" do
# Works normally
expect(render("{{theme-prefix 'translation_key'}}")).to eq(
"theme_translations.22.translation_key",
)
expect(render("{{theme-i18n 'translation_key'}}")).to eq(
"translated(theme_translations.22.translation_key)",
)
expect(render("{{theme-setting 'setting_key'}}")).to eq("setting(22:setting_key)")
# Works when used inside other statements
expect(render("{{dummy-helper (theme-prefix 'translation_key')}}")).to eq(
"dummy(theme_translations.22.translation_key)",
)
end
it "doesn't duplicate number parameter inside {{each}}" do
expect(
compiler.compile_raw_template(
"{{#each item as |test test2|}}{{theme-setting 'setting_key'}}{{/each}}",
theme_id: theme_id,
),
).to include(
'{"name":"theme-setting","hash":{},"hashTypes":{},"hashContexts":{},"types":["NumberLiteral","StringLiteral"]',
)
# Fail would be if theme-setting is defined with types:["NumberLiteral","NumberLiteral","StringLiteral"]
end
end
describe "Ember template transformations" do
# For the Ember (Glimmer) templates, serverside rendering is not trivial,
# so we compile the expected result with the standard compiler and compare to the theme compiler
let(:theme_id) { 22 }
def theme_compile(template)
script = <<~JS
import { hbs } from 'ember-cli-htmlbars';
export default hbs(#{template.to_json});
JS
result = DiscourseJsProcessor.transpile(script, "", "theme/blah", theme_id: theme_id)
result.gsub(%r{/\*(.*)\*/}m, "/* (js comment stripped) */")
end
def standard_compile(template)
script = <<~JS
import { hbs } from 'ember-cli-htmlbars';
export default hbs(#{template.to_json});
JS
result = DiscourseJsProcessor.transpile(script, "", "theme/blah")
result.gsub(%r{/\*(.*)\*/}m, "/* (js comment stripped) */")
end
it "adds the theme id to the helpers" do
expect(theme_compile "{{theme-prefix 'translation_key'}}").to eq(
standard_compile "{{theme-prefix #{theme_id} 'translation_key'}}"
)
expect(theme_compile "{{theme-i18n 'translation_key'}}").to eq(
standard_compile "{{theme-i18n #{theme_id} 'translation_key'}}"
)
expect(theme_compile "{{theme-setting 'setting_key'}}").to eq(
standard_compile "{{theme-setting #{theme_id} 'setting_key'}}"
)
# Works when used inside other statements
expect(theme_compile "{{dummy-helper (theme-prefix 'translation_key')}}").to eq(
standard_compile "{{dummy-helper (theme-prefix #{theme_id} 'translation_key')}}"
)
end
end
describe "Transpiler#terser" do
it "can minify code and provide sourcemaps" do
sources = {
"multiply.js" => "let multiply = (firstValue, secondValue) => firstValue * secondValue;",
"add.js" => "let add = (firstValue, secondValue) => firstValue + secondValue;",
}
result =
DiscourseJsProcessor::Transpiler.new.terser(
sources,
{ sourceMap: { includeSources: true } },
)
expect(result.keys).to contain_exactly("code", "decoded_map", "map")
begin
# Check the code still works
ctx = MiniRacer::Context.new
ctx.eval(result["code"])
expect(ctx.eval("multiply(2, 3)")).to eq(6)
expect(ctx.eval("add(2, 3)")).to eq(5)
ensure
ctx.dispose
end
map = JSON.parse(result["map"])
expect(map["sources"]).to contain_exactly(*sources.keys)
expect(map["sourcesContent"]).to contain_exactly(*sources.values)
end
end
end