refactor(atomic): migrate atomic-insight-result-template to Lit

[Copilot]

✅ Checklist

• 🧪 The component is unit tested
• 🧪 The component includes E2E tests
• 🗑️ Old Cypress tests exclusive to the component are removed
• 📖 The component is documented in storybook with an .mdx file
• ♿ The component complies with the Web Content Accessibility Guidelines.
• 🌐 All strings intended for humans or assistive technology must be localized with i18n.
• 📦 The Lit component is exported in the appropriate index.ts and lazy-index.ts files.
• 🎨 CSS parts are documented still accessible.
• 🦥 Slotted Content, public methods and properties are documented
• 🔄 The component outputs the same Angular output as before with Stencil
• 🏷️ The component declares the component type in the HTMLElementTagNameMap

https://coveord.atlassian.net/browse/KIT-5345

[Copilot]

Pull request overview

This PR migrates the atomic-insight-result-template component from Stencil to Lit as part of the ongoing framework migration effort. The component determines the format of query results for Insight interfaces based on defined conditions.

Key Changes

• Migrated component implementation from Stencil (.tsx) to Lit (.ts) with proper decorators and lifecycle methods
• Added comprehensive unit tests using Vitest and E2E tests using Playwright
• Created Storybook documentation with stories and MDX file demonstrating usage in result lists and folded result lists

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.ts	New Lit component implementation replacing Stencil version
packages/atomic/src/components/insight/result-templates/atomic-insight-result-template/atomic-insight-result-template.tsx	Removed legacy Stencil implementation
packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.spec.ts	New unit tests for Lit component
packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.new.stories.tsx	Storybook stories demonstrating component usage
packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.mdx	Documentation with examples and template condition explanations
packages/atomic/src/components/insight/atomic-insight-result-template/e2e/atomic-insight-result-template.e2e.ts	E2E tests for key user scenarios
packages/atomic/src/components/insight/atomic-insight-result-template/e2e/page-object.ts	Page object model for E2E tests
packages/atomic/src/components/insight/atomic-insight-result-template/e2e/fixture.ts	Test fixture configuration
packages/atomic/src/components/insight/index.ts	Exports new Lit component
packages/atomic/src/components/insight/lazy-index.ts	Lazy loading configuration for new component
packages/atomic/src/utils/custom-element-tags.ts	Registers component tag name
packages/atomic/src/components.d.ts	Removes Stencil type definitions (now handled by Lit)
packages/atomic-react/src/components/search/components.ts	Adds React wrapper for search interface usage
packages/atomic-react/src/components/commerce/components.ts	Adds React wrapper for commerce interface usage

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The JSDoc comment uses inconsistent terminology. The property description says "result items" while the similar property in the search version (atomic-result-template) says just "results". For consistency across the codebase, this should say "results" instead of "result items".

[Copilot]

The JSDoc comment uses inconsistent terminology. The property description says "result items" while the similar property in the search version (atomic-result-template) says just "results". For consistency across the codebase, this should say "results" instead of "result items".

[Copilot]

The variable naming is inconsistent with the similar component atomic-result-template. In the search version, this is named validParent (singular), but here it's validParent in the variable but contains an array. For consistency with the search component, consider renaming to validParent if keeping singular, or updating to match the exact pattern used in atomic-result-template.ts line 62.

Suggested change

	const validParent = [
	'atomic-insight-result-list',
	'atomic-insight-folded-result-list',
	];
	const allowEmpty = true;
	this.resultTemplateController = new ResultTemplateController(
	this,
	validParent,
	const validParents = [
	'atomic-insight-result-list',
	'atomic-insight-folded-result-list',
	];
	const allowEmpty = true;
	this.resultTemplateController = new ResultTemplateController(
	this,
	validParents,

[Copilot]

The unnecessary ternary expression and optional chaining can be simplified. Since getTemplate already returns null when the controller returns null/undefined, the expression can be simplified to: return this.resultTemplateController.getTemplate(this.conditions);

Suggested change

	const template =
	this.resultTemplateController?.getTemplate(this.conditions) || null;
	return template;
	}
	return this.resultTemplateController.getTemplate(this.conditions);
	}

[Copilot]

The spy is not used after being created. The test creates a spy on ResultTemplateController.prototype.getTemplate and mocks it to return a fake template, then verifies the spy was called and the result matches. However, the spy should be cleaned up in an afterEach hook or at the end of the test to avoid affecting other tests. The mockRestore() call at line 109 handles this, but consider using a nested describe block with beforeEach/afterEach for better test isolation and consistency with testing guidelines.

Suggested change

	it('should call getTemplate on the controller', async () => {
	const titleConditions = (result: InsightResult) =>
	result.title === 'Coveo';
	const fakeTemplate = {
	conditions: [],
	content: document.createDocumentFragment(),
	priority: 1,
	};
	const spy = vi
	.spyOn(ResultTemplateController.prototype, 'getTemplate')
	.mockResolvedValue(fakeTemplate);
	const element = await setupElement({conditions: [titleConditions]});
	const result = await element.getTemplate();
	expect(spy).toHaveBeenCalledWith([titleConditions]);
	expect(result).toBe(fakeTemplate);
	spy.mockRestore();
	const fakeTemplate = {
	conditions: [],
	content: document.createDocumentFragment(),
	priority: 1,
	};
	let controllerGetTemplateSpy: ReturnType<typeof vi.spyOn>;
	beforeEach(() => {
	controllerGetTemplateSpy = vi
	.spyOn(ResultTemplateController.prototype, 'getTemplate')
	.mockResolvedValue(fakeTemplate);
	});
	afterEach(() => {
	controllerGetTemplateSpy.mockRestore();
	});
	it('should call getTemplate on the controller', async () => {
	const titleConditions = (result: InsightResult) =>
	result.title === 'Coveo';
	const element = await setupElement({conditions: [titleConditions]});
	const result = await element.getTemplate();
	expect(controllerGetTemplateSpy).toHaveBeenCalledWith([
	titleConditions,
	]);
	expect(result).toBe(fakeTemplate);

[Copilot]

The documentation uses inconsistent terminology. Throughout this file, "result items" is used (lines 16, 42, 50, 54, etc.), but the search component version uses "results" for consistency. The MDX documentation should use "results" instead of "result items" to maintain consistency with atomic-result-template documentation.