How to handle multiple cases in graphic programming

Questions
1

I’m developing an editor and often encounter bugs in unexpected cases. Are there any guidelines for creating tests during the development of a graphic editor?

2
  1. What kind of editor?
  2. Vanilla or react?
  3. What types of bugs specifically (some examples) ?

In general, the easiest way to avoid most of the bugs is to separate logic from visuals. But that’s quite hard when working with react for example.

For regression testing you can use puppeteer - it’d allow you to create step by step cases and take screenshots along the way (you commit and store these screenshots.) If any of the screenshots would differ as you add new functionality - it may suggest there’s a bug or alternation. Keep in mind - puppeteer may be a bit slow and writing tests is time consuming - I’d personally go for it only if self-code reviews aren’t an option.

2 Likes
3

Since you’re talking about “cases”, this immediately leads to the JavaScript “switch” construct:

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

Be sure to include a default block which catches all “cases” you didn’t specifically think of. Let the default block console.log a statement like “unexpected case found. value = ***” .

The same goes for If /else if blocks like

if (condition1) {
  //  block of code to be executed if condition1 is true
} else if (condition2) {
  //  block of code to be executed if the condition1 is false and condition2 is true
} else {
  //  block of code to be executed if the condition1 is false and condition2 is false
}

be sure to include an “else” clause to catch all cases you didn’t think of.