add e2e tests for organization format settings

e2e/organization.spec.ts

@@ -7,6 +7,29 @@ async function goToOrganizationSettings(page) {
     await page.getByText('Organization Settings').click();
 }
 
+async function createTimeEntry(page, duration: string) {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/time');
+    await page.getByRole('button', { name: 'Manual time entry' }).click();
+
+    // Fill in the time entry details
+    await page.getByTestId('time_entry_description').fill('Test time entry');
+
+    // Set duration
+    await page.locator('[role="dialog"] input[name="Duration"]').fill(duration);
+    await page.locator('[role="dialog"] input[name="Duration"]').press('Tab');
+
+    // Submit the time entry
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Time Entry' }).click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/time-entries') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201
+        ),
+    ]);
+}
+
 test('test that organization name can be updated', async ({ page }) => {
     await goToOrganizationSettings(page);
     await page.getByLabel('Organization Name').fill('NEW ORG NAME');
@@ -53,4 +76,165 @@ test('test that organization billable rate can be updated with all existing time
     ]);
 });
 
-// TODO: Add Test for import
+test('test that organization format settings can be updated', async ({
+    page,
+}) => {
+    await goToOrganizationSettings(page);
+
+    // Test number format
+    await page.getByLabel('Number Format').click();
+    await page.getByRole('option', { name: '1,111.11' }).click();
+    await Promise.all([
+        page
+            .locator('form')
+            .filter({ hasText: 'Number Format' })
+            .getByRole('button', { name: 'Save' })
+            .click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/organizations/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.number_format === 'comma-point'
+        ),
+    ]);
+
+    // Test currency format
+    await page.getByLabel('Currency Format').click();
+    await page.getByRole('option', { name: '111 EUR' }).click();
+    await Promise.all([
+        page
+            .locator('form')
+            .filter({ hasText: 'Currency Format' })
+            .getByRole('button', { name: 'Save' })
+            .click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/organizations/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.currency_format ===
+                    'iso-code-after-with-space'
+        ),
+    ]);
+
+    // Test date format
+    await page.getByLabel('Date Format').click();
+    await page.getByRole('option', { name: 'DD/MM/YYYY' }).click();
+    await Promise.all([
+        page
+            .locator('form')
+            .filter({ hasText: 'Date Format' })
+            .getByRole('button', { name: 'Save' })
+            .click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/organizations/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.date_format ===
+                    'slash-separated-dd-mm-yyyy'
+        ),
+    ]);
+
+    // Test time format
+    await page.getByLabel('Time Format').click();
+    await page.getByRole('option', { name: '24-hour clock' }).click();
+    await Promise.all([
+        page
+            .locator('form')
+            .filter({ hasText: 'Time Format' })
+            .getByRole('button', { name: 'Save' })
+            .click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/organizations/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.time_format === '24-hours'
+        ),
+    ]);
+
+    // Test interval format
+    await page.getByLabel('Time Duration Format').click();
+    await page.getByRole('option', { name: '12:03', exact: true }).click();
+    await Promise.all([
+        page
+            .locator('form')
+            .filter({ hasText: 'Time Duration Format' })
+            .getByRole('button', { name: 'Save' })
+            .click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/organizations/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.interval_format ===
+                    'hours-minutes-colon-separated'
+        ),
+    ]);
+});
+
+test('test that format settings are reflected in the dashboard', async ({
+    page,
+}) => {
+    // check that 0h 00min is displayed
+    await expect(page.getByText('0h 00min', { exact: true }).nth(0)).toBeVisible();
+
+    // First set the format settings
+    await goToOrganizationSettings(page);
+
+    // Set number format to comma-point
+    await page.getByLabel('Number Format').click();
+    await page.getByRole('option', { name: '1,111.11' }).click();
+
+    // Set currency format to symbol-after
+    await page.getByLabel('Currency Format').click();
+    await page.getByRole('option', { name: '111€' }).click();
+
+    // Set interval format to hours-minutes-colon-separated
+    await page.getByLabel('Time Duration Format').click();
+    await page.getByRole('option', { name: '12:03', exact: true }).click();
+
+    // Set date format to DD/MM/YYYY
+    await page.getByLabel('Date Format').click();
+    await page.getByRole('option', { name: 'DD/MM/YYYY' }).click();
+
+    await Promise.all([
+        page
+            .locator('form')
+            .filter({ hasText: 'Time Duration Format' })
+            .getByRole('button', { name: 'Save' })
+            .click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/organizations/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.interval_format ===
+                    'hours-minutes-colon-separated' &&
+                (await response.json()).data.currency_format ===
+                    'symbol-after' &&
+                (await response.json()).data.number_format === 'comma-point'
+        ),
+    ]);
+
+    await createTimeEntry(page, '00:00');
+
+    // Go to dashboard and check the formats
+    await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
+
+    // Check billable amount format (number and currency)
+    await expect(page.getByText('0.00€')).toBeVisible();
+
+    // check that 00:00 is displayed
+    await expect(page.getByText('0:00', { exact: true }).nth(0)).toBeVisible();
+    // check that 0h 00min is not displayed
+    await expect(page.getByText('0h 00min', { exact: true }).nth(0)).not.toBeVisible();
+
+    // check that the current date is displayed in the dd/mm/yyyy format on the time page
+    await page.goto(PLAYWRIGHT_BASE_URL + '/time');
+    await expect(page.getByText(new Date().toLocaleDateString('en-GB'), { exact: true }).nth(0)).toBeVisible();
+});
+
+// TODO: Test 12-hour clock format