import { createRoot } from "react-dom/client";
import React from "react";
const john = { first: 'John', last: 'Cleese', age: 83, birthday: new Date("10/27/1939") };
const graham = { first: 'Graham', last: 'Chapman', age: 48, birthday: new Date("01/08/1941") };
const xs = [
john,
graham,
];
const cfg = {
caseSensitive: false,
preferRegex: true,
dateKey: 'birthday',
};
const tests = [
['support EQ', 'age=83', xs, cfg, [john]],
['supports LT', 'age<83', xs, cfg, [graham]],
['supports LTE', 'age<=83', xs, cfg, [john, graham]],
['supports GT', 'age>48', xs, cfg, [john]],
['supports GTE', 'age>=48', xs, cfg, [john, graham]],
['supports grouping (1)', 'last:/^C/ (age=83 OR age=48)', xs, cfg, [john, graham]],
['supports grouping (2)', '(age=83)', xs, cfg, [john]],
['supports grouping (3)', '(age=83 OR age=48)', xs, cfg, [john, graham]],
];
function equal(xs, ys) {
return xs.length === ys.length && xs.every((x, i) => x === ys[i]);
}
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<table>
<thead>
<th>pass/fail</th>
<th>Label</th>
<th>code</th>
<th>actual</th>
<th>expected</th>
</thead>
<tbody>
{this.props.tests.map(test => {
const [label, query, xs, cfg, expected] = test;
const actual = select(query, xs, cfg);
return (
<tr style={{backgroundColor: equal(actual, expected) ? null : 'red'}}>
<td>{equal(actual, expected) ? "pass" : "fail"}</td>
<td>{label}</td>
<td>select("{query}", {JSON.stringify(xs)}, {JSON.stringify(cfg)})</td>
<td>{JSON.stringify(actual)}</td>
<td>{JSON.stringify(expected)}</td>
</tr>
);
})}
</tbody>
</table>
);
}
}
const container = document.getElementById("mount");
const root = createRoot(container);
root.render(<App tests={tests} />);