Further working on the tests

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package.json

@@ -20,6 +20,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --coverage --transformIgnorePatterns \"node_modules/(?!axios)/\"",
+    "test:update": "react-scripts test --updateSnapshot --coverage --transformIgnorePatterns \"node_modules/(?!axios)/\"",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/pages/Preferences.jsx

@@ -1,13 +1,16 @@
 import { Component } from 'react';
 import { UIPreferencesContext } from '../contexts/UIPreferencesContext';
 
+/**
+ * Class that exports preferences
+ */
 export class Preferences extends Component {
     render() {
         const { pageSize, theme, bytesStringBase2, setByteStringBase, setTheme } = this.context;
         return <>
             <form>
                 <div className='form-group'>
-                    <label className='label-description' id='themeLabel'>Theme</label>
+                    <label className='label-description' htmlFor='themeSelector' id='themeLabel'>Theme</label>
                     <select className="form-select form-select-sm" title='Select theme' id='themeSelector' value={theme} onChange={e => setTheme(e.target.value)}>
                         <option value="light">light</option>
                         <option value="dark">dark</option>
@@ -18,7 +21,7 @@ export class Preferences extends Component {
                 </div>
                 <br />
                 <div className='form-group'>
-                    <label className='label-description'>Byte representation</label>
+                    <label className='label-description' htmlFor="bytesBaseInput">Byte representation</label>
                     <select className="form-select form-select-sm" title='Select byte representation' id='bytesBaseInput' value={bytesStringBase2} onChange={e => setByteStringBase(e.target.value)}>
                         <option value="true">Base-2 (KiB, MiB, GiB, TiB)</option>
                         <option value="false">Base-10 (KB, MB, GB, TB)</option>

src/tests/Preferences.test.js

@@ -0,0 +1,75 @@
+import { render, screen } from '@testing-library/react'
+import { expect, test } from '@jest/globals';
+import userEvent from "@testing-library/user-event";
+import { Preferences } from '../pages/Preferences';
+const { setTheme } = jest.requireActual('../pages/Preferences');
+// Wrapper
+let wrapper;
+
+/**
+ * 
+ */
+beforeEach(() => {
+    wrapper = render(<Preferences />)
+});
+
+/**
+ * 
+ */
+describe('Calling the preference page', () => {
+    test('Should render preferences', () => {
+        expect(wrapper).toMatchSnapshot();
+    })
+})
+
+/**
+ * 
+ */
+describe('Select the light theme', () => {
+    test('Should select light theme', () => {
+     userEvent.selectOptions(
+            screen.getByRole('combobox', { name: "Theme" }),
+            screen.getByRole('option', { name: 'light' }));
+
+        expect(screen.getByRole('option', { name: 'light' }).selected).toBe(true)
+
+        expect(wrapper).toMatchSnapshot();
+    })
+})
+
+/**
+ * 
+ */
+describe('Select the dark theme', () => {
+    test('Should select dark theme', () => {
+        userEvent.selectOptions(
+            screen.getByRole('combobox', { name: "Theme" }),
+            screen.getByRole('option', { name: 'dark' }));
+
+        expect(screen.getByRole('option', { name: 'dark' }).selected).toBe(true)
+
+        expect(wrapper).toMatchSnapshot();
+    })
+})
+
+/**
+ * 
+ */
+describe('Test number of themes', () => {
+    test('Should have four themes', () => {
+        let theme = screen.getByRole('combobox', { name: "Theme" });
+        expect(theme).toHaveLength(4);
+        expect(wrapper).toMatchSnapshot();
+    })
+})
+
+/**
+ * 
+ */
+describe('Test byte representation', () => {
+    test('Should have two options', () => {
+        let theme = screen.getByRole('combobox', { name: "Byte representation" });
+        expect(theme).toHaveLength(2);
+        expect(wrapper).toMatchSnapshot();
+    })
+})

src/tests/RepositoryUI.test.jsx

@@ -0,0 +1,22 @@
+import axios from 'axios';
+import React from 'react';
+import App from '../App';
+import { render } from '@testing-library/react';
+
+jest.mock('axios');
+
+// Wrapper
+let wrapper;
+
+/**
+ * 
+ */
+beforeEach(() => {
+    wrapper = render(<App />)
+});
+
+describe('Testing the app', () => {
+    test('Should render the app', () => {
+        expect(wrapper).toMatchSnapshot();
+    })
+})