diff --git a/docker-compose.yml b/docker-compose.yml index 729eb81..525da08 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -19,7 +19,7 @@ services: depends_on: - mongodb ports: - - "8002:8002" + - "8003:8003" networks: - mynetwork environment: @@ -49,7 +49,7 @@ services: networks: - mynetwork environment: - USERS_SERVICE_URL: http://users:8002 + USERS_SERVICE_URL: http://users:8003 WIKIDATA_SERVICE_URL: http://wikidataservice:8001 webapp: diff --git a/docs/images/10-Quality-Tree-EN.png b/docs/images/10-Quality-Tree-EN.png new file mode 100644 index 0000000..dbae1bf Binary files /dev/null and b/docs/images/10-Quality-Tree-EN.png differ diff --git a/docs/src/03_system_scope_and_context.adoc b/docs/src/03_system_scope_and_context.adoc index b2bb78f..b583855 100644 --- a/docs/src/03_system_scope_and_context.adoc +++ b/docs/src/03_system_scope_and_context.adoc @@ -81,7 +81,7 @@ together with a mapping table showing the relationships between channels and inp |=== | **Component** | **Technologies Used** | Front-end | HTML, CSS (Tailwind), JavaScript (React) -| Back-end | .NET/node.js, Wikidata's API +| Back-end | node.js (Express), Wikidata's API | Database | MongoDB | Arquitechture | Microservices | Deployment and Maintenance | Docker diff --git a/docs/src/04_solution_strategy.adoc b/docs/src/04_solution_strategy.adoc index e1d6478..e5c9319 100644 --- a/docs/src/04_solution_strategy.adoc +++ b/docs/src/04_solution_strategy.adoc @@ -35,14 +35,20 @@ See https://docs.arc42.org/section-4/[Solution Strategy] in the arc42 documentat * *React*: JavaScript library for web and native user interfaces. It allows developers to create interactive web applications by breaking down the UI into reusable components. React uses a declarative approach to efficiently update and render components, resulting in faster and more maintainable code. It's widely adopted in the industry due to its simplicity, performance, and robustness. * *Node.js*: JavaScript runtime that enables running JavaScript code outside of web browsers. It's renowned for its event-driven architecture and extensive collection of packages, making it ideal for building scalable server-side applications. + *Express.js*: Express.js, often simply called Express, is a minimalist web application framework for Node.js. It simplifies the process of building web applications by providing a robust set of features, including middleware support, routing, and templating engines. Express is known for its flexibility, simplicity, and performance, making it a popular choice for developing web applications and APIs in Node.js. -* *.NET*: versatile developer platform for creating web, mobile, desktop, and cloud applications. It supports multiple programming languages and provides a rich set of libraries and tools for building software solutions. With built-in support for creating APIs and consuming web services, .NET makes it simple to develop and integrate with backend systems and services. * *Wikidata*: Wikidata provides a REST API for retrieving information related to any topic. It helps us to dynamically generate questions for our game using it from any programming language. * *MongoDB*: popular NoSQL database known for its flexibility and scalability. It stores data in flexible JSON-like documents and is widely used in modern web development for its simplicity and ability to handle large volumes of data. -* *Cucumber*: Testing tool that supports Behavior Driven Development (BDD) and allows us also to comply testability quality attribute. * *SonarCloud*: Cloud-based service provided by SonarSource, which offers continuous code quality analysis and automated code reviews for software development projects. It helps developers identify and fix bugs, security vulnerabilities, and code smells in their codebase to improve overall software quality. * *Arc42*: framework (template) used for documenting and communicating software architectures. It provides a template for describing the architecture of a software system, covering aspects such as stakeholders, requirements, architecture decisions, components, interfaces, and quality attributes. arc42 helps teams create consistent and comprehensible architecture documentation, enabling better communication, understanding, and maintenance of software systems throughout their lifecycle. * *npm*: default package manager for Node.js, providing a command-line interface to install, manage, and publish JavaScript packages. With over a million packages available in its registry, npm simplifies adding functionality to Node.js projects by handling dependencies and providing tools for versioning and publishing packages. * *Docker*: platform that will be used for deploying our services inside containers. Containers are lightweight, portable, and self-sufficient units that contain everything needed to run an application, including the code, runtime, system tools, libraries, and settings. Docker enables developers to package their applications along with all dependencies into containers, ensuring consistency across different environments, such as development, testing, and production. +* *GitHub Actions*: built-in automation tool on GitHub that allows us to automate some workflows that are triggered after some specific github branches actions at development. It provides as continuous integration of the game functionality. + +=== Technological decisions + +At the beggining of the project, the team decided to develop the wikidata API by means of .NET technology and C# programming language. +As part of continuous integration, the application was attempted to be deployed without success due to docker issues with .NET container. +Therefore, the team decided to migrate the whole API to Node.js using javascript and express framework. +As a conclusion, it was worth spending time making the migration for reducing the number of potential issues at deployment time. === Architecture & Design @@ -50,10 +56,6 @@ See https://docs.arc42.org/section-4/[Solution Strategy] in the arc42 documentat In a microservices architecture, each service typically represents a specific business function or capability and communicates with other services through well-defined APIs. This enables teams to work independently on different parts of the application, allowing us to divide the work into different teams avoiding bottlenecks during production. * *APIs*: using microservices architecture enforces us to isolate each of the microservices and create well-defined interfaces for accesing those microservices from common gateway, reducing dependencies between services and allowing them to evolve independently. Well-defined interfaces imply not only services independance, but also team members independecance since nobody will need to wait for others for starting working themselves. ---------------------(This could be another option if we eventually decide not to use microservices architecture)-------------------- - -* *MVC (Model-View-Controller)*: is a software architectural pattern which divides an application into three interconnected components: the Model, which represents the data and business logic; the View, responsible for the presentation layer and user interface; and the Controller, acting as an intermediary between the Model and View. MVC promotes separation of concerns, making it easier to manage and maintain complex web applications by enabling developers to work on different components independently. This pattern enhances code reuse, improves testability, and facilitates scalability, contributing to the development of robust and maintainable web applications across various frameworks and programming languages. - === Team Organization For developing this project we are using Github as the control version systems. diff --git a/docs/src/05_building_block_view.adoc b/docs/src/05_building_block_view.adoc index 4a10859..3b12523 100644 --- a/docs/src/05_building_block_view.adoc +++ b/docs/src/05_building_block_view.adoc @@ -99,74 +99,6 @@ Contained Building Blocks:: |=== -[role="arc42help"] -**** -Insert your explanations of black boxes from level 1: - -If you use tabular form you will only describe your black boxes with name and -responsibility according to the following schema: - -[cols="1,2" options="header"] -|=== -| **Name** | **Responsibility** -| __ | __ -| __ | __ -|=== - - - -If you use a list of black box descriptions then you fill in a separate black box template for every important building block . -Its headline is the name of the black box. -**** - - -==== - -[role="arc42help"] -**** -Here you describe -according the the following black box template: - -* Purpose/Responsibility -* Interface(s), when they are not extracted as separate paragraphs. This interfaces may include qualities and performance characteristics. -* (Optional) Quality-/Performance characteristics of the black box, e.g.availability, run time behavior, .... -* (Optional) directory/file location -* (Optional) Fulfilled requirements (if you need traceability to requirements). -* (Optional) Open issues/problems/risks - - - -__ - -__ - -_<(Optional) Quality/Performance Characteristics>_ - -_<(Optional) Directory/File Location>_ - -_<(Optional) Fulfilled Requirements>_ - -_<(optional) Open Issues/Problems/Risks>_ - - - - -==== - -__ - -==== - -__ - - -==== - -... - -==== -**** - === Level 1 [role="arc42help"] @@ -185,14 +117,16 @@ actor user as "User browser" frame WIQ { node Frontend node UserManagement - node QuestionGeneration + node WikidataService + node Gateway } cloud Wikidata as "Wikidata" user -- Frontend -Frontend -- UserManagement -Frontend -- QuestionGeneration -QuestionGeneration -- Wikidata +Frontend -- Gateway +Gateway -- UserManagement +Gateway -- WikidataService +WikidataService -- Wikidata .... @@ -209,7 +143,8 @@ Contained Building Blocks:: | **Name** | **Responsibility** | Frontend | Represents the user interface and manages the quiz logic of the application. | User Management | Handles everything related to user accounts. -| Question Generator | Generates questions from Wikidata data and sends them to the frontend. +| Wikidata Service | Generates questions from Wikidata data. +| Gateway |Acts as a central hub for managing API traffic. |=== Important Interfaces:: @@ -217,9 +152,9 @@ Important Interfaces:: [cols="1,2" options="header"] |=== | **Name** | **Description** -| Frontend <-> User Management | This interface defines how the frontend communicates with the User Management Service to log in, retrieve user data, or perform actions requiring authorization. -| Question Generator <-> Frontend | This interface defines how the Question Generator Service delivers processed questions to the frontend for display. -| Question Generator <-> Wikidata API | This interface represents the service fetching data from the Wikidata API. +| Frontend -> User Management | This interface defines how the frontend communicates with the User Management Service to log in, retrieve user data, or perform actions requiring authorization. +| Frontend -> Wikidata Service | This interface defines how the Question Generator Service delivers processed questions to the frontend for display. +| Wikidata Service -> Wikidata API | This interface represents the service fetching data from the Wikidata API. |=== @@ -244,8 +179,6 @@ Its headline is the name of the black box. **** -==== - [role="arc42help"] **** Here you describe @@ -317,7 +250,7 @@ Leave out normal, simple, boring or standardized parts of your system skinparam componentStyle uml2 ' Define components as rectangles without default stereotypes -rectangle "User Management" as UserManagement +rectangle "User Management API" as UserManagement database "Users MongoDB Database" as MongoDB ' Define connections @@ -326,7 +259,7 @@ UserManagement --> MongoDB @enduml ---- -==== White Box Question Generation Service +==== White Box Wikidata Service [role="arc42help"] @@ -341,45 +274,35 @@ UserManagement --> MongoDB skinparam componentStyle uml2 ' Define components as rectangles without default stereotypes -rectangle "Question Generation" as QuestionGeneration -database "Questions MongoDB Database" as MongoDB +rectangle "Wikidata Service API" as WikidataService cloud "Wikidata API" as WikidataAPI ' Define connections -QuestionGeneration --> MongoDB -QuestionGeneration --> WikidataAPI +WikidataService --> WikidataAPI @enduml ---- === Level 3 -[role="arc42help"] -**** -Here you can specify the inner structure of (some) building blocks from level 2 as white boxes. - -When you need more detailed levels of your architecture please copy this -part of arc42 for additional levels. -**** - +==== White Box User Management API -==== White Box <_building block x.1_> [role="arc42help"] **** -Specifies the internal structure of _building block x.1_. +...describes the internal structure of the User Management API. **** +[plantuml, format=png] +.... +frame UserManagementAPI { + node UserService + node AuthService +} +database MongoDB as "MongoDB" -__ - - -==== White Box <_building block x.2_> - -__ - - +UserService -- MongoDB +AuthService -- MongoDB +.... -==== White Box <_building block y.1_> -__ diff --git a/docs/src/06_runtime_view.adoc b/docs/src/06_runtime_view.adoc index 4faafae..c595a83 100644 --- a/docs/src/06_runtime_view.adoc +++ b/docs/src/06_runtime_view.adoc @@ -16,10 +16,10 @@ collections UsersService database DB User -> FrontEnd: Request login -FrontEnd -> UsersService: loginUser() -UsersService -> DB: checkUserData() +FrontEnd -> UsersService: "/users/login" +UsersService -> DB: validateRequiredFields() DB -> UsersService: Confirm data -UsersService -> UsersService: login() +UsersService -> UsersService: loginUser() UsersService -> FrontEnd: Confirm login ---- @@ -35,12 +35,11 @@ collections UsersService database DB User -> FrontEnd: Request sign up -FrontEnd -> UsersService: registerUser() +FrontEnd -> UsersService: "/users/adduser" UsersService -> DB: checkCredentialsExist() DB -> UsersService: Confirm data -UsersService -> DB: CreateUserData() +UsersService -> DB: Create new user DB -> UsersService: Confirm data -UsersService -> UsersService: signUp() UsersService -> FrontEnd: Redirect to login page @enduml ---- @@ -53,18 +52,15 @@ Sequence diagram for the process of retrieving data from WikiData ---- actor User collections FrontEnd -collections QuestionGenerator +collections WikidataService database Wikidata -User -> FrontEnd: Request a game -FrontEnd -> QuestionGenerator: createGame() -QuestionGenerator-> Wikidata: Sparql query -Wikidata-> QuestionGenerator : entitites data -QuestionGenerator-> QuestionGenerator: fillQuestionStack() -QuestionGenerator-> QuestionGenerator: popGameQuestions() -QuestionGenerator-> FrontEnd: Send game +User -> FrontEnd: Start Game +FrontEnd -> WikidataService: "/GetQuestions" +WikidataService-> Wikidata: Sparql query +Wikidata-> WikidataService : entitites data +WikidataService-> WikidataService: createQuestions() +WikidataService-> FrontEnd: Send 10 questions FrontEnd -> User: Question 1 User-> FrontEnd: Answer 1 ---- - -=== diff --git a/docs/src/07_deployment_view.adoc b/docs/src/07_deployment_view.adoc index 2673084..eb5b547 100644 --- a/docs/src/07_deployment_view.adoc +++ b/docs/src/07_deployment_view.adoc @@ -107,20 +107,24 @@ frame Azure { node React } - frame NodeJSGateway { - node Authentication - + frame APIGateway { node Users + + node Wikidata } database MongoDB { node UsersDatabase + } - node ResultsDatabase + frame UsersAPI { + node AuthenticationService + + node UsersService } - frame .NET { - node RestAPI + frame WikidataAPI { + node QuestionGeneratorService } } } @@ -138,10 +142,11 @@ frame GitHub{ } -.NET -- ResultsDatabase : MongoDB (port 27017) -NodeJSGateway -- UsersDatabase : MongoDB (port 27017) -WebAPP -- NodeJSGateway : (port 8000:8002) -WebAPP -- .NET : .NET (port TBD) + +WebAPP -- APIGateway : port 8000 +Wikidata -- WikidataAPI: port 8001 +Users -- UsersAPI : port 8002 +UsersAPI -- UsersDatabase : MongoDB (port 27017) client -- WebAPP : Web Browser (port 3000) GitHubActions -- UbuntuServer : on release @@ -165,8 +170,9 @@ The virtual machine will contain as many containers as services in the applicati For now, the project contains: ** Web application service running on port 3000 -*** Gateway (middleware) service running on port 8000 -*** Users and authentication services running on ports 8001 and 8002 respectively +** Gateway (middleware) service running on port 8000 +** Wikidata API running on port 8001 +** Users API running on port 8002 ** Mongo DB server running on port 27017 ** Prometheus running on port 9090 for monitoring ** Grafana running on port 9091 for analytics and monitoring diff --git a/docs/src/08_concepts.adoc b/docs/src/08_concepts.adoc index 591ccf1..6794bf4 100644 --- a/docs/src/08_concepts.adoc +++ b/docs/src/08_concepts.adoc @@ -56,18 +56,73 @@ See https://docs.arc42.org/section-8/[Concepts] in the arc42 documentation. **** -=== __ +=== Domain Concepts -__ +==== Question +In our app, the question is always represent as a data structure with the next format: +[listing] +---- +{ + text: "What is the capital of Asturias?" + answers: [Gijón,Oviedo,Cangas de Onís] + correctIndex: 1 +} +---- -=== __ -__ +*Benefits:* -... +- Consistency: This format ensures consistent representation of questions throughout the app, reducing errors and simplifying code maintenance. +- Clarity: By explicitly defining the data format, developers can clearly understand how to work with question data within the codebase. +- Flexibility: By defining an array and a correct index, the array could be of multiple sizes. + + +=== UX Concepts + +==== Color + +We decided to use a color palette of 4 colors: + + +[cols="1,1"] +|=== +| Name | Color +| Background | +++#191919+++ +| Text| +++#f2ecff+++ +| Primary | +++#00c896+++ +| Danger | +++#e35a2a+++ +|=== + +*Benefits:* + + - Clarity: Thanks to this simple palette it is very easy to identify when something is correct or not. + - Consistency: By using a limited set of colors, the overall visual design of the application will be cohesive and harmonious. + - Accessibility: The chosen colors provide good contrast ratios, ensuring the content is readable and accessible for users with various visual abilities. + - Branding: The selected colors can be used to reinforce the application's brand identity and make it recognizable to users. + +The chosen color palette strikes a balance between functionality, aesthetics, and branding. The dark background with light text provides a high-contrast theme that is easy on the eyes, while the primary and danger colors are used sparingly to highlight important information or actions. -=== __ -__ + + + +=== Development concepts + +==== Testing +We test the application with these different tests: + - Unit Testing: We employed the SonarCloud tool to monitor the code covered by these tests, while Continuous Integration practices were implemented using GitHub Actions. + - Load Testing: We used Gattling for measuring the performance of the application when many users are using it. + - E2e Testing: We used behavior-driven development scenarios written in the Gherking language as a basis for our end-to-end tests. + +==== Deployment +The application is deployed using Docker. + +==== Configurability +The application will not have configurable features. An early idea was to include a "dark mode". +Through the development we decided to postpone these ideas in order to focus on a better application in general. + + +... + diff --git a/docs/src/09_architecture_decisions.adoc b/docs/src/09_architecture_decisions.adoc index 4418192..583c0fc 100644 --- a/docs/src/09_architecture_decisions.adoc +++ b/docs/src/09_architecture_decisions.adoc @@ -12,11 +12,13 @@ The following table contains the most interesting the design decisions that we h |=== |Code|Decision|Advantages|Disadvantages |ADR1| React.js | Quite easy to learn in comparison to other front-end libraries. Increasingly popular in the web.| Not all of us know about its usage -|ADR2| Tawilwind CSS | Consistent and unified design system and its ability to speed up the development process. Rapidly growing utility-first CSS framework | Quite new for most of us +|ADR2| Tailwind CSS | Consistent and unified design system and its ability to speed up the development process. Rapidly growing utility-first CSS framework | Quite new for most of us |ADR3| MongoDB | It does not need to be started manually. Free and easy to understand| We are quite new with MongoDB. |ADR4| Docker | Fast deployment, ease of moving/maintaining your applications. Easy as we already have DockerFiles example| We do not have much experience using Docker |ADR5| PlantUML | Allows drawing diagrams very easily, with a simple syntax.| Does not allow as much control over the exact layout of the elements in the diagram as other tools. |ADR6| Node.js | For small applications it's a very fast techonology. It's easy to learn and we already know a bit about it| Its performance is reduced with heavy computational tasks +|ADR7| Wikidata API in C# | Better structure and two people knew about the language| Dificulties with deployment, using another editor to run it, problems when committing new files. +|ADR8| Database for questions | Support if wikidata service stops working | New different relational database into the aplication, new api to develop, dependency on the database server we choose to use. |=== diff --git a/docs/src/11_technical_risks.adoc b/docs/src/11_technical_risks.adoc index f59104f..7ada8de 100644 --- a/docs/src/11_technical_risks.adoc +++ b/docs/src/11_technical_risks.adoc @@ -17,11 +17,11 @@ self-explanatory description, the probability of its occurrence, its impact on t | High | Each member will try to maximize its knowledge on some aspect of the project in the first weeks, in order to be able to be something similar to a leader in each one of the posible key aspects of the project. -|*Problems with Svelte* -| As a team we decided to try a new language for the front-end. +|*Problems with C#* +| As a team we decided to try .NET to code the API of wikidata. | High | High -| The team will practice with the language to be able to do a good job when implementing the front-end. +| The team will practice with the language to be able to do a good job when implementing the back-end. |*Problems with wikidata* | The team only used wikidata once before and not even everyone of us. diff --git a/docs/src/12_glossary.adoc b/docs/src/12_glossary.adoc index 9cd9498..c343827 100644 --- a/docs/src/12_glossary.adoc +++ b/docs/src/12_glossary.adoc @@ -62,12 +62,12 @@ See https://docs.arc42.org/section-12/[Glossary] in the arc42 documentation. |Docker |A platform for developing, shipping, and running applications in containers. It allows developers to package applications and their dependencies into standardized units called containers, providing a consistent environment for software deployment across different computing environments. +|Deployment +|The process of making a software application, website, or service available for use. It involves taking the codebase of a developed application and installing it onto servers or other computing infrastructure so that it can be accessed by end-users. + |MongoDB |A popular open-source NoSQL database management system known for its flexibility, scalability, and ease of use. It stores data in a flexible, JSON-like format called BSON and is commonly used for applications requiring high-volume data storage and real-time data processing. -|Svelte -|A modern JavaScript framework for building user interfaces. Unlike traditional frameworks that require the runtime presence of a virtual DOM, Svelte shifts the work to compile-time, resulting in highly optimized and efficient code with smaller bundle sizes. - |API (Application programming interface) |Set of rules and protocols that allows different software applications to communicate and interact with each other. APIs define the methods and data formats that applications can use to request and exchange information. They enable developers to access the functionality of other software components or services without having to understand their internal workings. APIs are commonly used to integrate third-party services, access data from remote servers, and build modular and interoperable software systems. diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js index 23a445a..fca180c 100644 --- a/gatewayservice/gateway-service.js +++ b/gatewayservice/gateway-service.js @@ -6,7 +6,7 @@ const promBundle = require('express-prom-bundle'); const app = express(); const port = 8000; -const userServiceUrl = process.env.USERS_SERVICE_URL || 'http://localhost:8002'; +const userServiceUrl = process.env.USERS_SERVICE_URL || 'http://localhost:8003'; const wikidataServiceUrl = process.env.WIKIDATA_SERVICE_URL || 'http://localhost:8001'; app.use(cors()); diff --git a/users/authservice/auth-service.test.js b/users/authservice/auth-service.test.js index cf5fba4..2a96c24 100644 --- a/users/authservice/auth-service.test.js +++ b/users/authservice/auth-service.test.js @@ -35,7 +35,7 @@ beforeAll(async () => { //await mongoose.connect(mongoUri); await addUser(user); -}); +},30000); afterAll(async () => { diff --git a/users/index.js b/users/index.js index e550434..6bc4f21 100644 --- a/users/index.js +++ b/users/index.js @@ -6,7 +6,7 @@ const bodyParser = require('body-parser'); // app and port definition const app = express(); -const port = process.env.PORT || 8002; +const port = process.env.PORT || 8003; // Connect to MongoDB diff --git a/users/userservice/Dockerfile b/users/userservice/Dockerfile index cea2bbe..755137d 100644 --- a/users/userservice/Dockerfile +++ b/users/userservice/Dockerfile @@ -13,9 +13,6 @@ RUN npm install # Copy the app source code to the working directory COPY . . -# Expose the port the app runs on -EXPOSE 8001 - # Define the command to run your app CMD ["node", "user-service.js"] diff --git a/users/userservice/user-service.test.js b/users/userservice/user-service.test.js index a50a5b1..ea6ed0a 100644 --- a/users/userservice/user-service.test.js +++ b/users/userservice/user-service.test.js @@ -21,7 +21,7 @@ beforeAll(async () => { mongoServer = await MongoMemoryServer.create(); const mongoUri = mongoServer.getUri(); process.env.MONGODB_URI = mongoUri; -}); +},30000); afterAll(async () => { jest.setTimeout(30000); diff --git a/webapp/src/components/Game/Countdown.test.tsx b/webapp/src/components/Game/Countdown.test.tsx new file mode 100644 index 0000000..6b8af40 --- /dev/null +++ b/webapp/src/components/Game/Countdown.test.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { render, fireEvent, screen } from '@testing-library/react'; +import Answer from './Answer'; + +describe('Answer component', () => { + const mockedProps = { + answered: false, + correctAnswer: true, + answer: 'Correct Answer', + score: 0, + setAnswered: jest.fn(), + setScore: jest.fn(), + setCorrectSelected: jest.fn(), + }; + + test('renders the answer', () => { + render(); + expect(screen.getByText('Correct Answer')).toBeInTheDocument(); + }); + + test('calls the setAnswered, setCorrectSelected, and setScore functions when clicked', () => { + render(); + fireEvent.click(screen.getByText('Correct Answer')); + expect(mockedProps.setAnswered).toHaveBeenCalledWith(true); + expect(mockedProps.setCorrectSelected).toHaveBeenCalledWith(true); + expect(mockedProps.setScore).toHaveBeenCalledWith(10); + }); + + test('changes the button class when answered', () => { + render(); + expect(screen.getByText('Correct Answer')).toHaveClass('bg-primary'); + }); + + test('disables the button when answered', () => { + render(); + expect(screen.getByText('Correct Answer')).toBeDisabled(); + }); +}); \ No newline at end of file diff --git a/webapp/src/components/Game/Counter.test.tsx b/webapp/src/components/Game/Counter.test.tsx new file mode 100644 index 0000000..c1bce1e --- /dev/null +++ b/webapp/src/components/Game/Counter.test.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { render, fireEvent, screen } from '@testing-library/react'; +import Counter from './Counter'; + +describe('Counter component', () => { + const mockedProps = { + answered: false, + setAnswered: jest.fn(), + duration: 1000, + count: 0, + setCount: jest.fn(), + initialCount: 1000, + }; + + test('renders the counter', () => { + render(); + expect(screen.findByTestId('counter')); + }); + + // test('checks that the progress bar decreases in time', () => { + // // Importa la función que simula el paso del tiempo + // jest.useFakeTimers(); + // render(); + + // jest.advanceTimersByTime(10000); + + // expect(screen.findByTestId('counter')); + // }); + + +}); \ No newline at end of file diff --git a/webapp/src/components/Game/Counter.tsx b/webapp/src/components/Game/Counter.tsx index e49cfaf..5a23a82 100644 --- a/webapp/src/components/Game/Counter.tsx +++ b/webapp/src/components/Game/Counter.tsx @@ -30,7 +30,7 @@ const Counter = (props: props) => { } }, [props.count]); - return ; + return ; }; export default Counter; \ No newline at end of file diff --git a/webapp/src/components/Game/Game.test.tsx b/webapp/src/components/Game/Game.test.tsx index 8115a4b..c940103 100644 --- a/webapp/src/components/Game/Game.test.tsx +++ b/webapp/src/components/Game/Game.test.tsx @@ -5,5 +5,10 @@ import Game from './Game'; test('always true test', () => { - expect(true).toBe(true); + // render(); + + // // Verifica que el componente Game se renderizó correctamente + // const gameComponent = screen.getByTestId('game-component'); + // expect(gameComponent).toBeInTheDocument(); + expect(true).toBe(true); }); \ No newline at end of file diff --git a/wikidataservice/index.js b/wikidataservice/index.js index 8f8660c..c0d1ed9 100644 --- a/wikidataservice/index.js +++ b/wikidataservice/index.js @@ -6,7 +6,7 @@ const cors = require('cors') const { generateQuestions } = require('./src/Services/QuestionGenerator'); const app = express(); -const port = 8001; +const port = process.env.PORT || 8001; const NUMBER_QUESTIONS = 10; // Middleware to parse JSON in request body