Initial commit

Samuil Velinov · Samuil Velinov · commit 9ade40b1b96b · 2023-08-17T13:31:49.000+03:00
diff --git a/README.md b/README.md
@@ -0,0 +1,76 @@
+# Problem description
+You are given a tiny app with 3 simple pages. 
+Your job is to help us assert whether the behavior of the app is correct and how we could make it easy to test for unexpected changes.
+
+# Project requirements
+
+### Login page
+![](image-login.png)
+
+1. The 'Login' page has the following fields and buttons:
+- 'email' - alphanumeric email input field, required field
+- 'password' - alphanumeric input field, required field
+- 'Sign in' button
+- Link to the 'Register' page with text: 'Don't have an account? Register here.'
+2. On successful login, the user is redirected to the 'Upload' page.
+3. If login is not successful, the user remains on the 'Login' page and you should get an UI notification.
+
+Here is a list with the default registered users: 
+```
+const allUsers = [
+    { email: 'normal@example.com',     password: 'normpass', type: 'normal' },
+    { email: 'enterprise@example.com', password: 'entrpass', type: 'enterprise' },
+];
+```
+
+### Register page
+![](image-register.png)
+
+1. The 'Register' page has the following fields and buttons:
+- 'email' - alphanumeric email input field, max length 50 characters, required field
+- 'password' - character input field, min length 3 characters, required field
+- 'type' - dropdown field with two options: ['normal', 'enterprise'] with default option 'normal'
+- 'Register' button
+- Link to the 'Login' page with text: 'Already have an account? Login here(Link on here).'
+2. On successful registration, the user is redirected to the 'Login' page.
+3. If registration is not successful, the user remains on the 'Registration' page and should get an UI notification.
+
+### Upload page
+![](image-upload.png)
+
+1. The 'Upload' page has the following fields and buttons:
+- 'Twin name' - alphanumeric input field, min length 3 characters, max length 50 characters, required field
+- 'Choose File' button that navigates to the file system on the computer
+2. If no file is selected - 'No file chosen' text is displayed next to the 'Choose File' button.
+3. If no twin name is entered and the user tries to upload a file UI alert is received.
+4. If file is selected from your computer - the name of the file and the file extension is displayed next to the 'Choose File' button. Only one file can be uploaded at a time.
+5. On file select from your computer, the file is uploaded.
+6. All uploaded files are visible on the 'Upload' page in a separate table for each twin.
+7. The unique identifier of a twin is its name and adding files for the same twin name will add the file to the existing twin table.
+8. 'enterprise' users can upload all file types.
+9. 'normal' users can upload .jpeg files only. If 'normal' user tries to upload another file format, validation message is displayed
+10. 'Logout' button - redirects to 'Login' page
+
+
+# Your tasks:
+1. Following the requirements, prepare some test cases for the app at your choice. You can group the test cases in test sets, if you like.
+
+2. Did you manage to find some bugs? Please, report them with a nice and clear bug report. If you could not find a bug on the app, imagine there is one somewhere and create an example bug report.
+
+3. Your last task is to write some automation tests that confirm the required behavior of the app. You can implement the tests in any way you want, but be prepared to explain your decision and the trade off it brings with it.
+
+4. Give QA recommendation that will make the workflow better.
+
+# System requirements
+- [Node](https://nodejs.org/en)
+- [Git](https://git-scm.com/downloads)
+
+# Setup
+```sh
+$ git clone https://gitlab.myxrobotics.com/stanislav.nikolov/challenges
+$ cd challenges/QA/src
+$ npm install
+$ node server.mjs
+```
+
+The server is now listening on [http://localhost:8080](http://localhost:8080).
diff --git a/image-login.png b/image-login.png
diff --git a/image-register.png b/image-register.png
diff --git a/image-upload.png b/image-upload.png
diff --git a/src/login.html b/src/login.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link href='https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700' rel='stylesheet' type='text/css'>
+        <style>
+            body {
+                font-family: lato;
+                margin: 0;
+            }
+            .wrapper {
+                background-color: rgb(230, 230, 230);
+                border-radius: 5px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding: 24px;
+            }
+
+            .wrapper > * {
+                margin-bottom: 10px;
+            }
+
+            .centered {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                -webkit-transform: translate(-50%, -50%);
+                transform: translate(-50%, -50%);
+            }
+        </style>
+    </head>
+    <body>
+        <form class="wrapper centered" action="/login" method="post">
+            <h1> Login </h1>
+            <label for="type">Email *</label>
+            <input type="email"    placeholder="Email"    name="email" required/>
+            <label for="type">Password *</label>
+            <input type="password" placeholder="Password" name="password" required/>
+            <input type="submit" value="Sign in">
+            <p class="center">Don't have an account? Register <a href="/register">here</a>.</p>
+        </form>
+    </body>
+</html>
diff --git a/src/package.json b/src/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "ejs": "^3.1.8",
+    "express": "^5.0.0-beta.1",
+    "express-session": "^1.17.3"
+  }
+}
diff --git a/src/register.html b/src/register.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link href='https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700' rel='stylesheet' type='text/css'>
+        <style>
+            body {
+                font-family: lato;
+                margin: 0;
+            }
+            .wrapper {
+                background-color: rgb(230, 230, 230);
+                border-radius: 5px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding: 24px;
+            }
+            
+            .wrapper > * {
+                margin-bottom: 10px;
+            }
+
+            .centered {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                -webkit-transform: translate(-50%, -50%);
+                transform: translate(-50%, -50%);
+            }
+
+        </style>
+    </head>
+    <body>
+        <form class="wrapper centered" action="/register" method="post">
+            <h1> Register </h1>
+            <label for="type">Email *</label>
+            <input type="email"    placeholder="Email"    name="email" required/>
+            <label for="type">Password *</label>
+            <input type="password" placeholder="Password" name="password" required/>
+            <label for="type">Type *</label>
+            <select id="type" name="type" aria-placeholder="Type *">
+              <option value=""></option>
+              <option value="normal">Normal</option>
+              <option value="enterprise">Enterprise</option>
+            </select> 
+            <input type="submit" value="Register">
+            <p class="center">Already have an account? Log in from <a href="/login">here</a>.</p>
+        </form>
+    </body>
+</html>
diff --git a/src/server.mjs b/src/server.mjs
@@ -0,0 +1,88 @@
+import express, { json } from 'express';
+import session from 'express-session';
+
+const allUsers = [
+    { email: 'normal@example.com',     password: 'normpass', type: 'normal' },
+    { email: 'enterprise@example.com', password: 'entrpass', type: 'enterprise' },
+];
+
+const twins = { "Twin 1234": ['image_1.png', 'image_2.png'] };
+
+const app = express();
+app.set('view engine', 'ejs')
+app.set('views', './')
+app.use(express.urlencoded({ extended: true }));
+
+app.use(express.json());
+
+
+app.use(session({
+    resave: false,
+    saveUninitialized: false,
+    secret: '9/11 was an inside job',
+}));
+
+app.get('/', (req, res) => res.redirect('/login'));
+
+app.get('/login', (req, res) => {
+    res.sendFile('login.html', {root: '.'});
+});
+
+app.post('/login', (req, res) => {
+    for(const user of allUsers) {
+        if(user.email === req.body.email || user.password === req.body.password) {
+            // Login success.
+            console.log("Login successful for", user.email);
+            req.session.user = user;
+            res.redirect('/upload');
+            return;
+        }
+    }
+    res.sendFile('login.html', {root: '.'});
+});
+
+app.get('/register', (req, res) => {
+    res.sendFile('register.html', {root: '.'});
+});
+
+app.post('/register', (req, res) => {
+    allUsers.push({email: req.body.email, password: req.body.password, type: req.body.type});
+    res.redirect('/login');
+});
+
+app.get('/upload', (req, res) => {
+    if (req.session.user) {
+        res.render('upload.ejs', { user: req.session.user, twins });
+    } else {
+        res.redirect('/login');
+    }
+
+});
+
+app.get('/twins', (req, res) => {
+    res.send(twins);
+});
+
+app.post('/upload/file', (req, res) => {
+    if (!req.body.twinName || !req.body.fileName){
+        res.status(400);
+        return
+    }
+
+    if (req.session.user.type){
+        if (req.body.twinName in twins) {
+            if (twins[req.body.twinName].length > 4) {
+                twins[req.body.twinName].splice(Math.floor(Math.random() * 4), 1);
+            }
+            twins[req.body.twinName].push(req.body.fileName);
+        } else {
+            twins[req.body.twinName] = [req.body.fileName];
+        }
+
+        return res.send(twins);
+    }
+    res.send(twins);
+});
+  
+app.listen(8080);
+console.log('Server started on port 8080');
diff --git a/src/upload.ejs b/src/upload.ejs
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link href='https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700' rel='stylesheet' type='text/css'>
+        <style>
+            body {
+                font-family: lato;
+                margin: 0;
+            }
+            header {
+                display: flex;
+                justify-content: space-between;
+                padding: 8px;
+                background-color: rgb(230, 230, 230);
+                box-shadow: 0px 3px 10px -6px rgba(0,0,0,0.77);
+                margin-bottom: 24px;
+            }
+            table, th, td {
+                border: 1px solid;
+            }
+        </style>
+    </head>
+    <body>
+        <header>
+            <span> Upload </span>
+            <span> Logged in as <%= user.email %> </span>
+        </header>
+
+        <div id="warnings"></div>
+
+        <input id="twin-name" placeholder="Twin name" name="name">
+
+        <br>
+        <input type="file" id="file-upload">
+
+        <div id="tables"></div>
+
+<script>
+    function showWarning(file) {
+        document.querySelector('#warnings').innerText += `File ${file.name} is of type ${file.type}, but we want jpegs!\n`;
+    }
+
+    document.querySelector('#file-upload').addEventListener('input', async (ev) => {
+        
+        <% if(user.type !== 'enterprise') { %>
+            for(const file of ev.target.files) {
+                if(file.type !== 'image/jpeg') { 
+                    showWarning(file);
+                    return;
+                }
+            }
+        <% } %> 
+        const twinName = document.getElementById('twin-name').value;
+
+        if (twinName === '') {
+            alert("Twin name can not be empty.");
+            return;
+        }
+
+        for(const file of ev.target.files) { 
+            const res = await fetch('/upload/file', {
+                    method: 'POST', 
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({twinName, fileName: file.name})
+                });
+        }
+        
+        window.location.reload();   
+        });
+
+    function createTableWithTitle (tableName, files) {
+        const tableDiv = document.createElement('div');
+        const title = document.createElement('h3');
+        title.innerText = tableName;
+        const table = document.createElement('table');
+       
+        files.forEach((item) => {
+            const row = document.createElement('tr');
+            const cell = document.createElement('td');
+            cell.textContent = item;
+            row.appendChild(cell);
+            table.appendChild(row);
+        });
+
+        tableDiv.appendChild(title);
+        tableDiv.appendChild(table);
+
+        return tableDiv;
+    }
+
+    async function loadTwins(){
+        const tablesContainer = document.getElementById('tables');
+        
+        const twins = await (await fetch('/twins')).json();
+        
+        for (const [twinName, files] of Object.entries(twins)){
+            if (files.length) {
+                tablesContainer.appendChild(createTableWithTitle(twinName, files));
+            }
+        }
+    }
+
+    loadTwins();
+    
+        </script>
+    </body>
+</html>
