Skip to content

Commit

Permalink
ES6 features (#918)
Browse files Browse the repository at this point in the history 
* ES6 features

* Included __tests__

* Revert changes to codemirror-editor.js

* Simplify wabt construction process

Co-authored-by: Queen Vinyl Da.i'gyu-Kazotetsu <[email protected]>
  • Loading branch information
@NiedziolkaMichal @queengooborg
NiedziolkaMichal and queengooborg authored Nov 10, 2022
1 parent 6e800ed commit 78e022e
Show file tree
Hide file tree
Showing 20 changed files with 286 additions and 309 deletions.
36 changes: 18 additions & 18 deletions __tests__/console-utils.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,67 +2,67 @@ import * as consoleUtils from "../editor/js/editor-libs/console-utils";

describe("console utils", () => {
describe("formatOutput", () => {
test("String", function () {
test("String", () => {
expect(consoleUtils.formatOutput("lorem ipsum")).toBe('"lorem ipsum"');
});
test("undefined", function () {
test("undefined", () => {
expect(consoleUtils.formatOutput(undefined)).toBe("undefined");
});
test("null", function () {
test("null", () => {
expect(consoleUtils.formatOutput(null)).toBe("null");
});
test("NaN", function () {
test("NaN", () => {
expect(consoleUtils.formatOutput(NaN)).toBe("NaN");
});
test("Boolean: true", function () {
test("Boolean: true", () => {
expect(consoleUtils.formatOutput(true)).toBe("true");
});
test("Boolean: false", function () {
test("Boolean: false", () => {
expect(consoleUtils.formatOutput(false)).toBe("false");
});
test("Positive integer", function () {
test("Positive integer", () => {
expect(consoleUtils.formatOutput(42)).toBe("42");
});
test("Positive floating point", function () {
test("Positive floating point", () => {
expect(consoleUtils.formatOutput(4.2)).toBe("4.2");
});
test("Negative integer", function () {
test("Negative integer", () => {
expect(consoleUtils.formatOutput(-42)).toBe("-42");
});
test("Negative floating point", function () {
test("Negative floating point", () => {
expect(consoleUtils.formatOutput(-4.2)).toBe("-4.2");
});
test("Infinity", function () {
test("Infinity", () => {
expect(consoleUtils.formatOutput(Infinity)).toBe("Infinity");
});
test("Negative Infinity", function () {
test("Negative Infinity", () => {
expect(consoleUtils.formatOutput(-Infinity)).toBe("-Infinity");
});
test("Positive zero", function () {
test("Positive zero", () => {
expect(consoleUtils.formatOutput(0)).toBe("0");
});
test("Negative zero", function () {
test("Negative zero", () => {
expect(consoleUtils.formatOutput(-0)).toBe("-0");
});
test("String object", function () {
test("String object", () => {
expect(consoleUtils.formatOutput(new String("foo"))).toBe(
'String { "foo" }'
);
});
test('Object.getPrototypeOf should return String { "" }', function () {
test('Object.getPrototypeOf should return String { "" }', () => {
expect(consoleUtils.formatOutput(Object.getPrototypeOf("foo"))).toBe(
'String { "" }'
);
});
});

describe("formatArray", () => {
test("Array formatting", function () {
test("Array formatting", () => {
expect(consoleUtils.formatArray(new Array(1, 2, 3, 4))).toBe(
"1, 2, 3, 4"
);
});
test("Mixed array", function () {
test("Mixed array", () => {
expect(
consoleUtils.formatArray(new Array(1, "a", { x: 2 }, null, undefined))
).toBe('1, "a", Object { x: 2 }, null, undefined');
Expand Down
2 changes: 1 addition & 1 deletion __tests__/puppeteer-css-editor.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe("CSS Editor", () => {
await page.waitForSelector("#example-choice-list");
await page.click("#example-choice-list .example-choice:nth-child(2)");

let styleAttrVal = await page.$eval("#example-element", (elem) =>
const styleAttrVal = await page.$eval("#example-element", (elem) =>
elem.getAttribute("style")
);
await expect(styleAttrVal).toBe(expectedStyleAttr);
Expand Down
2 changes: 1 addition & 1 deletion __tests__/puppeteer-js-editor.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe("JS Editor", () => {
await page.waitForSelector("#execute");
await page.click("#execute");

let outputContent = await page.$eval(".output code", (elem) =>
const outputContent = await page.$eval(".output code", (elem) =>
elem.innerText.trim()
);
await expect(outputContent).toBe(expectedOutput);
Expand Down
12 changes: 6 additions & 6 deletions __tests__/puppeteer-tabbed-editor.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,22 @@ describe("Tabbed Editor", () => {
.replace(/\r?\n|\r/g, "")
.replace(/\s{2,}/g, " ");

let htmlOutputContent = await iframeContent.$eval("#html-output", trimInnerHTML);
const htmlOutputContent = await iframeContent.$eval("#html-output", trimInnerHTML);
await expect(htmlOutputContent).toBe(expectedHTML);

let cssOutputContent = await iframeContent.$eval("#css-output", trimInnerHTML);
const cssOutputContent = await iframeContent.$eval("#css-output", trimInnerHTML);
await expect(cssOutputContent).toBe(expectedCSS);
});

it("should switch to CSS editor on tab click", async () => {
await page.waitForSelector("#tablist");
await page.click("#css");

let cssPanelClassAttr = await page.$eval("#css-panel", (elem) =>
const cssPanelClassAttr = await page.$eval("#css-panel", (elem) =>
elem.getAttribute("class")
);

let htmlPanelClassAttr = await page.$eval("#html-panel", (elem) =>
const htmlPanelClassAttr = await page.$eval("#html-panel", (elem) =>
elem.getAttribute("class")
);

Expand All @@ -54,11 +54,11 @@ describe("Tabbed Editor", () => {
// then back to the HTML panel
await page.click("#html");

let cssPanelClassAttr = await page.$eval("#css-panel", (elem) =>
const cssPanelClassAttr = await page.$eval("#css-panel", (elem) =>
elem.getAttribute("class")
);

let htmlPanelClassAttr = await page.$eval("#html-panel", (elem) =>
const htmlPanelClassAttr = await page.$eval("#html-panel", (elem) =>
elem.getAttribute("class")
);

Expand Down
43 changes: 22 additions & 21 deletions editor/js/editable-css.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,17 @@ import "../css/editor-libs/common.css";
import "../css/editable-css.css";

(function () {
var exampleChoiceList = document.getElementById("example-choice-list");
var exampleChoices = exampleChoiceList.querySelectorAll(".example-choice");
var editorWrapper = document.getElementById("editor-wrapper");
var initialChoice = 0;
var originalChoices = [];
var output = document.getElementById("output");
var warningNoSupport = document.getElementById("warning-no-support");
const exampleChoiceList = document.getElementById("example-choice-list");
const exampleChoices = exampleChoiceList.querySelectorAll(".example-choice");
const editorWrapper = document.getElementById("editor-wrapper");
const output = document.getElementById("output");
const warningNoSupport = document.getElementById("warning-no-support");

const originalChoices = [];
let initialChoice = 0;

function applyCodeMirror(target, code) {
var codeMirror = initCodeEditor(target, code, languageCSS(), {
const codeMirror = initCodeEditor(target, code, languageCSS(), {
lineNumbers: false,
});
}
Expand All @@ -34,11 +35,11 @@ import "../css/editable-css.css";
exampleChoiceList.classList.add("live");
output.classList.remove("hidden");

for (var i = 0, l = exampleChoices.length; i < l; i++) {
var exampleChoice = exampleChoices[i];
var choiceButton = document.createElement("button");
var choiceButtonText = document.createElement("span");
var choiceCode = exampleChoice.querySelector("code");
for (let i = 0, l = exampleChoices.length; i < l; i++) {
const exampleChoice = exampleChoices[i];
const choiceButton = document.createElement("button");
const choiceButtonText = document.createElement("span");
const choiceCode = exampleChoice.querySelector("code");

originalChoices.push(choiceCode.textContent);

Expand Down Expand Up @@ -76,11 +77,11 @@ import "../css/editable-css.css";
* reset all the CSS examples to their original state
*/
function handleResetEvents() {
var resetButton = document.getElementById("reset");
const resetButton = document.getElementById("reset");

resetButton.addEventListener("click", function () {
exampleChoices.forEach(function (e, i) {
var preEl = e.querySelector("pre");
resetButton.addEventListener("click", () => {
exampleChoices.forEach((e, i) => {
const preEl = e.querySelector("pre");
// Remove original codemirror
for (const e of preEl.children) {
e.remove();
Expand All @@ -104,7 +105,7 @@ import "../css/editable-css.css";
}

function indexOf(exampleChoices, choice) {
for (var i = 0, l = exampleChoices.length; i < l; i++) {
for (let i = 0, l = exampleChoices.length; i < l; i++) {
if (exampleChoices[i] === choice) {
return i;
}
Expand All @@ -118,9 +119,9 @@ import "../css/editable-css.css";
* and otherwise return to intial hidden state
*/
function handleChoiceHover() {
for (var i = 0, l = exampleChoices.length; i < l; i++) {
var choice = exampleChoices[i];
var copyBtn = choice.querySelector(".copy");
for (let i = 0, l = exampleChoices.length; i < l; i++) {
const choice = exampleChoices[i];
const copyBtn = choice.querySelector(".copy");
copyBtn.setAttribute("aria-label", "Copy to clipboard");

choice.addEventListener("mouseover", () => {
Expand Down
32 changes: 14 additions & 18 deletions editor/js/editable-js.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,31 @@ import "../css/editable-js-and-wat.css";
import {initCodeEditor, getEditorContent, languageJavaScript} from "./editor-libs/codemirror-editor.js";

(function () {
var codeBlock = document.getElementById("static-js");
var exampleFeature = codeBlock.dataset["feature"];
var execute = document.getElementById("execute");
var liveContainer = "";
var output = document.querySelector("#console code");
var reset = document.getElementById("reset");
const codeBlock = document.getElementById("static-js");
const exampleFeature = codeBlock.dataset["feature"];
const execute = document.getElementById("execute");
const output = document.querySelector("#console code");
const reset = document.getElementById("reset");

var codeMirror;
var staticContainer;
let codeMirror;
let staticContainer;
let liveContainer = "";

/**
* Reads the textContent from the interactiveCodeBlock, sends the
* textContent to executeLiveExample, and logs the output to the
* output container
*/
function applyCode() {
var currentValue = getEditorContent(codeMirror);
const currentValue = getEditorContent(codeMirror);
updateOutput(currentValue);
}

/**
* Initialize CodeMirror
*/
function initCodeMirror() {
var editorContainer = document.getElementById("editor");
const editorContainer = document.getElementById("editor");

codeMirror = initCodeEditor(editorContainer, codeBlock.textContent, languageJavaScript());
}
Expand All @@ -45,7 +45,7 @@ import {initCodeEditor, getEditorContent, languageJavaScript} from "./editor-lib
/* If the `data-height` attribute is defined on the `codeBlock`, set
the value of this attribute as a class on the editor element. */
if (codeBlock.dataset["height"]) {
var editor = document.getElementById("editor");
const editor = document.getElementById("editor");
editor.classList.add(codeBlock.dataset["height"]);
}

Expand Down Expand Up @@ -76,9 +76,7 @@ import {initCodeEditor, getEditorContent, languageJavaScript} from "./editor-lib
output.textContent = "Error: " + event.message;
}

output.addEventListener("animationend", function () {
output.classList.remove("fade-in");
});
output.addEventListener("animationend", () => output.classList.remove("fade-in"));
}

/* only execute JS in supported browsers. As `document.all`
Expand All @@ -89,13 +87,11 @@ import {initCodeEditor, getEditorContent, languageJavaScript} from "./editor-lib

initInteractiveEditor();

execute.addEventListener("click", function () {
execute.addEventListener("click", () => {
output.textContent = "";
applyCode();
});

reset.addEventListener("click", function () {
window.location.reload();
});
reset.addEventListener("click", () => window.location.reload());
}
})();
Loading

0 comments on commit 78e022e

Please sign in to comment.