Merge pull request #4064 from alphagov/fix-autofocus-in-some-places

Fix autofocus in places where it wasn’t working

tests/app/main/views/organisations/test_organisation_invites.py

@@ -33,6 +33,51 @@ def test_view_team_members(
     ) == 'Cancel invitation'
 
 
+@pytest.mark.parametrize('number_of_users', (
+    pytest.param(7, marks=pytest.mark.xfail),
+    pytest.param(8),
+))
+def test_should_show_live_search_if_more_than_7_users(
+    client_request,
+    mocker,
+    mock_get_organisation,
+    active_user_with_permissions,
+    number_of_users,
+):
+    mocker.patch(
+        'app.models.user.OrganisationInvitedUsers.client_method',
+        return_value=[],
+    )
+    mocker.patch(
+        'app.models.user.OrganisationUsers.client_method',
+        return_value=[active_user_with_permissions] * number_of_users,
+    )
+
+    page = client_request.get(
+        '.manage_org_users',
+        org_id=ORGANISATION_ID,
+    )
+
+    assert page.select_one('div[data-module=live-search]')['data-targets'] == (
+        ".user-list-item"
+    )
+    assert len(page.select('.user-list-item')) == number_of_users
+
+    textbox = page.select_one('[data-module=autofocus] .govuk-input')
+    assert 'value' not in textbox
+    assert textbox['name'] == 'search'
+    # data-module=autofocus is set on a containing element so it
+    # shouldn’t also be set on the textbox itself
+    assert 'data-module' not in textbox
+    assert not page.select_one('[data-force-focus]')
+    assert textbox['class'] == [
+        'govuk-input', 'govuk-!-width-full',
+    ]
+    assert normalize_spaces(
+        page.select_one('label[for=search]').text
+    ) == 'Search by name or email address'
+
+
 def test_invite_org_user(
     client_request,
     mocker,

tests/app/main/views/test_manage_users.py

@@ -151,6 +151,49 @@ def test_should_show_overview_page(
     mock_get_users.assert_called_once_with(SERVICE_ONE_ID)
 
 
+@pytest.mark.parametrize('number_of_users', (
+    pytest.param(7, marks=pytest.mark.xfail),
+    pytest.param(8),
+))
+def test_should_show_live_search_if_more_than_7_users(
+    client_request,
+    mocker,
+    mock_get_invites_for_service,
+    mock_get_template_folders,
+    mock_has_no_jobs,
+    active_user_with_permissions,
+    active_user_view_permissions,
+    number_of_users,
+):
+    mocker.patch('app.user_api_client.get_user', return_value=active_user_with_permissions)
+    mocker.patch('app.models.user.InvitedUsers.client_method', return_value=[])
+    mocker.patch(
+        'app.models.user.Users.client_method',
+        return_value=[active_user_with_permissions] * number_of_users
+    )
+
+    page = client_request.get('main.manage_users', service_id=SERVICE_ONE_ID)
+
+    assert page.select_one('div[data-module=live-search]')['data-targets'] == (
+        ".user-list-item"
+    )
+    assert len(page.select('.user-list-item')) == number_of_users
+
+    textbox = page.select_one('[data-module=autofocus] .govuk-input')
+    assert 'value' not in textbox
+    assert textbox['name'] == 'search'
+    # data-module=autofocus is set on a containing element so it
+    # shouldn’t also be set on the textbox itself
+    assert 'data-module' not in textbox
+    assert not page.select_one('[data-force-focus]')
+    assert textbox['class'] == [
+        'govuk-input', 'govuk-!-width-full',
+    ]
+    assert normalize_spaces(
+        page.select_one('label[for=search]').text
+    ) == 'Search by name or email address'
+
+
 def test_should_show_caseworker_on_overview_page(
     client_request,
     mocker,

tests/app/main/views/test_send.py

@@ -2253,8 +2253,14 @@ def test_send_one_off_letter_address_shows_form(
 
     form = page.select_one('form')
 
+    assert form['data-module'] == 'autofocus'
+    assert form['data-force-focus'] == 'True'
+
     assert form.select_one('label').text.strip() == 'Address'
-    assert form.select_one('textarea').attrs['name'] == 'address'
+    assert form.select_one('textarea')['name'] == 'address'
+    assert form.select_one('textarea')['data-module'] == 'enhanced-textbox'
+    assert form.select_one('textarea')['data-highlight-placeholders'] == 'false'
+    assert form.select_one('textarea')['rows'] == '4'
 
     upload_link = form.select_one('a')
 

tests/app/main/views/test_tour.py

@@ -164,6 +164,36 @@ def test_should_200_for_get_tour_step(
     )
 
 
+def test_should_show_empty_text_box(
+    client_request,
+    mock_get_service_template_with_multiple_placeholders,
+    service_one,
+    fake_uuid,
+):
+    with client_request.session_transaction() as session:
+        session['placeholders'] = {'phone number': '07700 900762'}
+
+    page = client_request.get(
+        'main.tour_step',
+        service_id=SERVICE_ONE_ID,
+        template_id=fake_uuid,
+        step_index=1
+    )
+
+    textbox = page.select_one('[data-module=autofocus][data-force-focus=True] .govuk-input')
+    assert 'value' not in textbox
+    assert textbox['name'] == 'placeholder_value'
+    assert textbox['class'] == [
+        'govuk-input', 'govuk-!-width-full',
+    ]
+    # data-module=autofocus is set on a containing element so it
+    # shouldn’t also be set on the textbox itself
+    assert 'data-module' not in textbox
+    assert normalize_spaces(
+        page.select_one('label[for=placeholder_value]').text
+    ) == 'one'
+
+
 def test_should_prefill_answers_for_get_tour_step(
     client_request,
     mock_get_service_template_with_multiple_placeholders,

tests/javascripts/autofocus.test.js

@@ -20,7 +20,7 @@ describe('Autofocus', () => {
 
     // set up DOM
     document.body.innerHTML =
-      `<div>
+      `<div id="wrapper">
         <label class="form-label" for="search">
           ${labelText}
         </label>
@@ -50,6 +50,18 @@ describe('Autofocus', () => {
 
   });
 
+  test('is focused when attribute is set on outer element', () => {
+
+    document.getElementById('search').removeAttribute('data-module');
+    document.getElementById('wrapper').setAttribute('data-module', 'autofocus');
+
+    // start module
+    window.GOVUK.modules.start();
+
+    expect(focusHandler).toHaveBeenCalled();
+
+  });
+
   test('is not focused if the window has scrolled', () => {
 
     // mock the window being scrolled 25px