refactor: rewriting some e2e tests

docs/development/architecture-decision-records/0007-name-conventions.md

@@ -0,0 +1,33 @@
+# ADR 0007: Name conventions
+
+| :date: {: .adr-emoji }         | May 2025. {: .adr-text}                                      |
+| :----------------------------: | :-------------------------------------------------------------- |
+| :writing_hand: {: .adr-emoji } | [Eduardo Oliveira](https://github.com/EduardoJM) {: .adr-text } |
+
+## Context
+
+To maintain consistency between our texts, code and tests we need to create some name conventions for this package. We use, in images bellow, description images with `ArrayField`, but the names are same for all widgets and for the inline editors.
+
+## Decision
+
+We have two major possible states of the component: empty and filled.
+
+### Empty States
+
+When the component is empty, without any image selected, we have two options: the `empty marker` is displayed, by default. And, if we drag and drop a image inside the component we have a `drop label` visible:
+
+#### Empty Marker
+
+![Empty Marker](./images/empty-marker.png)
+
+#### Drop Label
+
+![Drop Label](./images/drop-label.png)
+
+### Filled State
+
+When the component is not empty, when we have one or more images on it, we have some new itens:
+
+![Filled state](./images/filled.png)
+
+The reduced image preview is called `thumbnail`. The button to add new images are, obviously, called as `add button`. Inside the thumbnail the button to show `modal` with larger image is called as `preview button` and the button to remove the image is called as `delete button`.

image_uploader_widget/static/image_uploader_widget/js/image-uploader-inline.js

@@ -308,7 +308,7 @@ document.addEventListener('dragend', function(evt) {
   const root = window.draggingEditor;
   if (root.classList.contains('dragging')) { return; }
 
-  root.remove('drop-zone');
+  root.classList.remove('drop-zone');
 });
 
 document.addEventListener('drop', function(evt) {

manage.py

@@ -3,7 +3,7 @@
 import sys
 
 if __name__ == "__main__":
-    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "tests.settings")
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "tests.app.settings")
 
     from django.core.management import execute_from_command_line
 

tests/app/array_field/admin.py

@@ -0,0 +1,8 @@
+from django.contrib import admin
+
+from . import forms, models
+
+
+@admin.register(models.TestWithArrayField)
+class TestWithArrayFieldAdmin(admin.ModelAdmin):
+    form = forms.TestWithArrayFieldForm

tests/app/array_field/forms.py

@@ -0,0 +1,30 @@
+from django import forms
+from django.core.exceptions import ValidationError
+
+from .models import TestWithArrayField
+
+
+class TestWithArrayFieldForm(forms.ModelForm):
+    old_values = []
+
+    def map_is_valid_images(self, value):
+        if not isinstance(value, str):
+            return False
+        return value not in self.old_values
+
+    def clean(self):
+        data = super().clean()
+
+        self.old_values = []
+        if self.instance is not None:
+            self.old_values = self.instance.images
+
+        has_changed = any(list(map(self.map_is_valid_images, data.get("images"))))
+        if has_changed:
+            raise ValidationError("One of the non-changed value is corrupted.")
+
+        return data
+
+    class Meta:
+        model = TestWithArrayField
+        fields = "__all__"

tests/app/array_field/migrations/0001_initial.py

@@ -0,0 +1,45 @@
+# Generated by Django 5.2 on 2025-04-23 01:20
+
+from django.db import migrations, models
+
+import image_uploader_widget.postgres.fields
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = []
+
+    operations = [
+        migrations.CreateModel(
+            name="TestWithArrayField",
+            fields=[
+                (
+                    "id",
+                    models.AutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                (
+                    "images",
+                    image_uploader_widget.postgres.fields.ImageListField(
+                        base_field=models.ImageField(
+                            max_length=150, upload_to="admin_test"
+                        ),
+                        blank=True,
+                        max_length=None,
+                        null=True,
+                        size=None,
+                        upload_to="admin_test",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "(Array Field) Default",
+            },
+        ),
+    ]

tests/app/array_field/models.py

@@ -0,0 +1,10 @@
+from django.db import models
+
+from image_uploader_widget.postgres.fields import ImageListField
+
+
+class TestWithArrayField(models.Model):
+    images = ImageListField(blank=True, null=True, upload_to="admin_test")
+
+    class Meta:
+        verbose_name = "(Array Field) Default"

tests/app/htmx/forms.py

@@ -0,0 +1,12 @@
+from tests.app.widget.forms import TestForm
+from tests.app.widget.models import NonRequired, Required
+
+
+class RequiredForm(TestForm):
+    class Meta(TestForm.Meta):
+        model = Required
+
+
+class NonRequiredForm(TestForm):
+    class Meta(TestForm.Meta):
+        model = NonRequired

tests/templates/test_htmx.html → tests/app/htmx/templates/test_htmx.html

@@ -10,7 +10,7 @@
   <div class="{% if theme %}{{ theme }}{% endif %}">
 
   <button
-    hx-get="{% if destination %}{{ destination }}{% else %}/test-htmx-image-widget/required/{% endif %}"
+    hx-get="{% if destination %}{{ destination }}{% else %}/htmx/required/{% endif %}"
     hx-target="this"
     hx-swap="outerHTML"
     hx-trigger="click"

tests/templates/test_htmx_widget.html → tests/app/htmx/templates/test_htmx_widget.html

@@ -1,5 +1,5 @@
 <form
-  hx-post="/{{ post_url }}/{% if instance %}{{ instance.pk }}/{% endif %}"
+  hx-post="{{ post_url }}{% if instance %}{{ instance.pk }}/{% endif %}"
   hx-target="this"
   hx-swap="outerHTML"
   enctype="multipart/form-data"

tests/app/htmx/urls.py

@@ -0,0 +1,15 @@
+from django.urls import path
+
+from . import views
+
+urlpatterns = [
+    path("required/", views.widget_required, name="required"),
+    path("required/<pk>/", views.widget_required),
+    path("optional/", views.widget_optional, name="optional"),
+    path("optional/<pk>/", views.widget_optional),
+    path("array_field/", views.array_field_required, name="array"),
+    path("array_field/<pk>/", views.array_field_required),
+    path("base/", views.base, name="htmx-base"),
+    path("base/light/", views.base_light, name="htmx-light"),
+    path("base/dark/", views.base_dark, name="htmx-dark"),
+]