32 frontend tests

frontend/cypress.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:3000"
+  },
+
+  component: {
+    devServer: {
+      framework: "create-react-app",
+      bundler: "webpack",
+    },
+  },
+});

frontend/cypress/e2e/FilterSearch.cy.js

@@ -0,0 +1,34 @@
+/* eslint-env cypress */
+
+describe('Filter and search for a kebab', () => {
+    it('Searches for a kebab by name and expands its details', () => {
+      cy.visit('http://localhost:3000/auth');
+      cy.get('input[placeholder="Adres E-mail"]').type('admin@admin.pl');
+      cy.get('input[placeholder="Hasło"]').type('admin');
+      cy.get('button[type="submit"]').click();
+      cy.wait(2000);
+
+      cy.url().should('include', '/map');
+
+      cy.get('input[placeholder="Szukaj kebaba..."]').type('Maxi Kebab');
+
+      cy.get('.grid > :nth-child(1) > .justify-between > .fa-arrow-down > path').click();
+
+      cy.contains('Godziny otwarcia:').should('be.visible');
+      cy.contains('Poniedziałek: 11:00-23:00').should('be.visible');
+
+      cy.contains('Mięsa:').should('exist');
+      cy.contains('kurczak, wołowina, mieszane, falafel').should('exist');
+      cy.contains('Sosy:').should('exist');
+      cy.contains('łagodny, ostry, mieszany, czosnek, ziołowy').should('exist');
+      cy.contains('Status:').should('exist');
+      cy.contains('Istnieje').should('exist');
+      cy.contains('Rzemieślniczy: Nie').should('exist');
+      cy.contains('Na miejscu: Tak').should('exist');
+      cy.contains('Sieciówka: Nie').should('exist');
+      cy.contains('Opcje zamówień:').should('exist');
+      cy.contains('na miejscu').should('exist');
+      cy.contains('na wynos').should('exist');
+      cy.contains('dostawa').should('exist');
+  });
+});

frontend/cypress/e2e/Login.cy.js

@@ -0,0 +1,28 @@
+/* eslint-env cypress */
+
+describe('User Login', () => {
+    it('Logs in an existing user successfully', () => {
+      cy.visit('http://localhost:3000/auth');
+
+      cy.get('input[placeholder="Adres E-mail"]').type('admin@admin.pl');
+      cy.get('input[placeholder="Hasło"]').type('admin');
+
+      cy.get('button[type="submit"]').click();
+
+      cy.contains('Logowanie zakończone sukcesem!').should('be.visible');
+      cy.url().should('include', '/map');
+    });
+
+    it('Shows an error for invalid credentials', () => {
+      cy.visit('http://localhost:3000/auth');
+
+      cy.get('input[placeholder="Adres E-mail"]').type('FDOMFSDOMNF@wp.pl');
+      cy.get('input[placeholder="Hasło"]').type('sdffsdfsdsfsdfsdfgsdfgdfgdfgdfg');
+
+      cy.get('button[type="submit"]').click();
+
+      cy.contains('Błąd logowania. Sprawdź swoje dane.').should('be.visible');
+      cy.url().should('include', '/auth');
+    });
+  });
+

frontend/cypress/e2e/Map.cy.js

@@ -0,0 +1,25 @@
+/* eslint-env cypress */
+
+describe('Map Page Interactions', () => {
+    it('Logs in and interacts with the map', () => {
+      cy.visit('http://localhost:3000/auth');
+      cy.get('input[placeholder="Adres E-mail"]').type('admin@admin.pl');
+      cy.get('input[placeholder="Hasło"]').type('admin');
+      cy.get('button[type="submit"]').click();
+      cy.wait(2000);
+
+      cy.contains('Logowanie zakończone sukcesem!').should('be.visible');
+      cy.url().should('include', '/map');
+
+      cy.get('.leaflet-container').should('be.visible');
+
+      cy.get('.leaflet-marker-icon').should('have.length.greaterThan', 0); 
+      cy.get('.leaflet-marker-icon').first().click();
+
+      cy.get('.leaflet-popup-content').should('be.visible');
+      cy.get('.leaflet-popup-content button').contains('Szczegóły').click();
+
+      cy.contains('©kibolAPP').should('be.visible');
+    });
+  });
+

frontend/cypress/e2e/Navigation.cy.js

@@ -0,0 +1,19 @@
+/* eslint-env cypress */
+
+describe('Navigate between Home and Map', () => {
+  it('Navigates from Home to Map and back to Home', () => {
+    cy.visit('http://localhost:3000'); 
+
+    cy.contains('LEGNICA KEBAB CITY TOUR').should('be.visible');
+
+    cy.contains('MAPA').click();
+
+    cy.url().should('include', '/map');
+    cy.contains('Powrót').should('be.visible');
+
+    cy.contains('Powrót').click();
+
+    cy.url().should('eq', 'http://localhost:3000/');
+    cy.contains('LEGNICA KEBAB CITY TOUR').should('be.visible');
+  });
+});

frontend/cypress/e2e/Registration.cy.js

@@ -0,0 +1,21 @@
+/* eslint-env cypress */
+
+const uniqueEmail = `testuser+${Date.now()}@example.com`;
+
+describe('User Registration', () => {
+  it('Registers a new user', () => {
+    cy.visit('http://localhost:3000/auth');
+
+    cy.contains('Zarejestruj się.').click();
+
+    cy.get('input[placeholder="Nazwa użytkownika"]').type('TestUser');
+    cy.get('input[placeholder="Adres E-mail"]').type(uniqueEmail);
+    cy.get('input[placeholder="Hasło"]').type('password123');
+    cy.get('input[placeholder="Potwierdź hasło"]').type('password123');
+
+    cy.get('button[type="submit"]').click();
+
+    cy.contains('Rejestracja zakończona sukcesem!').should('be.visible');
+    cy.url().should('include', '/map');
+  });
+});

frontend/cypress/e2e/RegistrationError.cy.js

@@ -0,0 +1,20 @@
+/* eslint-env cypress */
+
+describe('User Registration with Existing Email', () => {
+    it('Shows an error when trying to register with an existing email', () => {
+      cy.visit('http://localhost:3000/auth');
+
+      cy.contains('Zarejestruj się.').click();
+
+      cy.get('input[placeholder="Nazwa użytkownika"]').type('AdminUser');
+      cy.get('input[placeholder="Adres E-mail"]').type('admin@admin.pl');
+      cy.get('input[placeholder="Hasło"]').type('password123');
+      cy.get('input[placeholder="Potwierdź hasło"]').type('password123');
+
+      cy.get('button[type="submit"]').click();
+
+      cy.contains('Błąd serwera: The email has already been taken.').should('be.visible');
+      cy.url().should('include', '/auth');
+    });
+  });
+

frontend/cypress/e2e/Suggestion.cy.js

@@ -0,0 +1,32 @@
+/* eslint-env cypress */
+
+const suggestionText = `To jest testowa sugestia ${Date.now()}`;
+
+describe('Suggestion feature', () => {
+    it('Logs in, submits a suggestion, and verifies it in the admin panel', () => {
+      cy.visit('http://localhost:3000/auth');
+      cy.get('input[placeholder="Adres E-mail"]').type('admin@admin.pl');
+      cy.get('input[placeholder="Hasło"]').type('admin');
+      cy.get('button[type="submit"]').click();
+
+      cy.url().should('include', '/map');
+      cy.contains('Powrót').should('be.visible');
+      cy.contains('Powrót').click();
+
+      cy.contains('SUGESTIA').should('be.visible');
+      cy.contains('SUGESTIA').click();
+
+
+      cy.get('textarea[placeholder="Wpisz swoją sugestię..."]').type(suggestionText);
+
+      cy.contains('Wyślij').click();
+      cy.contains('Sugestia została wysłana!').should('be.visible');
+
+      cy.contains('ADMIN PANEL').click();
+      cy.url().should('include', '/admin');
+
+      cy.contains('Sugestie').click();
+      cy.contains(suggestionText).should('be.visible');
+    });
+  });
+

frontend/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

frontend/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

frontend/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

frontend/cypress/support/component.js

@@ -0,0 +1,28 @@
+/* eslint-env cypress */
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react18'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)

frontend/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

frontend/eslint.config.js

@@ -2,13 +2,15 @@ import globals from "globals";
 import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
 import pluginReact from "eslint-plugin-react";
+import pluginCypress from "eslint-plugin-cypress";
 
 /** @type {import('eslint').Linter.Config[]} */
 const config = [
   {
     files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
     languageOptions: {
       globals: {
+        Cypress: true,
         ...globals.browser,
         ...globals.node,
         jest: true,
@@ -21,13 +23,37 @@ const config = [
     ...pluginReact.configs.flat.recommended,
     settings: {
       react: {
-        version: "detect", 
+        version: "detect",
       },
     },
     rules: {
-      'react/react-in-jsx-scope': 'off',
+      "react/react-in-jsx-scope": "off",
+    },
+  },
+  {
+    files: ["cypress/**/*.cy.{js,ts}"],
+    plugins: {
+      cypress: pluginCypress,
+    },
+    languageOptions: {
+      globals: {
+        cy: true,
+        Cypress: true,
+        describe: true,
+        it: true,
+        before: true,
+        after: true,
+        expect: true,
+        on: true,
+        config: true
+      },
+    },
+    rules: {
+      "cypress/no-unnecessary-waiting": "warn",
     },
   },
 ];
 
+config.ignores = ["cypress/"];
+
 export default config;