From 49f649b9917ab56f0f32d7749ad4170aae5d2da1 Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Thu, 14 Sep 2023 10:00:56 +0200
Subject: [PATCH] [FIX] web: default DateTimePicker has wrong number of column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Following the introduction of the `showWeekNumbers` prop on
DateTimePicker component (see commit 7552284e781dc7e1c72a93d5f37d16b1b05bda4c),
the number of column (CSS custom property) wasn't properly defined in
the template.

This commit fixes it and adds related asserts in QUnit tests.

closes odoo/odoo#135427

Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 .../src/core/datetime/datetime_picker.xml     |  2 +-
 .../core/datetime/datetime_picker_tests.js    | 35 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/core/datetime/datetime_picker.xml b/addons/web/static/src/core/datetime/datetime_picker.xml
index b57dba131bb..f2ecf93f4b1 100644
--- a/addons/web/static/src/core/datetime/datetime_picker.xml
+++ b/addons/web/static/src/core/datetime/datetime_picker.xml
@@ -137,7 +137,7 @@
     <t t-name="web.DateTimePicker">
         <div
             class="o_datetime_picker d-flex flex-column gap-2 p-2 p-lg-3 user-select-none"
-            t-attf-style="--DateTimePicker__Day-template-columns: {{ !props.showWeekNumbers or props.range ? 7 : 8 }}"
+            t-attf-style="--DateTimePicker__Day-template-columns: {{ props.showWeekNumbers ?? !props.range ? 8 : 7 }}"
         >
             <nav class="o_datetime_picker_header btn-group">
                 <button class="o_previous btn btn-light flex-grow-0" t-on-click="previous">
diff --git a/addons/web/static/tests/core/datetime/datetime_picker_tests.js b/addons/web/static/tests/core/datetime/datetime_picker_tests.js
index 7412e92be83..235fcb80d8d 100644
--- a/addons/web/static/tests/core/datetime/datetime_picker_tests.js
+++ b/addons/web/static/tests/core/datetime/datetime_picker_tests.js
@@ -75,6 +75,7 @@ QUnit.module("Components", ({ beforeEach }) => {
     //-------------------------------------------------------------------------
 
     QUnit.test("default params", async (assert) => {
+        const fixture = getFixture();
         await mountPicker();
 
         assertDateTimePicker({
@@ -102,6 +103,12 @@ QUnit.module("Components", ({ beforeEach }) => {
             getTexts(minuteSelect, "option"),
             range(12, (i) => pad2(i * 5))
         );
+        assert.strictEqual(
+            fixture
+                .querySelector(".o_datetime_picker")
+                .style.getPropertyValue("--DateTimePicker__Day-template-columns"),
+            "8"
+        );
     });
 
     QUnit.test("minDate: correct days/month/year/decades are disabled", async (assert) => {
@@ -635,6 +642,7 @@ QUnit.module("Components", ({ beforeEach }) => {
     });
 
     QUnit.test("additional month, empty range value", async (assert) => {
+        const fixture = getFixture();
         await mountPicker({
             value: [null, null],
             range: true,
@@ -683,9 +691,16 @@ QUnit.module("Components", ({ beforeEach }) => {
             getTexts(secondTimePicker[1], "option"),
             range(12, (i) => pad2(i * 5))
         );
+        assert.strictEqual(
+            fixture
+                .querySelector(".o_datetime_picker")
+                .style.getPropertyValue("--DateTimePicker__Day-template-columns"),
+            "7"
+        );
     });
 
     QUnit.test("range value", async (assert) => {
+        const fixture = getFixture();
         await mountPicker({
             value: [
                 DateTime.fromObject({ day: 5, hour: 17, minute: 18 }),
@@ -737,9 +752,16 @@ QUnit.module("Components", ({ beforeEach }) => {
             getTexts(secondTimePicker[1], "option"),
             range(12, (i) => pad2(i * 5))
         );
+        assert.strictEqual(
+            fixture
+                .querySelector(".o_datetime_picker")
+                .style.getPropertyValue("--DateTimePicker__Day-template-columns"),
+            "7"
+        );
     });
 
     QUnit.test("range value on small device", async (assert) => {
+        const fixture = getFixture();
         isSmall = true;
 
         await mountPicker({
@@ -782,6 +804,12 @@ QUnit.module("Components", ({ beforeEach }) => {
             getTexts(secondTimePicker[1], "option"),
             range(12, (i) => pad2(i * 5))
         );
+        assert.strictEqual(
+            fixture
+                .querySelector(".o_datetime_picker")
+                .style.getPropertyValue("--DateTimePicker__Day-template-columns"),
+            "7"
+        );
     });
 
     QUnit.test("range value, previous month", async (assert) => {
@@ -1272,6 +1300,7 @@ QUnit.module("Components", ({ beforeEach }) => {
     });
 
     QUnit.test("disable show week numbers", async (assert) => {
+        const fixture = getFixture();
         await mountPicker({ showWeekNumbers: false });
 
         assertDateTimePicker({
@@ -1292,5 +1321,11 @@ QUnit.module("Components", ({ beforeEach }) => {
             ],
             time: [[13, 0]],
         });
+        assert.strictEqual(
+            fixture
+                .querySelector(".o_datetime_picker")
+                .style.getPropertyValue("--DateTimePicker__Day-template-columns"),
+            "7"
+        );
     });
 });