From c45c80dcf9e80f288bce882ac8a9091429002fcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <csechet@entrouvert.com>
Date: Fri, 28 Oct 2022 17:02:15 +0200
Subject: [PATCH] misc: add BEM classes on link-list-cell (#70837)

---
 .../combo/wcs/form_link_fragment.html         |  8 ++++-
 .../templates/combo/link-list-cell.html       | 22 ++++++-------
 tests/test_cells.py                           | 33 +++++++++++--------
 tests/wcs/test_all.py                         |  6 ++--
 4 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/combo/apps/wcs/templates/combo/wcs/form_link_fragment.html b/combo/apps/wcs/templates/combo/wcs/form_link_fragment.html
index 6d4915b6..148ad9d4 100644
--- a/combo/apps/wcs/templates/combo/wcs/form_link_fragment.html
+++ b/combo/apps/wcs/templates/combo/wcs/form_link_fragment.html
@@ -6,7 +6,13 @@
 
 
 {% block form-link-pre %}{% endblock %}
-<a href="{{ form_url }}{% if not request_is_a_bot %}tryauth?cancelurl={{ absolute_uri|urlencode|iriencode }}{% endif %}">{% block form-link-title %}{{ form_title }}{% endblock %}</a>
+<a
+  {% if css_block %}
+    class="{{css_block}}--link"
+  {% endif %}
+  href="{{ form_url }}{% if not request_is_a_bot %}tryauth?cancelurl={{ absolute_uri|urlencode|iriencode }}{% endif %}">
+  {% block form-link-title %}{{ form_title }}{% endblock %}
+</a>
 {% if form_description %}
   <div class="description">{% block form-link-description %}{{ form_description|safe }}{% endblock %}</div>
 {% endif %}
diff --git a/combo/public/templates/combo/link-list-cell.html b/combo/public/templates/combo/link-list-cell.html
index 23288a4b..ba7e973e 100644
--- a/combo/public/templates/combo/link-list-cell.html
+++ b/combo/public/templates/combo/link-list-cell.html
@@ -2,33 +2,33 @@
 {% block cell-content %}
   {% spaceless %}
     {% block cell-header %}
-      {% if title %}<h2>{{ title }}</h2>{% endif %}
+      {% if title %}<h2 class="cell--title">{{ title }}</h2>{% endif %}
       {% include "combo/asset_picture_fragment.html" %}
     {% endblock cell-header %}
     <div class="links-list">
       {% block cell-top-content %}{% endblock cell-top-content %}
-      <ul>
+      <ul class="links-list--items">
         {% for link in links %}
-          <li class="{{ link.css_classes|default:""|join:" " }}{% if link.cell.extra_css_class %} {{ link.cell.extra_css_class }}{% endif %}">{% if link.is_form %}
-            {% include "combo/wcs/form_link_fragment.html" with form=link %}
+          <li class="links-list--item {{ link.css_classes|default:""|join:" " }}{% if link.cell.extra_css_class %} {{ link.cell.extra_css_class }}{% endif %}">{% if link.is_form %}
+            {% include "combo/wcs/form_link_fragment.html" with form=link css_block="links-list" %}
           {% else %}
-            <a href="{{ link.url }}">{{ link.title }}</a>
+            <a href="{{ link.url }}" class="links-list--link">{{ link.title }}</a>
           {% endif %}</li>
         {% endfor %}
         {% if more_links %}
-          <li class="add-more-items">
-            <a role="button" tabindex="0" aria-expanded="false" aria-controls="more-items-{{ cell.get_reference }}" aria-label="{% trans 'More items' %}" id="btn-more-items-{{ cell.get_reference }}" class="add-more-items--button">{% block cell-more-items-btn-label %}+{% endblock %}</a>
+          <li class="add-more-items links-list--more-items">
+            <a role="button" tabindex="0" aria-expanded="false" aria-controls="more-items-{{ cell.get_reference }}" aria-label="{% trans 'More items' %}" id="btn-more-items-{{ cell.get_reference }}" class="add-more-items--button links-list--more-items-button">{% block cell-more-items-btn-label %}+{% endblock %}</a>
           </li>
         {% endif %}
       </ul>
 
       {% if more_links %}
-        <ul style="display: none" class="more-items" id="more-items-{{ cell.get_reference }}" aria-labelledby="btn-more-items-{{ cell.get_reference }}">
+        <ul style="display: none" class="more-items links-list--items" id="more-items-{{ cell.get_reference }}" aria-labelledby="btn-more-items-{{ cell.get_reference }}">
           {% for link in more_links %}
-            <li class="more-items--item {{ link.css_classes|default:""|join:" " }}">{% if link.is_form %}
-              {% include "combo/wcs/form_link_fragment.html" with form=link %}
+            <li class="more-items--item links-list--item {{ link.css_classes|default:""|join:" " }}">{% if link.is_form %}
+              {% include "combo/wcs/form_link_fragment.html" with form=link css_block="links-list"%}
             {% else %}
-              <a href="{{ link.url }}">{{ link.title }}</a>
+              <a class="links-list--link" href="{{ link.url }}">{{ link.title }}</a>
             {% endif %}</li>
           {% endfor %}
       {% endif %}
diff --git a/tests/test_cells.py b/tests/test_cells.py
index e92a5a7b..3ec7a67a 100644
--- a/tests/test_cells.py
+++ b/tests/test_cells.py
@@ -20,6 +20,7 @@ from django.test.utils import CaptureQueriesContext
 from django.urls import reverse
 from django.utils.encoding import force_bytes, force_str
 from django.utils.timezone import now
+from pyquery import PyQuery
 
 from combo.data.library import get_cell_classes
 from combo.data.models import (
@@ -292,29 +293,33 @@ def test_link_list_cell():
     )
 
     ctx = {'page_cells': [item]}
-    assert '<ul><li class=" foobar"><a href="http://example.net/">Example Site</a></li></ul>' in cell.render(
-        ctx
-    )
+    pq = PyQuery(cell.render(ctx))
+    assert pq("a").attr("href") == "http://example.net/"
+    assert pq("a").text() == "Example Site"
+    assert "foobar" in pq("li").attr("class")
 
     item.title = ''
     item.extra_css_class = ''
-    assert '<ul><li class=""><a href="http://example.net/">http://example.net/</a></li></ul>' in cell.render(
-        ctx
-    )
+    pq = PyQuery(cell.render(ctx))
+    assert pq("a").text() == "http://example.net/"
+    assert "foobar" not in pq("li").attr("class")
 
     item.link_page = page
-    assert '<ul><li class=""><a href="/example-page/">example page</a></li></ul>' in cell.render(ctx)
+    pq = PyQuery(cell.render(ctx))("a")
+    assert pq.attr("href") == "/example-page/"
+    assert pq.text() == "example page"
 
     item.title = 'altertitle'
-    assert '<ul><li class=""><a href="/example-page/">altertitle</a></li></ul>' in cell.render(ctx)
+    pq = PyQuery(cell.render(ctx))("a")
+    assert pq.text() == "altertitle"
 
     item.anchor = 'anchor'
-    assert '<ul><li class=""><a href="/example-page/#anchor">altertitle</a></li></ul>' in cell.render(ctx)
+    pq = PyQuery(cell.render(ctx))("a")
+    assert pq.attr("href") == "/example-page/#anchor"
 
     item.link_page = None
-    assert '<ul><li class=""><a href="http://example.net/#anchor">altertitle</a></li></ul>' in cell.render(
-        ctx
-    )
+    pq = PyQuery(cell.render(ctx))("a")
+    assert pq.attr("href") == "http://example.net/#anchor"
 
     item2 = LinkCell.objects.create(
         page=page,
@@ -324,9 +329,9 @@ def test_link_list_cell():
         order=1,
     )
     ctx = {'page_cells': [item, item2]}
-    assert 'class="add-more-items--button">+</a>' not in cell.render(ctx)
+    assert 'class="add-more-items--button links-list--more-items-button">+</a>' not in cell.render(ctx)
     cell.limit = 1
-    assert 'class="add-more-items--button">+</a>' in cell.render(ctx)
+    assert 'class="add-more-items--button links-list--more-items-button">+</a>' in cell.render(ctx)
 
 
 def test_link_list_cell_validity():
diff --git a/tests/wcs/test_all.py b/tests/wcs/test_all.py
index f1d995e9..5244015b 100644
--- a/tests/wcs/test_all.py
+++ b/tests/wcs/test_all.py
@@ -1864,7 +1864,7 @@ def test_list_of_links_with_form_render(app):
 
     resp = app.get('/test_list_of_links_with_form_render/')
     assert PyQuery(resp.text).find('.links-list a').text() == 'A title'
-    assert PyQuery(resp.text).find('.links-list li').attr('class') == ' foobar'
+    assert 'foobar' in PyQuery(resp.text).find('.links-list li').attr('class')
     assert (
         PyQuery(resp.text).find('.links-list a').attr('href')
         == 'http://example.com/tryauth?cancelurl=http%3A//testserver/test_list_of_links_with_form_render/'
@@ -1873,12 +1873,12 @@ def test_list_of_links_with_form_render(app):
     link.cached_json = {'keywords': ['bar']}
     link.save()
     resp = app.get('/test_list_of_links_with_form_render/')
-    assert PyQuery(resp.text).find('.links-list li').attr('class') == 'keyword-bar foobar'
+    assert 'keyword-bar foobar' in PyQuery(resp.text).find('.links-list li').attr('class')
 
     link.extra_css_class = ''
     link.save()
     resp = app.get('/test_list_of_links_with_form_render/')
-    assert PyQuery(resp.text).find('.links-list li').attr('class') == 'keyword-bar'
+    assert 'keyword-bar' in PyQuery(resp.text).find('.links-list li').attr('class')
 
     link.cached_json = {'description': 'en outre, on est des loutres'}
     link.save()
-- 
2.39.2