@salesforce/retail-react-app 1.0.0-preview.0

package/app/components/list-menu/index.jsx

@@ -0,0 +1,280 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React, {Fragment, useRef, forwardRef, useEffect, useState} from 'react'
+import PropTypes from 'prop-types'
+import {useIntl} from 'react-intl'
+import {Link as RouteLink} from 'react-router-dom'
+
+// Project Components
+import LinksList from '@salesforce/retail-react-app/app/components/links-list'
+
+// Components
+import {
+    Box,
+    Container,
+    SimpleGrid,
+    Fade,
+    Flex,
+    Stack,
+    Popover,
+    PopoverTrigger,
+    PopoverContent,
+    PopoverBody,
+    Center,
+    Spinner,
+
+    // Hooks
+    useTheme,
+    useDisclosure
+} from '@chakra-ui/react'
+import Link from '@salesforce/retail-react-app/app/components/link'
+// Others
+import {categoryUrlBuilder} from '@salesforce/retail-react-app/app/utils/url'
+import {ChevronDownIcon} from '@salesforce/retail-react-app/app/components/icons'
+
+const MAXIMUM_NUMBER_COLUMNS = 5
+
+const ChevronIconTrigger = forwardRef(function ChevronIconTrigger(props, ref) {
+    return (
+        <Box {...props} ref={ref}>
+            <ChevronDownIcon />
+        </Box>
+    )
+})
+
+const ListMenuTrigger = ({item, name, isOpen, onOpen, onClose, hasItems}) => {
+    const theme = useTheme()
+    const {baseStyle} = theme.components.ListMenu
+
+    const keyMap = {
+        Escape: () => onClose(),
+        Enter: () => onOpen()
+    }
+
+    return (
+        <Box {...baseStyle.listMenuTriggerContainer}>
+            <Link
+                as={RouteLink}
+                to={categoryUrlBuilder(item)}
+                onMouseOver={onOpen}
+                {...baseStyle.listMenuTriggerLink}
+                {...(hasItems ? {name: name + ' __'} : {name: name})}
+                {...(isOpen ? baseStyle.listMenuTriggerLinkActive : {})}
+            >
+                {name}
+            </Link>
+
+            <Link
+                as={RouteLink}
+                to={'#'}
+                onMouseOver={onOpen}
+                onKeyDown={(e) => {
+                    keyMap[e.key]?.(e)
+                }}
+                {...baseStyle.listMenuTriggerLinkIcon}
+            >
+                <PopoverTrigger>
+                    <Fade in={hasItems}>
+                        <ChevronIconTrigger {...baseStyle.selectedButtonIcon} />
+                    </Fade>
+                </PopoverTrigger>
+            </Link>
+        </Box>
+    )
+}
+ListMenuTrigger.propTypes = {
+    item: PropTypes.object,
+    name: PropTypes.string,
+    isOpen: PropTypes.bool,
+    onOpen: PropTypes.func,
+    onClose: PropTypes.func,
+    hasItems: PropTypes.bool
+}
+
+const ListMenuContent = ({maxColumns, items, itemsKey, onClose, initialFocusRef}) => {
+    const theme = useTheme()
+    const {baseStyle} = theme.components.ListMenu
+    const {locale} = useIntl()
+
+    return (
+        <PopoverContent data-testid="popover-menu" {...baseStyle.popoverContent}>
+            <PopoverBody>
+                <Container as={Stack} {...baseStyle.popoverContainer}>
+                    <SimpleGrid
+                        spacing={8}
+                        justifyContent={'left'}
+                        gridTemplateColumns={`repeat(${
+                            items.length > maxColumns ? maxColumns : items.length
+                        }, minmax(0, 21%))`}
+                        marginInlineStart={{lg: '68px', xl: '96px'}}
+                    >
+                        {items.map((item, index) => {
+                            const {id, name} = item
+                            const items = item[itemsKey]
+
+                            const heading = {
+                                href: categoryUrlBuilder(item, locale),
+                                text: name,
+                                styles: {
+                                    fontSize: 'md',
+                                    marginBottom: 2
+                                }
+                            }
+
+                            const links = items
+                                ? items.map((item) => {
+                                      const {name} = item
+                                      return {
+                                          href: categoryUrlBuilder(item, locale),
+                                          text: name,
+                                          styles: {
+                                              fontSize: 'md',
+                                              paddingTop: 3,
+                                              paddingBottom: 3
+                                          }
+                                      }
+                                  })
+                                : []
+                            return (
+                                <LinksList
+                                    key={id}
+                                    heading={heading}
+                                    links={links}
+                                    color={'gray.900'}
+                                    onLinkClick={onClose}
+                                    {...(index === 0 ? {headingLinkRef: initialFocusRef} : {})}
+                                />
+                            )
+                        })}
+                    </SimpleGrid>
+                </Container>
+            </PopoverBody>
+        </PopoverContent>
+    )
+}
+ListMenuContent.propTypes = {
+    items: PropTypes.array,
+    maxColumns: PropTypes.number,
+    onClose: PropTypes.func,
+    initialFocusRef: PropTypes.object,
+    itemsKey: PropTypes.string
+}
+
+const ListMenuPopover = ({items, item, name, itemsKey, maxColumns}) => {
+    const initialFocusRef = useRef()
+    const {isOpen, onClose, onOpen} = useDisclosure()
+    return (
+        <Box onMouseLeave={onClose}>
+            <Popover
+                isLazy
+                placement={'bottom-start'}
+                initialFocusRef={initialFocusRef}
+                onOpen={onOpen}
+                onClose={onClose}
+                isOpen={isOpen}
+                variant="fullWidth"
+            >
+                <Fragment>
+                    <ListMenuTrigger
+                        item={item}
+                        name={name}
+                        isOpen={isOpen}
+                        onOpen={onOpen}
+                        onClose={onClose}
+                        hasItems={!!items}
+                    />
+                    {items && (
+                        <ListMenuContent
+                            items={items}
+                            itemsKey={itemsKey}
+                            initialFocusRef={initialFocusRef}
+                            onClose={onClose}
+                            maxColumns={maxColumns}
+                        />
+                    )}
+                </Fragment>
+            </Popover>
+        </Box>
+    )
+}
+
+ListMenuPopover.propTypes = {
+    items: PropTypes.array,
+    item: PropTypes.object,
+    name: PropTypes.string,
+    maxColumns: PropTypes.number,
+    itemsKey: PropTypes.string
+}
+
+/**
+ * This is the navigation component used for desktop devices. Holds the site navigation,
+ * providing users with a way to access all product categories and other important pages.
+ * The submenus are open when the user moves the mouse over the trigger and for A11y when
+ * users use the keyboard Tab key to focus over the chevron icon and press Enter.
+ *
+ * @param maxColumns The maximum number of columns that we want to use per row inside the ListMenu.
+ * @param root
+ */
+const ListMenu = ({root, maxColumns = MAXIMUM_NUMBER_COLUMNS}) => {
+    const itemsKey = 'categories'
+    const theme = useTheme()
+    const {baseStyle} = theme.components.ListMenu
+    const [ariaBusy, setAriaBusy] = useState(true)
+
+    useEffect(() => {
+        setAriaBusy(false)
+    }, [])
+
+    return (
+        <nav
+            id="list-menu"
+            aria-label="main"
+            aria-live="polite"
+            aria-busy={ariaBusy}
+            aria-atomic="true"
+        >
+            <Flex {...baseStyle.container}>
+                {root?.[itemsKey] ? (
+                    <Stack direction={'row'} spacing={0} {...baseStyle.stackContainer}>
+                        {root?.[itemsKey]?.map?.((item) => {
+                            const {id, name} = item
+                            return (
+                                <Box key={id}>
+                                    <ListMenuPopover
+                                        key={id}
+                                        maxColumns={maxColumns}
+                                        item={item}
+                                        name={name}
+                                        items={item?.[itemsKey]}
+                                        itemsKey={itemsKey}
+                                    />
+                                </Box>
+                            )
+                        })}
+                    </Stack>
+                ) : (
+                    <Center p="2">
+                        <Spinner size="lg" />
+                    </Center>
+                )}
+            </Flex>
+        </nav>
+    )
+}
+
+ListMenu.displayName = 'ListMenu'
+
+ListMenu.propTypes = {
+    root: PropTypes.object,
+    /**
+     * The maximum number of columns that we want to use per row in the menu.
+     */
+    maxColumns: PropTypes.number
+}
+
+export default ListMenu

package/app/components/list-menu/index.test.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {screen} from '@testing-library/react'
+import ListMenu from '@salesforce/retail-react-app/app/components/list-menu/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {mockCategories} from '@salesforce/retail-react-app/app/mocks/mock-data'
+import userEvent from '@testing-library/user-event'
+
+describe('ListMenu', () => {
+    test('ListMenu renders without errors', async () => {
+        const user = userEvent.setup()
+        renderWithProviders(<ListMenu root={mockCategories.root} />)
+
+        const categoryTrigger = screen.getByText(/Mens/i)
+        await user.hover(categoryTrigger)
+        expect(categoryTrigger).toBeInTheDocument()
+        expect(screen.getByRole('navigation', {name: 'main'})).toBeInTheDocument()
+        const suit = screen.getByText(/suits/i)
+        expect(suit).toBeInTheDocument()
+    })
+    test('ListMenu renders Spinner without root categories', () => {
+        renderWithProviders(<ListMenu />, {
+            wrapperProps: {initialCategories: {}}
+        })
+
+        const spinner = document.querySelector('.chakra-spinner')
+
+        expect(spinner).toBeInTheDocument()
+    })
+})
+
+// Set up and clean up
+beforeEach(() => {
+    jest.resetModules()
+})
+afterEach(() => {
+    localStorage.clear()
+    jest.clearAllMocks()
+})

package/app/components/loading-spinner/index.jsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {Box, Spinner} from '@chakra-ui/react'
+import PropTypes from 'prop-types'
+
+const LoadingSpinner = ({wrapperStyles = {}, spinnerStyles = {}}) => {
+    return (
+        <Box
+            zIndex="overlay"
+            position="absolute"
+            top="0"
+            left="0"
+            right="0"
+            bottom="0"
+            background="whiteAlpha.800"
+            {...wrapperStyles}
+        >
+            <Spinner
+                data-testid="loading"
+                {...spinnerStyles}
+                position="absolute"
+                top="50%"
+                left="50%"
+                ml="-1.5em"
+                mt="-1.5em"
+                thickness="4px"
+                speed="0.65s"
+                emptyColor="gray.200"
+                color="blue.600"
+                size="xl"
+            />
+        </Box>
+    )
+}
+
+LoadingSpinner.propTypes = {
+    wrapperStyles: PropTypes.object,
+    spinnerStyles: PropTypes.object
+}
+
+export default LoadingSpinner

package/app/components/locale-selector/index.jsx

@@ -0,0 +1,124 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+// Components
+import {
+    Accordion,
+    AccordionButton,
+    AccordionItem,
+    AccordionPanel,
+    Box,
+    Text,
+
+    // Hooks
+    useStyleConfig
+} from '@chakra-ui/react'
+
+// Icons
+import {
+    CheckIcon,
+    ChevronDownIcon,
+    ChevronRightIcon,
+    FlagGBIcon,
+    FlagFRIcon,
+    FlagITIcon,
+    FlagCNIcon,
+    FlagJPIcon
+} from '@salesforce/retail-react-app/app/components/icons'
+
+import LocaleText from '@salesforce/retail-react-app/app/components/locale-text'
+
+// NOTE: If you want to have flags shown next to a selectable locale, update this
+// mapping object with the short code as the key for the desired icon.
+const flags = {
+    'en-GB': <FlagGBIcon />,
+    'fr-FR': <FlagFRIcon />,
+    'it-IT': <FlagITIcon />,
+    'zh-CN': <FlagCNIcon />,
+    'ja-JP': <FlagJPIcon />
+}
+
+/**
+ * The Locale Selector is a disclosure in the form of an accordion. It is
+ * populated with all the supported locales for the application allowing the
+ * user to change the current locale.
+ */
+const LocaleSelector = ({selectedLocale = '', locales = [], onSelect = () => {}, ...props}) => {
+    const styles = useStyleConfig('LocaleSelector')
+    return (
+        <Box className="sf-locale-selector">
+            <Accordion allowToggle={true} {...props}>
+                <AccordionItem border="none">
+                    {({isExpanded}) => (
+                        <>
+                            <AccordionButton {...styles.selectedButton}>
+                                {/* Replace default expanded/collapsed icons. */}
+                                {isExpanded ? (
+                                    <ChevronDownIcon {...styles.selectedButtonIcon} />
+                                ) : (
+                                    <ChevronRightIcon {...styles.selectedButtonIcon} />
+                                )}
+                                {/* Display flag icon if one exists */}
+                                {flags[selectedLocale]}
+                                <Text {...styles.selectedText}>
+                                    <LocaleText shortCode={selectedLocale} />
+                                </Text>
+                            </AccordionButton>
+                            <AccordionPanel>
+                                <Accordion allowToggle={true} {...styles.accordion}>
+                                    {locales.map((locale) => (
+                                        <AccordionItem border="none" key={locale}>
+                                            <AccordionButton
+                                                {...styles.optionButton}
+                                                onClick={() => onSelect(locale)}
+                                            >
+                                                {/* Display flag icon if one exists */}
+                                                {flags[locale]}
+
+                                                {/* Locale name */}
+                                                <Text {...styles.optionText}>
+                                                    <LocaleText shortCode={locale} />
+                                                </Text>
+
+                                                {/* Selection indicator */}
+                                                {selectedLocale === locale && (
+                                                    <CheckIcon {...styles.selectedIcon} />
+                                                )}
+                                            </AccordionButton>
+                                        </AccordionItem>
+                                    ))}
+                                </Accordion>
+                            </AccordionPanel>
+                        </>
+                    )}
+                </AccordionItem>
+            </Accordion>
+        </Box>
+    )
+}
+
+LocaleSelector.displayName = 'LocaleSelector'
+
+LocaleSelector.propTypes = {
+    /**
+     * A complete list of all the locales supported. This array must have content.
+     */
+    locales: PropTypes.arrayOf(PropTypes.string).isRequired,
+    /**
+     * The current locales shortcode.
+     */
+    selectedLocale: PropTypes.string.isRequired,
+    /**
+     * Function called when a locale is selected.
+     */
+    onSelect: PropTypes.func
+}
+
+export default LocaleSelector

package/app/components/locale-selector/index.test.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {fireEvent} from '@testing-library/react'
+import LocaleSelector from '@salesforce/retail-react-app/app/components/locale-selector/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+const supportedLocales = ['en-GB', 'fr-FR', 'it-IT', 'zh-CN', 'ja-JP']
+
+test('Renders LocaleSelector', () => {
+    renderWithProviders(<LocaleSelector selectedLocale="en-GB" locales={supportedLocales} />)
+    const accordion = document.querySelector('.chakra-accordion')
+    const selectedLocale = document.querySelector('button[aria-expanded="false"]')
+
+    expect(accordion).toBeInTheDocument()
+    expect(selectedLocale).toBeInTheDocument()
+})
+
+test('Renders LocaleSelector with event handlers', () => {
+    const onSelect = jest.fn()
+
+    renderWithProviders(
+        <LocaleSelector selectedLocale="fr-FR" locales={supportedLocales} onSelect={onSelect} />
+    )
+
+    const firstLocale = document.querySelector(
+        '.chakra-accordion .chakra-accordion button.chakra-accordion__button'
+    )
+
+    fireEvent.click(firstLocale)
+    expect(onSelect).toHaveBeenCalledTimes(1)
+    expect(onSelect).toHaveBeenCalledWith('en-GB')
+})

package/app/components/locale-text/index.jsx

@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import {defineMessages, useIntl} from 'react-intl'
+
+const LocaleText = ({shortCode}) => {
+    const intl = useIntl()
+    const message = LOCALE_MESSAGES[shortCode]
+
+    if (!message) {
+        console.error(
+            `No locale message found for "${shortCode}". Please update the list accordingly.`
+        )
+        return <>Unknown {shortCode}</>
+    }
+
+    return <>{intl.formatMessage(message)}</>
+}
+
+LocaleText.displayName = 'LocaleText'
+
+LocaleText.propTypes = {
+    /**
+     * The locale shortcode that you would like the localized text for.
+     */
+    shortCode: PropTypes.string.isRequired
+}
+
+export default LocaleText
+
+/**
+ *  Translations for names of the commonly-used locales.
+ *  `locale` parameter format for OCAPI and Commerce API: <language code>-<country code>
+ *  https://documentation.b2c.commercecloud.salesforce.com/DOC1/topic/com.demandware.dochelp/OCAPI/current/usage/Localization.html
+ */
+// TODO: do we want to localize this?
+const LOCALE_MESSAGES = defineMessages({
+    'ar-SA': {id: 'locale_text.message.ar-SA', defaultMessage: 'Arabic (Saudi Arabia)'},
+    'bn-BD': {id: 'locale_text.message.bn-BD', defaultMessage: 'Bangla (Bangladesh)'},
+    'bn-IN': {id: 'locale_text.message.bn-IN', defaultMessage: 'Bangla (India)'},
+    'cs-CZ': {id: 'locale_text.message.cs-CZ', defaultMessage: 'Czech (Czech Republic)'},
+    'da-DK': {id: 'locale_text.message.da-DK', defaultMessage: 'Danish (Denmark)'},
+    'de-AT': {id: 'locale_text.message.de-AT', defaultMessage: 'German (Austria)'},
+    'de-CH': {id: 'locale_text.message.de-CH', defaultMessage: 'German (Switzerland)'},
+    'de-DE': {id: 'locale_text.message.de-DE', defaultMessage: 'German (Germany)'},
+    'el-GR': {id: 'locale_text.message.el-GR', defaultMessage: 'Greek (Greece)'},
+    'en-AU': {id: 'locale_text.message.en-AU', defaultMessage: 'English (Australia)'},
+    'en-CA': {id: 'locale_text.message.en-CA', defaultMessage: 'English (Canada)'},
+    'en-GB': {id: 'locale_text.message.en-GB', defaultMessage: 'English (United Kingdom)'},
+    'en-IE': {id: 'locale_text.message.en-IE', defaultMessage: 'English (Ireland)'},
+    'en-IN': {id: 'locale_text.message.en-IN', defaultMessage: 'English (India)'},
+    'en-NZ': {id: 'locale_text.message.en-NZ', defaultMessage: 'English (New Zealand)'},
+    'en-US': {id: 'locale_text.message.en-US', defaultMessage: 'English (United States)'},
+    'en-ZA': {id: 'locale_text.message.en-ZA', defaultMessage: 'English (South Africa)'},
+    'es-AR': {id: 'locale_text.message.es-AR', defaultMessage: 'Spanish (Argentina)'},
+    'es-CL': {id: 'locale_text.message.es-CL', defaultMessage: 'Spanish (Chile)'},
+    'es-CO': {id: 'locale_text.message.es-CO', defaultMessage: 'Spanish (Columbia)'},
+    'es-ES': {id: 'locale_text.message.es-ES', defaultMessage: 'Spanish (Spain)'},
+    'es-MX': {id: 'locale_text.message.es-MX', defaultMessage: 'Spanish (Mexico)'},
+    'es-US': {id: 'locale_text.message.es-US', defaultMessage: 'Spanish (United States)'},
+    'fi-FI': {id: 'locale_text.message.fi-FI', defaultMessage: 'Finnish (Finland)'},
+    'fr-BE': {id: 'locale_text.message.fr-BE', defaultMessage: 'French (Belgium)'},
+    'fr-CA': {id: 'locale_text.message.fr-CA', defaultMessage: 'French (Canada)'},
+    'fr-CH': {id: 'locale_text.message.fr-CH', defaultMessage: 'French (Switzerland)'},
+    'fr-FR': {id: 'locale_text.message.fr-FR', defaultMessage: 'French (France)'},
+    'he-IL': {id: 'locale_text.message.he-IL', defaultMessage: 'Hebrew (Israel)'},
+    'hi-IN': {id: 'locale_text.message.hi-IN', defaultMessage: 'Hindi (India)'},
+    'hu-HU': {id: 'locale_text.message.hu-HU', defaultMessage: 'Hungarian (Hungary)'},
+    'id-ID': {id: 'locale_text.message.id-ID', defaultMessage: 'Indonesian (Indonesia)'},
+    'it-CH': {id: 'locale_text.message.it-CH', defaultMessage: 'Italian (Switzerland)'},
+    'it-IT': {id: 'locale_text.message.it-IT', defaultMessage: 'Italian (Italy)'},
+    'ja-JP': {id: 'locale_text.message.ja-JP', defaultMessage: 'Japanese (Japan)'},
+    'ko-KR': {id: 'locale_text.message.ko-KR', defaultMessage: 'Korean (Republic of Korea)'},
+    'nl-BE': {id: 'locale_text.message.nl-BE', defaultMessage: 'Dutch (Belgium)'},
+    'nl-NL': {id: 'locale_text.message.nl-NL', defaultMessage: 'Dutch (The Netherlands)'},
+    'no-NO': {id: 'locale_text.message.no-NO', defaultMessage: 'Norwegian (Norway)'},
+    'pl-PL': {id: 'locale_text.message.pl-PL', defaultMessage: 'Polish (Poland)'},
+    'pt-BR': {id: 'locale_text.message.pt-BR', defaultMessage: 'Portuguese (Brazil)'},
+    'pt-PT': {id: 'locale_text.message.pt-PT', defaultMessage: 'Portuguese (Portugal)'},
+    'ro-RO': {id: 'locale_text.message.ro-RO', defaultMessage: 'Romanian (Romania)'},
+    'ru-RU': {id: 'locale_text.message.ru-RU', defaultMessage: 'Russian (Russian Federation)'},
+    'sk-SK': {id: 'locale_text.message.sk-SK', defaultMessage: 'Slovak (Slovakia)'},
+    'sv-SE': {id: 'locale_text.message.sv-SE', defaultMessage: 'Swedish (Sweden)'},
+    'ta-IN': {id: 'locale_text.message.ta-IN', defaultMessage: 'Tamil (India)'},
+    'ta-LK': {id: 'locale_text.message.ta-LK', defaultMessage: 'Tamil (Sri Lanka)'},
+    'th-TH': {id: 'locale_text.message.th-TH', defaultMessage: 'Thai (Thailand)'},
+    'tr-TR': {id: 'locale_text.message.tr-TR', defaultMessage: 'Turkish (Turkey)'},
+    'zh-CN': {id: 'locale_text.message.zh-CN', defaultMessage: 'Chinese (China)'},
+    'zh-HK': {id: 'locale_text.message.zh-HK', defaultMessage: 'Chinese (Hong Kong)'},
+    'zh-TW': {id: 'locale_text.message.zh-TW', defaultMessage: 'Chinese (Taiwan)'}
+})

package/app/components/locale-text/index.test.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import LocaleText from '@salesforce/retail-react-app/app/components/locale-text/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+test('Renders LocaleText', () => {
+    renderWithProviders(
+        <div>
+            <LocaleText shortCode="en-GB" />
+        </div>
+    )
+    const el = document.querySelector('div')
+    expect(el.textContent).toBe('English (United Kingdom)')
+})
+
+test('Warns on missing shortCode message definition', () => {
+    jest.spyOn(console, 'error')
+
+    renderWithProviders(
+        <div>
+            <LocaleText shortCode="fa-KE" />
+        </div>
+    )
+
+    const el = document.querySelector('div')
+
+    expect(console.error.mock.calls[0][0]).toContain(
+        `No locale message found for "fa-KE". Please update the list accordingly.`
+    )
+    expect(el.textContent).toBe('Unknown fa-KE')
+})