Learning Web 02: Testing

In the last post I familiarized myself with how the HTML5 canvas works with regard to JavaScript scripting. I got it to draw some text the way I wanted and respond to clicks from the mouse to do some updates and open a “dialog”. I learned that there’s a big difference between the size of the canvas and it’s size on the screen, and that the attributes control the one and css the other (I imagine there’s a way to set the attribute version in css though).

I got to the point I have the fundamental components I need from the UI to do my first little web “app”. What I need now is to design a real data model, which isn’t going to be much and may not be written about, and whatever is going to be the backend.

Backend research

Web browsers are set up to let you use the web without introducing you to too much risk. It’s pretty hard and I don’t envy them the task. One aspect of that is that you’re not allowed direct access to the filesystem– you have to use some protocol and backend.

The plan is to have the data be in git. I have the idea that this is going to be a pretty intimate thing in that at least the data is spread across multiple files in a filesystem that is kept in git. Maybe it’ll end up being simple json or something, I’m not 100% but I’m pretty sure I want something more involved.

I looked into this some and found a pure JavaScript git implementation that would actually allow me to use git directly from the browser. If using it from NodeJS I could, having access to the filesystem, work directly on the git tree. Otherwise, from the browser, it’s using something the author invented to do that somehow. So I could do it this way probably.

But I don’t think I’m gonna

As awesome as that is I think I’m probably going to do an API. This does a few things:

  1. Let’s me abstract it into the domain I’m targeting.
  2. Let’s me thus replace that abstraction either to provide alternatives or just for testing.
  3. Let’s me exercize that skill too (it’s been a while since I’ve done web specific backends).
  4. I’m expecting to want to script that backend in addition to manipulate it through a user interface.

I may totally change my mind on this. It’s still very early.

Testing

Today I’m going to solve the testing issue. I want to test the user interface. I’d like to do it in an automated way and I’m almost absolutely certain I can, even with drawing primitives on the canvas. The testing fascilities of web development were maturing when I was still closer to that type of work and I’ve been watching from the distance–I’m pretty sure I can do what I want here.

I may struggle with targeting the connections between my node items. It’s possible the canvas API will provide good targeting on paths where I can just do it, but I’m expecting to have to do some math based on where I think it is. That can be difficult.

Why am I not using something like React? It’s got a Node canvas already or at least there is one I could add as a dependency.

I actually tried to step directly into React development (React native actually) and for a lot of reasons, like my stubborn nature to make things difficult by trying to learn too much at once, I just had a hard time. If I were to jump into React development on a team I’d adapt to their tools, but I ran into issues trying to force my own methods and patterns on it.

I may eventually go that route, I’m not sure. To really understand React though I’m going to need to know JavaScript a decent amount and it’s been a very long time. This is teaching me and I can get started like this hopefully and make some progress before readdressing how I really want to do this stuff. I’m imagining wanting to do some tight integration with radicle so I may look into how they are doing theirs so I can maybe contribute. React is very tempting because you can code in that and then have a mobile interface and all that, and also an interface that works the same in browser vs native on phone, which may be important as all the phones get locked up tight. I am NOT going to be wanting to invent my own complete widget system I don’t think–maybe, I’m not expecting to need much.

What I need

I still need to learn some keyboard stuff and menu operations to do most of the things I want this interface to do. For now I can just click or double click an item I’ve drawn to initiate a raw command or a dialog. To keep the scope narrow but still have actual scripts to test (and by ‘script’ here I mean as in a movie or play) I’ll add keyboard processing so I can edit the focused item, or double click on anything to edit it.

My scripts will test:

In playing around last time I did make note of the fact that “double click” also registers as a “click” first in the canvas. That’s not always true in all UI systems, so I took a little mental note of it. I also need to keep in mind that–at least back when I was doing it–there’s just a clusterfsck of compatibility issues in browsers that could make this completely miserable. I have high hopes most of that’s been worked out in the last two decades.

Options

At first I skipped over Selenium because I ran into just the recorder part and I want to script it more. I was surprised because I remember Selenuim from back in the day I thought. This is the obvious choice for me though if I can get it to work.

The first one is kinda cool but I don’t really like the idea of trying to drive tests through yaml. I kinda get the idea, because I also want to find some way to communicate with “stake holders” in their language and translate that directly into test driver code. I’m more convinced that Gherkin is correct for this though.

Playwrite looks like it could be a very viable choice. I have used TypeScript to do testing in the past and I found it to be a complete, horrible hell. I think the system was “TestComplete”? The testers that were supporting my team were feeling very overloaded so I offered to help. I was able to but I hated it. There’s good reason for me to go this route though if I want to be more familiar with TypeScript–and I do think I would be better off with it than raw JavaScript before I get too far here.

But Selenium Webdriver can be driven from Python, which means I can use pytest, which I have some recent experience with–people who I was helping needed me to adapt in this way and I tried to become an expert and got a decent way toward that. I’ll have an easier time gaining ground if I stick to what I know more here. I can also switch to JavaScript later, which I’m assuming means I can switch to TypeScript because the relationship there is much like Python and type hints.

Hopefully I don’t run into trouble because I have decided to be weird and use NixOS. It kinda hates Python, or visa-versa, or maybe it’s mutual hate. If so then I’ll have to use a docker conatiner because I don’t want to mess with that FHS crap right now.

Getting started

Problems.

Right away run into an issue I won’t solve today. I got a late start and my eyes are starting to get that dry feeling and I’ve not eaten yet today.

Issue is that I have to be special and use LibreWolf instead of at least vanilla Firefox. Might also be the funky nature of Nix. I try setting the binary_location in the FirefoxOptions but I just get an error saying it’s not a valid Firefox. It’s in my current system but I also went ahead and tried the path to it in the store. Could be anything with a message that generic.

Lessons learned.

Not really a lesson learned. I always want to just know how to do stuff right away and think I should be able to because I’ve been doing this so long. I used to have more fun with it when my oddball decisions would cause me trouble because then I’d have more to learn. I do still want to but have to admit to feeling overwhelmed by it sometimes.

I just need to adjust my targets and find my steps. There are steps to get from where I am to where I want to be but I have to find them and then I have to walk them. So the step here now will be to:

I’ll probably stop after success with the first for now so I can finish more of my project. I can automate the tests and then do stuff manual to make sure with librewolf in my environment. The automation is my sanity check then and the manual stuff is my actual test. This is very unoptimal, but I’m still learning this and still thinking this project through at the same time so it works out. I can do this a while and then toss it at some point and come back and actually do some design and crafting.

achievements.

Seems like not a whole lot. I did document a lot of my thinking though and that’s sort of the reason I’m doing these. I figure it might be of some use to relay how someone with experience learning things. It’s also helping me think and practice writing I guess. Probably not really the latter one more than just in the effort of writing something on a regular. I want to get back into the habit but will need to start cleaning it up some.