⌨ Code, Input, Expected, & Output for Testing (🔖Bookmarklet)

#code-input-expected-output.md

⌨ Code, Input, Expected, & Output for Testing

A JavaScript code testing that emulates code.golf, LeetCode, HackerRank, etc.

Press Ctrl + Enter to run the test.

I find myself running this kind of test pattern and wanting to avoid using their UIs. There are limiations there including speed and rate of testing. Using their system is too slow.

For now this only runs one test case and compares the output with the expected values.

The method the code uses is the first declared method either by:

const method = () => {}

or

function method() {}

The return value is displayed in the the "Output." If no return value is provided, it won't output anything.

code.golf expects the user to use the print method to provide the expected output.

The background of "Output" will turn green if "Output" and "Expected" match.

Address Bar Bookmarklet (844b)

data:text/html,<style>body,p{margin:0;box-sizing:border-box;}
textarea{width:100%;height:calc(33vh - 1.3rem);resize:none;filter:invert(1)hue-rotate(180deg)}</style><p id=o></p><script>o.innerHTML=["Code","Input","Expected","Output"].map((d,i)=>`<div id=${d}_${i==1||i==2?" style=width:50%;display:inline-block":""}>${d}<textarea id=${d} spellcheck=false onkeyup=(k=(e=event).keyCode==13&&e.ctrlKey)||k==10?q(Code.value,Input.value):0></textarea></div>`).join``;print=s=>{Output.value+=s+"\n"};v=g=>g.value.trim();q=(C,I)=>{x=C.match(/const ([\w\d]+)\s*=\s*[\(\w][\w\d]*\)?|function ([\w\d]+)\s*\(/);m=x&&(x[1]||x[2]);if(!m){alert("Method not found!");return;}args=I.split`\n`.map(a=>JSON.stringify(a));Output.value="";if(m)eval(C+` print(${m}(...[${args}])||"");Output_.style.backgroundColor=v(Output)==v(Expected)?"green":"red";`);};</script>

code-input-output.html

<style>
body, p { margin: 0; box-sizing:border-box; }
textarea {
  width: 100%;
  height: calc(33vh - 1.3rem);
  resize:none;
  filter:invert(1)hue-rotate(180deg)}
</style>

<p id=o></p>

<script>
o.innerHTML = ["Code","Input","Expected","Output"].map((d,i)=>`<div id=${d}_${i==1||i==2?" style=width:50%;display:inline-block":""}>${d}<textarea id=${d} spellcheck=false onkeyup=(k=(e=event).keyCode==13&&e.ctrlKey)||k==10?q(Code.value,Input.value):0></textarea></div>`).join``;

// Prints the output. This is already implemented in `code.golf`
print = s => {Output.value += s + "\n"};

// Get trimmed value from element
v = g => g.value.trim();

// Run the code and compares "Output" with "Expected." The background of "Output" will turn green if they match.
q = (C,I) => {
  x = C.match(/const ([\w\d]+)\s*=\s*[\(\w][\w\d]*\)?|function ([\w\d]+)\s*\(/);
  m = x && (x[1] || x[2]);
  if (!m) { alert("Method not found!"); return; }
  args = I.split`\n`.map(a => JSON.stringify(a));
  Output.value="";// Clears output
  if (m) eval(C+` print(${m}(...[${args}])||"");Output_.style.backgroundColor=v(Output)==v(Expected)?"green":"red";`);
};
</script>