[#16377] fix: improve unit test and use i18n-goog for months

src/quo2/components/calendar/calendar/component_spec.cljs

@@ -53,7 +53,6 @@
       (h/fire-event :press (h/query-by-text (str (time/day start-date))))
       (h/was-called-with on-change {:start-date nil :end-date nil})))
 
-
   (h/test "should assign start and end date correctly when upper range selected first"
     (let [on-change (h/mock-fn)]
       (h/render

src/quo2/components/calendar/calendar/days_grid/utils.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.calendar.calendar.days-grid.utils
   (:require
-    [utils.number :as number-utils]
+    [utils.number :as utils.number]
     [cljs-time.core :as time]))
 
 (defn- day-of-week
@@ -14,8 +14,8 @@
 
 (defn day-grid
   [year month]
-  (let [year      (number-utils/parse-int year)
-        month     (number-utils/parse-int month)
+  (let [year      (utils.number/parse-int year)
+        month     (utils.number/parse-int month)
         first-day (time/date-time year month 1)
         start-day (add-days first-day (- 0 (day-of-week first-day)))
         end-day   (add-days start-day 34)]

src/quo2/components/calendar/calendar/days_grid/utils_test.cljs

@@ -1,54 +1,51 @@
 (ns quo2.components.calendar.calendar.days-grid.utils-test
   (:require [cljs.test :refer-macros [deftest is testing]]
             [quo2.components.calendar.calendar.days-grid.utils :as utils]
-            [cljs-time.core :as time]
-            [utils.number :as number-utils]))
+            [cljs-time.core :as time]))
 
-(deftest calendar-days-grid-utils-test
-  (testing "day-grid"
-    (let [day-grid-result (utils/day-grid "2023" "7")]
-      (testing "it returns correct days grid"
-        (is (= 35 (count day-grid-result)))
-        (is (time/equal? (time/date-time 2023 6 25) (first day-grid-result)))
-        (is (time/equal? (time/date-time 2023 7 29) (last day-grid-result))))))
+(deftest day-grid-test
+  (let [day-grid-result (utils/day-grid "2023" "7")]
+    (testing "it returns correct days grid"
+      (is (= 35 (count day-grid-result)))
+      (is (time/equal? (time/date-time 2023 6 25) (first day-grid-result)))
+      (is (time/equal? (time/date-time 2023 7 29) (last day-grid-result))))))
 
-  (testing "get-day-state"
-    (let [today      (time/date-time 2023 7 27)
-          year       2023
-          month      7
-          start-date (time/date-time 2023 7 20)
-          end-date   (time/date-time 2023 7 30)
-          day        (time/date-time 2023 7 27)]
-      (testing "it returns :today when day equals today"
-        (is (= :today (utils/get-day-state today today year month start-date end-date))))
-      (testing "it returns :selected when day equals start-date and not today"
-        (is
-         (= :selected (utils/get-day-state start-date today year month start-date end-date))))
-      (testing "it returns :selected when day equals end-date and not today"
-        (is
-         (= :selected (utils/get-day-state end-date today year month start-date end-date))))))
+(deftest get-day-state-test
+  (let [today      (time/date-time 2023 7 27)
+        year       2023
+        month      7
+        start-date (time/date-time 2023 7 20)
+        end-date   (time/date-time 2023 7 30)]
+    (testing "it returns :today when day equals today"
+      (is (= :today (utils/get-day-state today today year month start-date end-date))))
+    (testing "it returns :selected when day equals start-date and not today"
+      (is
+       (= :selected (utils/get-day-state start-date today year month start-date end-date))))
+    (testing "it returns :selected when day equals end-date and not today"
+      (is
+       (= :selected (utils/get-day-state end-date today year month start-date end-date))))))
 
-  (testing "update-range"
-    (let [start-date (time/date-time 2023 7 20)
-          end-date   (time/date-time 2023 7 30)
-          day        (time/date-time 2023 7 27)]
-      (testing "it returns updated range"
-        (is
-         (= {:start-date day :end-date nil} (utils/update-range day start-date end-date))))))
+(deftest update-range-test
+  (let [start-date (time/date-time 2023 7 20)
+        end-date   (time/date-time 2023 7 30)
+        day        (time/date-time 2023 7 27)]
+    (testing "it returns updated range"
+      (is
+       (= {:start-date day :end-date nil} (utils/update-range day start-date end-date))))))
 
-  (testing "in-range?"
-    (let [start-date (time/date-time 2023 7 20)
-          end-date   (time/date-time 2023 7 30)
-          day        (time/date-time 2023 7 27)]
-      (testing "it returns true when day is within range"
-        (is (utils/in-range? day start-date end-date))
-        (is (not (utils/in-range? (time/date-time 2023 7 19) start-date end-date))))
+(deftest in-range-test
+  (let [start-date (time/date-time 2023 7 20)
+        end-date   (time/date-time 2023 7 30)
+        day        (time/date-time 2023 7 27)]
+    (testing "it returns true when day is within range"
+      (is (utils/in-range? day start-date end-date))
+      (is (not (utils/in-range? (time/date-time 2023 7 19) start-date end-date))))))
 
-      (testing "get-in-range-pos"
-        (let [start-date (time/date-time 2023 7 20)
-              end-date   (time/date-time 2023 7 30)
-              day        (time/date-time 2023 7 27)]
-          (testing "it returns correct position within range"
-            (is (= :start (utils/get-in-range-pos start-date start-date end-date)))
-            (is (= :end (utils/get-in-range-pos end-date start-date end-date)))
-            (is (= :middle (utils/get-in-range-pos day start-date end-date)))))))))
+(deftest get-in-range-pos-test
+  (let [start-date (time/date-time 2023 7 20)
+        end-date   (time/date-time 2023 7 30)
+        day        (time/date-time 2023 7 27)]
+    (testing "it returns correct position within range"
+      (is (= :start (utils/get-in-range-pos start-date start-date end-date)))
+      (is (= :end (utils/get-in-range-pos end-date start-date end-date)))
+      (is (= :middle (utils/get-in-range-pos day start-date end-date))))))

src/quo2/components/calendar/calendar/days_grid/view.cljs

@@ -1,13 +1,12 @@
 (ns quo2.components.calendar.calendar.days-grid.view
   (:require [react-native.core :as rn]
-            [quo2.theme :as theme]
             [cljs-time.core :as time]
             [quo2.components.calendar.calendar.days-grid.utils :as utils]
             [quo2.components.calendar.calendar-day.view :as calendar-day]
             [quo2.components.calendar.calendar.days-grid.style :as style]))
 
-(defn- render-day
-  [{:keys [year month day selection-range on-press customization-color]}]
+(defn- day-view
+  [day _ _ {:keys [year month selection-range on-press customization-color]}]
   (let [today      (time/now)
         start-date (:start-date selection-range)
         end-date   (:end-date selection-range)
@@ -33,12 +32,10 @@
        :key-fn                  str
        :num-columns             7
        :content-container-style {:margin-horizontal -2}
-       :render-fn               (fn [item]
-                                  (render-day
-                                   {:customization-color customization-color
-                                    :year                year
-                                    :month               month
-                                    :day                 item
-                                    :on-press            on-day-press
-                                    :selection-range     {:start-date start-date
-                                                          :end-date   end-date}}))}]]))
+       :render-fn               day-view
+       :render-data             {:customization-color customization-color
+                                 :year                year
+                                 :month               month
+                                 :on-press            on-day-press
+                                 :selection-range     {:start-date start-date
+                                                       :end-date   end-date}}}]]))

src/quo2/components/calendar/calendar/month_picker/utils.cljs

@@ -1,29 +1,13 @@
 (ns quo2.components.calendar.calendar.month-picker.utils
-  (:require [utils.i18n :as i18n]))
-
-(def ^:const months-with-year
-  "Maps the corresponding string representation of a month
-   By it's numeric index as in cljs-time"
-  {1  "january-year"
-   2  "february-year"
-   3  "march-year"
-   4  "april-year"
-   5  "may-year"
-   6  "june-year"
-   7  "july-year"
-   8  "august-year"
-   9  "september-year"
-   10 "october-year"
-   11 "november-year"
-   12 "december-year"})
+  (:require [utils.datetime :as datetime]))
 
 (defn format-month-year
   [year month]
   (let [month (cond
                 (or (nil? month) (zero? month)) 1
                 (> month 12)                    12
                 :else                           month)]
-    (str (i18n/label (get months-with-year month) {:year year}))))
+    (str (datetime/format-long-month month) " " year)))
 
 (defn next-month
   [year month]

src/quo2/components/calendar/calendar/month_picker/utils_test.cljs

@@ -1,19 +1,20 @@
 (ns quo2.components.calendar.calendar.month-picker.utils-test
   (:require [cljs.test :refer-macros [deftest is testing]]
-            [quo2.components.calendar.calendar.month-picker.utils :as utils]
-            [utils.i18n :as i18n]))
+            [quo2.components.calendar.calendar.month-picker.utils :as utils]))
 
-(deftest calendar-month-picker-utils-test
-  (testing "format-month-year"
+(deftest format-month-year-test
+  (testing "returns correct format for given year and month"
     (is (= (utils/format-month-year 2023 1) "January 2023"))
     (is (= (utils/format-month-year 2023 12) "December 2023"))
     (is (= (utils/format-month-year 2023 0) "January 2023"))
-    (is (= (utils/format-month-year 2023 13) "December 2023")))
+    (is (= (utils/format-month-year 2023 13) "December 2023"))))
 
-  (testing "next-month"
+(deftest next-month-test
+  (testing "returns the next month and year"
     (is (= (utils/next-month 2023 1) {:year "2023" :month "2"}))
-    (is (= (utils/next-month 2023 12) {:year "2024" :month "1"})))
+    (is (= (utils/next-month 2023 12) {:year "2024" :month "1"}))))
 
-  (testing "previous-month"
+(deftest previous-month-test
+  (testing "returns the previous month and year"
     (is (= (utils/previous-month 2023 1) {:year "2022" :month "12"}))
     (is (= (utils/previous-month 2023 12) {:year "2023" :month "11"}))))

src/quo2/components/calendar/calendar/month_picker/view.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.calendar.calendar.month-picker.view
   (:require [react-native.core :as rn]
-            [utils.number :as number-utils]
+            [utils.number :as utils.number]
             [quo2.theme :as theme]
             [quo2.components.buttons.button.view :as button]
             [quo2.components.markdown.text :as text]
@@ -9,8 +9,8 @@
 
 (defn- view-internal
   [{:keys [year month on-change theme]}]
-  (let [year  (number-utils/parse-int year)
-        month (number-utils/parse-int month)]
+  (let [year  (utils.number/parse-int year)
+        month (utils.number/parse-int month)]
     [rn/view
      {:style style/container}
      [button/button

src/quo2/components/calendar/calendar/style.cljs

@@ -1,7 +1,5 @@
 (ns quo2.components.calendar.calendar.style
-  (:require
-    [quo2.foundations.colors :as colors]
-    [quo2.foundations.typography :as typography]))
+  (:require [quo2.foundations.colors :as colors]))
 
 (defn container
   [theme]

src/quo2/components/calendar/calendar/utils.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.calendar.calendar.utils
   (:require [utils.datetime :as datetime]
-            [utils.number :as number-utils]
+            [utils.number :as utils.number]
             [clojure.string :as string]))
 
 (defn generate-years
@@ -14,12 +14,12 @@
       datetime/timestamp->year-month-day-date
       (string/split #"-")
       first
-      number-utils/parse-int))
+      utils.number/parse-int))
 
 (defn current-month
   []
   (-> (datetime/now)
       datetime/timestamp->year-month-day-date
       (string/split #"-")
       second
-      number-utils/parse-int))
+      utils.number/parse-int))

src/quo2/components/calendar/calendar/utils_test.cljs

@@ -3,26 +3,28 @@
             [quo2.components.calendar.calendar.utils :as utils]
             [utils.datetime :as datetime]
             [clojure.string :as string]
-            [utils.number :as number-utils]))
+            [utils.number :as utils.number]))
 
-(deftest calendar-utils-test
-  (testing "generate-years"
+(deftest generate-years-test
+  (testing "returns correct years range"
     (let [current-year (utils/current-year)]
       (is (= (last (utils/generate-years current-year)) (- current-year 100)))
-      (is (= (first (utils/generate-years current-year)) current-year))))
+      (is (= (first (utils/generate-years current-year)) current-year)))))
 
-  (testing "current-year"
+(deftest current-year-test
+  (testing "returns the current year"
     (let [current-year (-> (datetime/now)
                            datetime/timestamp->year-month-day-date
                            (string/split #"-")
                            first
-                           number-utils/parse-int)]
-      (is (= (utils/current-year) current-year))))
+                           utils.number/parse-int)]
+      (is (= (utils/current-year) current-year)))))
 
-  (testing "current-month"
+(deftest current-month-test
+  (testing "returns the current month"
     (let [current-month (-> (datetime/now)
                             datetime/timestamp->year-month-day-date
                             (string/split #"-")
                             second
-                            number-utils/parse-int)]
+                            utils.number/parse-int)]
       (is (= (utils/current-month) current-month)))))

src/quo2/components/calendar/calendar/view.cljs

@@ -2,7 +2,7 @@
   (:require [react-native.core :as rn]
             [quo2.theme :as theme]
             [reagent.core :as reagent]
-            [utils.number :as number-utils]
+            [utils.number :as utils.number]
             [quo2.components.calendar.calendar.utils :as utils]
             [quo2.components.calendar.calendar.style :as style]
             [quo2.components.calendar.calendar.years-list.view :as years-list]
@@ -16,8 +16,8 @@
         selected-month  (reagent/atom (utils/current-month))
         on-change-year  #(reset! selected-year %)
         on-change-month (fn [new-date]
-                          (reset! selected-year (number-utils/parse-int (:year new-date)))
-                          (reset! selected-month (number-utils/parse-int (:month new-date))))]
+                          (reset! selected-year (utils.number/parse-int (:year new-date)))
+                          (reset! selected-month (utils.number/parse-int (:month new-date))))]
     (fn [{:keys [on-change start-date end-date theme]}]
       [rn/view
        {:style (style/container theme)}

src/quo2/components/calendar/calendar/weekdays_header/style.cljs

@@ -1,6 +1,5 @@
 (ns quo2.components.calendar.calendar.weekdays-header.style
-  (:require [quo2.foundations.typography :as typography]
-            [quo2.foundations.colors :as colors]))
+  (:require [quo2.foundations.colors :as colors]))
 
 (def container-weekday-row
   {:flex-direction     :row

src/quo2/components/calendar/calendar/years_list/view.cljs

@@ -1,15 +1,13 @@
 (ns quo2.components.calendar.calendar.years-list.view
   (:require [react-native.core :as rn]
             [quo2.theme :as theme]
-            [reagent.core :as reagent]
-            [quo2.foundations.colors :as colors]
             [react-native.linear-gradient :as linear-gradient]
             [quo2.components.calendar.calendar.utils :as utils]
             [quo2.components.calendar.calendar-year.view :as calendar-year]
             [quo2.components.calendar.calendar.years-list.style :as style]))
 
-(defn- render-year
-  [year selected-year on-press]
+(defn- year-view
+  [year _ _ {:keys [selected-year on-press]}]
   [calendar-year/view
    {:selected? (= year selected-year)
     :on-press  #(on-press year)}
@@ -43,10 +41,9 @@
      :shows-vertical-scroll-indicator false
      :footer                          [footer]
      :separator                       [separator]
-     :render-fn                       (fn [item]
-                                        (render-year item
-                                                     year
-                                                     #(on-change-year %)))}]
+     :render-fn                       year-view
+     :render-data                     {:selected-year year
+                                       :on-press      #(on-change-year %)}}]
    [gradiant-overview theme]])
 
 (def view (theme/with-theme view-internal))

src/utils/datetime.cljs

@@ -95,7 +95,7 @@
   [^js locsym]
   (nth (.-DATEFORMATS locsym) 2))
 
-(defn- format-date
+(defn format-date
   [date]
   (if date
     (t.format/unparse (t.format/formatter "dd/MM/yyyy") date)
@@ -121,6 +121,10 @@
 (def short-date-with-time-fmt (get-formatter-fn short-date-format-with-time))
 (def datetime-within-one-week-fmt (get-formatter-fn datetime-within-one-week-format))
 
+(def format-long-month
+  (memoize (fn [month]
+             (.format ^js ((get-formatter-fn (constantly "MMMM")))
+                      (t/date-time 1970 month)))))
 ;;;; Utilities
 (defn previous-years?
   [datetime]