Unit test, styling

This commit is contained in:
zandercymatics 2024-03-21 12:07:33 -06:00
parent 438df069d6
commit 2931900d57
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
5 changed files with 58 additions and 38 deletions

View file

@ -177,9 +177,10 @@ function openInNewTab(el, removeAttribute = false){
copyToClipboardAndChangeIcon(button); copyToClipboardAndChangeIcon(button);
}); });
// Add a class that removes the outline style on click // Add a class that adds the outline style on click
button.addEventListener("mousedown", function() { button.addEventListener("mousedown", function() {
this.classList.remove("no-outline-on-click"); console.log(`applying mousedown on ${this} vs ${button}`);
this.classList.add("no-outline-on-click");
}); });
// But add it back in after the user clicked, // But add it back in after the user clicked,

View file

@ -381,14 +381,19 @@ table.dja-user-detail-table {
input { input {
// Allow for padding around the copy button // Allow for padding around the copy button
padding-right: 35px; padding-right: 35px !important;
// Match the height of other inputs // Match the height of other inputs
min-height: 2.25rem; min-height: 2.25rem !important;
} }
.no-outline-on-click:focus { }
outline: none !important;
td.font-size-sm {
button.usa-button__icon {
font-size: 16px;
} }
} }
.no-outline-on-click:focus {
outline: none !important;
}

View file

@ -13,34 +13,39 @@
{% else %} {% else %}
<td>Nothing found</td> <td>Nothing found</td>
{% endif %} {% endif %}
{# Placeholder col for actions (like copy) or additional padding #}
<td></td>
</tr> </tr>
<tr> <tr>
<th class="padding-left-0" scope="row">Email</th> <th class="padding-left-0" scope="row">Email</th>
{% if user.email or user.contact.email %} {% if user.email or user.contact.email %}
{% if user.contact.email %}
<td>{{ user.contact.email }}</td>
{% else %}
<td>{{ user.email }}</td>
{% endif %}
<td> <td>
<span> {% if user.contact.email %}
{% if user.contact.email %} <input class="dja-clipboard-input" type="hidden" value="{{ user.contact.email }}" id="id_email">
{{ user.contact.email }} {% else %}
<input type="hidden" value="{{ user.contact.email }}" id="id_email"> <input class="dja-clipboard-input" type="hidden" value="{{ user.email }}">
{% else %} {% endif %}
{{ user.email }} <button
<input type="hidden" value="{{ user.email }}"> class="usa-button usa-button--unstyled usa-button__icon usa-button__clipboard"
{% endif %} type="button"
<button >
class="usa-button usa-button--unstyled padding-left-2 usa-button__icon usa-button__clipboard" <svg
type="button" class="usa-icon"
> >
<svg <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
class="usa-icon" </svg>
> </button>
<use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg>
</button>
</span>
</td> </td>
{% else %} {% else %}
<td>Nothing found</td> <td>Nothing found</td>
<td></td>
{% endif %} {% endif %}
</tr> </tr>
<tr> <tr>
@ -54,6 +59,7 @@
{% else %} {% else %}
<td>Nothing found</td> <td>Nothing found</td>
{% endif %} {% endif %}
<td></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View file

@ -62,10 +62,13 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
<tr data-contact-id="{{ contact.id }}" data-contact-url="{% url 'admin:registrar_contact_change' contact.id %}"> <tr data-contact-id="{{ contact.id }}" data-contact-url="{% url 'admin:registrar_contact_change' contact.id %}">
<th scope="row">{{contact.first_name}} {{contact.last_name}}</th> <th scope="row">{{contact.first_name}} {{contact.last_name}}</th>
<td>{{ contact.title }}</td> <td>{{ contact.title }}</td>
<td> <td>{{ contact.email }}</td>
<input type="hidden" value="{{ contact.email }}"> <td>{{ contact.phone }}</td>
{# Copy button for the email #}
<td class="font-size-sm">
<input class="dja-clipboard-input" type="hidden" value="{{ contact.email }}">
<button <button
class="usa-button usa-button--unstyled usa-button__icon usa-button__clipboard" class="usa-button usa-button--unstyled usa-button__icon usa-button__clipboard text-no-underline"
type="button" type="button"
> >
<svg <svg
@ -73,11 +76,9 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
> >
<use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use> <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg> </svg>
Copy email
</button> </button>
{{ contact.email }}
</td> </td>
<td>{{ contact.phone }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>

View file

@ -1304,18 +1304,19 @@ class TestDomainRequestAdmin(MockEppLib):
self.assertEqual(response.status_code, 200) self.assertEqual(response.status_code, 200)
self.assertContains(response, domain_request.requested_domain.name) self.assertContains(response, domain_request.requested_domain.name)
# Check that the modal has the right content
# Check for the header
# == Check for the creator == # # == Check for the creator == #
# Check for the right title, email, and phone number in the response. # Check for the right title, email, and phone number in the response.
# We only need to check for the end tag # We only need to check for the end tag
# (Otherwise this test will fail if we change classes, etc) # (Otherwise this test will fail if we change classes, etc)
expected_email = "meoward.jones@igorville.gov"
expected_creator_fields = [ expected_creator_fields = [
# Field, expected value # Field, expected value
("title", "Treat inspector</td>"), ("title", "Treat inspector</td>"),
("email", "meoward.jones@igorville.gov</td>"), ("email", f"{expected_email}</td>"),
# Check for the existence of the copy button input.
# Lets keep things simple to minimize future conflicts.
("email_copy_button_input", f'<input class="dja-clipboard-input" type="hidden" value="{expected_email}"'),
("phone", "(555) 123 12345</td>"), ("phone", "(555) 123 12345</td>"),
] ]
self.assert_response_contains_distinct_values(response, expected_creator_fields) self.assert_response_contains_distinct_values(response, expected_creator_fields)
@ -1324,20 +1325,24 @@ class TestDomainRequestAdmin(MockEppLib):
self.assertContains(response, "Meoward Jones") self.assertContains(response, "Meoward Jones")
# == Check for the submitter == # # == Check for the submitter == #
expected_email = "mayor@igorville.gov"
expected_submitter_fields = [ expected_submitter_fields = [
# Field, expected value # Field, expected value
("title", "Admin Tester</td>"), ("title", "Admin Tester</td>"),
("email", "mayor@igorville.gov</td>"), ("email", f"{expected_email}</td>"),
("email_copy_button_input", f'<input class="dja-clipboard-input" type="hidden" value="{expected_email}"'),
("phone", "(555) 555 5556</td>"), ("phone", "(555) 555 5556</td>"),
] ]
self.assert_response_contains_distinct_values(response, expected_submitter_fields) self.assert_response_contains_distinct_values(response, expected_submitter_fields)
self.assertContains(response, "Testy2 Tester2") self.assertContains(response, "Testy2 Tester2")
# == Check for the authorizing_official == # # == Check for the authorizing_official == #
expected_email = "testy@town.com"
expected_ao_fields = [ expected_ao_fields = [
# Field, expected value # Field, expected value
("title", "Chief Tester</td>"), ("title", "Chief Tester</td>"),
("email", "testy@town.com</td>"), ("email", f"{expected_email}</td>"),
("email_copy_button_input", f'<input class="dja-clipboard-input" type="hidden" value="{expected_email}"'),
("phone", "(555) 555 5555</td>"), ("phone", "(555) 555 5555</td>"),
] ]
self.assert_response_contains_distinct_values(response, expected_ao_fields) self.assert_response_contains_distinct_values(response, expected_ao_fields)
@ -1359,10 +1364,12 @@ class TestDomainRequestAdmin(MockEppLib):
self.assertContains(response, "Phone</th>", count=3) self.assertContains(response, "Phone</th>", count=3)
# == Test the other_employees field == # # == Test the other_employees field == #
expected_email = "testy@town.com"
expected_other_employees_fields = [ expected_other_employees_fields = [
# Field, expected value # Field, expected value
("title", "Another Tester</td>"), ("title", "Another Tester</td>"),
("email", "testy2@town.com</td>"), ("email", f"{expected_email}</td>"),
("email_copy_button_input", f'<input class="dja-clipboard-input" type="hidden" value="{expected_email}"'),
("phone", "(555) 555 5557</td>"), ("phone", "(555) 555 5557</td>"),
] ]
self.assert_response_contains_distinct_values(response, expected_other_employees_fields) self.assert_response_contains_distinct_values(response, expected_other_employees_fields)