This folder lets us conduct various tests for the UI. From within the testing/
folder, run:
npm install
npm run start
This will start a live reload server, that serves the UI directly from defog-components (using relative import in package.json
). Your changes to the defog-components will auto reload the page.
The tests can also be made to run automatically in a loop (just click the "Resume auto testing" button).
There's two sets of functions, both generators:
- One is the
testCases
function insidemock-ask-data-responses.js
. This goes through all your tests, and yields each one in turn. It also simulates a click on the "Next Test" button in the test controller UI. - The other type are the test functions itself. These are individual tests you want to run. For example, you might want to test missing data, or missing columns, or a query that fails. These are also generator functions that create a response object (mimicking what we get from the defog api), which are then are yielded from the
testCases
function, which sends it to the UI.
Let's say we want to create tests for testing the UI when there's no quantitative columns in the data.
The columns by default are:
// date, month, month_short, test_year, test_date, year will be parsed as dates
// value_a, value_b, value_c will be parsed as numbers
// name and holiday will be parsed as a string
// to add new columns, add them here + inside switch/case in the createData function
const mockColumns = [
"name",
"date",
"month",
"month_short",
"test_year",
"test_date",
"year",
"value_a",
"value_b",
"value_c",
"holiday",
];
The major workhorse of this is the createData
function, that takes in some parameters, and creates fake data with it.
function createData(
// the columns you want to create data for
// if any of these don't exist in the mock columns above, they will be created with data type numbers
// if you want to handle a new column, add it in two places:
// 1. in the mockColumns array above
// 2. inside the switch case within this function which will handle your new column
// decimalColumns: if you want any columns to be decimals, add them here
// skipColumns: if you want to skip any columns, add them here
columns,
decimalColumns = [],
skipColumns = [],
) {
...
}
You will need to create a new test function in mock-ask-data-responses.js
, and call createData and createAskDataResponseObject to create a response object.
This is what it might look like:
// note that this is a generator function yielding a response object
// you can even yield multiple response objects from this function.
// just keep yielding response objects until you're done with the test.
function* noQuantitativeColumns() {
// logs are good
log("noQuantitativeColumns: Testing with no quantitative columns.");
// remove quant columns
let selectedCols = mockColumns.filter((col) => !col.startsWith("value"));
// createAskDataResponseObject is the function that will take your columns and data, and create a response object mimicking what we get from the defog server.
yield createAskDataResponseObject({
columns: selectedCols,
data: createData(selectedCols),
});
}
Then go inside testCases
function in mock-ask-data-responses.js
, and add your new test function to the tests array.
export function* testCases() {
// add your tests to this array
const tests = [
...
noQuantitativeColumns,
];
...
}
The is the core file that contains several functions that generate mock data and response objects. These include:
-
createData
: This function generates a random set of data based on the provided parameters. It creates a variety of data types including dates, strings, and numbers. -
createAskDataResponseObject
: This function creates a mock response object that mimics the structure of a typical response from the defog server. -
validResponse
,noQuantitativeColumns
,onlyQuantitativeColumns
,noData
,noColumns
,noSQL
,onlyDates
,dateParsingTest
,charts
,queryRunFailure
,noDates
: These are generator functions that yield specific types of response objects for testing different scenarios. -
testCases
: This is the core function that runs the tests. It cycles through the array of tests, yielding each one in turn. -
nextTestBtnClick
: This function simulates a click on the "Next Test" button in the test controller UI.
This file's functions are used in src/index.jsx
The file contains the following functions:
-
randomiseArray
: This function takes an array as input and returns a new array with the elements shuffled in a random order. -
randomSlice
: This function takes an array as input and returns a random slice of the array. The start and end indices of the slice are randomly generated. -
log
: This function logs a string to the console and also assigns it towindow.logStr
. It takes two optional parameters,s1
ands2
. Ifs2
is provided, it is assigned towindow.logStr
, otherwises1
is assigned. -
testResponseProp
: This is a generator function that takes four parameters:newProps
,prop
,baseResponseObjectCreator
, andvals
. It creates a new response object usingbaseResponseObjectCreator
andnewProps
, then assignsvals[i]
tores[prop]
for eachi
invals
. Ifvals[i]
is "delete", it deletesres[prop]
. It logs the current value ofprop
and yieldsres
.