@salesforcedevs/arch-components 1.20.17-alpha1 → 1.20.17-alpha11

package/src/modules/th/contextAdapter/__tests__/contextAdapter.test.ts

@@ -1,104 +0,0 @@
-import { ContextWireAdapter } from '../../../common/context';
-import {
-    ContextAdapter,
-    setDefaultValue,
-    setGlobalContext,
-    ContextAdapterValue,
-    ContextAdapterConfig,
-    ContextAdapterContext
-} from '../contextAdapter';
-
-import { html, renderIntoBody } from 'shared/testutils';
-
-describe('th-context-adapter', () => {
-    let setValue: jest.Mock<(value: string) => void>;
-    let adapter: ContextWireAdapter<
-        ContextAdapterValue,
-        ContextAdapterConfig,
-        ContextAdapterContext
-    >;
-    beforeEach(() => {
-        setValue = jest.fn();
-        adapter = new ContextAdapter(setValue);
-    });
-    describe('defaultValue', () => {
-        it('computes the default value', () => {
-            setDefaultValue(null!);
-            renderIntoBody(html` <meta name="csrf-token" content="TOKEN" /> `);
-            // @ts-ignore
-            window.locale = 'es';
-            adapter = new ContextAdapter(setValue);
-            expect(adapter.value).toEqual(
-                expect.objectContaining({ csrf: 'TOKEN' })
-            );
-        });
-        it('reuses the computed the default value', () => {
-            adapter.connect();
-            expect(adapter.value).toEqual(
-                expect.objectContaining({ csrf: 'TOKEN' })
-            );
-        });
-    });
-    describe('setSharedContext', () => {
-        beforeEach(() => {
-            setGlobalContext(null!);
-            setDefaultValue({ apiHost: process.env.API_HOST!, csrf: '' });
-        });
-        it('updates connected adapters when the shared context is set', () => {
-            setGlobalContext({ csrf: 'TOKEN-1' });
-            adapter.connect();
-            expect(setValue).toHaveBeenCalledWith(
-                expect.objectContaining({ csrf: 'TOKEN-1' })
-            );
-            setGlobalContext({ csrf: 'TOKEN-2' });
-            expect(setValue).toHaveBeenLastCalledWith(
-                expect.objectContaining({ csrf: 'TOKEN-2' })
-            );
-        });
-    });
-    describe('resolution', () => {
-        beforeEach(() => {
-            setGlobalContext(null!);
-            setDefaultValue({ apiHost: process.env.API_HOST!, csrf: '' });
-        });
-        it('uses the default value', () => {
-            setDefaultValue({ apiHost: process.env.API_HOST!, csrf: 'TOKEN' });
-            adapter = new ContextAdapter(setValue);
-            expect(adapter.value).toEqual(
-                expect.objectContaining({ csrf: 'TOKEN' })
-            );
-        });
-        it('uses the global context', () => {
-            setGlobalContext({ csrf: null });
-            expect(adapter.value).toEqual(
-                expect.objectContaining({ csrf: '' })
-            );
-        });
-        it('uses the local context', () => {
-            setGlobalContext({ csrf: 'CSRF' });
-            adapter.update({}, { csrf: 'CSRF-LOCAL' });
-            expect(adapter.value).toEqual(
-                expect.objectContaining({ csrf: 'CSRF-LOCAL' })
-            );
-        });
-        it('uses the adapter config', () => {
-            setGlobalContext({ csrf: 'CSRF' });
-            adapter.update({ csrf: 'adapter' }, { csrf: 'provider' });
-            expect(adapter.value).toEqual(
-                expect.objectContaining({ csrf: 'adapter' })
-            );
-        });
-    });
-    describe('connect', () => {
-        it('sets the value', () => {
-            adapter.connect();
-            expect(setValue).toHaveBeenCalled();
-        });
-    });
-    describe('update', () => {
-        it('sets the value', () => {
-            adapter.update({}, {});
-            expect(setValue).toHaveBeenCalled();
-        });
-    });
-});

package/src/modules/th/contextAdapter/contextAdapter.html

@@ -1 +0,0 @@
-<template></template>

package/src/modules/th/contextAdapter/contextAdapter.ts

@@ -1,49 +0,0 @@
-import { createContextAdapter } from 'common/context';
-
-type Nullable<T> = T | null;
-
-export type ContextAdapterValue = {
-    apiHost: string;
-    csrf: string;
-};
-
-export type ContextAdapterConfig = {
-    apiHost?: Nullable<string>;
-    csrf?: Nullable<string>;
-};
-
-export type ContextAdapterContext = {
-    apiHost?: Nullable<string>;
-    csrf?: Nullable<string>;
-};
-
-export const ContextAdapter = createContextAdapter<
-    ContextAdapterValue,
-    ContextAdapterConfig,
-    ContextAdapterContext
->(
-    () => ({
-        apiHost: getDefaultApiHost(),
-        csrf: getDefaultCsrf()
-    }),
-    {
-        apiHost: 'otional',
-        csrf: 'optional'
-    }
-);
-
-export const { setGlobalContext, setDefaultValue } = ContextAdapter;
-
-function getDefaultApiHost() {
-    return String(process.env.API_HOST);
-}
-
-function getDefaultCsrf() {
-    try {
-        return document
-            .querySelector('meta[name="csrf-token"]')!
-            .getAttribute('content')!;
-    } catch (error) {
-        return '';
-    }
-}

package/src/modules/th/favoriteButton/__tests__/favoriteButton.test.ts

@@ -1,56 +0,0 @@
-import fetchMock from 'jest-fetch-mock';
-
-import FavoriteButton from '../favoriteButton';
-import { $, nextTick, html, renderIntoBody } from 'shared/testutils';
-
-import * as mock from '../mocks';
-
-const elementName = 'th-favorite-button';
-
-customElements.define(elementName, FavoriteButton.CustomElementConstructor);
-
-describe(elementName, () => {
-    let urls = mock.requestUrls(String(process.env.API_HOST));
-
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    it('renders the favorite button', async () => {
-        const apiName = 'test-api-name';
-        const contentType = 'module';
-        const csrfToken = 'token';
-        const initialFavorited = true;
-
-        // Mock the fetch function directly since jest.setup.js overrides it
-        const mockFetch = global.fetch as jest.MockedFunction<typeof fetch>;
-        mockFetch.mockResolvedValueOnce({
-            ok: true,
-            json: () => Promise.resolve({}),
-            headers: new Headers({ 'Content-Type': 'application/json' })
-        } as Response);
-
-        const element = renderIntoBody(html`
-            <th-favorite-button
-                api-name=${apiName}
-                content-type=${contentType}
-                csrf-token=${csrfToken}
-                .initialFavorited=${initialFavorited}
-                .labels=${{ favorite: 'Favorite' }}
-            ></th-favorite-button>
-        `);
-
-        const handleFavorite = jest.fn();
-        element.addEventListener('favorite', handleFavorite);
-
-        $('tds-button-icon', element)[0].dispatchEvent(
-            new MouseEvent('click', { bubbles: true })
-        );
-
-        // Wait for the async operation to complete
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        await nextTick();
-
-        expect(handleFavorite).toHaveBeenCalled();
-    });
-});

package/src/modules/th/favoriteButton/favoriteButton.css

@@ -1,3 +0,0 @@
-.favorited {
-    color: var(--tds-color-ruby);
-}

package/src/modules/th/favoriteButton/favoriteButton.html

@@ -1,15 +0,0 @@
-<template>
-    <tds-button-icon
-        aria-label="pin"
-        variant={variant}
-        title={labels.favorite}
-        onclick={handleToggleFavorite}
-    >
-        <tds-icon
-            size="large"
-            symbol="custom1"
-            sprite="custom"
-            class={iconClass}
-        ></tds-icon>
-    </tds-button-icon>
-</template>

package/src/modules/th/favoriteButton/favoriteButton.stories.js

@@ -1,30 +0,0 @@
-import fetchMock from 'fetch-mock';
-import { html } from 'lit-html';
-
-import { mockResponse } from './mocks';
-
-export default {
-    title: 'th/th-favorite-button',
-    parameters: {
-        installMocks: () => {
-            fetchMock.mock(mockResponse, mockResponse);
-        },
-        modules: [
-            '/modules/th-favorite-button.js',
-            '/modules/tds-button-icon.js'
-        ]
-    }
-};
-
-export const Base = () => html`
-    <div style="max-width: 400px; padding: 2rem;">
-        <th-favorite-button
-            csrf-token="csrf"
-            api-name="bob_the_builder"
-            content-type="module"
-            .initial-favorited=${true}
-            .labels=${{ favorite: 'Favorite' }}
-        >
-        </th-favorite-button>
-    </div>
-`;

package/src/modules/th/favoriteButton/favoriteButton.ts

@@ -1,84 +0,0 @@
-import { api, track, LightningElement } from 'lwc';
-import { fetchJSON, postJSON, csrfHeader } from 'shared/fetch';
-
-export const API_PATH = '/users/favorites';
-
-type Variant = 'bare' | 'border-filled';
-
-function getUrl(path: string) {
-    return `${process.env.API_HOST}${path}`;
-}
-
-export default class extends LightningElement {
-    @api labels: { favorite: string } = undefined!;
-    @api apiName: string = undefined!;
-    @api contentType: string = undefined!;
-    @api csrfToken: string = undefined!;
-    @api variant: Variant = 'bare';
-    @api initialFavorited: boolean = false;
-
-    @track favoritedState: boolean = false;
-
-    get iconClass() {
-        return this.favoritedState ? 'favorited' : '';
-    }
-
-    handleToggleFavorite() {
-        this.favoritedState = !this.favoritedState;
-
-        const detail = {
-            apiName: this.apiName,
-            contentType: this.contentType,
-            favorited: this.favoritedState
-        };
-
-        const toggleFavoritePromise = this.favoritedState
-            ? this.favorite()
-            : this.unfavorite();
-
-        toggleFavoritePromise
-            .then(() => {
-                this.dispatchEvent(new CustomEvent('favorite', { detail }));
-            })
-            .catch(() => {
-                this.favoritedState = !this.favoritedState;
-            });
-    }
-
-    getFavoritePayload() {
-        const body = {
-            favorite: {
-                favoritable_api_name: this.apiName,
-                favoritable_type: this.contentType
-            }
-        };
-
-        const headers = {
-            ...csrfHeader(this.csrfToken),
-            'Content-Type': 'application/json; charset=utf-8'
-        };
-        const url = getUrl(API_PATH);
-
-        return { body, headers, url };
-    }
-
-    favorite = () => {
-        const { url, body, headers } = this.getFavoritePayload();
-
-        return postJSON(url, body, { headers });
-    };
-
-    unfavorite = () => {
-        const { url, body, headers } = this.getFavoritePayload();
-
-        return fetchJSON(url, {
-            method: 'DELETE',
-            body: JSON.stringify(body),
-            headers
-        });
-    };
-
-    connectedCallback() {
-        this.favoritedState = this.initialFavorited;
-    }
-}

package/src/modules/th/favoriteButton/mocks/index.ts

@@ -1,12 +0,0 @@
-const API_PATH = '/users/favorites';
-
-export function requestUrls(baseUrl: string = '') {
-    return {
-        favorites: `${baseUrl}${API_PATH}`
-    };
-}
-
-export function mockResponse(url: string) {
-    let urls = requestUrls();
-    if (url.includes(urls.favorites)) return JSON.stringify({});
-}

package/src/modules/th/search/__fixtures__/index.ts

@@ -1,14 +0,0 @@
-import { Config } from '../types';
-
-export const config: Config = {
-    coveo: {
-        locale: 'en',
-        querySuggestUrl: 'http://coveo.trailhead.dev.sh'
-    },
-    labels: {
-        placeholder: 'Search for modules, trails, and more...',
-        recentViewed: 'Recents',
-        recentFavorites: 'Favorites'
-    },
-    searchUrl: '/search'
-};

package/src/modules/th/search/__tests__/search.test.ts

@@ -1,233 +0,0 @@
-import fetchMock from 'jest-fetch-mock';
-import { querySelector, querySelectorAll } from 'kagekiri';
-import { html, renderIntoBodyAndWait, nextTick } from 'shared/testutils';
-
-import { setGlobalContext } from '../../contextAdapter/contextAdapter';
-
-import { default as Search } from '../search';
-
-import { config } from '../__fixtures__';
-import * as mock from '../mocks';
-
-// Set up API_HOST for tests
-process.env.API_HOST = 'https://www.trailhead.com';
-
-customElements.define('th-search', Search.CustomElementConstructor);
-
-let location = {};
-
-Object.defineProperty(window, 'location', {
-    get: () => location
-});
-
-// Mock window.location.replace to prevent navigation errors in tests
-Object.defineProperty(window.location, 'replace', {
-    value: jest.fn(),
-    writable: true
-});
-
-describe('th-search', () => {
-    let urls = mock.requestUrls(String(process.env.API_HOST));
-
-    beforeEach(() => {
-        window.location.href = '/';
-        window.location.search = '';
-        setGlobalContext({
-            csrf: 'crsf',
-            apiHost: process.env.API_HOST || 'https://www.trailhead.com'
-        });
-
-        // Mock fetch to return proper responses based on URL
-        global.fetch = jest.fn().mockImplementation((url: string) => {
-            // Return completions response for coveo API calls
-            if (
-                url.includes('coveo.trailhead.dev.sh') ||
-                url.includes('querySuggestUrl')
-            ) {
-                return Promise.resolve({
-                    ok: true,
-                    json: () =>
-                        Promise.resolve({
-                            completions: [
-                                {
-                                    expression: 'LWC',
-                                    score: 1,
-                                    highlighted: 'LWC',
-                                    executableConfidence: 1
-                                },
-                                {
-                                    expression: 'Visualforce Pages',
-                                    score: 1,
-                                    highlighted: 'Visualforce Pages',
-                                    executableConfidence: 1
-                                }
-                            ]
-                        }),
-                    headers: { get: () => 'application/json' }
-                });
-            }
-
-            // Default response for other API calls
-            return Promise.resolve({
-                ok: true,
-                json: () =>
-                    Promise.resolve({
-                        recents: [],
-                        token: 'mock-token'
-                    }),
-                headers: { get: () => 'application/json' }
-            });
-        });
-    });
-
-    afterEach(() => {
-        document.body.innerHTML = '';
-    });
-
-    it('renders and sets the default value', async () => {
-        const element = await renderIntoBodyAndWait(
-            html` <th-search .config=${config}></th-search> `,
-            'tds-search'
-        );
-        expect(element).toBeTruthy();
-        expect(querySelector('input', element)).toBeTruthy();
-    }, 10000);
-
-    it('loads recents when input is focused', async () => {
-        const element = await renderIntoBodyAndWait(
-            html` <th-search .config=${config}></th-search> `,
-            'tds-search'
-        );
-
-        const $input = querySelector('input', element);
-        expect($input).toBeTruthy();
-
-        // Focus should trigger recents API call
-        $input!.focus();
-        await new Promise((resolve) => setTimeout(resolve, 100));
-
-        // Check if recents section appears (may be null if no recents)
-        const recents = querySelector('[data-testid="recents"]', element);
-        const completions = querySelector(
-            '[data-testid="completions"]',
-            element
-        );
-
-        // Either recents or neither should be shown (not completions without input)
-        if (completions !== null) {
-            expect(completions).toBeNull();
-        }
-    }, 10000);
-
-    it('loads suggestions on input', async () => {
-        const element = await renderIntoBodyAndWait(
-            html` <th-search .config=${config}></th-search> `,
-            'tds-search'
-        );
-
-        const $input = querySelector('input', element) as HTMLInputElement;
-        expect($input).toBeTruthy();
-
-        $input.value = 'lwc';
-        $input.dispatchEvent(new InputEvent('input', { bubbles: true }));
-
-        // Wait for debounce and API call
-        await new Promise((resolve) => setTimeout(resolve, 500));
-
-        // Verify the component handles input
-        expect($input.value).toBe('lwc');
-    }, 10000);
-
-    it('submits search on Enter key', async () => {
-        const element = await renderIntoBodyAndWait(
-            html` <th-search .config=${config}></th-search> `,
-            'tds-search'
-        );
-
-        const $input = querySelector('input', element) as HTMLInputElement;
-        $input.value = 'lwc';
-        $input.dispatchEvent(new InputEvent('input', { bubbles: true }));
-
-        // Listen for the form submit or navigation event
-        let navigationTriggered = false;
-        const handler = () => {
-            navigationTriggered = true;
-        };
-        element.addEventListener('submit', handler);
-
-        $input.dispatchEvent(
-            new KeyboardEvent('keydown', {
-                bubbles: true,
-                cancelable: true,
-                key: 'Enter',
-                code: 'Enter'
-            })
-        );
-
-        // Wait a bit for the navigation to be processed
-        await new Promise((resolve) => setTimeout(resolve, 100));
-
-        // Check if navigation happened or just verify the input value is correct
-        if (window.location.href.includes('/search?keywords=lwc')) {
-            expect(window.location.href).toEqual('/search?keywords=lwc');
-        } else {
-            // Navigation might not work in test environment, verify input value instead
-            expect($input.value).toBe('lwc');
-        }
-    }, 10000);
-
-    it('handles suggestion click', async () => {
-        const element = await renderIntoBodyAndWait(
-            html` <th-search .config=${config}></th-search> `,
-            'tds-search'
-        );
-
-        const $input = querySelector('input', element) as HTMLInputElement;
-        $input.focus();
-        $input.value = 'visual';
-        $input.dispatchEvent(new InputEvent('input', { bubbles: true }));
-
-        // Wait for debounce and API call to complete
-        await new Promise((resolve) => setTimeout(resolve, 500));
-
-        const $tdsSearch = querySelector('tds-search', element);
-        const $options = querySelectorAll('[role="option"]', $tdsSearch!);
-
-        if ($options.length > 1) {
-            $options[1]!.dispatchEvent(
-                new MouseEvent('click', { bubbles: true })
-            );
-            await new Promise((resolve) => setTimeout(resolve, 100));
-            expect(window.location.href).toContain('/search?keywords=');
-        } else {
-            // If no options found, just verify input works
-            expect($input.value).toBe('visual');
-        }
-    }, 10000);
-
-    it('handles recent click', async () => {
-        const element = await renderIntoBodyAndWait(
-            html` <th-search .config=${config}></th-search> `,
-            'tds-search'
-        );
-
-        const $input = querySelector('input', element) as HTMLInputElement;
-        $input.focus();
-        await new Promise((resolve) => setTimeout(resolve, 200));
-
-        const $option = querySelector(
-            '[role="option"]',
-            querySelector('tds-search', element)!
-        );
-
-        if ($option) {
-            $option.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-            await new Promise((resolve) => setTimeout(resolve, 100));
-            // URL should change (exact URL depends on recents data)
-            expect(window.location.href).toBeTruthy();
-        } else {
-            // If no recent options, just verify component renders
-            expect(element).toBeTruthy();
-        }
-    }, 10000);
-});

package/src/modules/th/search/constants.ts

@@ -1,2 +0,0 @@
-export const RECENTS_PATH = '/users/recents';
-export const TOKEN_PATH = '/search/tokens';

package/src/modules/th/search/mocks/index.ts

@@ -1,30 +0,0 @@
-import { RECENTS_PATH, TOKEN_PATH } from '../constants';
-
-import * as responses from './responses';
-import * as fixtures from '../__fixtures__/index';
-
-export { responses };
-
-export function requestUrls(baseUrl: string = '') {
-    return {
-        recents: `${baseUrl}${RECENTS_PATH}`,
-        token: `${baseUrl}${TOKEN_PATH}`
-    };
-}
-
-export function shouldMockResponse(url: string) {
-    return mockResponse(url) !== undefined;
-}
-
-export function mockResponse(url: string) {
-    let urls = requestUrls();
-    if (url.includes(urls.recents)) {
-        return JSON.stringify(responses.recents);
-    }
-    if (url.includes(urls.token)) {
-        return JSON.stringify(responses.token);
-    }
-    if (url.includes(fixtures.config.coveo.querySuggestUrl)) {
-        return JSON.stringify(responses.completions);
-    }
-}