run frontend formatter

frontend/.prettierrc

@@ -1,6 +1,6 @@
 {
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
 }

frontend/README.md

@@ -30,7 +30,6 @@ Build:
 
 ## Formatting
 
-
 We use **EsLint** and a variety of plugins to format html and ts files:
 https://eslint.org/
 
@@ -48,16 +47,16 @@ Open the html file in browser and you get a beautiful overview
 ## Cypress Tests
 
 - local setup
-    - start local Docker `docker-compose up`
-    - start local Server: `OkrApplication-E2E`
-    - start local Client: `npm run start`
+  - start local Docker `docker-compose up`
+  - start local Server: `OkrApplication-E2E`
+  - start local Client: `npm run start`
 - run selected Tests
-    - npm run `npm run cypress:open`
-    - in Cypress App, select `E2E Testing` and `Chrome` as Browser
+  - npm run `npm run cypress:open`
+  - in Cypress App, select `E2E Testing` and `Chrome` as Browser
 - run all tests
-    - npm run `npm run cypress:run`
-    - in Cypress App, select `E2E Testing` and `Chrome` as Browser
+  - npm run `npm run cypress:run`
+  - in Cypress App, select `E2E Testing` and `Chrome` as Browser
 - in case of failing Tests:
-    - stop and restart local Server
-    - stop and restart local Client
-    - re-run Cypress Tests
+  - stop and restart local Server
+  - stop and restart local Client
+  - re-run Cypress Tests

frontend/cypress.config.ts

@@ -6,9 +6,9 @@ export default defineConfig({
     experimentalMemoryManagement: true,
     testIsolation: true,
     viewportWidth: 1920,
-    viewportHeight: 1080,
+    viewportHeight: 1080
   },
   env: {
-    login_url: 'http://localhost:8544',
-  },
+    login_url: 'http://localhost:8544'
+  }
 });

frontend/cypress/e2e/check-in.cy.ts

@@ -160,14 +160,18 @@ describe('OKR Check-in e2e tests', () => {
       keyresultDetailPage.showAllCheckins();
       cy.contains('Check-in History');
       cy.contains('Wert: 30 CHF');
-      CheckInHistoryDialog.do().editLatestCheckIn();
+      CheckInHistoryDialog.do()
+        .editLatestCheckIn();
       cy.contains('Here we edit a metric checkin');
       cy.contains('30 CHF');
       cy.contains('Confidence um Target Zone (213 CHF) zu erreichen');
       cy.contains('5/10');
       cy.contains('Here we are');
       cy.contains('A cat would be great');
-      CheckInDialog.do().fillMetricCheckInValue('200').fillCheckInCommentary('We bought a new sheep').submit();
+      CheckInDialog.do()
+        .fillMetricCheckInValue('200')
+        .fillCheckInCommentary('We bought a new sheep')
+        .submit();
       cy.contains('200 CHF');
       cy.contains('We bought a new sheep');
     });
@@ -191,7 +195,8 @@ describe('OKR Check-in e2e tests', () => {
       keyresultDetailPage.showAllCheckins();
       cy.contains('Check-in History');
       cy.contains('Wert: 30 EUR');
-      CheckInHistoryDialog.do().close();
+      CheckInHistoryDialog.do()
+        .close();
       keyresultDetailPage.close();
 
       overviewPage
@@ -229,20 +234,27 @@ describe('OKR Check-in e2e tests', () => {
         .fillCheckInCommentary('There is a new car')
         .fillCheckInInitiatives('Buy now a new pool')
         .submit();
-      keyresultDetailPage.showAllCheckins().editLatestCheckIn();
+      keyresultDetailPage.showAllCheckins()
+        .editLatestCheckIn();
       cy.contains('For editing ordinal checkin');
       cy.contains('Confidence um Target Zone zu erreichen');
       cy.contains('6/10');
       cy.contains('There is a new car');
       cy.contains('Buy now a new pool');
-      CheckInDialog.do().selectOrdinalCheckInZone('stretch').fillCheckInCommentary('We bought a new dog').submit();
+      CheckInDialog.do()
+        .selectOrdinalCheckInZone('stretch')
+        .fillCheckInCommentary('We bought a new dog')
+        .submit();
       cy.contains('We bought a new dog');
       cy.contains('Buy now a new pool');
       cy.contains('STRETCH');
     });
 
     it(`Should display confirm dialog when creating checkin on draft objective`, () => {
-      overviewPage.addObjective().fillObjectiveTitle('draft objective title').selectQuarter('3').submitDraftObjective();
+      overviewPage.addObjective()
+        .fillObjectiveTitle('draft objective title')
+        .selectQuarter('3')
+        .submitDraftObjective();
       overviewPage.visitNextQuarter();
       overviewPage
         .addKeyResult(undefined, 'draft objective title')
@@ -251,26 +263,32 @@ describe('OKR Check-in e2e tests', () => {
         .fillKeyResultDescription('This is my description')
         .submit();
       keyresultDetailPage.visit('I am a metric keyresult for testing');
-      keyresultDetailPage.elements.addCheckin().click();
-      ConfirmDialog.do().checkTitle('Check-in im Draft-Status');
-      ConfirmDialog.do().checkDescription(
-        'Dein Objective befindet sich noch im DRAFT Status. Möchtest du das Check-in trotzdem erfassen?',
-      );
+      keyresultDetailPage.elements.addCheckin()
+        .click();
+      ConfirmDialog.do()
+        .checkTitle('Check-in im Draft-Status');
+      ConfirmDialog.do()
+        .checkDescription('Dein Objective befindet sich noch im DRAFT Status. Möchtest du das Check-in trotzdem erfassen?');
     });
 
     it(`Should only display last value div if last checkin is present`, () => {
       const objectiveName = uniqueSuffix('new objective');
 
-      overviewPage.addObjective().fillObjectiveTitle(objectiveName).selectQuarter('3').submit();
+      overviewPage.addObjective()
+        .fillObjectiveTitle(objectiveName)
+        .selectQuarter('3')
+        .submit();
       overviewPage.visitNextQuarter();
       overviewPage
         .addKeyResult(undefined, objectiveName)
         .fillKeyResultTitle('I am a keyresult metric')
         .withMetricValues(Unit.PERCENT, '45', '60')
         .fillKeyResultDescription('Description')
         .submit();
-      keyresultDetailPage.visit('I am a keyresult metric').createCheckIn();
-      cy.getByTestId('old-checkin-value').should('not.exist');
+      keyresultDetailPage.visit('I am a keyresult metric')
+        .createCheckIn();
+      cy.getByTestId('old-checkin-value')
+        .should('not.exist');
       CheckInDialog.do()
         .fillMetricCheckInValue('10')
         .setCheckInConfidence(0)
@@ -279,16 +297,18 @@ describe('OKR Check-in e2e tests', () => {
         .submit();
       cy.contains(`Letztes Check-in (${getCurrentDate()})`);
       keyresultDetailPage.createCheckIn();
-      cy.contains('Letzter Wert').siblings('div').contains('10%');
+      cy.contains('Letzter Wert')
+        .siblings('div')
+        .contains('10%');
     });
   });
 });
 
-function getCurrentDate() {
+function getCurrentDate () {
   const today = new Date();
   const yyyy = today.getFullYear();
-  let mm = today.getMonth() + 1; // Months start at 0!
-  let dd = today.getDate();
+  const mm = today.getMonth() + 1; // Months start at 0!
+  const dd = today.getDate();
 
   let dd_str = '' + dd;
   let mm_str = '' + mm;

frontend/cypress/e2e/duplicate-objective.cy.ts

@@ -24,9 +24,12 @@ describe('Functionality of duplicating objectives and their belonging keyResults
       .submit();
 
     cy.contains(duplicatedTitle);
-    overviewPage.getKeyResultOfObjective(duplicatedTitle, firstKeyResultName).should('exist');
-    overviewPage.getKeyResultOfObjective(duplicatedTitle, secondKeyResultName).should('exist');
-    overviewPage.getKeyResultOfObjective(duplicatedTitle, thirdKeyResultName).should('exist');
+    overviewPage.getKeyResultOfObjective(duplicatedTitle, firstKeyResultName)
+      .should('exist');
+    overviewPage.getKeyResultOfObjective(duplicatedTitle, secondKeyResultName)
+      .should('exist');
+    overviewPage.getKeyResultOfObjective(duplicatedTitle, thirdKeyResultName)
+      .should('exist');
   });
 
   it('Should be able to duplicate a objective into this quarter, only including one keyResult', () => {
@@ -35,7 +38,8 @@ describe('Functionality of duplicating objectives and their belonging keyResults
     overviewPage
       .duplicateObjective('Build a company culture that kills the competition.')
       .fillObjectiveTitle(duplicatedTitle)
-      .excludeKeyResults([secondKeyResultName, thirdKeyResultName])
+      .excludeKeyResults([secondKeyResultName,
+        thirdKeyResultName])
       .submit();
 
     overviewPage.getKeyResultOfObjective(duplicatedTitle, firstKeyResultName);
@@ -49,13 +53,15 @@ describe('Functionality of duplicating objectives and their belonging keyResults
   it('Should not show option to select keyResults when objective with no keyResults is being duplicated', () => {
     const duplicatedTitle = 'This is a duplicated objective without any keyResults';
 
-    overviewPage.duplicateObjective(
-      'should not appear on staging, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
-    );
-    cy.contains('Key Results:').should('not.exist');
-    ObjectiveDialog.do().fillObjectiveTitle(duplicatedTitle).submit();
+    overviewPage.duplicateObjective('should not appear on staging, no sea takimata sanctus est Lorem ipsum dolor sit amet.');
+    cy.contains('Key Results:')
+      .should('not.exist');
+    ObjectiveDialog.do()
+      .fillObjectiveTitle(duplicatedTitle)
+      .submit();
 
-    overviewPage.getObjectiveByName(duplicatedTitle).should('exist');
+    overviewPage.getObjectiveByName(duplicatedTitle)
+      .should('exist');
   });
 
   it('Should be able to duplicate a objective into the next quarter, including all keyResults', () => {
@@ -70,9 +76,12 @@ describe('Functionality of duplicating objectives and their belonging keyResults
     overviewPage.visitNextQuarter();
 
     cy.contains(duplicatedTitle);
-    overviewPage.getKeyResultOfObjective(duplicatedTitle, firstKeyResultName).should('exist');
-    overviewPage.getKeyResultOfObjective(duplicatedTitle, secondKeyResultName).should('exist');
-    overviewPage.getKeyResultOfObjective(duplicatedTitle, thirdKeyResultName).should('exist');
+    overviewPage.getKeyResultOfObjective(duplicatedTitle, firstKeyResultName)
+      .should('exist');
+    overviewPage.getKeyResultOfObjective(duplicatedTitle, secondKeyResultName)
+      .should('exist');
+    overviewPage.getKeyResultOfObjective(duplicatedTitle, thirdKeyResultName)
+      .should('exist');
   });
 
   it('Should not duplicate objective when cancel button is clicked', () => {
@@ -84,12 +93,13 @@ describe('Functionality of duplicating objectives and their belonging keyResults
       .fillObjectiveDescription('Wow this is a very nice description!')
       .cancel();
 
-    cy.contains(duplicatedTitle).should('not.exist');
+    cy.contains(duplicatedTitle)
+      .should('not.exist');
   });
 });
 
 describe('Verify functionality of scoring adjustment on duplicated objectives', () => {
-  let keyresultDetailPage = new KeyResultDetailPage();
+  const keyresultDetailPage = new KeyResultDetailPage();
 
   it('Duplicate ordinal checkin and validate value of scoring component', () => {
     overviewPage
@@ -108,7 +118,8 @@ describe('Verify functionality of scoring adjustment on duplicated objectives',
       .fillCheckInInitiatives('Testmassnahmen')
       .submit();
 
-    cy.intercept('GET', '**/overview?*').as('indexPage');
+    cy.intercept('GET', '**/overview?*')
+      .as('indexPage');
     keyresultDetailPage.close();
     cy.wait('@indexPage');
 
@@ -128,11 +139,12 @@ describe('Verify functionality of scoring adjustment on duplicated objectives',
       .findByTestId('fail')
       .as('fail-area');
 
-    cy.get('@fail-area').should(($fail) => {
-      expect($fail).not.to.have.css('score-red');
-      expect($fail).not.to.have.css('score-yellow');
-      expect($fail).not.to.have.css('score-green');
-      expect($fail).not.to.have.css('score-stretch');
-    });
+    cy.get('@fail-area')
+      .should(($fail) => {
+        expect($fail).not.to.have.css('score-red');
+        expect($fail).not.to.have.css('score-yellow');
+        expect($fail).not.to.have.css('score-green');
+        expect($fail).not.to.have.css('score-stretch');
+      });
   });
 });