Add tests (CI)

[waldyrious]

We should have tests to ensure all the code (JS), page structure (HTML) and styling (CSS) works as intended. Running these tests in each PR would have prevented regressions like #71 from happening.

I am not sure what's the best approach or tools to test this kind of app, but I'm opening the issue to get the discussion started.

[waldyrious]

Here are some suggestions from ChatGPT, using the Code Interpreter feature:

Based on the content of the uploaded files, your web application (named Browserpad) seems to be a simple in-browser text editor with some additional features. Here are some tests you might want to consider:

1. Text input functionality: Ensure that the text area is editable. This can be done by sending some text to the textarea and verifying the textarea's content.

2. Character, word, and line count: After inputting text, check that the character, word, and line count are displayed correctly.

3. Tab input handling: Your JavaScript code has a special handling for the 'Tab' key. You should write a test that simulates pressing 'Tab' and then checks whether a tab character is inserted into the text.

4. Saving functionality: Test if the save button creates a download link with the correct contents. Note that due to security restrictions in browsers, you might not be able to fully test the download functionality (i.e., you can't check if the file was actually downloaded), but you can inspect the href attribute of the save link.

5. Loading functionality: Test if a text file can be uploaded and its contents are correctly loaded into the text editor. Note that due to security restrictions in browsers, you might not be able to fully automate this test.

6. Spell-checking toggle: Test if the spell-checking checkbox toggles the spellcheck attribute of the textarea.

7. Print functionality: While you can't verify that a print dialog pops up (since it's handled by the browser itself), you could possibly check that calling the print function doesn't throw an error.

8. Keyboard shortcuts: Test the 'Ctrl+S' and 'Ctrl+O' keyboard shortcuts. Note that because these are browser-level shortcuts, they may not be testable in certain test environments.

9. About dialog: Test if the "About Browserpad" dialog can be opened.

For each of these tests, you would use Selenium's API to interact with the elements on the page and assert that the expected behavior occurs. Remember that some functionalities might be difficult to test due to browser-level security restrictions.

Additionally, it suggested:

You might also want to consider adding some error handling in your JavaScript code. For example, you could display an error message if a user tries to load a file that's not a text file, and then write a test for that error handling.

And here's a simple Python script it provided to demonstrate how to implement tests using Selenium (other possibilities are Playwright, WebDriver.io, Cypress):

from selenium import webdriver

# Instantiate a browser driver
driver = webdriver.Firefox()  # or webdriver.Chrome()

# Open the webpage
driver.get("file:///path_to_your_file/index.xhtml")

# Find the textarea
textarea = driver.find_element_by_css_selector("textarea")

# Interact with the textarea
textarea.send_keys("Hello, World!")

# Check the textarea value
assert "Hello, World!" in textarea.get_attribute('value')

# Close the driver
driver.quit()