From 416492d21edab97bfcb5bd7e457743e740a1b4de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20L=C3=B3pez?= Date: Thu, 20 Apr 2023 21:19:12 +0200 Subject: [PATCH] Solucionados varios errores en el testing. (Actualmente salta "React.jsx: type is invalid -- expected a string (for built-in components)...") --- webapp/README.md | 2 +- webapp/README_es.md | 2 +- webapp/jest.config.js | 5 + webapp/jest.config.ts | 5 - webapp/jest.setup.js | 0 webapp/mocks/reactLeafletMock.js | 1 + webapp/package-lock.json | 115 +++++++----------- webapp/package.json | 8 ++ webapp/src/App.js | 12 +- webapp/src/{App.test.tsx => App.test.js} | 0 webapp/src/components/Map/Map.jsx | 11 +- .../ProfileSideBar/ProfileSideBar.jsx | 1 + webapp/src/setupTests.ts | 6 + 13 files changed, 84 insertions(+), 84 deletions(-) create mode 100644 webapp/jest.config.js delete mode 100644 webapp/jest.config.ts create mode 100644 webapp/jest.setup.js create mode 100644 webapp/mocks/reactLeafletMock.js rename webapp/src/{App.test.tsx => App.test.js} (100%) diff --git a/webapp/README.md b/webapp/README.md index 6a4618ad..1ffba1c9 100644 --- a/webapp/README.md +++ b/webapp/README.md @@ -52,7 +52,7 @@ So, the first to jobs in this file build the webapp and the restapi (in parallel ### E2E testing Integration tests is maybe the most difficult part to integrate in our system. We have to test the system as a whole. The idea here is to deploy the system and make the tests using [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer) (browser automatization) and [jest-cucumber](https://www.npmjs.com/package/jest-cucumber) (user stories). We will also be using [expect-puppeteer](https://www.npmjs.com/package/expect-puppeteer) to make easier the test writing. All the structure needed is under the `webapp/e2e` directory. These tests can be run locally using `npm run test:e2e` and they will be run also in GitHub Actions, just after the unitary tests. -In this project the E2E testing user stories are defined using Cucumber. Cucumber uses a language called Gherkin to define the user stories. You can find the example in the `features` directory. Then, the actual tests are in the folder `steps`. We are going to configure jest to execute only the tests of this directory (check the `jest.config.ts` file). +In this project the E2E testing user stories are defined using Cucumber. Cucumber uses a language called Gherkin to define the user stories. You can find the example in the `features` directory. Then, the actual tests are in the folder `steps`. We are going to configure jest to execute only the tests of this directory (check the `jest.config.js` file). The E2E tests have two extra difficulties. The first one, we need a browser to perform the tests as if the user was using the application. For this matter, we use `jest-peppeteer` that will launch a Chromium instance for running the tests. The browser is started in the `beforeAll` function. Note that the browser is launched in a headless mode. This is neccesary for the tests to run in the CI environment. If you want to debug the tests you can always turn this feature off. The second problem is that we need to run the restapi and the webapp at the same time to be able to run the tests. For achieving this, we are going to use the package `start-server-and-test`. This package, allows us to launch multiple servers and then run the tests. No need for any configuration. We can configure it straight in the `package.json` file: diff --git a/webapp/README_es.md b/webapp/README_es.md index c2249eb7..cc659b7e 100644 --- a/webapp/README_es.md +++ b/webapp/README_es.md @@ -52,7 +52,7 @@ Si todo va bien revisarán los tests e2e (end to end) y si estos test de aceptac ### Testting E2E Los tests de integración es la parte más difícil de integrar en nuestro sistema. tenemos que testear nuestro sistema como un todo. la idea es desplegar nuestro sistema y hacer tests utilizando [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer) (automatización del navegador) and [jest-cucumber](https://www.npmjs.com/package/jest-cucumber) (historias de usuario). También utilizaremos [expect-puppeteer](https://www.npmjs.com/package/expect-puppeteer) para facilitar la escritura de los tests. Todo lo necesario para vertebrar esta estructura se encuentra en el directorio `webapp/e2e`. Estos tests pueden ejecutarse de manera local utilizando el comando `npm run test:e2e` y en GitHub Actions justo después de los tests unitarios. -En este proyecto las historias de usuario utilizadas por los tests E2E se definen utilizando Cucumber. Cucumber utiliza un lenguaje llamado Gherkin para poder crear estas historias. Puedes encontrar un ejemplo en el directorio `webapp/e2e/features` y los tests reales se encuentran en este directorio `webapp/e2e/steps` (revisa el archivo `jest.config.ts`). +En este proyecto las historias de usuario utilizadas por los tests E2E se definen utilizando Cucumber. Cucumber utiliza un lenguaje llamado Gherkin para poder crear estas historias. Puedes encontrar un ejemplo en el directorio `webapp/e2e/features` y los tests reales se encuentran en este directorio `webapp/e2e/steps` (revisa el archivo `jest.config.js`). Los tests E2E tienes dos dificultades añadidas. - La primera es que necesitamos un navegador que ejecute los tests simulando el comportamiento del usuario utilizando la aplicación. Esa es la razón por la que utilizamos `jest-peppeteer` que lanzará una instancia [Chromium](https://es.wikipedia.org/wiki/Chromium_(navegador)) para correr los tests. El navegador comienza en la función `beforeAll`. Ten en cuenta que el navegador se lanza en "headless mode" (modo sin cabeza: Sin interfaz gráfica) diff --git a/webapp/jest.config.js b/webapp/jest.config.js new file mode 100644 index 00000000..728759d6 --- /dev/null +++ b/webapp/jest.config.js @@ -0,0 +1,5 @@ +export default { + transform: {}, + //testEnvironment: "node", + //setupFilesAfterEnv: ["/jest.setup.js"], +}; diff --git a/webapp/jest.config.ts b/webapp/jest.config.ts deleted file mode 100644 index 0153d2e3..00000000 --- a/webapp/jest.config.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default { - transform: { - "^.+\\.tsx?$": "ts-jest" - }, -} \ No newline at end of file diff --git a/webapp/jest.setup.js b/webapp/jest.setup.js new file mode 100644 index 00000000..e69de29b diff --git a/webapp/mocks/reactLeafletMock.js b/webapp/mocks/reactLeafletMock.js new file mode 100644 index 00000000..4ba52ba2 --- /dev/null +++ b/webapp/mocks/reactLeafletMock.js @@ -0,0 +1 @@ +module.exports = {} diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 1e91cf88..f5c884f2 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -32,14 +32,17 @@ "react-leaflet": "^4.2.1", "tss-react": "^4.7.1", "typescript": "^4.9.4", + "util": "^0.12.5", "web-vitals": "^2.1.2" }, "devDependencies": { "@types/expect-puppeteer": "^4.4.7", "@types/express": "^4.17.15", "@types/jest": "^29.2.5", + "@types/leaflet": "^1.9.3", "@types/puppeteer": "^5.4.4", "expect-puppeteer": "^6.0.2", + "jest": "^29.5.0", "jest-cucumber": "^3.0.1", "jest-puppeteer": "^6.0.3", "puppeteer": "^13.0.1", @@ -2975,7 +2978,6 @@ "resolved": "https://registry.npmjs.org/@jest/console/-/console-29.5.0.tgz", "integrity": "sha512-NEpkObxPwyw/XxZVLPmAGKE89IQRp4puc6IQRPru6JKd1M3fW9v1xM1AnzIJE65hbCkzQAdnL8P47e9hzhiYLQ==", "dev": true, - "peer": true, "dependencies": { "@jest/types": "^29.5.0", "@types/node": "*", @@ -2993,7 +2995,6 @@ "resolved": "https://registry.npmjs.org/@jest/core/-/core-29.5.0.tgz", "integrity": "sha512-28UzQc7ulUrOQw1IsN/kv1QES3q2kkbl/wGslyhAclqZ/8cMdB5M68BffkIdSJgKBUt50d3hbwJ92XESlE7LiQ==", "dev": true, - "peer": true, "dependencies": { "@jest/console": "^29.5.0", "@jest/reporters": "^29.5.0", @@ -3041,7 +3042,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -3054,7 +3054,6 @@ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz", "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==", "dev": true, - "peer": true, "dependencies": { "@jest/schemas": "^29.4.3", "ansi-styles": "^5.0.0", @@ -3069,7 +3068,6 @@ "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.5.0.tgz", "integrity": "sha512-5FXw2+wD29YU1d4I2htpRX7jYnAyTRjP2CsXQdo9SAM8g3ifxWPSV0HnClSn71xwctr0U3oZIIH+dtbfmnbXVQ==", "dev": true, - "peer": true, "dependencies": { "@jest/fake-timers": "^29.5.0", "@jest/types": "^29.5.0", @@ -3085,7 +3083,6 @@ "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-29.5.0.tgz", "integrity": "sha512-PueDR2HGihN3ciUNGr4uelropW7rqUfTiOn+8u0leg/42UhblPxHkfoh0Ruu3I9Y1962P3u2DY4+h7GVTSVU6g==", "dev": true, - "peer": true, "dependencies": { "expect": "^29.5.0", "jest-snapshot": "^29.5.0" @@ -3110,7 +3107,6 @@ "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-29.5.0.tgz", "integrity": "sha512-9ARvuAAQcBwDAqOnglWq2zwNIRUDtk/SCkp/ToGEhFv5r86K21l+VEs0qNTaXtyiY0lEePl3kylijSYJQqdbDg==", "dev": true, - "peer": true, "dependencies": { "@jest/types": "^29.5.0", "@sinonjs/fake-timers": "^10.0.2", @@ -3128,7 +3124,6 @@ "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-29.5.0.tgz", "integrity": "sha512-S02y0qMWGihdzNbUiqSAiKSpSozSuHX5UYc7QbnHP+D9Lyw8DgGGCinrN9uSuHPeKgSSzvPom2q1nAtBvUsvPQ==", "dev": true, - "peer": true, "dependencies": { "@jest/environment": "^29.5.0", "@jest/expect": "^29.5.0", @@ -3144,7 +3139,6 @@ "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-29.5.0.tgz", "integrity": "sha512-D05STXqj/M8bP9hQNSICtPqz97u7ffGzZu+9XLucXhkOFBqKcXe04JLZOgIekOxdb73MAoBUFnqvf7MCpKk5OA==", "dev": true, - "peer": true, "dependencies": { "@bcoe/v8-coverage": "^0.2.3", "@jest/console": "^29.5.0", @@ -3199,7 +3193,6 @@ "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-29.4.3.tgz", "integrity": "sha512-qyt/mb6rLyd9j1jUts4EQncvS6Yy3PM9HghnNv86QBlV+zdL2inCdK1tuVlL+J+lpiw2BI67qXOrX3UurBqQ1w==", "dev": true, - "peer": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.15", "callsites": "^3.0.0", @@ -3214,7 +3207,6 @@ "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-29.5.0.tgz", "integrity": "sha512-fGl4rfitnbfLsrfx1uUpDEESS7zM8JdgZgOCQuxQvL1Sn/I6ijeAVQWGfXI9zb1i9Mzo495cIpVZhA0yr60PkQ==", "dev": true, - "peer": true, "dependencies": { "@jest/console": "^29.5.0", "@jest/types": "^29.5.0", @@ -3230,7 +3222,6 @@ "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-29.5.0.tgz", "integrity": "sha512-yPafQEcKjkSfDXyvtgiV4pevSeyuA6MQr6ZIdVkWJly9vkqjnFfcfhRQqpD5whjoU8EORki752xQmjaqoFjzMQ==", "dev": true, - "peer": true, "dependencies": { "@jest/test-result": "^29.5.0", "graceful-fs": "^4.2.9", @@ -3246,7 +3237,6 @@ "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.5.0.tgz", "integrity": "sha512-8vbeZWqLJOvHaDfeMuoHITGKSz5qWc9u04lnWrQE3VyuSw604PzQM824ZeX9XSjUCeDiE3GuxZe5UKa8J61NQw==", "dev": true, - "peer": true, "dependencies": { "@babel/core": "^7.11.6", "@jest/types": "^29.5.0", @@ -3272,8 +3262,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@jest/types": { "version": "29.5.0", @@ -4039,7 +4028,6 @@ "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-2.0.0.tgz", "integrity": "sha512-uLa0j859mMrg2slwQYdO/AkrOfmH+X6LTVmNTS9CqexuE2IvVORIkSpJLqePAbEnKJ77aMmCwr1NUZ57120Xcg==", "dev": true, - "peer": true, "dependencies": { "type-detect": "4.0.8" } @@ -4049,7 +4037,6 @@ "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.0.2.tgz", "integrity": "sha512-SwUDyjWnah1AaNl7kxsa7cfLhlTYoiyhDAIgyh+El30YvXs/o7OLXpYH88Zdhyx9JExKrmHDJ+10bwIcY80Jmw==", "dev": true, - "peer": true, "dependencies": { "@sinonjs/commons": "^2.0.0" } @@ -4586,6 +4573,12 @@ "@types/range-parser": "*" } }, + "node_modules/@types/geojson": { + "version": "7946.0.10", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz", + "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==", + "dev": true + }, "node_modules/@types/glob": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz", @@ -4686,6 +4679,15 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "node_modules/@types/leaflet": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.3.tgz", + "integrity": "sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA==", + "dev": true, + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@types/lodash": { "version": "4.14.191", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", @@ -6110,7 +6112,6 @@ "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.5.0.tgz", "integrity": "sha512-mA4eCDh5mSo2EcA9xQjVTpmbbNk32Zb3Q3QFQsNhaK56Q+yoXowzFodLux30HRgyOho5rsQ6B0P9QpMkvvnJ0Q==", "dev": true, - "peer": true, "dependencies": { "@jest/transform": "^29.5.0", "@types/babel__core": "^7.1.14", @@ -6185,7 +6186,6 @@ "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.5.0.tgz", "integrity": "sha512-zSuuuAlTMT4mzLj2nPnUm6fsE6270vdOfnpbJ+RmruU75UhLFvL0N2NgI7xpeS7NaB6hGqmd5pVpGTDYvi4Q3w==", "dev": true, - "peer": true, "dependencies": { "@babel/template": "^7.3.3", "@babel/types": "^7.3.3", @@ -6292,7 +6292,6 @@ "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.5.0.tgz", "integrity": "sha512-JOMloxOqdiBSxMAzjRaH023/vvcaSaec49zvg+2LmNsktC7ei39LTJGw02J+9uUtTZUq6xbLyJ4dxe9sSmIuAg==", "dev": true, - "peer": true, "dependencies": { "babel-plugin-jest-hoist": "^29.5.0", "babel-preset-current-node-syntax": "^1.0.0" @@ -6964,7 +6963,6 @@ "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", "dev": true, - "peer": true, "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", @@ -8456,7 +8454,6 @@ "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz", "integrity": "sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==", "dev": true, - "peer": true, "engines": { "node": ">=12" }, @@ -11683,6 +11680,20 @@ "node": ">=6" } }, + "node_modules/is-generator-function": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz", + "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==", + "dependencies": { + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-glob": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", @@ -12106,7 +12117,6 @@ "resolved": "https://registry.npmjs.org/jest/-/jest-29.5.0.tgz", "integrity": "sha512-juMg3he2uru1QoXX078zTa7pO85QyB9xajZc6bU+d9yEGwrKX6+vGmJQ3UdVZsvTEUARIdObzH68QItim6OSSQ==", "dev": true, - "peer": true, "dependencies": { "@jest/core": "^29.5.0", "@jest/types": "^29.5.0", @@ -12133,7 +12143,6 @@ "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.5.0.tgz", "integrity": "sha512-IFG34IUMUaNBIxjQXF/iu7g6EcdMrGRRxaUSw92I/2g2YC6vCdTltl4nHvt7Ci5nSJwXIkCu8Ka1DKF+X7Z1Ag==", "dev": true, - "peer": true, "dependencies": { "execa": "^5.0.0", "p-limit": "^3.1.0" @@ -12147,7 +12156,6 @@ "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-29.5.0.tgz", "integrity": "sha512-gq/ongqeQKAplVxqJmbeUOJJKkW3dDNPY8PjhJ5G0lBRvu0e3EWGxGy5cI4LAGA7gV2UHCtWBI4EMXK8c9nQKA==", "dev": true, - "peer": true, "dependencies": { "@jest/environment": "^29.5.0", "@jest/expect": "^29.5.0", @@ -12179,7 +12187,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -12192,7 +12199,6 @@ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz", "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==", "dev": true, - "peer": true, "dependencies": { "@jest/schemas": "^29.4.3", "ansi-styles": "^5.0.0", @@ -12207,7 +12213,6 @@ "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-29.5.0.tgz", "integrity": "sha512-L1KcP1l4HtfwdxXNFCL5bmUbLQiKrakMUriBEcc1Vfz6gx31ORKdreuWvmQVBit+1ss9NNR3yxjwfwzZNdQXJw==", "dev": true, - "peer": true, "dependencies": { "@jest/core": "^29.5.0", "@jest/test-result": "^29.5.0", @@ -12242,7 +12247,6 @@ "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-29.5.0.tgz", "integrity": "sha512-kvDUKBnNJPNBmFFOhDbm59iu1Fii1Q6SxyhXfvylq3UTHbg6o7j/g8k2dZyXWLvfdKB1vAPxNZnMgtKJcmu3kA==", "dev": true, - "peer": true, "dependencies": { "@babel/core": "^7.11.6", "@jest/test-sequencer": "^29.5.0", @@ -12288,7 +12292,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -12301,7 +12304,6 @@ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz", "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==", "dev": true, - "peer": true, "dependencies": { "@jest/schemas": "^29.4.3", "ansi-styles": "^5.0.0", @@ -13442,7 +13444,6 @@ "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-29.4.3.tgz", "integrity": "sha512-fzdTftThczeSD9nZ3fzA/4KkHtnmllawWrXO69vtI+L9WjEIuXWs4AmyME7lN5hU7dB0sHhuPfcKofRsUb/2Fg==", "dev": true, - "peer": true, "dependencies": { "detect-newline": "^3.0.0" }, @@ -13455,7 +13456,6 @@ "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-29.5.0.tgz", "integrity": "sha512-HM5kIJ1BTnVt+DQZ2ALp3rzXEl+g726csObrW/jpEGl+CDSSQpOJJX2KE/vEg8cxcMXdyEPu6U4QX5eruQv5hA==", "dev": true, - "peer": true, "dependencies": { "@jest/types": "^29.5.0", "chalk": "^4.0.0", @@ -13472,7 +13472,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -13485,7 +13484,6 @@ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz", "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==", "dev": true, - "peer": true, "dependencies": { "@jest/schemas": "^29.4.3", "ansi-styles": "^5.0.0", @@ -13664,7 +13662,6 @@ "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.5.0.tgz", "integrity": "sha512-ExxuIK/+yQ+6PRGaHkKewYtg6hto2uGCgvKdb2nfJfKXgZ17DfXjvbZ+jA1Qt9A8EQSfPnt5FKIfnOO3u1h9qw==", "dev": true, - "peer": true, "dependencies": { "@jest/environment": "^29.5.0", "@jest/fake-timers": "^29.5.0", @@ -13845,7 +13842,6 @@ "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.5.0.tgz", "integrity": "sha512-IspOPnnBro8YfVYSw6yDRKh/TiCdRngjxeacCps1cQ9cgVN6+10JUcuJ1EabrgYLOATsIAigxA0rLR9x/YlrSA==", "dev": true, - "peer": true, "dependencies": { "@jest/types": "^29.5.0", "@types/graceful-fs": "^4.1.3", @@ -14705,7 +14701,6 @@ "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.5.0.tgz", "integrity": "sha512-u9YdeeVnghBUtpN5mVxjID7KbkKE1QU4f6uUwuxiY0vYRi9BUCLKlPEZfDGR67ofdFmDz9oPAy2G92Ujrntmow==", "dev": true, - "peer": true, "dependencies": { "jest-get-type": "^29.4.3", "pretty-format": "^29.5.0" @@ -14719,7 +14714,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -14732,7 +14726,6 @@ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz", "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==", "dev": true, - "peer": true, "dependencies": { "@jest/schemas": "^29.4.3", "ansi-styles": "^5.0.0", @@ -14828,7 +14821,6 @@ "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.5.0.tgz", "integrity": "sha512-GqOzvdWDE4fAV2bWQLQCkujxYWL7RxjCnj71b5VhDAGOevB3qj3Ovg26A5NI84ZpODxyzaozXLOh2NCgkbvyaw==", "dev": true, - "peer": true, "dependencies": { "@jest/types": "^29.5.0", "@types/node": "*", @@ -14873,7 +14865,6 @@ "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.4.3.tgz", "integrity": "sha512-O4FglZaMmWXbGHSQInfXewIsd1LMn9p3ZXB/6r4FOkyhX2/iP/soMG98jGvk/A3HAN78+5VWcBGO0BJAPRh4kg==", "dev": true, - "peer": true, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } @@ -14883,7 +14874,6 @@ "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-29.5.0.tgz", "integrity": "sha512-1TzxJ37FQq7J10jPtQjcc+MkCkE3GBpBecsSUWJ0qZNJpmg6m0D9/7II03yJulm3H/fvVjgqLh/k2eYg+ui52w==", "dev": true, - "peer": true, "dependencies": { "chalk": "^4.0.0", "graceful-fs": "^4.2.9", @@ -14904,7 +14894,6 @@ "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-29.5.0.tgz", "integrity": "sha512-sjV3GFr0hDJMBpYeUuGduP+YeCRbd7S/ck6IvL3kQ9cpySYKqcqhdLLC2rFwrcL7tz5vYibomBrsFYWkIGGjOg==", "dev": true, - "peer": true, "dependencies": { "jest-regex-util": "^29.4.3", "jest-snapshot": "^29.5.0" @@ -14918,7 +14907,6 @@ "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-29.5.0.tgz", "integrity": "sha512-m7b6ypERhFghJsslMLhydaXBiLf7+jXy8FwGRHO3BGV1mcQpPbwiqiKUR2zU2NJuNeMenJmlFZCsIqzJCTeGLQ==", "dev": true, - "peer": true, "dependencies": { "@jest/console": "^29.5.0", "@jest/environment": "^29.5.0", @@ -14951,7 +14939,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true, - "peer": true, "engines": { "node": ">=0.10.0" } @@ -14961,7 +14948,6 @@ "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz", "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==", "dev": true, - "peer": true, "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" @@ -14972,7 +14958,6 @@ "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-29.5.0.tgz", "integrity": "sha512-1Hr6Hh7bAgXQP+pln3homOiEZtCDZFqwmle7Ew2j8OlbkIu6uE3Y/etJQG8MLQs3Zy90xrp2C0BRrtPHG4zryw==", "dev": true, - "peer": true, "dependencies": { "@jest/environment": "^29.5.0", "@jest/fake-timers": "^29.5.0", @@ -15019,7 +15004,6 @@ "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-29.5.0.tgz", "integrity": "sha512-x7Wolra5V0tt3wRs3/ts3S6ciSQVypgGQlJpz2rsdQYoUKxMxPNaoHMGJN6qAuPJqS+2iQ1ZUn5kl7HCyls84g==", "dev": true, - "peer": true, "dependencies": { "@babel/core": "^7.11.6", "@babel/generator": "^7.7.2", @@ -15054,7 +15038,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -15067,7 +15050,6 @@ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, - "peer": true, "dependencies": { "yallist": "^4.0.0" }, @@ -15080,7 +15062,6 @@ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz", "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==", "dev": true, - "peer": true, "dependencies": { "@jest/schemas": "^29.4.3", "ansi-styles": "^5.0.0", @@ -15095,7 +15076,6 @@ "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", "dev": true, - "peer": true, "dependencies": { "lru-cache": "^6.0.0" }, @@ -15110,8 +15090,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true, - "peer": true + "dev": true }, "node_modules/jest-util": { "version": "29.5.0", @@ -15134,7 +15113,6 @@ "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-29.5.0.tgz", "integrity": "sha512-pC26etNIi+y3HV8A+tUGr/lph9B18GnzSRAkPaaZJIE1eFdiYm6/CewuiJQ8/RlfHd1u/8Ioi8/sJ+CmbA+zAQ==", "dev": true, - "peer": true, "dependencies": { "@jest/types": "^29.5.0", "camelcase": "^6.2.0", @@ -15152,7 +15130,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -15165,7 +15142,6 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -15178,7 +15154,6 @@ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.5.0.tgz", "integrity": "sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==", "dev": true, - "peer": true, "dependencies": { "@jest/schemas": "^29.4.3", "ansi-styles": "^5.0.0", @@ -15193,7 +15168,6 @@ "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-29.5.0.tgz", "integrity": "sha512-KmTojKcapuqYrKDpRwfqcQ3zjMlwu27SYext9pt4GlF5FUgB+7XE1mcCnSm6a4uUpFyQIkb6ZhzZvHl+jiBCiA==", "dev": true, - "peer": true, "dependencies": { "@jest/test-result": "^29.5.0", "@jest/types": "^29.5.0", @@ -15213,7 +15187,6 @@ "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.5.0.tgz", "integrity": "sha512-NcrQnevGoSp4b5kg+akIpthoAFHxPBcb5P6mYPY0fUNT+sSvmtu6jlkEle3anczUKIKEbMxFimk9oTP/tpIPgA==", "dev": true, - "peer": true, "dependencies": { "@types/node": "*", "jest-util": "^29.5.0", @@ -15229,7 +15202,6 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", "dev": true, - "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -18835,8 +18807,7 @@ "type": "opencollective", "url": "https://opencollective.com/fast-check" } - ], - "peer": true + ] }, "node_modules/q": { "version": "1.5.1", @@ -21094,7 +21065,6 @@ "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.1.tgz", "integrity": "sha512-OEJWVeimw8mgQuj3HfkNl4KqRevH7lzeQNaWRPfx0PPse7Jk6ozcsG4FKVgtzDsC1KUF+YlTHh17NcgHOPykLw==", "dev": true, - "peer": true, "engines": { "node": ">=10" } @@ -24009,6 +23979,18 @@ "node": ">=0.10.0" } }, + "node_modules/util": { + "version": "0.12.5", + "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", + "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==", + "dependencies": { + "inherits": "^2.0.3", + "is-arguments": "^1.0.4", + "is-generator-function": "^1.0.7", + "is-typed-array": "^1.1.3", + "which-typed-array": "^1.1.2" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -24064,7 +24046,6 @@ "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.1.0.tgz", "integrity": "sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==", "dev": true, - "peer": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.12", "@types/istanbul-lib-coverage": "^2.0.1", @@ -24978,7 +24959,6 @@ "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz", "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==", "dev": true, - "peer": true, "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^3.0.7" @@ -25057,7 +25037,6 @@ "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.1.tgz", "integrity": "sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==", "dev": true, - "peer": true, "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", diff --git a/webapp/package.json b/webapp/package.json index dda0eb20..bb2b2597 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -27,6 +27,7 @@ "react-leaflet": "^4.2.1", "tss-react": "^4.7.1", "typescript": "^4.9.4", + "util": "^0.12.5", "web-vitals": "^2.1.2" }, "scripts": { @@ -59,8 +60,10 @@ "@types/expect-puppeteer": "^4.4.7", "@types/express": "^4.17.15", "@types/jest": "^29.2.5", + "@types/leaflet": "^1.9.3", "@types/puppeteer": "^5.4.4", "expect-puppeteer": "^6.0.2", + "jest": "^29.5.0", "jest-cucumber": "^3.0.1", "jest-puppeteer": "^6.0.3", "puppeteer": "^13.0.1", @@ -68,5 +71,10 @@ "start-server-and-test": "^1.14.0", "ts-jest": "^29.0.4", "ts-node-dev": "^2.0.0" + }, + "jest": { + "moduleNameMapper": { + "react-leaflet": "/mocks/reactLeafletMock.js" + } } } diff --git a/webapp/src/App.js b/webapp/src/App.js index 45ce8902..58083372 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -5,7 +5,6 @@ import Header from "./components/Header/Header"; import Map from "./components/Map/Map"; import Sidebar from "./components/Sidebar/Sidebar"; import React, {useState, useEffect} from 'react'; -import {getPlaceMarksByUser} from './api/api'; import LoginWall from "./components/LoginWall/LoginWall"; import { SessionProvider} from "@inrupt/solid-ui-react"; import { useSession } from "@inrupt/solid-ui-react/dist"; @@ -14,7 +13,7 @@ import { getPlaces } from './solidapi/solidAdapter'; -function App() { +const App = () => { //uso esto para el control del logeo const {session} = useSession(); @@ -40,7 +39,7 @@ function App() { session.onLogin(() => { setUserWebId(session.info.webId); handleSnackbarOpen(); - }); + }); session.onLogout(() => { setUserWebId(null); @@ -48,7 +47,7 @@ function App() { }); }, [session],); - + useEffect(() => { const refreshMyPlacesList = async () => { @@ -59,7 +58,7 @@ function App() { //const webId = parts[0].split('//')[1]; // Obtenemos la segunda parte después de '//' //setPlaces(await getPlaceMarksByUser(webId)); - //sacando los lugares de los pods + //sacando los lugares de los pods setPlaces(await getPlaces(session)); } @@ -98,6 +97,7 @@ function App() { }; return ( +
{/* Important: it is always necessary to put all the elements inside one parent element*/} @@ -135,7 +135,7 @@ function App() { {session.info.isLoggedIn ? null : } - +
); } diff --git a/webapp/src/App.test.tsx b/webapp/src/App.test.js similarity index 100% rename from webapp/src/App.test.tsx rename to webapp/src/App.test.js diff --git a/webapp/src/components/Map/Map.jsx b/webapp/src/components/Map/Map.jsx index e23862ca..eb2821b6 100644 --- a/webapp/src/components/Map/Map.jsx +++ b/webapp/src/components/Map/Map.jsx @@ -1,5 +1,10 @@ import React, {useEffect, useRef, useState} from 'react'; -import {MapContainer, Marker, Popup, TileLayer, useMapEvent} from "react-leaflet"; +// import {MapContainer} from "react-leaflet"; +// import {Marker} from "react-leaflet"; +// import {Popup} from "react-leaflet"; +// import {TileLayer} from "react-leaflet"; +// import {useMapEvent} from "react-leaflet"; +import { MapContainer, Marker, Popup, TileLayer, useMapEvent} from "react-leaflet"; import useStyles from './styles'; import 'leaflet/dist/leaflet.css'; import {Typography} from "@mui/material"; @@ -102,7 +107,7 @@ const Map = (props) => { // Attach handleMapMove to a map move event return ( - +
{ {showPlaces()} - +
); }; const HandleMapClick = ({ onClick }) => { diff --git a/webapp/src/components/ProfileSideBar/ProfileSideBar.jsx b/webapp/src/components/ProfileSideBar/ProfileSideBar.jsx index 8fcbf2b3..b132b982 100644 --- a/webapp/src/components/ProfileSideBar/ProfileSideBar.jsx +++ b/webapp/src/components/ProfileSideBar/ProfileSideBar.jsx @@ -5,6 +5,7 @@ import TextField from '@mui/material/TextField'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import Card from '@mui/material/Card'; + import {Alert, Button, CardContent, Snackbar, Typography} from "@mui/material"; import { CombinedDataProvider, diff --git a/webapp/src/setupTests.ts b/webapp/src/setupTests.ts index 8f2609b7..11d29db5 100644 --- a/webapp/src/setupTests.ts +++ b/webapp/src/setupTests.ts @@ -3,3 +3,9 @@ // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom'; + + +import {TextDecoder, TextEncoder} from "util"; + +global.TextEncoder = TextEncoder; +(global as any).TextDecoder = TextDecoder; \ No newline at end of file