Check out a free preview of the full Electron Fundamentals, v2 course:
The "Writing Application Tests" Lesson is part of the full, Electron Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve utilizes the assertions to write tests for the application.

Get Unlimited Access Now

Transcript from the "Writing Application Tests" Lesson

[00:00:00]
>> Steve Kinney: Has a button with the text copied from clipboard. All right, this is an interesting one. Now this is more like what we think about a traditional selenium test, right? Like go ahead and start like querying the dom, and see if elements that I expect to be there are there.

[00:00:14] It's cool, so let's unskip this one first. All right, so we'll say cons buttonText, I'll say, await app, let's give myself space there, app.client. So there is a getText method that will take a selector.
>> Steve Kinney: This one's copy-from-clipboad, it should be the idea of that there. And we can say, return.

[00:00:52]
>> Steve Kinney: Assert.equal
>> Steve Kinney: ButtonText.
>> Steve Kinney: Copy from Clipboard. Let's take it for a spin.
>> Steve Kinney: Two.
>> Steve Kinney: Does not have the text Copy from Clipboard. Interesting.
>> Steve Kinney: Kind of curious,
>> Steve Kinney: Copy from Clipboard is the button ID.
>> Steve Kinney: GetSelectedText, auto complete error.
>> Steve Kinney: Nope.
>> Steve Kinney: Do an npm test there

[00:02:06]
>> Steve Kinney: We did get to see what a test failure was at least. All right, cool, the test passed, awesome. All right, let's see what our next test is. Should not have any clippings when the application starts up. Interesting, so that makes senses, right? Basically, we can go ahead and query, effectively a dom query for get me all of the clippings and make sure that that's got a length of zero, right?

[00:02:32] And then ideally, we'll copy one from the clipboard, so on and so forth, and see that change. That makes sense. Let's do that, all right. I'll just say await and it'll wait for a promise to resolve even if I don't necessarily need it yet. So I'll say await app.client.waitUntilWindowLoaded();.

[00:02:54] Listen, let's wait until everything's loaded, because there won't be anything on the page until then. And then we'll say const clippings
>> Steve Kinney: =
>> Steve Kinney: App.client, now there isn't a, like getText was a helper method, which will go ahead, query the dom for that node and get me the text of that node.

[00:03:15] But this case I want to like, go get a collection of nodes, effectively a document.querySelectorAll. And I want to go ahead and count how many there are. So this might remind you a little bit of jQuery. It's to get all of them, we do $$ to get one, it's $.

[00:03:31] And we can say,
>> Steve Kinney: Which is what it was named in this version of the application. So go ahead and query the dom for all of them. And then return,
>> Steve Kinney: Assert.equal.
>> Steve Kinney: Clippings.length is equal to 0.
>> Steve Kinney: And let's not skip that test, yep, thank you.
>> Steve Kinney: Cool, we'll run it.

[00:04:12]
>> Steve Kinney: We don't have to develop the tools open. We've got the right buttons. But no clippings when the application starts up, all right. Our next one is, it should have one clipping when the copy from clipboard button has been pressed that makes total sense, right? Yeah?
>> Speaker 2: So is solineum or something here hooked in to sequel light to make sure we're always starting with a fresh

[00:04:36]
>> Steve Kinney: This one is just a regular down version of it. So you might wanna use a test database and have transactions in there and stuff along those lines, right? Or have a version where you just bypass the database in testing because you can use a process that node, right?

[00:04:49] And have a different code pass, something along those lines, right? Same way, like in a web app you might have a testing database. But yeah, totally makes sense. This is just basically taking the dom for a spin. So it's like the earlier version before we did the native modules.

[00:05:08] So it should have one clipping when the clipboard is pressed. Any of that you would do kind of either at the beginning of the test file or you can do that before each or after each. You can kinda prepare the database as it would need to be, roll it back, so on and so forth.

[00:05:23] In fact, one thing I should probably do after each test is I should set the clipboard and clear, I should store what previously was in the clipboard in a variable and replace it. Like right now, when we start copying and pasting, that's gonna change my system clipboard right now.

[00:05:35] All right, so you can do that stuff in the before H and after H of set everything up, clean up after yourself, so on and so forth.
>> Steve Kinney: Cool, you should have a clipping when the copy from clipboard button is pressed. All right, so this is gonna be very similar.

[00:05:54] What I'm gonna do is I'm gonna copy most of this test. We'll wait for it. And what we'll do first is we'll say, await app.client.click, and that will actually getText that'll take a selector. And so we'll say copy-from-clipboard right, that was the one that we got the text from earlier.

[00:06:23] Here we'll actually just click it. Then we'll go ahead, query the dom and count them, and now we're expecting it to be 1.
>> Steve Kinney: All right, let's take it for a spin.
>> Steve Kinney: I'm not super worried about those times cuz we're building an application up. All right,
>> Steve Kinney: Let's go ahead and take that for one more spin.

[00:07:16]
>> Steve Kinney: All right, now we need to remove a clipping. We gotta make sure the right text is in there. And then we have to make sure the actual write to text actually works correctly. Cool, so we're moving to clipping, this should be somewhat similar.
>> Steve Kinney: So we'll successfully move the clipping, in this case

[00:07:45]
>> Steve Kinney: We need to go ahead and put a clip in there and then we need to remove it. Now you might abstract some of that out.
>> Steve Kinney: Wait until window loaded.
>> Steve Kinney: Cool.
>> Steve Kinney: We'll go ahead and we'll click,
>> Steve Kinney: Copy-from-clipboard and then we'll, now you remember we had to hover over that one.

[00:08:23] So this case we can kind of move our cursor over to the actual list item itself. So clippings-list-item. Click remove-clipping. All right, so then how many do we expect? We're back to really expecting 0, so we can just grab this. We added one, then we moved to it and we removed it.

[00:08:57]
>> Steve Kinney: We can go ahead and take it for a spin.
>> Steve Kinney: Cool, you see that deprecation warning there. So moveTo is deprecated, but there's also no replacement for it yet. [LAUGH] So that's a thing, there's an open issue on the, that's a web driver deprecation warning, not a selenium one and the issue is still currently open, and there is not actually a replacement.

[00:09:38] And so there is this big discussion of like, why don't you remove the deprecation warning if there's not a replacement yet? Again, we can actually, if that really bothers you, we can actually go up to, I tend not to do this, but if we're gonna look at this this many times in the near future.

[00:10:06]
>> Steve Kinney: Turn that off. The easiest way to deal with problems is to make them go away. All right, should have the correct text in there. So what we should do in this case is we should set the text using electron's APIs. Then go ahead hit copy-from-clipboard and make sure that the text that we set onto the clipboard is in fact the text that ended up on the screen.

[00:10:33] All right, so let's try that out.
>> Steve Kinney: We'll wait until the window loaded, just as we did before.
>> Steve Kinney: And we'll go ahead and we'll write some text to the clipboard.
>> Steve Kinney: Cool, now we'll take the copy from clipboard that we did before, grab that.
>> Steve Kinney: And let's go ahead and let's figure out what's in that dom element.

[00:11:11] So we saw that get text earlier, we can do that again. ClippingText equals await app.client.getText, in this case, we're gonna grab the very first .clipping-text'.
>> Steve Kinney: Cool, let's give it a shot, I didn't forget to skip it, that's great.
>> Steve Kinney: No.
>> Steve Kinney: Yeah, that matters.
>> Steve Kinney: You gotta put the same thing in both places.

[00:12:23] I'm gonna work under the impression that that will solve that one. And if it doesn't, we'll round back to it rather than run through all of them again. All right, this one's a little trickier now. Should write the text of the clipping to the clipboard. So there's probably a bunch of ways you can think about doing this.

[00:12:37] Here's what I'm gonna do, is I'm gonna wait for it to load, I'm gonna write some text in there, right, I'm going to add it. I'm going to then put something totally different on the clipboard. I'm gonna click copy from clipboard and hope that the original text is back on there again, right?

[00:12:50] So ideally, we have something in the clipboard, we make the clipping. We put something else in the clipboard, we hit the copy to clipboard or the write text to clipboard button, and then we should have that original text back on there. All right, so let's go ahead and we can grab really these first few right here.

[00:13:10] All right, and you can break it to a function. I actually like my test to be super specific and so I don't have to like go find out what this function does personally, but we're all different people. And then lets go ahead and let put something, something totally different.

[00:13:31] Cool, and then we're gonna do await app.client.click at copy-clipping, the clipping button that we made, which will write it back to the clipboard and we'll grab this.
>> Steve Kinney: And hopefully those last two test should now pass.
>> Steve Kinney: So we can see we can get pretty powerful here, right?

[00:14:08] We can, like, take the application out, we can kick the tires on it in a lot of different ways, right? Would I get this granular for everything? Maybe not. Maybe that's where some unit tests come in. But I think it demonstrates the idea that like spinning. Getting this set up, especially cuz it's not super easy for a web application either, right?

[00:14:25] Getting this set up is pretty straightforward. And yeah, this is a simple application, but we did write a pretty good test coverage for this application relatively quickly, right? And so, what we'll do next is we'll transition into our next thing which is what happens if you still mess up, right?

[00:14:44] And shift something out there like how do you collect crash reports?