Merge pull request #393 from solita/revert-392-revert-355-feature/AE-…

…2164

Revert "Revert "AE-2164: New energiatodistus signing UI""

etp-front/.dockerignore

@@ -9,13 +9,13 @@
 !.storybook/
 !__snapshots__/
 
-!babel.config.js
+!babel.config.cjs
 !fill-sv-localization.js
 !init-mocha.js
 !jsconfig.json
 !modheaders.json
-!postcss.config.js
-!svelte.config.js
+!postcss.config.cjs
+!svelte.config.cjs
 !tailwind.config.js
 !webpack.config.js
 

etp-front/README.md

@@ -54,9 +54,9 @@ in `src`, save it, the page should reload automatically.
   and [testing-library](https://testing-library.com/docs/), [Svelte testing library docs](https://testing-library.com/docs/svelte-testing-library/intro)
   to write component tests. These can either just render the component with the given props and then check what was
   rendered or also contain interactions. The most minimal rendering test, such
-  as [H1.test.mjs](src/components/H/H1.test.mjs) provide the additional safety compared to Storybook story that it
+  as [H1.test.js](src/components/H/H1.test.js) provide the additional safety compared to Storybook story that it
   checks and warns against improper props passed to the component. These should be located next to the component in a
-  file <Component name>.test.mjs.
+  file <Component name>.test.js.
 * Write E2E tests to test the whole system through the user interface using Cypress. Use E2E tests when the integration
   of the user interface and backend need to be tested, or when a longer UI workflow needs to be tested. Cypress tests
   and their setup are located [in their own directory](../e2e-tests/cypress).

etp-front/babel.config.js → etp-front/babel.config.cjs

@@ -4,7 +4,7 @@ module.exports = {
       '@babel/preset-env',
       {
         useBuiltIns: 'usage',
-        corejs: 3
+        corejs: 3,
       }
     ]
   ],

etp-front/jest.config.js → etp-front/jest.config.cjs

@@ -18,6 +18,13 @@ const config = {
     '\\.[jt]s?$': 'babel-jest',
     '^.+\\.svelte$': ['svelte-jester', { preprocess: true }]
   },
+  moduleNameMapper: {
+    '^@Pages/(.*)$': '<rootDir>/src/pages/$1',
+    '^@Component/(.*)$': '<rootDir>/src/components/$1',
+    '^@Utility/(.*)$': '<rootDir>/src/utils/$1',
+    '^@Language/(.*)$': '<rootDir>/src/language/$1',
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
   extensionsToTreatAsEsm: ['.svelte'],
   collectCoverageFrom: [
     'src/**/*.{js,svelte}',

etp-front/jest_setup.js

@@ -1 +1,5 @@
 import '@testing-library/jest-dom';
+import 'cross-fetch/polyfill';
+import { configure } from '@testing-library/svelte';
+
+configure({ testIdAttribute: 'data-cy' });

etp-front/package.json

@@ -17,6 +17,7 @@
     "build:docs": "jsdoc -r -c ./jsdoc/conf.json",
     "watch:docs": "nodemon --exec npm run build:docs --watch src"
   },
+  "type": "module",
   "browserslist": [
     "defaults"
   ],
@@ -44,13 +45,15 @@
     "concurrently": "^8.2.2",
     "copy-webpack-plugin": "^12.0.0",
     "cross-env": "^7.0.2",
+    "cross-fetch": "^4.0.0",
     "css-loader": "^7.0.0",
     "cssnano": "^6.0.0",
     "generate-json-webpack-plugin": "^2.0.0",
     "html-webpack-plugin": "^5.6.0",
     "http-server": "^14.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3",
     "jest-image-snapshot": "^6.4.0",
     "jest-junit": "^16.0.0",
     "mini-css-extract-plugin": "^2.8.1",
@@ -87,7 +90,6 @@
     "monet": "^0.9.1",
     "qs": "^6.9.7",
     "quill": "^1.3.7",
-    "quill-image-drop-module": "^1.0.3",
     "quill-magic-url": "^4.0.0",
     "ramda": "^0.29.0",
     "svelte-i18n": "^4.0.0",

etp-front/src/components/Datepicker/litepicker.js

@@ -1,4 +1,4 @@
-import Litepicker from 'litepicker';
+import { Litepicker } from 'litepicker';
 
 export const litepicker = (node, opts) => {
   const input = node.querySelector('input');

etp-front/src/components/Spinner/Spinner.svelte

@@ -44,6 +44,7 @@
   class="spinner"
   class:smaller
   class:white
-  class:disable-animation={disableAnimation}>
+  class:disable-animation={disableAnimation}
+  data-cy="spinner">
   <div />
 </div>

etp-front/src/components/text-editor/magic-url.cjs

@@ -0,0 +1,7 @@
+// When using es modules, quill-magic-url imports did not work correctly
+// for some reason. As a workaround, import it in common-js file
+// and export its default export again here
+
+const MagicUrl = require('quill-magic-url');
+
+module.exports = MagicUrl.default;

etp-front/src/components/text-editor/quill.js

@@ -1,9 +1,7 @@
 import Quill from 'quill';
-import { ImageDrop } from 'quill-image-drop-module';
-import MagicUrl from 'quill-magic-url';
+import MagicUrl from './magic-url.cjs';
 import * as Objects from '@Utility/objects';
 
-Quill.register('modules/imageDrop', ImageDrop);
 Quill.register('modules/magicUrl', MagicUrl);
 
 const dispatchEvent = (name, node, editor) =>
@@ -35,7 +33,6 @@ export const quill = (
 ) => {
   const q = new Quill(node, {
     modules: {
-      imageDrop: false,
       magicUrl: true,
       toolbar,
       keyboard

etp-front/src/components/text-editor/text-editor.test.js

@@ -0,0 +1,25 @@
+/**
+ * @jest-environment jsdom
+ */
+import { beforeAll, expect, test } from '@jest/globals';
+import { render, screen } from '@testing-library/svelte';
+
+import TextEditor from './text-editor.svelte';
+import { setupI18n } from '@Language/i18n.js';
+
+beforeAll(() => {
+  setupI18n();
+});
+
+test('TextEditor renders correctly', () => {
+  render(TextEditor, {
+    id: 'test',
+    name: 'test',
+    label: 'test',
+    required: true,
+    model: 'test content'
+  });
+
+  const content = screen.getByText('test content');
+  expect(content).toBeInTheDocument();
+});

etp-front/src/language/fi.json

@@ -1268,6 +1268,11 @@
     },
     "signing": {
       "header": "Allekirjoittaminen",
+      "options": {
+        "card": "Käytä henkilökorttia",
+        "system": "Älä käytä henkilökorttia"
+      },
+      "system-signing-info-text": "Allekirjoita ilman henkilökorttia",
       "language-adjective": {
         "fi": "suomenkielinen",
         "sv": "ruotsinkielinen",

etp-front/src/language/sv.json

@@ -1216,6 +1216,11 @@
     },
     "signing": {
       "header": "Undertecknande",
+      "options": {
+        "card": "Käytä henkilökorttia (sv)",
+        "system": "Älä käytä henkilökorttia (sv)"
+      },
+      "system-signing-info-text": "Allekirjoita ilman henkilökorttia (sv)",
       "language-adjective": {
         "fi": "på finska",
         "sv": "på svenska",

etp-front/src/pages/energiatodistus/EnergiatodistusForm.svelte

@@ -21,7 +21,7 @@
 
   import ET2018Form from './ET2018Form';
   import ET2013Form from './ET2013Form';
-  import Signing from './signing';
+  import Signing from './signing/SigningDialog.svelte';
   import Input from './Input';
 
   import * as EtUtils from './energiatodistus-utils';
@@ -259,7 +259,10 @@
 
 {#if !R.isNil(ETForm)}
   {#if R.propEq(et.tila['in-signing'], 'tila-id', energiatodistus)}
-    <Signing {energiatodistus} reload={reset} />
+    <Signing
+      {energiatodistus}
+      checkIfSelectionIsAllowed={false}
+      reload={reset} />
   {/if}
 
   <DirtyConfirmation {dirty} />

etp-front/src/pages/energiatodistus/ToolBar/toolbar.svelte

@@ -9,7 +9,7 @@
   import * as et from '@Pages/energiatodistus/energiatodistus-utils';
 
   import Confirm from '@Component/Confirm/Confirm';
-  import Signing from '@Pages/energiatodistus/signing';
+  import Signing from '@Pages/energiatodistus/signing/SigningDialog.svelte';
   import TyojonoButton from './tyojono-button';
   import Spinner from '@Component/Spinner/Spinner.svelte';
 
@@ -211,7 +211,10 @@
 </style>
 
 {#if signingActive}
-  <Signing {energiatodistus} reload={cancel} />
+  <Signing
+    {energiatodistus}
+    reload={cancel}
+    checkIfSelectionIsAllowed={false} />
 {/if}
 
 <div