Auto merge of #4162 - Turbo87:fix-nameless-owners, r=locks

OwnersList: Fall back to `login` if `name` is not filled

Fixes #4161

Author: bors

app/components/owners-list.hbs

@@ -1,7 +1,7 @@
 <ul
   role="list"
   local-class="list {{if this.showDetailedList "detailed"}}"
-  data-test-owners
+  data-test-owners="{{if this.showDetailedList "detailed" "basic"}}"
 >
   {{#each @owners as |owner|}}
     <li local-class="{{if (eq owner.kind "team") "team"}}">
@@ -11,8 +11,8 @@
         local-class="link"
         data-test-owner-link={{owner.login}}
       >
-        <UserAvatar @user={{owner}} @size="medium-small" local-class="avatar" />
-        <span local-class="name">{{or owner.display_name owner.name}}</span>
+        <UserAvatar @user={{owner}} @size="medium-small" local-class="avatar" aria-hidden="true" />
+        <span local-class="name {{unless this.showDetailedList "hidden-name"}}">{{or owner.display_name owner.name owner.login}}</span>
       </LinkTo>
     </li>
   {{/each}}

app/components/owners-list.module.css

@@ -34,10 +34,6 @@
     > * {
         margin: 0 10px 10px 0;
     }
-
-    .name {
-        display: none;
-    }
 }
 
 .avatar {
@@ -50,3 +46,7 @@
         border-radius: 4px;
     }
 }
+
+.hidden-name {
+    composes: sr-only from '../styles/shared/a11y.module.css';
+}

tests/components/owners-list-test.js

@@ -0,0 +1,139 @@
+import { render } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+
+import { hbs } from 'ember-cli-htmlbars';
+
+import { setupRenderingTest } from 'cargo/tests/helpers';
+
+import setupMirage from '../helpers/setup-mirage';
+
+module('Component | OwnersList', function (hooks) {
+  setupRenderingTest(hooks);
+  setupMirage(hooks);
+
+  test('single user', async function (assert) {
+    let crate = this.server.create('crate');
+    this.server.create('version', { crate });
+
+    let user = this.server.create('user');
+    this.server.create('crate-ownership', { crate, user });
+
+    let store = this.owner.lookup('service:store');
+    this.crate = await store.findRecord('crate', crate.name);
+    await this.crate.hasMany('owner_team').load();
+    await this.crate.hasMany('owner_user').load();
+
+    await render(hbs`<OwnersList @owners={{this.crate.owners}} />`);
+    assert.dom('[data-test-owners="detailed"]').exists();
+    assert.dom('ul > li').exists({ count: 1 });
+    assert.dom('[data-test-owner-link]').exists({ count: 1 });
+
+    let logins = [...this.element.querySelectorAll('[data-test-owner-link]')].map(it => it.dataset.testOwnerLink);
+    assert.deepEqual(logins, ['user-1']);
+
+    assert.dom('[data-test-owner-link="user-1"]').hasText('User 1');
+    assert.dom('[data-test-owner-link="user-1"]').hasAttribute('href', '/users/user-1');
+  });
+
+  test('user without `name`', async function (assert) {
+    let crate = this.server.create('crate');
+    this.server.create('version', { crate });
+
+    let user = this.server.create('user', { name: null, login: 'anonymous' });
+    this.server.create('crate-ownership', { crate, user });
+
+    let store = this.owner.lookup('service:store');
+    this.crate = await store.findRecord('crate', crate.name);
+    await this.crate.hasMany('owner_team').load();
+    await this.crate.hasMany('owner_user').load();
+
+    await render(hbs`<OwnersList @owners={{this.crate.owners}} />`);
+    assert.dom('[data-test-owners="detailed"]').exists();
+    assert.dom('ul > li').exists({ count: 1 });
+    assert.dom('[data-test-owner-link]').exists({ count: 1 });
+
+    let logins = [...this.element.querySelectorAll('[data-test-owner-link]')].map(it => it.dataset.testOwnerLink);
+    assert.deepEqual(logins, ['anonymous']);
+
+    assert.dom('[data-test-owner-link="anonymous"]').hasText('anonymous');
+    assert.dom('[data-test-owner-link="anonymous"]').hasAttribute('href', '/users/anonymous');
+  });
+
+  test('five users', async function (assert) {
+    let crate = this.server.create('crate');
+    this.server.create('version', { crate });
+
+    for (let i = 0; i < 5; i++) {
+      let user = this.server.create('user');
+      this.server.create('crate-ownership', { crate, user });
+    }
+
+    let store = this.owner.lookup('service:store');
+    this.crate = await store.findRecord('crate', crate.name);
+    await this.crate.hasMany('owner_team').load();
+    await this.crate.hasMany('owner_user').load();
+
+    await render(hbs`<OwnersList @owners={{this.crate.owners}} />`);
+    assert.dom('[data-test-owners="detailed"]').exists();
+    assert.dom('ul > li').exists({ count: 5 });
+    assert.dom('[data-test-owner-link]').exists({ count: 5 });
+
+    let logins = [...this.element.querySelectorAll('[data-test-owner-link]')].map(it => it.dataset.testOwnerLink);
+    assert.deepEqual(logins, ['user-1', 'user-2', 'user-3', 'user-4', 'user-5']);
+  });
+
+  test('six users', async function (assert) {
+    let crate = this.server.create('crate');
+    this.server.create('version', { crate });
+
+    for (let i = 0; i < 6; i++) {
+      let user = this.server.create('user');
+      this.server.create('crate-ownership', { crate, user });
+    }
+
+    let store = this.owner.lookup('service:store');
+    this.crate = await store.findRecord('crate', crate.name);
+    await this.crate.hasMany('owner_team').load();
+    await this.crate.hasMany('owner_user').load();
+
+    await render(hbs`<OwnersList @owners={{this.crate.owners}} />`);
+    assert.dom('[data-test-owners="basic"]').exists();
+    assert.dom('ul > li').exists({ count: 6 });
+    assert.dom('[data-test-owner-link]').exists({ count: 6 });
+
+    let logins = [...this.element.querySelectorAll('[data-test-owner-link]')].map(it => it.dataset.testOwnerLink);
+    assert.deepEqual(logins, ['user-1', 'user-2', 'user-3', 'user-4', 'user-5', 'user-6']);
+  });
+
+  test('teams mixed with users', async function (assert) {
+    let crate = this.server.create('crate');
+    this.server.create('version', { crate });
+
+    for (let i = 0; i < 3; i++) {
+      let user = this.server.create('user');
+      this.server.create('crate-ownership', { crate, user });
+    }
+    for (let i = 0; i < 2; i++) {
+      let team = this.server.create('team', { org: 'crates-io' });
+      this.server.create('crate-ownership', { crate, team });
+    }
+
+    let store = this.owner.lookup('service:store');
+    this.crate = await store.findRecord('crate', crate.name);
+    await this.crate.hasMany('owner_team').load();
+    await this.crate.hasMany('owner_user').load();
+
+    await render(hbs`<OwnersList @owners={{this.crate.owners}} />`);
+    assert.dom('[data-test-owners="detailed"]').exists();
+    assert.dom('ul > li').exists({ count: 5 });
+    assert.dom('[data-test-owner-link]').exists({ count: 5 });
+
+    let logins = [...this.element.querySelectorAll('[data-test-owner-link]')].map(it => it.dataset.testOwnerLink);
+    assert.deepEqual(logins, ['github:crates-io:team-1', 'github:crates-io:team-2', 'user-1', 'user-2', 'user-3']);
+
+    assert.dom('[data-test-owner-link="github:crates-io:team-1"]').hasText('crates-io/team-1');
+    assert
+      .dom('[data-test-owner-link="github:crates-io:team-1"]')
+      .hasAttribute('href', '/teams/github:crates-io:team-1');
+  });
+});