adding unit test for rendering site and fixing LP export issue (#28)

* Initial Push

Inititial project state

* Static demo version

* static demo site - added variables

a

* first_implementation

* Updated UI, Improved Style to be more "Reactly", added Functionality

* add parsing functions

* change folder

* Import/Export Prototype

* Adding "reactjs-popup" to package,json

* Adding GLPK source

* Rough implementation of solver + example

* Show solution in output

* example 2 + popup lib

* removing import button

This feature won't be needed in this state of the project and might come back later. Right now it serves no functional purpose.

* Removing "Popout" button

This feature won't be needed in this state of the project and might come back later. Right now it serves no functional purpose.

* Updating Logs

Now the site displays all logs created with customLog(STRING). Logs can be cleared with customLogClear();

* Adding walltime

Can be called using:

Start:
function walltimeStart() {
returns Date.now();

Stop:
function walltimeStopAndPrint(startpoint: number) {
Add startpoint as argument.
It prints the elapsed time using customLog()

* Adding duals ouput

* Adding glpk.js package

required dependency

* adding LP format export and fixing a few errors

* fixing further errors

* adding automatic build

* Moving files to correct folders

* Update nextjs.yml

* Updating README and .gitignore

README:
- added installation instructions
- added troubleshooting

gitignore:
- skipping Writerside and .idea folders

* Update LICENCE.txt

We are required to use the same license. See https://github.com/hgourvest/node-glpk/blob/master/LICENSE

* Updating icon

* Adding RegEx input checks and updating text box explanations

* Update README.md

Updating license info

Signed-off-by: SinusFox <61253950+SinusFox@users.noreply.github.com>

* Deleting license to recreate proper license

* Update layout.tsx

fixing typo

Signed-off-by: SinusFox <61253950+SinusFox@users.noreply.github.com>

* Fixing word issue

English has some false friends... like the German "Enter" is actually return in English.

* Updatint License

* Fixing design issue and updating license link

* Fixing typo in log

* Fixing white mode

* adding translations 1/2

UI Translations

Coming in 2/2: Output translations

* adding output translations

* adding minimize button

* adding unit test for rendering home page

* fixing maxmin on lp export

* Update .gitignore

* Update .gitignore

* Update scripts.ts

* Update scripts.ts

* Update README.md

* adding tests

---------

Signed-off-by: SinusFox <61253950+SinusFox@users.noreply.github.com>
Co-authored-by: moebiusl <lucas.moebius@icloud.com>
Co-authored-by: Marcel Pöppe <marcel.poeppe@gmail.com>

.github/workflows/test.yml

@@ -0,0 +1,26 @@
+name: Run Tests
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run tests
+        run: npm run test:ci

README.md

@@ -3,57 +3,66 @@ This projects aims to create a tool for easy calculation of operations research
 
 ## Table of Contents
 - [Features](#features) 
-- [Installation](#installation)
+- [Installation/Access](#installationaccess)
 - [Usage](#usage)
-- [Supported problem Types](#supported-problem-types)
+- [Supported problem types](#supported-problem-types)
 - [Contributing](#contributing)
 - [Licence](#licence)
 - [Contact](#contact)
 - [Troubleshooting](#troubleshooting)
-## Features 
-ToDo
-## Installation 
-### On web
-You can always use the OR-Tool [without any installation](https://spaceholder-programming.github.io/Operations-Research-Tool/).
+
+## Features
+ - Export as LP (Linear Programming)
+ - Measuring elapsed real time 
+ - Logging
+ - Solving via GLPK and HiGHS
+
+## Installation/Access
+### Online
+You can always access the Tool without any installation on our [GitHub Pages instance](https://spaceholder-programming.github.io/Operations-Research-Tool/).
 ### Local
-1. Install dependencies:
-This project relies on [NextJs](https://nextjs.org/). Please follow its [installation instructions](https://nextjs.org/docs/getting-started/installation) to get everything ready.
-2. Clone the repository:
+#### Install dependencies
+This project relies on [NextJs](https://nextjs.org/). Please follow its [installation instructions](https://nextjs.org/docs/getting-started/installation) to get everything ready. 
+#### Clone the repository
+Using Git:
 ```Bash
 git clone https://github.com/Spaceholder-Programming/Operations-Research-Tool.git
 ```
-3. Build the site:
-Open the folder where the project was saved in PowerShell (or your favorite console). Then build the site:
+#### Building the site
+Navigate towards the folder, where the project is located on your machine via terminal.
+Afterwards, execute the following command:
+
 ```Bash
 npm build
 ```
-4. Run it:
+#### Run 
 ```
 npm start
 ```
-5. Access the OR-Tool using your browser:
-Usually it starts on port 3000. [This link](http://localhost:3000) should work. Otherwise check your console for the link.
-## Usage
+#### Access the Tool using your browser:
+You can access the tool via browser on your machine. The default port is 3000. 
 
+If you can not reach the tool under [this link](http://localhost:3000), the default port is blocked and you have to check the terminal to get the correct port. 
+
+## Usage
 ToDo
-### Supported problem Types
+### Supported problem types
 + Linear
 + Mixed Integer
 
 ## Contributing
 1. Fork the repository
-2. Create a new branch: `git checkout -b Featurename`
+2. Create a new branch: `git checkout -b featurename`
 3. Implement your changes
 4. Push your branch: `git push origin featurename`
 5. Create a pull request
 # Licence
-
-For further information, please check out the [LICENSE](https://github.com/Spaceholder-Programming/Operations-Research-Tool/blob/main/LICENCE.md).
+This project is licensed under the [MIT License](https://github.com/Spaceholder-Programming/Operations-Research-Tool?tab=MIT-1-ov-file).
 # Contact
 If you have the desire to contact the team behind this project, use the contact details on our GitHub accounts:
 + [bRNS98](https://github.com/bRNS98)
-+ [moebiusl](https://giothub.com/moebiusl)
++ [moebiusl](https://github.com/moebiusl)
 + [SinusFox](https://github.com/SinusFox)
 + [widepoeppihappy](https://github.com/widepoeppihappy)
 # Troubleshooting
-If you find erros in the code, please contact us by [creating an issue](https://github.com/Spaceholder-Programming/Operations-Research-Tool/issues/new).
+If you find bug, please contact us by [creating an issue](https://github.com/Spaceholder-Programming/Operations-Research-Tool/issues/new).

__tests__/render_home_page.test.js

@@ -0,0 +1,22 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Home from "../src/app/page";
+import { customLog, customLogClear } from '../src/app/scripts';
+
+jest.mock('../src/app/scripts', () => ({
+    customLog: jest.fn(),
+    customLogClear: jest.fn(),
+}));
+
+jest.mock('../src/solver/glpk.min.js', () => ({
+    LPF_ECOND: 2,
+}));
+
+test('render home page', () => {
+    // render website
+    render(<Home />);
+
+    // check if text is in document
+    const headingElement = screen.getByText(/OR-Tool/i);  // text search in document
+    expect(headingElement).toBeInTheDocument();
+});

__tests__/scripts.test.js

@@ -0,0 +1,104 @@
+import { render, fireEvent, screen } from '@testing-library/react';
+import { 
+    customLog, 
+    customLogClear, 
+    getTranslation, 
+    isInputValidRegex, 
+    isInputFilled, 
+    downloadLPFormatting, 
+    downloadLP, 
+    calculate_click 
+} from '../src/app/scripts';
+import Home from '../src/app/page'
+import text from '../src/app/lang';
+
+// Mocking GLPKAPI and console log
+jest.mock('../src/solver/glpk.min.js', () => ({
+    LPF_ECOND: 2,
+}));
+
+// Mocking console.log
+const consoleLogMock = jest.spyOn(console, 'log').mockImplementation(() => {});
+
+beforeEach(() => {
+    document.body.innerHTML = `
+      <div>
+        <select id="language_current">
+          <option value="eng">English</option>
+        </select>
+        <textarea id="objective"></textarea>
+        <textarea id="subject"></textarea>
+        <textarea id="bounds"></textarea>
+        <textarea id="vars"></textarea>
+        <select id="maxminswitch">
+          <option value="maximize">Maximize</option>
+          <option value="minimize">Minimize</option>
+        </select>
+        <div id="out"></div>
+      </div>
+    `;
+    jest.clearAllMocks(); // Clear any previous mocks
+});
+
+test('customLog should append message to output box', () => {
+    const message = 'Test message';
+    customLog(message);
+    const outputElement = document.getElementById('out');
+    expect(outputElement.innerHTML).toContain(message);
+});
+
+test('customLogClear should clear the output box', () => {
+    const message = 'Test message';
+    customLog(message);
+    customLogClear();
+    const outputElement = document.getElementById('out');
+    expect(outputElement.innerHTML).toBe('');
+});
+
+test('getTranslation should return translation based on selected language', () => {
+    const result = getTranslation('header_title');
+    expect(result).toBe(text('eng', 'header_title')); // Assuming text function provides correct translation
+});
+
+test('isInputValidRegex should validate input regex correctly', () => {
+    expect(isInputValidRegex("x + y", "+1 x + 2 y <= 15\n+3 x + 1 y <= 20", "x >= 0\ny >= 0", "x\ny")).toBe(true);
+    expect(isInputValidRegex("x + y", "+1 x + 2 y <= 15\n+3 x + 1 y <= 20", "x >= 0\ny >= 0", "")).toBe(false); // Invalid objective
+});
+
+test('isInputFilled should check for filled inputs', () => {
+    expect(isInputFilled('3x + 5y', 'x + y <= 10', 'x <= 5', 'x\ny')).toBe(true);
+    expect(isInputFilled('', 'x + y <= 10', 'x <= 5', 'x\ny')).toBe(false); // Objective empty
+});
+
+test('downloadLPFormatting should format LP correctly', () => {
+    const formattedLP = downloadLPFormatting('3x + 5y', 'x + y <= 10', 'x <= 5');
+    expect(formattedLP).toContain('obj: 3x + 5y');
+    expect(formattedLP).toContain('Subject To');
+    expect(formattedLP).toContain('Bounds');
+});
+
+test('calculate_click should display "Calculating" in the output box', () => {
+    render(<Home />);
+
+    // Spy on customLog and customLogClear to prevent actual logging and check the calls
+    const mockClear = jest.spyOn({ customLogClear }, 'customLogClear').mockImplementation();
+    const mockLog = jest.spyOn({ customLog }, 'customLog').mockImplementation();
+
+    // Set valid inputs
+    document.getElementById('objective').value = '3x + 5y';
+    document.getElementById('subject').value = 'x + y <= 10';
+    document.getElementById('bounds').value = 'x <= 5';
+    document.getElementById('vars').value = 'x\ny';
+
+    // Simuliere den Button-Klick, der die Berechnung startet
+    fireEvent.click(screen.getByText('Calculate'));
+
+    // Check the contents of out box
+    const outputElement = document.getElementById('out');
+    expect(outputElement.innerHTML).toContain('Calculating');
+
+    // Clear mock
+    mockClear.mockRestore();
+    mockLog.mockRestore();
+});
+

jest.config.js

@@ -0,0 +1,15 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  dir: './',
+});
+
+const customJestConfig = {
+  testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+};
+
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package.json

@@ -6,13 +6,16 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest --watchAll",
+    "test:ci": "jest --ci --coverage"
   },
   "dependencies": {
     "glpk.js": "^4.0.2",
     "i18n": "^0.15.1",
     "i18next": "^23.15.2",
     "i18next-browser-languagedetector": "^8.0.0",
+    "jest-environment-jsdom": "^29.7.0",
     "next": "14.2.11",
     "next-i18next": "^15.3.1",
     "react": "^18",
@@ -22,11 +25,15 @@
     "reactjs-popup": "^2.0.6"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.11",
+    "jest": "^29.7.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"

src/app/globals.css

@@ -172,3 +172,13 @@ body {
 .dropdown-custom:hover {
   background-color: #444;
 }
+
+.dropdown-custom-maxmin {
+  width: 150px;
+  background-color: black;
+  color: white;
+  border: none;
+  padding: 10px;
+  font-size: 16px;
+  cursor: pointer;
+}

src/app/page.tsx

@@ -2,11 +2,13 @@
 
 import React, { useState } from 'react';
 import { Box, Button, Output } from "./modules";
-import { calculate_clickMaximize, calculate_clickMinimize, downloadLP, import_click } from "./scripts"
-import text from "./lang"
+import { calculate_click, downloadLP } from "./scripts";
+import text from "./lang";
 
 export default function Home() {
   const [language, setLanguage] = useState('eng');
+  const [maxminOption, setMaxminOption] = useState('maximize');
+
   const tr_hTitle = text(language, 'header_title');
   const tr_hSubtitle = text(language, 'header_subtitle');
   const tr_boxObjTitle = text(language, 'boxObjTitle');
@@ -21,21 +23,27 @@ export default function Home() {
   const tr_boxExportLP = text(language, "boxExportLP");
   const tr_calc_max = text(language, "maximize");
   const tr_calc_min = text(language, "minimize");
+  const tr_calcButton = text(language, "buttonCalc");
 
   const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     setLanguage(event.target.value);
   };
 
+  const handleMaxMinChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setMaxminOption(event.target.value);
+  };
+    
   return (
     <>
       <header className="header">
         <div className="title">
           <main className="header_box">
             {tr_hTitle}
-            <br></br>
+            <br />
             <span className="header_copyright">
               <i>{tr_hSubtitle}</i>
-            </span><br></br>
+            </span>
+            <br />
             <select id="language_current" value={language} onChange={handleLanguageChange} className="dropdown-custom">
               <option value="ger">Deutsch</option>
               <option value="eng">English</option>
@@ -46,35 +54,42 @@ export default function Home() {
       <Box
         title={tr_boxObjTitle}
         placeholder={tr_boxObjDesc}
-        id="objective" />
+        id="objective"
+      />
       <Box
         title={tr_boxSubjTitle}
         placeholder={tr_boxSubjDesc}
-        id="subject" />
+        id="subject"
+      />
       <Box
         title={tr_boxBoundsTitle}
         placeholder={tr_boxBoundsDesc}
-        id="bounds" />
+        id="bounds"
+      />
       <Box
         title={tr_boxVarsTitle}
         placeholder={tr_boxVarsDesc}
-        id="vars" />
+        id="vars"
+      />
+      <select id="maxminswitch" value={maxminOption} onChange={handleMaxMinChange} className="dropdown-custom-maxmin">
+        <option value="maximize">{tr_calc_max}</option>
+        <option value="minimize">{tr_calc_min}</option>
+      </select>
       <Button
-        title={tr_calc_max}
+        title={tr_calcButton}
         className={"button_green"}
-        onClickFunc={calculate_clickMaximize} />
-      <Button
-        title={tr_calc_min}
-        className={"button_green"}
-        onClickFunc={calculate_clickMinimize} />
+        onClickFunc={calculate_click}
+      />
       <Button
         title={tr_boxExportLP}
         className={"button"}
-        onClickFunc={downloadLP} />
-      <br></br>
+        onClickFunc={downloadLP}
+      />
+      <br />
       <Output
         id="out"
-        text={tr_boxOut} />
+        text={tr_boxOut}
+      />
     </>
   );
 }

src/app/scripts.ts

@@ -8,7 +8,7 @@ import { start } from "repl";
 import text from "./lang"
 
 // custom log so we can append the output dynamically
-function customLog(input: string) {
+export function customLog(input: string) {
   // get language
   const lang = (document.getElementById('language_current') as HTMLSelectElement)?.value;
 
@@ -25,14 +25,14 @@ function customLog(input: string) {
   }
 }
 
-function customLogClear() {
+export function customLogClear() {
   const outElement = document.getElementById('out');
   if (outElement) {
     outElement.innerHTML = "";
   }
 }
 
-function getTranslation(input: string) {
+export function getTranslation(input: string) {
   // get language
   const lang = (document.getElementById('language_current') as HTMLSelectElement)?.value;
 
@@ -62,7 +62,7 @@ function walltimeStart() {
   return Date.now();
 }
 
-function isInputValidRegex(obj: string | undefined, subj: string | undefined, bounds: string | undefined, vars: string | undefined): boolean {
+export function isInputValidRegex(obj: string | undefined, subj: string | undefined, bounds: string | undefined, vars: string | undefined): boolean {
   customLog("input_checks_start");
 
   // standard case: input is undefined - invalid
@@ -108,7 +108,7 @@ function isInputValidRegex(obj: string | undefined, subj: string | undefined, bo
   return true;
 }
 
-function isInputFilled(obj: string | undefined, subj: string | undefined, bounds: string | undefined, vars: string | undefined) {
+export function isInputFilled(obj: string | undefined, subj: string | undefined, bounds: string | undefined, vars: string | undefined): boolean {
   if (obj == "" || obj == null || obj == undefined) {
     customLog("err_emptyBox");
     return false;
@@ -128,7 +128,7 @@ function isInputFilled(obj: string | undefined, subj: string | undefined, bounds
   return true;
 }
 
-function calculate_click(maximize: boolean) {
+export function calculate_click() {
   customLogClear();
   const timer = walltimeStart();
   customLog("calculating");
@@ -158,56 +158,6 @@ function calculate_click(maximize: boolean) {
     variables = (varsElement as HTMLInputElement).value;
   }
 
-  // let funcs:string[] = functions.split(/;/);
-  // let vars:string[] = variables.split(/;/);
-
-  // let direction = null;
-
-  // let namesVars:string[] = [];
-
-  // let variablesMIP:VariableMIP[];
-  // let variablesLP:VariableLP[];
-
-  // // console.log(vars);
-
-  // for (const decider of vars) {
-
-  //   // match comments
-  //   let regexMatch:RegExpMatchArray|null = decider.match(/#.*/);
-  //   if (regexMatch != null)
-  //     continue;
-
-  //   regexMatch = decider.match(/var/);
-  //   if (regexMatch != null)
-  //     namesVars.push(regexMatch[1]);
-
-
-
-  //   console.log(regexMatch);
-  // }
-
-
-  // for (const decider of funcs) {
-  //   let dir = decider.match(/(min|max) .*/);
-  //   if (direction != null && dir != null) {
-  //     document.getElementById('out').innerHTML = "ERROR: Multiple Functions!";
-  //     return;
-  //   }
-  //   if (direction == null && dir != null) {
-  //     direction = dir[1];
-  //     let test = parseFunction(decider);
-  //     console.log(test?.name);
-  //     variablesLP.
-  //     continue;
-  //   }
-
-  //   console.log(direction);
-
-  //   document.getElementById('out').innerHTML = direction;
-
-  //   console.log(parseFunction(decider));
-
-
   // catch error: empty input field(s)
   if (!isInputFilled(objective, subject, bounds, variables)) return;
 
@@ -215,8 +165,9 @@ function calculate_click(maximize: boolean) {
   if (!isInputValidRegex(objective, subject, bounds, variables)) return;
 
   // fetch operator
+  const maxmin = (document.getElementById('maxminswitch') as HTMLSelectElement)?.value;
   let operator = "Minimize";
-  if (maximize) operator = "Maximize";
+  if (maxmin == "maximize") operator = "Maximize";
 
   let wholeText: string = operator + "\n obj: " + objective
     + "\nSubject To \n" + subject
@@ -224,8 +175,6 @@ function calculate_click(maximize: boolean) {
     + "\nGenerals \n" + variables
     + "\nEnd";
 
-  // customLog("<br><br>DEBUGGING<br><br>\nfunctions:<br>" + functions + "<br><br>variables:<br>" + variables + "<br><br>DEBUGGING END<br>");
-
   customLog(getTranslation("run_optimization") + ": \"" + wholeText + "\"");
   customLog("");
   run(wholeText);
@@ -275,7 +224,7 @@ function run(text: string) {
   customLog("");
 }
 
-function downloadLPFormatting(objective: any, subject: any, bounds: any) {
+export function downloadLPFormatting(objective: any, subject: any, bounds: any) {
   customLog(getTranslation("downloadPrepFileString"));
   customLog("");
 
@@ -284,11 +233,16 @@ function downloadLPFormatting(objective: any, subject: any, bounds: any) {
   const formattedSubject = typeof subject === 'string' ? subject : '';
   const formattedBounds = typeof bounds === 'string' ? bounds : '';
 
+  // fetch operator
+  const maxmin = (document.getElementById('maxminswitch') as HTMLSelectElement)?.value;
+  let operator = "Minimize";
+  if (maxmin == "maximize") operator = "Maximize";
+
   // Header mit Problemname
   const header = "\\ Your problem\n";
 
   //  format objective
-  const objectiveFunction = `Maximize\n obj: ${formattedObjective}\n`;
+  const objectiveFunction = operator + `\n obj: ${formattedObjective}\n`;
 
   // turn each subject into a single line
   const constraints = `Subject To\n${formattedSubject.split("\n").filter(line => line.trim() !== "").map(line => ` ${line}`).join("\n")}\n`;
@@ -302,15 +256,6 @@ function downloadLPFormatting(objective: any, subject: any, bounds: any) {
   return lpFormat;
 }
 
-export function calculate_clickMaximize() {
-  calculate_click(true);
-}
-
-export function calculate_clickMinimize() {
-  calculate_click(false);
-}
-
-
 function downloadProblemDownload(content: string) {
   customLog("downloadPrepFile");
   customLog("");
@@ -360,41 +305,3 @@ export function downloadLP() {
 
   downloadProblemDownload(exportString);
 }
-
-// Irgend ein Interface
-// document.getElementById('out').innerHTML = funcs;
-
-// output.innerHTML = functions.innerHTML;
-
-// createProblemMIP();
-
-// LPAPI.default();
-
-
-export function import_click() {
-  console.log("importing");
-}
-
-
-// export function export_click() {
-//   console.log("Exporting...");
-
-// }
-
-// function parseFunction(toParse: string) {
-//   var regex = toParse.match(/([a-zA-Z][a-zA-Z0-9]*):/);
-//   if (regex == null)
-//     return;
-//   var name = regex[1];
-
-//   regex = toParse.match(/(?:([0-9]*) *\* *([a-zA-Z][a-zA-Z0-9]*))/g);
-
-//   let coefs:number[] = [];
-//   let vars:string[] = [];
-
-//   for (const rg of regex) {
-//     coefs.push(+rg.match(/([0-9]+)/g));
-//     vars.push(rg.match(/([a-zA-Z][a-zA-Z0-9]*)/g)[0]);
-//   }
-//   return {name, coefs, vars};
-// }