Die API-Tests wurden um eine Preflight-Überprüfung erweitert, um CORS-Probleme zu vermindern.

Reviewed-on: #6

api/.env.example

@@ -2,4 +2,7 @@
 DATABASES_HOST=psql.domain.tld
 DATABASES_NAME=db
 DATABASES_USER=user
-DATABASES_PASS=1234
+DATABASES_PASS=1234
+
+## CORS Einstellungen
+CORS_ALLOW_ORIGIN=localhost:*

api/tests/_support/Helper/Api.php

@@ -32,4 +32,6 @@ class Api extends Module
         "message"   => "string",
         "path"      => "string",
     ];
+
+    const TEST_ORIGIN = 'localhost:1234';
 }

api/tests/api/Views/BrowseWorkingHoursMonthlyCest.php

@@ -13,8 +13,10 @@ class BrowseWorkingHoursMonthlyCest
      */
     public function browseWorkingHoursView(ApiTester $I): void
     {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendGet('/views/working-hours/monthly');
         $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_VIEW_JSON_FORMAT);
     }

api/tests/api/Views/BrowseWorkingHoursWeeklyCest.php

@@ -13,8 +13,10 @@ class BrowseWorkingHoursWeeklyCest
      */
     public function browseWorkingHoursView(ApiTester $I): void
     {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendGet('/views/working-hours/weekly');
         $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_VIEW_JSON_FORMAT);
     }

api/tests/api/Views/BrowseWorkingHoursYearlyCest.php

@@ -13,8 +13,10 @@ class BrowseWorkingHoursYearlyCest
      */
     public function browseWorkingHoursView(ApiTester $I): void
     {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendGet('/views/working-hours/yearly');
         $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_VIEW_JSON_FORMAT);
     }

api/tests/api/WorkingHours/BrowseWorkingHoursCest.php

@@ -13,8 +13,10 @@ class BrowseWorkingHoursCest
      */
     public function browseWorkingHours(ApiTester $I): void
     {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendGet('/working-hours');
         $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_JSON_FORMAT);
     }

api/tests/api/WorkingHours/CreateWorkingHoursCest.php

@@ -12,11 +12,13 @@ class CreateWorkingHoursCest
     {
         $I->haveHttpHeader('accept', 'application/json');
         $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendPost('/working-hours', [
             'workingDay'  => '2020-04-01',
             'workingTime' => '08:00:00',
         ]);
         $I->seeResponseCodeIs(HttpCode::CREATED);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_JSON_FORMAT);
     }
@@ -26,11 +28,13 @@ class CreateWorkingHoursCest
     {
         $I->haveHttpHeader('accept', 'application/json');
         $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendPost('/working-hours', [
             'workingDay'  => '2020-04-01',
             'workingTime' => 8.0,
         ]);
         $I->seeResponseCodeIs(HttpCode::BAD_REQUEST);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::ERROR_JSON_FORMAT);
     }
@@ -40,11 +44,13 @@ class CreateWorkingHoursCest
     {
         $I->haveHttpHeader('accept', 'application/json');
         $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendPost('/working-hours', [
             'workingDay'  => '2020-01-15',
             'workingTime' => '08:00:00',
         ]);
         $I->seeResponseCodeIs(HttpCode::CONFLICT);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::ERROR_JSON_FORMAT);
     }

api/tests/api/WorkingHours/ReadWorkingHoursCest.php

@@ -10,16 +10,20 @@ class ReadWorkingHoursCest
 {
     public function readExistingWorkingHours(ApiTester $I): void
     {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendGet('/working-hours/2020-01-15');
         $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_JSON_FORMAT);
     }
 
     public function readNotExistingWorkingHours(ApiTester $I): void
     {
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendGet('/working-hours/2020-04-15');
         $I->seeResponseCodeIs(HttpCode::NOT_FOUND);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::ERROR_JSON_FORMAT);
     }

api/tests/api/WorkingHours/UpdateWorkingHoursCest.php

@@ -12,11 +12,13 @@ class UpdateWorkingHoursCest
     {
         $I->haveHttpHeader('accept', 'application/json');
         $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendPut('/working-hours/2020-01-15', [
             'workingDay'  => '2020-01-15',
             'workingTime' => '10:00:00',
         ]);
         $I->seeResponseCodeIs(HttpCode::OK);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_JSON_FORMAT);
     }
@@ -25,11 +27,13 @@ class UpdateWorkingHoursCest
     {
         $I->haveHttpHeader('accept', 'application/json');
         $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendPut('/working-hours/2020-04-15', [
             'workingDay'  => '2020-04-15',
             'workingTime' => '10:00:00',
         ]);
         $I->seeResponseCodeIs(HttpCode::NOT_FOUND);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::ERROR_JSON_FORMAT);
     }
@@ -38,11 +42,13 @@ class UpdateWorkingHoursCest
     {
         $I->haveHttpHeader('accept', 'application/json');
         $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
         $I->sendPut('/working-hours/2020-01-15', [
             'workingDay'  => '2020-01-15',
             'workingTime' => 8.0,
         ]);
         $I->seeResponseCodeIs(HttpCode::BAD_REQUEST);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
         $I->seeResponseIsJson();
         $I->seeResponseMatchesJsonType(Api::ERROR_JSON_FORMAT);
     }

ui/src/components/App.svelte

@@ -45,22 +45,12 @@
 	addEventListener('pushstate', track);
 	addEventListener('popstate', track);
 
-
-    let r = {
-        "workingDay": "2020-01-15",
-        "workingTime": "09:00:00"
-    };
-    let records = {
-        "title" : "Einträge",
-        "records" : [r, r]
-    };
-
 	const router = Navaid('/')
 		.on('/', () => run(import('../routes/Home.svelte')))
 		.on('/views/weekly', () => run(import('../routes/WeeklyViews.svelte')))
 		.on('/views/monthly', () => run(import('../routes/MonthlyViews.svelte')))
 		.on('/views/yearly', () => run(import('../routes/YearlyViews.svelte')))
-		.on('/working-hours', () => run(import('../routes/WorkingHours.svelte'), records))
+		.on('/working-hours', () => run(import('../routes/WorkingHours.svelte')))
 		.listen();
 
 	onDestroy(router.unlisten);

ui/src/routes/WorkingHours.svelte

@@ -24,7 +24,7 @@
                     return res.json();
                 })
                 .then(data => {
-                    activeRecord = null;
+                    Controller.cancelActiveRecord();
                     params.records = data;
                     params.isLoading = false;
                 })
@@ -45,7 +45,7 @@
                 .then(data => {
                     activeRecord = data;
                     if (date === null) {
-                        Records.browse();
+                        Controller.listRecords();
                     }
                 })
                 .catch(err => {
@@ -73,8 +73,7 @@
                     }
                 })
                 .then(() => {
-                    newRecord = false;
+                    Controller.listRecords();
-                    Records.browse();
                 })
                 .catch(err => {
                     console.log(err);
@@ -101,14 +100,39 @@
                     }
                 })
                 .then(() => {
-                    Records.browse();
+                    Controller.listRecords();
                 })
                 .catch(err => {
                     console.log(err);
                 });
         }
     };
-    Records.browse();
+    const Controller = {
+        'listRecords': () => {
+            Controller.cancelActiveRecord();
+            Records.browse();
+        },
+        'newRecord': () => {
+            activeRecord = {workingTime: '00:00:00'};
+            newRecord = true;
+        },
+        'saveRecord': () => {
+            if (newRecord === true) {
+                Records.add(activeRecord);
+            } else {
+                Records.update(activeRecord.workingDay, activeRecord);
+            }
+        },
+        'selectActiveRecord': record => Records.read(record.workingDay),
+        'cancelActiveRecord': () => {
+            activeRecord = null;
+            newRecord = false;
+        }
+    };
+    const initSite = () => {
+        Controller.listRecords()
+    };
+    initSite()
 </script>
 
 <svelte:head>
@@ -127,7 +151,7 @@
                 <!--suppress HtmlUnknownTarget -->
                 <form action="/working-hours">
                     <fieldset>
-                        <button on:click={() => {activeRecord = {}; newRecord = true}}>Neuer Eintrag
+                        <button on:click={Controller.newRecord}>Neuer Eintrag
                             <IconifyIcon icon={documentIcon}/>
                         </button>
                     </fieldset>
@@ -146,7 +170,7 @@
                             <td>{record.workingDay}</td>
                             <td>{record.workingTime}</td>
                             <td>
-                                <button on:click={() => Records.read(record.workingDay)}>Bearbeiten
+                                <button on:click={() => Controller.selectActiveRecord(record)}>Bearbeiten
                                     <IconifyIcon icon={wrenchIcon}/>
                                 </button>
                             </td>
@@ -168,26 +192,20 @@
                 <fieldset name="record-data">
                     <div>
                         <label for="workingDay">Arbeitstag</label>
-                        <input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date"
+                        <input bind:value={activeRecord.workingDay} type="date"
-                               id="workingDay">
+                               id="workingDay" required pattern="\d{4}-\d{2}-\d{2}">
                     </div>
                     <div>
                         <label for="workingTime">Arbeitszeit</label>
                         <input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
-                               id="workingTime">
+                               id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
                     </div>
                 </fieldset>
                 <fieldset name="buttons">
-                    {#if newRecord === true}
+                    <button on:click={Controller.saveRecord}>Übernehmen
-                        <button on:click={() => Records.add(activeRecord)}>Übernehmen
+                        <IconifyIcon icon={checkIcon} color="green"/>
-                            <IconifyIcon icon={checkIcon} color="green"/>
+                    </button>
-                        </button>
+                    <button on:click={Controller.cancelActiveRecord}>Abbrechen
-                    {:else}
-                        <button on:click={() => Records.update(activeRecord.workingDay, activeRecord)}>Übernehmen
-                            <IconifyIcon icon={checkIcon} color="green"/>
-                        </button>
-                    {/if}
-                    <button on:click={() => Records.read(null)}>Abbrechen
                         <IconifyIcon icon={xIcon}/>
                     </button>
                 </fieldset>