fix(tarot-spread): title from the response, so a yes or no cast is not headed three card

Author: ph33nx

packages/ui/src/components/tarot-spread.ts

@@ -27,6 +27,11 @@ type TarotSpreadData =
  * Tarot spread card. Renders /tarot/spreads/{three-card,celtic-cross,love},
  * /tarot/yes-no, /tarot/draw responses.
  */
+/** "three card" -> "Three card". Spread names arrive lowercase from both the API and the attribute, and a heading should not. */
+function titleCase(v: string): string {
+	return v ? v.charAt(0).toUpperCase() + v.slice(1) : v;
+}
+
 @customElement('roxy-tarot-spread')
 export class RoxyTarotSpread extends RoxyDataElement<TarotSpreadData> {
 	static styles = [
@@ -203,10 +208,19 @@ export class RoxyTarotSpread extends RoxyDataElement<TarotSpreadData> {
 		const answer = isYesNo ? (d as CastYesNoResponse).answer : undefined;
 		const strength = isYesNo ? (d as CastYesNoResponse).strength : undefined;
 		const verdictCard = isYesNo ? (d as CastYesNoResponse).card : undefined;
-		const spreadLabel =
-			'spread' in d
-				? (d as CastThreeCardResponse).spread
-				: this.spread.replace(/-/g, ' ');
+		// Title from the RESPONSE SHAPE first, the attribute only as a last resort.
+		// The API sends `spread: null` on several casts, and a host that cannot set
+		// attributes (the WordPress plugin maps an operationId to a bare tag) always
+		// falls through to the property default, so a yes or no reading was headed
+		// "three card". Reading the shape means the heading is right either way.
+		const spreadLabel = isYesNo
+			? 'Yes or no'
+			: isDrawn
+				? 'Card draw'
+				: titleCase(
+						('spread' in d ? (d as CastThreeCardResponse).spread : '') ||
+							this.spread.replace(/-/g, ' '),
+					);
 		const question =
 			'question' in d ? (d as CastThreeCardResponse).question : undefined;
 		const summary =

packages/ui/tests/components.test.ts

@@ -2158,3 +2158,56 @@ describe('roxy-dasha-timeline heads correctly with no period attribute', () => {
 		el.remove();
 	});
 });
+
+/**
+ * Tarot spread heading. Same failure class as the dasha timeline: the label used
+ * to come from the `spread` ATTRIBUTE, whose default is `three-card`, so a host
+ * that cannot set attributes (the WordPress plugin) headed every reading "three
+ * card" including a yes or no cast. The API also sends `spread: null` on several
+ * casts, so the response field alone is not enough either.
+ */
+describe('roxy-tarot-spread titles itself from the response', () => {
+	async function mount(data: unknown) {
+		const el = document.createElement('roxy-tarot-spread') as HTMLElement & {
+			data?: unknown;
+		};
+		document.body.appendChild(el);
+		el.data = data;
+		await settled(el);
+		return el;
+	}
+	const title = (el: Element) =>
+		el.shadowRoot?.querySelector('.title')?.textContent?.trim() ?? '';
+
+	test('a yes or no cast is not headed "three card"', async () => {
+		const el = await mount({
+			question: 'Should I take the new job',
+			answer: 'Yes',
+			strength: 'Strong',
+			spread: null,
+			card: { name: 'The Star', orientation: 'upright' },
+		});
+		expect(title(el)).toBe('Yes or no');
+		el.remove();
+	});
+
+	test('a named spread is used and capitalised', async () => {
+		const el = await mount({
+			spread: 'celtic cross',
+			question: 'What about work',
+			positions: [{ position: 'Present', card: { name: 'The Star' } }],
+		});
+		expect(title(el)).toBe('Celtic cross');
+		el.remove();
+	});
+
+	test('a null spread falls back without rendering an empty heading', async () => {
+		const el = await mount({
+			spread: null,
+			question: 'What about work',
+			positions: [{ position: 'Present', card: { name: 'The Star' } }],
+		});
+		expect(title(el)).toBe('Three card');
+		el.remove();
+	});
+});