Add missed css_class to TabHolder template (#183)

* Add missed css_class to TabHolder template

* Minor fix in test_tab_and_tab_holder test method

* Updated CHANGELOG.md

* Updated Tests

---------

Co-authored-by: David Smith <smithdc@gmail.com>

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## 2024.3 (TBC)
 * Added support for Django 5.1.
-* Fixed `accordion.html` and `accordion-group.html` templates to render `css_class` attribute.
+* Fixed `accordion.html`, `accordion-group.html` and `tab.html` templates to render `css_class` attribute.
 * Dropped support for django-crispy-forms 2.2 and earlier.
 
 ## 2024.2 (2024-02-24)

crispy_bootstrap5/templates/bootstrap5/layout/tab.html

@@ -1,4 +1,4 @@
-<ul{% if tabs.css_id %} id="{{ tabs.css_id }}"{% endif %} class="nav nav-tabs">
+<ul{% if tabs.css_id %} id="{{ tabs.css_id }}"{% endif %} class="nav nav-tabs{% if tabs.css_class %} {{ tabs.css_class }}{% endif %}">
     {{ links|safe }}
 </ul>
 <div class="tab-content card-body">

tests/results/test_tab_and_tab_holder.html

@@ -0,0 +1,29 @@
+<form method="post">
+  <ul class="nav nav-tabs tab-holder-class">
+    <li class="nav-item"><a class="nav-link active" href="#custom-name" data-bs-toggle="tab">One</a></li>
+    <li class="nav-item"><a class="nav-link" href="#two" data-bs-toggle="tab">Two</a></li>
+  </ul>
+  <div class="tab-content card-body">
+    <div id="custom-name" class="tab-pane first-tab-class active">
+      <div id="div_id_first_name" class="mb-3">
+        <label for="id_first_name" class="form-label requiredField">first name<span
+            class="asteriskField">*</span></label>
+        <input type="text" name="first_name" maxlength="5" class="textinput textInput inputtext form-control" required
+          id="id_first_name">
+      </div>
+    </div>
+    <div id="two" class="tab-pane">
+      <div id="div_id_password1" class="mb-3">
+        <label for="id_password1" class="form-label requiredField">password<span class="asteriskField">*</span></label>
+        <input type="password" name="password1" maxlength="30" class="passwordinput form-control" required
+          id="id_password1">
+      </div>
+      <div id="div_id_password2" class="mb-3">
+        <label for="id_password2" class="form-label requiredField">re-enter password<span
+            class="asteriskField">*</span></label>
+        <input type="password" name="password2" maxlength="30" class="passwordinput form-control" required
+          id="id_password2">
+      </div>
+    </div>
+  </div>
+</form>

tests/test_layout_objects.py

@@ -440,30 +440,13 @@ def test_tab_and_tab_holder(self):
                     "one",
                     "first_name",
                     css_id="custom-name",
-                    css_class="first-tab-class active",
+                    css_class="first-tab-class",
                 ),
                 Tab("two", "password1", "password2"),
+                css_class="tab-holder-class",
             )
         )
-        html = render_crispy_form(test_form)
-
-        assert (
-            html.count(
-                '<ul class="nav nav-tabs"> <li class="nav-item">'
-                '<a class="nav-link active" href="#custom-name" data-bs-toggle="tab">'
-                "One</a></li>"
-            )
-            == 1
-        )
-        assert html.count("tab-pane") == 2
-
-        assert html.count('class="tab-pane first-tab-class active"') == 1
-
-        assert html.count('<div id="custom-name"') == 1
-        assert html.count('<div id="two"') == 1
-        assert html.count('name="first_name"') == 1
-        assert html.count('name="password1"') == 1
-        assert html.count('name="password2"') == 1
+        assert parse_form(test_form) == parse_expected("test_tab_and_tab_holder.html")
 
     def test_tab_helper_reuse(self):
         # this is a proper form, according to the docs.