Skip to content

Commit

Permalink
Fix display of actual test results
Browse files Browse the repository at this point in the history
  • Loading branch information
@Remiscan
Remiscan committed Dec 18, 2022
1 parent 47d2bee commit 09d848e
Show file tree
Hide file tree
Showing 4 changed files with 385 additions and 358 deletions.
32 changes: 16 additions & 16 deletions test/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

$tests_json = file_get_contents('tests.json');
$testList = json_decode($tests_json);
$ordreMin = 4;
$orderMin = 4;
?>

<!doctype html>
Expand Down Expand Up @@ -51,7 +51,7 @@
padding: 10px;
font-size: 1rem;
box-sizing: border-box;
--echiquier-transparence: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%),
--checkered-background: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%),
linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%),
linear-gradient(to right, #ddd 0% 100%);
}
Expand Down Expand Up @@ -79,7 +79,7 @@

h4 {
background-image: var(--gradient, linear-gradient(to right, var(--color, white) 0 100%)),
var(--echiquier-transparence);
var(--checkered-background);
background-size: 100% 100%, 16px 16px, 16px 16px;
background-position: 0 0, 0 0, 8px 8px;
background-repeat: no-repeat, repeat, repeat;
Expand All @@ -100,7 +100,7 @@
@media (prefers-color-scheme: dark) {
h4 {
background-image: var(--gradient, linear-gradient(to right, var(--color, #333) 0 100%)),
var(--echiquier-transparence);
var(--checkered-background);
}

.no>pre:nth-of-type(1) { color: pink; }
Expand Down Expand Up @@ -136,27 +136,27 @@
<?php
$failsList = [];

$ordre = $ordreMin;
$order = $orderMin;

foreach($testList as $category => $tests) {
?>
<h3 class="php" style="grid-row: <?=$ordre?>;">
<h3 class="php" style="grid-row: <?=$order?>;">
<a id="<?=$category?>"></a>
<?=$category?>
</h3>
<?php
$ordre++;
$order++;

foreach($tests as $t) {
try {
$test = new Test($t->fonctionphp ?? $t->fonction, $t->resultatAttendu, property_exists($t, 'nophp'), $ordre);
$test = new Test($t->functionphp ?? $t->function, $t->expected, property_exists($t, 'nophp'), $order);
if (!$test->nophp) {
$valid = $test->populate();
if (!$valid) {
$failsList[] = '<li><a href="#php-'. ($test->ordre) .'">'. $test->nom() .'</a></li>';
$failsList[] = '<li><a href="#php-'. ($test->order) .'">'. $test->nom() .'</a></li>';
}
}
$ordre++;
$order++;
}
catch (Throwable $error) { var_dump($error); }
}
Expand Down Expand Up @@ -189,24 +189,24 @@

const tests_json = `<?=$tests_json?>`;
const testList = JSON.parse(tests_json);
let ordre = <?=$ordreMin?>;
let order = <?=$orderMin?>;

for (const [category, tests] of Object.entries(testList)) {
const h3 = document.createElement('h3');
h3.classList.add('js');
h3.style.setProperty('grid-row', ordre);
h3.style.setProperty('grid-row', order);
h3.innerHTML = category;
document.body.appendChild(h3);
ordre++;
order++;

for (const t of tests) {
const test = new Test(t.fonction, t.resultatAttendu, ordre);
const test = new Test(t.function, t.expected, order);
const valid = test.populate();
if (!valid) {
failsList.innerHTML += `<li><a href="#js-${ordre}">${test.nom}</a></li>`;
failsList.innerHTML += `<li><a href="#js-${order}">${test.nom}</a></li>`;
fails++;
}
ordre++;
order++;
}
}

Expand Down
84 changes: 48 additions & 36 deletions test/tests-javascript.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,110 +4,122 @@ import { default as Colour, default as Couleur } from 'colori';

const tolerance = .03;
const distancePrecise = 1;
const distanceProche = 5;
const distanceClose = 5;

function colorToObject(color) {
return {
r: color.r,
g: color.g,
b: color.b,
a: color.a
};
}

export default class Test {
constructor(fonction = null, resultatAttendu = {}, ordre = 0) {
this.fonction = fonction;
this.resultatAttendu = resultatAttendu;
this.resultatReel = null;
this.ordre = ordre;
constructor(func = null, expectedResult = {}, order = 0) {
this.function = func;
this.expectedResult = expectedResult;
this.actualResult = null;
this.order = order;
this.tested = false;
this.time = null;
}

get resultat() {
get result() {
const time = performance.now(); // in case the inner test fails
try {
if (!this.tested) {
const time = performance.now();
this.resultatReel = eval(this.fonction);
this.actualResult = eval(this.function);
this.time = performance.now() - time;
this.tested = true;
}
return this.resultatReel;
return this.actualResult;
}
catch (error) {
this.time = performance.now() - time;
return ['Error', error.message];
}
}

get nom() {
return this.fonction;
get name() {
return this.function;
}


// Checks if the test results fit the expected results
validate() {
let resultat = this.resultat;
const isError = (typeof resultat === 'object' && resultat !== null && resultat[0] === 'Error');
let result = this.result;
const isError = (typeof result === 'object' && result !== null && result[0] === 'Error');

// If result is an error, check if we expected one
if (isError === true)
return this.resultatAttendu === 'Error';
return this.expectedResult === 'Error';

// If result is an array
else if (Array.isArray(resultat)) {
else if (Array.isArray(result)) {
let res = false;
try {
// If the array contains colors / color strings, check if they're all the same
res = resultat.every((co, k) => Colour.same(co, this.resultatAttendu[k], distanceProche));
res = result.every((co, k) => Colour.same(co, this.expectedResult[k], distanceClose));
} catch (error) {
// If not, just compare them
res = resultat.every((e, k) => e === this.resultatAttendu[k]);
res = result.every((e, k) => e === this.expectedResult[k]);
}
return res;
}

// If expected result is an object, check if it has the same properties and values as the result
else if (typeof this.resultatAttendu === 'object' && this.resultatAttendu !== null)
return Test.sameColorObject(resultat, this.resultatAttendu);
else if (typeof this.expectedResult === 'object' && this.expectedResult !== null)
return Test.sameColorObject(result, this.expectedResult);

// If expected result is a number, check if it's close enough to the result
else if (typeof this.resultatAttendu === 'number') {
if (Math.abs(resultat - this.resultatAttendu) > tolerance) return false;
else if (typeof this.expectedResult === 'number') {
if (Math.abs(result - this.expectedResult) > tolerance) return false;
else return true;
}

// Else, try to make colors from the result and expected result and check if they're the same
else {
let res = false;
try { res = Colour.same(resultat, this.resultatAttendu, distanceProche); }
catch (error) { res = resultat === this.resultatAttendu; }
try { res = Colour.same(result, this.expectedResult, distanceClose); }
catch (error) { res = result === this.expectedResult; }
return res;
}
}


// Checks if two objects with a similar structure to a Colour are the same
static sameColorObject(couleur1, couleur2) {
const c1 = [couleur1.r, couleur1.g, couleur1.b, couleur1.a];
const c2 = [couleur2.r, couleur2.g, couleur2.b, couleur2.a];
return Couleur.same(c1, c2, distanceProche);
const c1 = colorToObject(couleur1);
const c2 = colorToObject(couleur2);
return Couleur.same(c1, c2, distanceClose);
}


// Display the results of the test on the page
populate() {
const validation = this.validate();
const resultat = this.resultat;
const result = this.result;
let displayedResult = result;
if (result instanceof Couleur) displayedResult = colorToObject(result);
else if (Array.isArray(result) && result.every(v => v instanceof Couleur)) displayedResult = result.map(v => colorToObject(v));

// Container
const div = document.createElement('div');
div.classList.add('js');
div.classList.add(validation ? 'yes' : 'no');
div.style.setProperty('grid-row', this.ordre);
div.style.setProperty('grid-row', this.order);

// Title background color (= visual test results)
let backgroundColor = '';
let textColor= '', gradient = '';
try {
if (Array.isArray(resultat)) {
if (resultat.length > 1) gradient = `linear-gradient(to right, ${resultat.map(c => (new Colour(c)).rgb).join(', ')})`;
if (resultat.length > 0) backgroundColor = new Colour(resultat[0]);
if (Array.isArray(result)) {
if (result.length > 1) gradient = `linear-gradient(to right, ${result.map(c => (new Colour(c)).rgb).join(', ')})`;
if (result.length > 0) backgroundColor = new Colour(result[0]);
} else {
backgroundColor = new Colour(resultat);
backgroundColor = new Colour(result);
}
} catch(e) {}

Expand All @@ -117,11 +129,11 @@ export default class Test {
backgroundColor = (backgroundColor instanceof Colour) ? backgroundColor.rgb : backgroundColor;

div.innerHTML = `
<a id="js-${this.ordre}"></a>
<h4 class="js" style="--color:${backgroundColor || ''}; ${gradient ? `--gradient:${gradient}` : ''}; color:${textColor};">${this.nom}</h4>
<a id="js-${this.order}"></a>
<h4 class="js" style="--color:${backgroundColor || ''}; ${gradient ? `--gradient:${gradient}` : ''}; color:${textColor};">${this.name}</h4>
<span class="js">${validation ? '✅ Success' : '❌ Failure'} in ${this.time} ms</span>
<pre class="js">${'Result:\n\n' + JSON.stringify(resultat, null, 2)}</pre>
<pre class="js">${'Expected:\n\n' + JSON.stringify(this.resultatAttendu, null, 2)}</pre>
<pre class="js">${'Result:\n\n' + JSON.stringify(displayedResult, null, 2)}</pre>
<pre class="js">${'Expected:\n\n' + JSON.stringify(this.expectedResult, null, 2)}</pre>
`;

document.body.appendChild(div);
Expand Down
Loading

0 comments on commit 09d848e

Please sign in to comment.