settings/tokens: Add scope formatting tests

Author: Turbo87

e2e/routes/settings/tokens/index.spec.ts

@@ -28,4 +28,29 @@ test.describe('/settings/tokens', { tag: '@routes' }, () => {
     await expect(tokens[1].locator('[data-test-name]')).toHaveText('token-1');
     await expect(tokens[1].locator('[data-test-token]')).toHaveCount(0);
   });
+
+  test('scope formatting', async ({ page, msw }) => {
+    let user = msw.db.user.create({
+      login: 'johnnydee',
+      name: 'John Doe',
+      email: '[email protected]',
+      avatar: 'https://avatars2.githubusercontent.com/u/1234567?v=4',
+    });
+
+    await msw.authenticateAs(user);
+
+    msw.db.apiToken.create({
+      user,
+      endpointScopes: ['publish-new', 'publish-update', 'yank'],
+      crateScopes: ['serde', 'serde-*', 'serde_*'],
+    });
+
+    await page.goto('/settings/tokens');
+    await expect(page).toHaveURL('/settings/tokens');
+    await expect(page.locator('[data-test-api-token]')).toHaveCount(1);
+    await expect(page.locator('[data-test-endpoint-scopes]')).toHaveText(
+      'Scopes: publish-new , publish-update , and yank',
+    );
+    await expect(page.locator('[data-test-crate-scopes]')).toHaveText('Crates: serde , serde-* , and serde_*');
+  });
 });

tests/routes/settings/tokens/index-test.js

@@ -41,4 +41,20 @@ module('/settings/tokens', function (hooks) {
     assert.dom('[data-test-name]', tokens[1]).hasText('token-1');
     assert.dom('[data-test-token]', tokens[1]).doesNotExist();
   });
+
+  test('scope formatting', async function (assert) {
+    let { user } = prepare(this);
+
+    this.db.apiToken.create({
+      user,
+      endpointScopes: ['publish-new', 'publish-update', 'yank'],
+      crateScopes: ['serde', 'serde-*', 'serde_*'],
+    });
+
+    await visit('/settings/tokens');
+    assert.strictEqual(currentURL(), '/settings/tokens');
+    assert.dom('[data-test-api-token]').exists({ count: 1 });
+    assert.dom('[data-test-endpoint-scopes]').hasText('Scopes: publish-new , publish-update , and yank');
+    assert.dom('[data-test-crate-scopes]').hasText('Crates: serde , serde-* , and serde_*');
+  });
 });