diff --git a/docs/draw_entity_relation anexos.pdf b/docs/draw_entity_relation anexos.pdf index 3d85805..f5d5eb3 100644 Binary files a/docs/draw_entity_relation anexos.pdf and b/docs/draw_entity_relation anexos.pdf differ diff --git a/docs/draw_entity_relation memoria.pdf b/docs/draw_entity_relation memoria.pdf index b641936..a8685bd 100644 Binary files a/docs/draw_entity_relation memoria.pdf and b/docs/draw_entity_relation memoria.pdf differ diff --git a/docs/latex/anexos.pdf b/docs/latex/anexos.pdf new file mode 100644 index 0000000..0012f0a Binary files /dev/null and b/docs/latex/anexos.pdf differ diff --git a/docs/latex/bibliografiaAnexos.bib b/docs/latex/bibliografiaAnexos.bib index 69a0880..1ad761a 100644 --- a/docs/latex/bibliografiaAnexos.bib +++ b/docs/latex/bibliografiaAnexos.bib @@ -104,4 +104,31 @@ @misc{github:fork note = "[Internet; descargado 7-julio-2024]" } +@misc{sonarcloud, + author = "SonarCloud", + title = "SonarCloud", + howpublished = {\url{https://sonarcloud.io/}}, + note = "[Internet; descargado 8-julio-2024]" +} + +@misc{jgraph_issue29, + author = "{jgraph}", + title = "{Issue \#29 --- mxGraph}", + howpublished = {\url{https://github.com/jgraph/mxgraph/issues/29#issuecomment-261266818}}, + note = "[Internet; descargado 8-julio-2024]" +} +@misc{jgraph_issue505, + author = "{jgraph}", + title = "{Issue \#505 --- mxGraph}", + howpublished = {\url{https://github.com/jgraph/mxgraph/issues/505}}, + note = "[Internet; descargado 8-julio-2024]" +} + +@misc{crue:sostenibilizacion, + author = "{CRUE}", + title = "{Directrices para la sostenibilización curricular}", + year = {2005}, + url = {https://www.crue.org/wp-content/uploads/2020/02/Directrices_Sosteniblidad_Crue2012.pdf}, + note = "[Internet; fecha de última visita: 7-julio-2024]" +} diff --git a/docs/latex/img/package-diagram.png b/docs/latex/img/package-diagram.png new file mode 100644 index 0000000..f3ba69c Binary files /dev/null and b/docs/latex/img/package-diagram.png differ diff --git a/docs/latex/img/test-coverage-cli.png b/docs/latex/img/test-coverage-cli.png new file mode 100644 index 0000000..eac8ec6 Binary files /dev/null and b/docs/latex/img/test-coverage-cli.png differ diff --git a/docs/latex/img/test-coverage-utils.png b/docs/latex/img/test-coverage-utils.png new file mode 100644 index 0000000..a75ca62 Binary files /dev/null and b/docs/latex/img/test-coverage-utils.png differ diff --git a/docs/latex/img/test-coverage.png b/docs/latex/img/test-coverage.png new file mode 100644 index 0000000..aba9db4 Binary files /dev/null and b/docs/latex/img/test-coverage.png differ diff --git a/docs/latex/memoria.pdf b/docs/latex/memoria.pdf new file mode 100644 index 0000000..7848de5 Binary files /dev/null and b/docs/latex/memoria.pdf differ diff --git a/docs/latex/tex/A_Plan_proyecto.tex b/docs/latex/tex/A_Plan_proyecto.tex index ed4f63d..0bcb6a8 100644 --- a/docs/latex/tex/A_Plan_proyecto.tex +++ b/docs/latex/tex/A_Plan_proyecto.tex @@ -263,6 +263,10 @@ \subsection{Viabilidad legal} \label{tab:licencias} \end{table} +No fue sencillo averiguar qué licencia usaba mxGraph puesto que al entrar a su licencia \footnote{\url{https://github.com/jgraph/mxgraph/blob/master/LICENSE}} no se indica específicamente ante qué licencia nos encontramos. + +Tras buscar en internet se descubrió que nos encontrábamos ante una licencia Apache 2.0 \cite{jgraph_issue29} con un epígrafe modificado \cite{jgraph_issue505}. + Las herramientas y librerías utilizadas en este proyecto están cubiertas por dos tipos exclusivamente: la licencia MIT\cite{mit:license} y la licencia Apache 2.0\cite{apache:license}. Ambas son permisivas y permiten la reutilización, modificación y distribución del software. La licencia MIT es muy permisiva y permite a los usuarios utilizar, copiar, modificar, fusionar, publicar, distribuir, sublicenciar y/o vender copias del software \cite{sistemasoperativos:mit}. Siempre que se incluya esta licencia en todas las copias o partes sustanciales del software. diff --git a/docs/latex/tex/C_Diseno.tex b/docs/latex/tex/C_Diseno.tex index 50fa3f5..4b381d9 100644 --- a/docs/latex/tex/C_Diseno.tex +++ b/docs/latex/tex/C_Diseno.tex @@ -22,6 +22,7 @@ \section{Diseño de datos} "attributes": [ { "idMx": "3", + "key": false, "name": "Atributo", "position": { "x": 374, @@ -62,14 +63,50 @@ \section{Diseño de datos} ] } \end{lstlisting} -\caption{Representación interna del diagrama E-R} +\caption{Representación interna de un ejemplo de diagrama E-R.} +\label{fig:e-r-structure} \end{figure} En esta estructura tenemos 3 entidades definidas que son: Entidades, Relaciones y Atributos. +En la figura \ref{fig:e-r-structure} podemos ver un ejemplo de un diagrama que constaría de una entidad llamada \texttt{Entidad} cuyos campos son: +\begin{itemize} + \item idMx: Vinculación de id con la librería de renderización mxGraph. + \item position: Coordenadas de esta entidad en el canvas. + \item attributes: Colección de atributos que pertenecen a esta entidad de los cuáles se guardan a su vez: + \begin{itemize} + \item idMx. + \item key: Si son clave o no. + \item position. + \end{itemize} +\end{itemize} +También tenemos una relación llamada \texttt{Relación} cuyos campos son: +\begin{itemize} + \item idMx: Vinculación de id con la librería de renderización mxGraph. + \item position: Coordenadas de esta entidad en el canvas. + \item canHoldAttributes: Booleano que determina si esta relación puede guardar atributos, es decir si es N:M. + \item attributes: Colección de atributos que pertenecen a esta relación (solo en caso de ser N:M) de los cuáles se guardan a su vez: + \begin{itemize} + \item idMx. + \item key: Si son clave o no. + \item position. + \end{itemize} + \item side1: + \begin{itemize} + \item idMx: id de la librería mxGraph que corresponde a la celda donde se guarda el label de la cardinalidad. + \item cardinality: Cardinalidad de este lado de la relación. + \item cell: Este campo es equivalente a idMx pero se conserva por compatibilidad. + \item entity.idMx: id de la librería mxGraph que corresponde a la celda que contiene la entidad de esta lado de la relación. + \end{itemize} + \item side2: Con campos idénticos, corresponde al otro lado de la relación. +\end{itemize} + Su diagrama E-R es el siguiente: \ref{fig:structure-er} \imagen{structure-er}{Diagrama E-R que representa la estructura interna sobra la que funciona la aplicación.} +Tanto Entidades como Relaciones pueden tener atributos asociados. En el caso de las entidades han de tener sí o sí un atributo, mientras que las relaciones pueden no tenerlo. +Las Relaciones pueden tener 1 o más lados, estando cada uno de estos lados relacionados con 1 Entidad. Una Entidad puede aparecer suelta en un diagrama E-R asi que no tiene porqué estar asociada a un Lado. + \section{Diseño procedimental} En esta sección se describen los procesos más complejos de la aplicación utilizando diagramas de flujo para entenderlos más fácilmente. @@ -100,29 +137,24 @@ \section{Diseño arquitectónico} \subsection{Estructura de paquetes} La estructura de paquetes de la aplicación se organiza de la siguiente manera: + +\imagen{package-diagram}{Estructura de paquetes de la aplicación.} \begin{itemize} \item \textbf{src}: Contiene todo el código fuente de la aplicación. \begin{itemize} - \item \textbf{components/DiagramEditor} + \item \textbf{DiagramEditor} \begin{itemize} - \item styles: Carpeta con el css que afecta al componente DiagramEditor - \item \textbf{DiagramEditor.js}: Componente principal de nuestra aplicación, llama al resto de módulos e inicializa la librería mxGraph. - \item utils - \begin{itemize} - \item \textbf{setInitialConfiguration.js}: Ajusta la configuración la que se inicializa la librería mxGraph. - \item \textbf{initToolbar.js}: Inicializa la barra de herramientas. - \item \textbf{addToolbarItem.js}: Función auxiliar que se llama al arrastrar un componente de la barra de tareas al canvas. - \item configureToolbar.js: Función auxiliar para configurar la barra de herramientas. - \item getStyleByKey.js: Función auxiliar para obtener estilos de un objeto. - \item getStyleStringByObj.js: Función auxiliar para obtener estilos de un objeto. + \item \textbf{DiagramEditor}: Componente principal de la aplicación. + \item \textbf{initMxGraph}: Inicialización de la librería mxGraph. + \item \textbf{toolbar}: Inicialización de la barra de herramientas. \end{itemize} - \end{itemize} \item \textbf{utils}: \begin{itemize} - \item \textbf{validation.js}: Módulo que contiene las funciones necesarias para procesar y determina si la estructura interna E-R conforma un diagrama válido. - \item \textbf{sql.js}: Módulo que contiene las funciones necesarias para procesar y convertir la estructura interna E-R en un script SQL. + \item \textbf{validation}: Módulo que valida la estructura interna E-R. + \item \textbf{sql}: Módulo que procesa y convierte la estructura interna E-R en un script SQL. \end{itemize} \end{itemize} + \item App.js: Punto de entrada de la aplicación React. \end{itemize} \subsection{Componentes de la arquitectura} diff --git a/docs/latex/tex/D_Manual_programador.tex b/docs/latex/tex/D_Manual_programador.tex index 08f3d62..0567614 100644 --- a/docs/latex/tex/D_Manual_programador.tex +++ b/docs/latex/tex/D_Manual_programador.tex @@ -142,6 +142,13 @@ \subsection{Despliegue} \section{Pruebas del sistema} Las pruebas del sistema están divididas en pruebas end-to-end (e2e) y pruebas unitarias. +Inicialmente se intentó integrar la cobertura de los tests con la herramienta Sonarcloud \cite{sonarcloud} sin embargo se acabó desestimando por las siguientes razones: +\begin{itemize} + \item Existen dos frameworks de test, pero tan solo Vitest arroja coberturas de código. + \item Los tests end-to-end prueban funcionalidades finales desde el punto de vista del usuario y por tanto no se genera una cobertura de código como tal. Para cubrir el componente principal, \texttt{DiagramEditor.js} se requeriría el uso de una librería de testeo para componentes de React. Que pudiera comprobar cosas tales como si el componente se está montando o no. + \item Al quedar todo \texttt{DiagramEditor.js} con cobertura de código 0 se provoca que la GH Action de Sonarcloud falle. +\end{itemize} + \subsection{Pruebas unitarias} Las pruebas unitarias se encuentran en el directorio \textbf{tests/unit}. Estas pruebas verifican la funcionalidad de los componentes individuales del sistema. Los diagramas JSON de ejemplo utilizados en estas pruebas están en \textbf{tests/unit/graphs}. @@ -150,8 +157,66 @@ \subsection{Pruebas unitarias} npm run test \end{verbatim} +Las pruebas unitarias nos permiten comprobar su cobertura lanzando el comando +\begin{verbatim} +npm run test:coverage +\end{verbatim} + +Aparte de una salida en la terminal, se crea una carpeta \texttt{coverage} con un archivo index.html al que podemos acceder y comprobar el reporte de cobertura. + +\imagen{test-coverage-cli}{Reporte de cobertura desde la terminal.} +\imagen{test-coverage}{Reporte de cobertura.} + +Podemos ver que la cobertura en los módulos \texttt{validation.js} y \texttt{sql.js} es casi completa. + +\imagen{test-coverage-utils}{Cobertura de los módulos utils: sql y validation} + \imagen{unit-tests}{Ejecución de pruebas unitarias} +\subsubsection{Descripción de las suites de pruebas} + +\textbf{sql.js} +\begin{itemize} + \item \textbf{Filter graph tables}: + Se verifica el correcto filtrado de las tablas intermedias según el tipo de relación en el diagrama E-R. + + \item \textbf{Extract table 1:N relation}: + Se valida la extracción correcta de tablas para relaciones 1:N del diagrama E-R. + + \item \textbf{Extract table 1:1 relation}: + Se valida la extracción correcta de tablas para relaciones 1:1 del diagrama E-R. + + \item \textbf{Extract table N:M relation}: + Se valida la extracción correcta de tablas para relaciones N:M del diagrama E-R. + + \item \textbf{Generate SQL}: + Se valida la generación correcta de scripts SQL a partir de varios diagramas E-R. +\end{itemize} + +\textbf{validation.js} +\begin{itemize} + \item \textbf{General validation function}: + Se verifica la validación general de varios diagramas E-R completo. + + \item \textbf{Non repeated entity or n:m relation name}: + Se comprueba que no haya nombres repetidos en entidades o relaciones N:M en el diagrama E-R. + + \item \textbf{Non repeated attributes in entities or n:m relations}: + Se comprueba que no haya nombres de atributos repetidos en entidades o en relaciones N:M. + + \item \textbf{Every entity should have at least one attribute}: + Se comprueba que todas las entidades tengan al menos un atributo. + + \item \textbf{Relations}: + Se valida diversos aspectos relacionados con las relaciones en el diagrama E-R: + \begin{itemize} + \item Cada relación conecte dos entidades (pueden ser la misma entidad en ambos lados). + \item No existan relaciones con atributos a menos que sean relaciones N:M. + \item Todas las relaciones tengan cardinalidades válidas. + \end{itemize} +\end{itemize} + + \subsection{Pruebas end-to-end} Las pruebas end-to-end se encuentran en el directorio \textbf{tests/e2e}. Estas pruebas verifican la funcionalidad completa del sistema desde un punto de vista de usuario final. @@ -168,4 +233,14 @@ \subsection{Pruebas end-to-end} \imagen{e2e-tests}{Ejecución de pruebas End to End con la interfaz gráfica de Playwright} +\subsubsection{Descripción de los tests} +\begin{itemize} + \item \textbf{Add entities to the canvas and change name}: + Se comprueba que el usuario pueda agregar entidades al canvas y cambiar sus nombres. + + \item \textbf{Add attributes to an entity}: + Se comprueba que el usuario pueda agregar atributos a una entidad en el canvas. + \item \textbf{Hide/show attributes}: + Se comprueba que el usuario pueda ocultar y mostrar atributos de una entidad en el canvas. +\end{itemize} diff --git a/docs/latex/tex/F_ODS.tex b/docs/latex/tex/F_ODS.tex index b729a54..a4a36ee 100644 --- a/docs/latex/tex/F_ODS.tex +++ b/docs/latex/tex/F_ODS.tex @@ -28,4 +28,5 @@ \section{Reflexión final} La implementación de buenas prácticas de desarrollo, la promoción de la innovación y la eficiencia, y el enfoque en la sostenibilidad ambiental y social son aspectos que han tenido presencia en el proyecto de una u otra manera. Esta experiencia ha mejorado mis habilidades técnicas. Pero no solo eso, también ha fortalecido mi compromiso con el desarrollo sostenible y responsable en el ámbito tecnológico. -Para más información sobre la sostenibilización curricular, se puede consultar el documento de la CRUE \url{https://www.crue.org/wp-content/uploads/2020/02/Directrices_Sosteniblidad_Crue2012.pdf}. +Para más información sobre la sostenibilización curricular, se puede consultar el documento de la CRUE \cite{crue:sostenibilizacion}. +