[Work in Progress] Testing Suite

[reficul31]

Refs

NOTE: Do not merge. Work in progress for the testing suite built with jest.

Status

• Activity Logger (Ready for review)
• Freeze Dry Module(Ready for Review)
• Options Module(Ready for Review)
• Page Analysis Module(Input Required)
• Util Module(Input Required)

[reficul31]

Status Update.

• Activity Logger tests ready for review
• Freeze Dry module ready for review
• Options Module Ready for review
• Page Analysis Module Help Required
• Util Module Help Required

[reficul31]

This test is failing because of the change made by Gerben at Commit

[reficul31]

I am actually a bit confused on the implementation of the following modules and any help will be greatly appreciated. This will help finish off the utils and the page-analysis module. To be clear, I am not sure how I can test these modules.

• src/util/event-to-promise.js
• src/util/webextensionsRPC.js
• src/util/when-all-settled.js
• src/page-analysis/extract-pdf-content.js

[Treora]

@reficul31: ok, good that you ask about it, I added a bit of documentation to those three utils to clarify their workings. Not perfect still. Ask if something specific is unclear, and feel free to suggest more/better documentation (especially the larger things in util should soon be spun off into their own repo's).

[reficul31]

@Treora Thanks for updating the documentation for the functions in the util module. I actually wanted to know how to approach testing the functions in the module. Would there be some specific functionality you wanted to be tested for in those module?

[reficul31]

This is a summary of all the problems I have been facing for quite a few days now.

Issue with the render method of src/options/components/navigation

There seems to be a very weird error that keeps recurring in the render method of the Navigation component in the options module. I know it is a problem with the tag, but I can't seem to figure out why. I have updated all my packages(repeatedly), scoured the world if weird react doubts, but nothing seem to be working. I know it is something extremely trivial but I can't seem to put my finger on it. To check out the failing test Test

Can't seem to figure out how to test these moudles

I already mentioned this before, but I can't seem to figure out a good testing method to test the following components. Any help will be extremely appreciated. Just to be clear I know what the modules are being used for I just want to know how should I go about testing them.

• src/page-analysis/background/index
• src/page-analysis/content_script/extract-pdf-content
• src/util/event-to-promise
• src/util/sync-location-hash
• src/util/tab-events
• src/util/webextensionRPC
• src/util/when-all-settled

Progress Report
90 tests written
Unit testing framework almost setup. Have started working on the on the UI/UX tests of options and overview module. Will write some integration tests this week as well.

For in depth progress report. Please refer to the blog.

[Treora]

Thanks for reporting the progress, and sorry to leave you hanging with some problems. Have you discussed them with your GSoC mentors? (as for the options page, I would not bother about it now, since we don't even have any options yet! I thought to just remove it from the code base for the moment)

I am now working hard on getting a release out, and hacking proof-of-concepts to demo and explore subsequent features. I plan to have a break from that effort next week, and reserve a few days to clean up, document and reorganise code (#112), which would be a good moment to add some tests! Perhaps we could find some time then to code together over chat or call?

[reficul31]

Sure thing! Dm me whenever you find the time to talk. I know the release date is coming fast, thanks for taking the effort to reply to my queries. I know you must be swamped. As for the options module it's up to you to leave it in. I have written some tests which I think act as great placeholders for system tests for when the module is ready. The query was one of concept.

Have you discussed them with your GSoC mentors?

This is the agreed upon place of discussion with my mentors where I can communicate with them easily.

[ghost]

Issue with the render method of src/options/components/navigation

There seems to be a very weird error that keeps recurring in the render method of the Navigation component in the options module. I know it is a problem with the tag, but I can't seem to figure out why. I have updated all my packages(repeatedly), scoured the world if weird react doubts, but nothing seem to be working. I know it is something extremely trivial but I can't seem to put my finger on it. To check out the failing test Test

I have debugged the issue. @reficul31 You need to downgrade react-router in package.json to "react-router": "^3.0.5".
The problem is that @Treora has recently upgraded react-router to 4.x and hasn't done the necessary migrations (+ using react-router-dom), which resulted in import { Link } from 'react-router' not being an export anymore.

How have I debugged and found the problem

(Might be interesting to learn from for future errors)

• First I ran the test. The result was:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Navigation`.

• I knew already that this error means that a react component that is used inside the Navigation render function is not available. If I would not have know what the error means, I would have googled for the general error message.
• Then I looked for possible candidates. The first one was the nav element. I replaced it with div. But it wasn't the cause (I reran the test).
• Then I looked into the implementation of buildRoutes(). There my IDE (WebStorm) showed me the unresolved export of Link.
• Now I checked which version of react-router we use in package.json.
• I searched for the react-router documentation for the Link element and found that it is imported from react-router-dom.
• I used git blame on package.json to find out if there was an upgrade recently, which was the case (from version 3 to 4).
• I upgraded react-router and fixed the import which fixed the first error but gave me another one that is react-router API specific.
• So I just decided to downgrade back to version 3, because migration wasn't done. This made the test pass.

[ghost]

Response to: Can't seem to figure out how to test these moudles

I already mentioned this before, but I can't seem to figure out a good testing method to test the following components. Any help will be extremely appreciated. Just to be clear I know what the modules are being used for I just want to know how should I go about testing them.

src/page-analysis/background/index
src/page-analysis/content_script/extract-pdf-content
src/util/event-to-promise
src/util/sync-location-hash
src/util/tab-events
src/util/webextensionRPC
src/util/when-all-settled

If you still have trouble testing anything after reading the suggestions, let me know. I didn't write down every detail.

Suggestions for testing

src/page-analysis/background/index

• performPageAnalysis
  • Extract out setDocAttachment, storeFavIcon, storeScreenshot, storePageContent, storePageFreezeDried from performPageAnalysis and export them as functions so we can test them separately.
  • The expectation should be that the doc is correctly modified (the attachment is added)
• analysePage
  • Mock whenPageDOMLoaded

src/page-analysis/content_script/extract-pdf-content

• extractContent
  • Create a sample PDF with multiple pages of text, author, title and keywords and make sure that the function returns the right result.
• extractPdfContent
  • Use same sample PDF as in extractContent
  • use the fetch mock, to provide the file via URL. Also one test where you pass it as blob argument.

src/util/event-to-promise

• Write unit tests for all the supported cases that are documented.
• The event that you pass can just be a stub.

src/util/sync-location-hash

• Use stubs for the window objects

function createWindowStub({hash}) {
  return {
    location: {hash},
    addEventListener: jest.fn(),
    removeEventListener: jest.fn()
  }
}

src/util/tab-events

If we want to unit test those functions, I would mock the browser.tabs API.

src/util/webextensionRPC

• Write and export a function that clears the variable remotelyCallableFunctions (global state) and use it before each test.

src/util/when-all-settled

• Pass in some promises that you control. You can use Promise.resolve() and Promise.reject() for already resolved/rejected promises.
• Test that the returned promise is resolved even when a promise is rejected
• Test that the returned promise is only resolved after all promises are resolved or rejected
• Test that the onRejection option works

[reficul31]

So I have been writing some React tests using enzyme, and I was wondering to get some help regarding what all functionality is to be tested for.
Right now the way the react tests stands is

• Having a snapshot test(to catch changes in the components and to catch if the component mounts the way it is supposed to)
• Some basic functionality testing(eg typing in the input query field will trigger the action setQuery)

I would really like to know more things I could test for in the components.
Ps. I have also added a test for src/dev/redux-devtools-component.jsx just to check if it mounts correctly.