Testing

We started looking and trying to figure out how tests work and how we should incorporate them into our project.
First, we searched in vscode extension API a little imformation. We have seen that once you create a new plugin, it contains a folder of tests that you can change according to specific needs (https://code.visualstudio.com/api/working-with-extensions/testing-extension).

In addition, VSCode testing files work with mocha, however after a brief review and recommendations we received from experienced people, we preferred to try and work with jest.

We started by trying to write a test for one feature, hoping to succeed and move on from there.

For starters, we created a test file for cssObject named cssObject.spec.ts.
We wrote a first test to check the integrity of the object's constructor.
To do this, we created an instance of the object that activates the function within the constructor (validationObject), and with jest.spyOn function we kind of "spy" after the function we sent (after addValidationFunction).
In addition, we relaized that when writing a test we have to take care of creating an instance of each object/ variable that is in the scope of the function we want to test.
So, we create an instance of cssObject that also activate the constructor we want to test.
Then, using the `toHaveBeenCalledWith` function we could check that the function was indeed called with the desired parameters. This is what it looks like: 


However, while trying to run the test, we recieved an error that vscode module could not be accessed. After searching we saw that because we decided working with jest, we need to mock the API. So, we created a new folder called __mocks__ which is in the path of the src project file. Inside it we created a ts file named vscode where we wrote down the classes we used from the vscode (used this explanation).

And now, by runing the `npm run test` command we saw that the test is realy pass.

So, it's time to write a test for the validation function (the one we want to test on all the other features as well). 
To do this, we created an instance of each object in the validation function and split the test into several scenarios (you can see the function we are testing at the bottom):

1. Case we get a CSS file - in this case we checked that after activating the function, the value of foundUrl does get the value of the potentioalUrl and the currentPreviewObject is now a cssObject.



2. Case the url is not undifined - in this case the placement should not be done (url is already updated) so we checked that url remains as it is and so the currentPreviewObject.



3. Case the potentialUrl and foundUrl is empty- in this case, the placement should not be done so the url and currentPreviewObject remains as they were.



4. Case the potentialUrl is not a css file - in this case the foundUrl remains undifined and the currentPreviewObject does not change to.




**All of the above cases were written according to the possible scenarios in this fucntion:




Tests Result (wrote tests for the rest features as above):



Coverage Tests Result: 




Comments

Post a Comment

Popular posts from this blog

Turorial- How to add a new feature

Image
In this Post we will explain how to make and integrate a new feature to our extension. ** ALL VARIABLES EXPLANATIONS ARE AT THE BOTTOM Let's say we want to support text files. The first thing we will need to do is to create a new file- we name it "TextObject". We then import the "utils" and "IPreviewObject" files. We create a new (export deafult) class caled "TextObject" which implements IPreviewObject. Now, we need to implement the interface's 3 functions: 1. validatePotentialUrl- we check if the current potential URL has a ".txt" extension. if so- we update the current URL to the potential URL, and the currentPreviewObject to a textObject. 2. GetHtmlContent- returns an empty string because we dont need a webview panel for this feature. 3. makeMrkdownString- this function will need to create a string that will allow to open a text file in a new tab when clicking on a certain button. To do so, w...
Read more

Little Bug Fix

Image
After the big refactoring and redesigning we made, there are a few more things we have left to do: 1. Currently, once the cursor is on a certain URL, the hover panel will change accordingly. So, if we hover over URLs that the cursor is not on them we will still be presented with the last hover panel that was created. That is a bug and we need to fix it. 2. We need to make a unit testing (we dont know how to do that, so we need to learn a bit more) 3. Try and use other VSCODE extensions to support previewing PDFs and HTML (the web page, not the HTML file). To fix (1) we added a new condition to the "push" call (in the activate finction, in extension.ts). We check if the line the cursor is on is the same as the line we hover over. If so, call the "updateHoverPanel" function (which makes a markdown string for the hover panel according to the current URL format). If not, update the hover panel content (the markdown string) to an empty string. W...
Read more

Publishing First Beta & Refactoring The Code

Image
We figured it was time to publish a first beta of our extension to VSCODE marketplace. We made some little adjustments like renaming some variables, for more readable code, and fixed a few major bugs, and then we published it using this tutorial .  You can find our extension on this link . *A big bug we had was that the last hover panel continude to show when hovering on defferent lines that are not a URL. Our problem was fixed by updating the current URL variable to UNDEFINED and the markdown string to an empty string, like so: Now that we published our first working extension, we wanted to focus more on the code and the design. Firstly, we decided it would be smarter to extract the relevant line and check what is it's format rather then what we made so far- which is to send the whole document to each extraction function. We created a new function called "extractCurrentLine" which does the following: 1. The function receives the document text ...
Read more