Show Greatest inclusion reasons on catalog tiles

tools/test-greatest-ui.js

@@ -45,16 +45,22 @@ async function freePort() {
     assert.equal(await page.getByRole('link', { name: 'Shijō Saikō no Manga' }).textContent(), 'Shijō Saikō no Manga');
     assert.equal(await page.locator('.greatest-period').count(), 13);
     assert.equal(await page.locator('.greatest-tile').count(), 106);
-    const astro = page.locator('.greatest-tile').filter({ hasText: 'Astro Boy' });
+    const astro = page.locator('.greatest-tile').filter({ has: page.getByRole('button', { name: 'Details for Astro Boy' }) });
+    assert.equal(await astro.locator('.greatest-reason').isVisible(), true);
+    assert.match(await astro.locator('.greatest-reason').textContent(), /long-form adventure manga/);
+    assert.equal(await astro.locator('.greatest-reason-label').textContent(), 'Why it matters');
     await astro.getByRole('button', { name: 'Definitely want: Astro Boy' }).click();
     await page.getByRole('button', { name: '🔥 Flame' }).click();
     assert.equal(await page.locator('.greatest-tile').count(), 1);
     await page.getByRole('button', { name: 'All', exact: true }).click();
     await page.getByRole('button', { name: 'Rank by everyone' }).click();
     await page.getByRole('button', { name: 'Details for Astro Boy' }).click();
+    await page.getByRole('dialog').getByRole('heading', { name: 'Why it matters' }).waitFor();
+    assert.match(await page.getByRole('dialog').textContent(), /foundation for the Pluto branch/);
     await page.getByRole('dialog').getByText('Community votes: 🔥 1').waitFor();
     await page.getByRole('dialog').getByRole('button', { name: 'Close' }).click();
     await page.setViewportSize({ width: 390, height: 844 });
+    assert.equal(await astro.locator('.greatest-reason').isVisible(), true);
     assert.equal(await page.locator('.nav-greatest').evaluate(el => getComputedStyle(el, '::after').content), '"Saikō"');
     assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), 'Mobile horizontal overflow');
     await page.getByRole('button', { name: '📚 In library' }).click();