diff --git a/CHANGELOG.md b/CHANGELOG.md index 8803543d2..74f1eb9d1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ * Adding SessionContext * ApplicationBase updates * Adding SkipToLink + * Adding MainContainer ## Unreleased diff --git a/package.json b/package.json index a9b53ea04..7083e1e20 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "version": "1.35.0", "description": "A framework to support application development with Terra components", "engines": { - "node": ">=10" + "node": ">=10 <13" }, "repository": { "type": "git", @@ -104,7 +104,6 @@ "terra-slide-panel-manager": "^5.19.0", "terra-status-view": "^4.10.0", "terra-theme-context": "^1.0.0", - "terra-theme-provider": "^4.0.0", "terra-toolbar": "^1.20.0", "terra-visually-hidden-text": "^2.30.0", "uuid": "^3.0.0", diff --git a/src/application-container/ApplicationContainer.jsx b/src/application-container/ApplicationContainer.jsx index e822beccd..705d896a4 100644 --- a/src/application-container/ApplicationContainer.jsx +++ b/src/application-container/ApplicationContainer.jsx @@ -4,6 +4,7 @@ import classNames from 'classnames/bind'; import { NavigationPromptCheckpoint } from '../navigation-prompt'; import WindowManager from '../utils/window-manager'; +import ActiveMainProvider from '../main-container/private/ActiveMainProvider'; import ApplicationContainerErrorBoundary from './private/ApplicationContainerErrorBoundary'; import useSkipToLinks from './private/skip-to-links/useSkipToLinks'; @@ -63,9 +64,11 @@ const ApplicationContainer = ({
- - {children} - + + + {children} + +
diff --git a/src/application-container/index.js b/src/application-container/index.js index 3e305f44e..9a1443435 100644 --- a/src/application-container/index.js +++ b/src/application-container/index.js @@ -1,5 +1,4 @@ import ApplicationContainer from './ApplicationContainer'; -import useActiveMainPage from './useActiveMainPage'; import ApplicationContainerContext, { useApplicationContainer, contextShape as applicationContainerContextShape, @@ -11,7 +10,6 @@ import ApplicationConceptContext, { export default ApplicationContainer; export { - useActiveMainPage, ApplicationContainerContext, useApplicationContainer, applicationContainerContextShape, diff --git a/src/application-container/private/active-main-page/ActiveMainPageContext.jsx b/src/application-container/private/active-main-page/ActiveMainPageContext.jsx deleted file mode 100644 index 22deb18a3..000000000 --- a/src/application-container/private/active-main-page/ActiveMainPageContext.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import { createContext } from 'react'; -import PropTypes from 'prop-types'; - -const ActiveMainPageContext = createContext(); - -const contextShape = { - parentNavigationKeys: PropTypes.array, - pageKey: PropTypes.string, - pageLabel: PropTypes.string, - pageMetaData: PropTypes.object, -}; - -export default ActiveMainPageContext; -export { contextShape }; diff --git a/src/application-container/useActiveMainPage.jsx b/src/application-container/useActiveMainPage.jsx deleted file mode 100644 index 24c54f106..000000000 --- a/src/application-container/useActiveMainPage.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import ActiveMainPageContext from './private/active-main-page/ActiveMainPageContext'; - -const useActiveMainPage = () => { - const activeMainPage = React.useContext(ActiveMainPageContext); - - return activeMainPage; -}; - -export default useActiveMainPage; diff --git a/src/main-container/ActiveMainContext.jsx b/src/main-container/ActiveMainContext.jsx new file mode 100644 index 000000000..878dc7171 --- /dev/null +++ b/src/main-container/ActiveMainContext.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +/** + * The ActiveMainContext is used to communicate data related to the current + * active main content to the application. + */ +const ActiveMainContext = React.createContext({}); + +/** + * Hook to simplify consumption of the ActiveMainContext. + * @returns The ActiveMainContext value found at the consuming render location. + */ +const useActiveMain = () => React.useContext(ActiveMainContext); + +const contextShape = { + /** + * The string label describing the active main content to be used for display purposes. + */ + label: PropTypes.string, + /** + * A collection of data related to the active main content. + */ + metaData: PropTypes.object, +}; + +export default ActiveMainContext; +export { useActiveMain, contextShape }; diff --git a/src/main-container/MainContainer.jsx b/src/main-container/MainContainer.jsx new file mode 100644 index 000000000..311ff8509 --- /dev/null +++ b/src/main-container/MainContainer.jsx @@ -0,0 +1,105 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import classNamesBind from 'classnames/bind'; + +import { ApplicationIntlContext } from '../application-intl'; +import SkipToLink from '../application-container/private/skip-to-links/SkipToLink'; +import NavigationItemContext from '../navigation-item/NavigationItemContext'; + +import ActiveMainRegistrationContext from './private/ActiveMainRegistrationContext'; + +import styles from './MainContainer.module.scss'; + +const cx = classNamesBind.bind(styles); + +const propTypes = { + /** + * The elements to render within the main element. + */ + children: PropTypes.node, + /** + * A string label describing the content within the main element. This value + * will be applied to the element as a user-facing aria-label and should be + * translated, if necessary. It will also be provided to consumers of the + * ActiveMainContext when this element is active. + */ + label: PropTypes.string.isRequired, + /** + * An object containing meta data related to the main element. This data is + * provided to consumers of the ActiveMainContext to provide additional + * information regarding the active main content. + */ + metaData: PropTypes.object, + /** + * A function to be called when a ref has been assigned for the created + * `
` element. + */ + refCallback: PropTypes.func, +}; + +/** + * The MainContainer can be used to create a semantic `
` element for the + * application, within which the application's most important and dynamic + * content will reside. A SkipToLink will be registered automatically to ensure + * this content can be accessed quickly. + */ +const MainContainer = ({ + children, refCallback, label, metaData, ...otherProps +}) => { + const applicationIntl = React.useContext(ApplicationIntlContext); + const activeMainRegistration = React.useContext(ActiveMainRegistrationContext); + const navigationItem = React.useContext(NavigationItemContext); + + const mainElementRef = React.useRef(); + const unregisterActiveMainRef = React.useRef(); + + React.useEffect(() => { + unregisterActiveMainRef.current = activeMainRegistration.register({ + label, + metaData, + }); + }, [ + activeMainRegistration, + label, + metaData, + navigationItem.isActive, + navigationItem.navigationKeys, + ]); + + React.useEffect(() => () => { + // A separate effect is used to unregister the active main when it is + // unmounted to limit registration thrash on updates to props. + unregisterActiveMainRef.current(); + }, []); + + return ( +
{ + mainElementRef.current = mainRef; + + if (refCallback) { + refCallback(mainRef); + } + }} + {...otherProps} + > + { + mainElementRef.current.focus(); + }} + /> + {children} +
+ ); +}; + +MainContainer.propTypes = propTypes; + +export default MainContainer; diff --git a/src/main-container/MainContainer.module.scss b/src/main-container/MainContainer.module.scss new file mode 100644 index 000000000..326d756a5 --- /dev/null +++ b/src/main-container/MainContainer.module.scss @@ -0,0 +1,5 @@ +:local { + .main-container { + outline: none; + } +} diff --git a/src/main-container/index.js b/src/main-container/index.js new file mode 100644 index 000000000..2df8883bb --- /dev/null +++ b/src/main-container/index.js @@ -0,0 +1,8 @@ +import MainContainer from './MainContainer'; +import ActiveMainContext, { + useActiveMain, + contextShape as activeMainContextShape, +} from './ActiveMainContext'; + +export default MainContainer; +export { ActiveMainContext, useActiveMain, activeMainContextShape }; diff --git a/src/main-container/private/ActiveMainProvider.jsx b/src/main-container/private/ActiveMainProvider.jsx new file mode 100644 index 000000000..c9e81e778 --- /dev/null +++ b/src/main-container/private/ActiveMainProvider.jsx @@ -0,0 +1,106 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import uuidv4 from 'uuid/v4'; + +import NavigationItemContext from '../../navigation-item/NavigationItemContext'; + +import ActiveMainContext from '../ActiveMainContext'; +import ActiveMainRegistrationContext from './ActiveMainRegistrationContext'; + +const propTypes = { + children: PropTypes.node, +}; + +const ActiveMainProvider = ({ children }) => { + const navigationItem = React.useContext(NavigationItemContext); + const activeMainRegistration = React.useContext(ActiveMainRegistrationContext); + const unregisterActiveMainRef = React.useRef(); + + const [state, dispatch] = React.useReducer((currentState, action) => { + if (action.type === 'register') { + return { + registrationId: action.registrationId, + activeMain: { + label: action.label, + metaData: action.metaData, + }, + }; + } + + if (action.type === 'unregister') { + if (currentState.registrationId === action.registrationId) { + return { + registrationId: undefined, + activeMainPage: undefined, + }; + } + } + + return currentState; + }, { registrationId: undefined, activeMain: undefined }); + + React.useEffect(() => { + if (!activeMainRegistration) { + return; + } + + // If an ancestor provider exists, we need to forward the active main info + // if the provider exists in the active navigation branch. It is + // otherwise unregistered, if necessary, as we do not want potentially stale + // information living above this provider level. + if (navigationItem.isActive) { + unregisterActiveMainRef.current = activeMainRegistration.register(state.activeMain); + } else if (unregisterActiveMainRef.current) { + unregisterActiveMainRef.current(); + unregisterActiveMainRef.current = undefined; + } + }, [state.activeMain, navigationItem.isActive, activeMainRegistration]); + + React.useEffect(() => () => { + if (unregisterActiveMainRef.current) { + unregisterActiveMainRef.current(); + unregisterActiveMainRef.current = undefined; + } + }, []); + + const activeMainRegistrationContextValue = React.useMemo(() => ({ + register: (registrationData) => { + if (!registrationData) { + return undefined; + } + + const { label, metaData } = registrationData; + + // Multiple main sources can be writing to this single provider, and the + // order of their registrations is not guaranteed to be deterministic. + // So we assign an identifier to each registration and check it above + // prior to performing any unregistrations, ensuring that main elements + // can execute their unregistration logic as part of their lifecycle + // without worrying about damaging registration data from other sources. + const registrationId = uuidv4(); + + dispatch({ + type: 'register', + registrationId, + label, + metaData, + }); + + return () => { + dispatch({ type: 'unregister', registrationId }); + }; + }, + }), []); + + return ( + + + {children} + + + ); +}; + +ActiveMainProvider.propTypes = propTypes; + +export default ActiveMainProvider; diff --git a/src/main-container/private/ActiveMainRegistrationContext.jsx b/src/main-container/private/ActiveMainRegistrationContext.jsx new file mode 100644 index 000000000..24b74df79 --- /dev/null +++ b/src/main-container/private/ActiveMainRegistrationContext.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +/** + * A private Context used to enable communication between the + * ActiveMainPageProvider and the MainContainer. + */ +const ActiveMainPageRegistrationContext = React.createContext(); + +const contextShape = { + /** + * A function used to register page data. + * Returns a function that will undo the registration. + */ + register: PropTypes.func, +}; + +export default ActiveMainPageRegistrationContext; +export { contextShape }; diff --git a/src/navigation-item/NavigationItem.jsx b/src/navigation-item/NavigationItem.jsx index 0cdb02e9d..f1c7cc08f 100644 --- a/src/navigation-item/NavigationItem.jsx +++ b/src/navigation-item/NavigationItem.jsx @@ -2,6 +2,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; +import ActiveMainProvider from '../main-container/private/ActiveMainProvider'; + import NavigationItemContext from './NavigationItemContext'; const propTypes = { @@ -77,7 +79,9 @@ const NavigationItem = ({ return ReactDOM.createPortal(( - {pageContent} + + {pageContent} + ), portalElement); }; diff --git a/src/terra-dev-site/test/main-container/MainContainerNavigation.test.jsx b/src/terra-dev-site/test/main-container/MainContainerNavigation.test.jsx new file mode 100644 index 000000000..233c4c3b3 --- /dev/null +++ b/src/terra-dev-site/test/main-container/MainContainerNavigation.test.jsx @@ -0,0 +1,118 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import ApplicationBase from '../../../application-base'; +import ApplicationContainer from '../../../application-container'; +import MainContainer, { useActiveMain } from '../../../main-container'; +import PrimaryNavigationLayout, { NavigationItem } from '../../../primary-navigation-layout'; + +const ActiveMainConsumer = ({ label }) => { + const activeMain = useActiveMain(); + + if (!activeMain) { + return

No Active Main

; + } + + return ( +
+ {label ?

{label}

: undefined} +

+ Active Main Label: + {' '} + {activeMain.label} +

+

+ Active Main Metadata: + {' '} + {JSON.stringify(activeMain.metaData)} +

+
+ ); +}; + +ActiveMainConsumer.propTypes = { + label: PropTypes.string, +}; + +const MainContainerNavigation = () => { + const [ + activeNavigationItemKey, + setActiveNavigationItemKey, + ] = React.useState('1'); + + return ( + + +
+

Active Main At Root

+ +
+ { setActiveNavigationItemKey(key); }} + userConfig={{ + name: 'Demo User', + detail: 'demouser', + }} + > + + +

Nav 1 - Main Content

+ + + + + + +

Nav 2 - Main Content

+ + + + + + +

Nav 3 - Main Content

+ + + + + +

Nav 4 - No Main

+ + + + + + + ); +}; + +export default MainContainerNavigation; diff --git a/src/terra-dev-site/test/main-container/MainContainerSimple.test.jsx b/src/terra-dev-site/test/main-container/MainContainerSimple.test.jsx new file mode 100644 index 000000000..d0a286b91 --- /dev/null +++ b/src/terra-dev-site/test/main-container/MainContainerSimple.test.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import ApplicationBase from '../../../application-base'; +import ApplicationContainer from '../../../application-container'; +import MainContainer, { useActiveMain } from '../../../main-container'; + +const ActiveMainConsumer = ({ label }) => { + const activeMain = useActiveMain(); + + if (!activeMain) { + return

No Active Main

; + } + + return ( +
+ {label ?

{label}

: undefined} +

+ Active Main Label: + {' '} + {activeMain.label} +

+

+ Active Main Metadata: + {' '} + {JSON.stringify(activeMain.metaData)} +

+
+ ); +}; + +ActiveMainConsumer.propTypes = { + label: PropTypes.string, +}; + +const MainContainerSimple = () => ( + + + +

Main Content

+ + + + + +); + +export default MainContainerSimple; diff --git a/src/terra-dev-site/test/workspace/MockContent.jsx b/src/terra-dev-site/test/workspace/MockContent.jsx index 1fbc41987..161f28017 100644 --- a/src/terra-dev-site/test/workspace/MockContent.jsx +++ b/src/terra-dev-site/test/workspace/MockContent.jsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames/bind'; -import { useActiveMainPage } from '../../../application-container'; +import { useActiveMain } from '../../../main-container'; import NotificationBanner from '../../../notification-banner/NotificationBanner'; import styles from './TestStyles.module.scss'; @@ -18,7 +18,7 @@ const propTypes = { const MockContent = ({ initialCount = 0, title = '', onShowActivityOverlay, onShowStatusOverlay, }) => { - const activeMainPage = useActiveMainPage(); + const activeMain = useActiveMain(); const [clickCount, setClickCount] = useState(initialCount); const [showAlertBanner, setShowAlertBanner] = useState(false); @@ -87,19 +87,14 @@ const MockContent = ({

{`${title}'s Click Counter: ${clickCount}`}

- Active Main Page Key: + Active Main Label: {' '} - {activeMainPage?.pageKey} + {activeMain?.label}

- Active Main Page Label: + Active Main MetaData: {' '} - {activeMainPage?.pageLabel} -

-

- Active Main Page MetaData: - {' '} - {`${JSON.stringify(activeMainPage?.pageMetaData)}`} + {`${JSON.stringify(activeMain?.metaData)}`}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet lacus cursus massa ullamcorper scelerisque. Aenean vitae posuere neque, consequat dapibus diam. Proin convallis venenatis magna, sit amet volutpat erat. Nulla sodales eu est sit amet sagittis. Suspendisse lacinia diam ut justo venenatis, a sollicitudin ante venenatis. Vivamus a leo ullamcorper, tristique diam id, vestibulum felis. Nullam mattis eget eros vestibulum porttitor. Duis eget massa nec urna ultrices laoreet. Aenean rhoncus mauris in luctus blandit. Morbi tempor enim a libero placerat, at bibendum elit luctus. In in tempor neque, laoreet facilisis quam. Fusce faucibus dui eget erat gravida egestas. Nullam laoreet purus eget urna placerat, sit amet ultrices mi tristique. Sed vulputate gravida risus, vehicula rhoncus ipsum tempus id. Phasellus aliquet nec mi non pretium. Maecenas turpis nulla, mollis et rhoncus vel, porttitor id nisl. diff --git a/src/terra-dev-site/test/workspace/OverlayWorkspace.test.jsx b/src/terra-dev-site/test/workspace/OverlayWorkspace.test.jsx index dfcf44030..16ad1f7c5 100644 --- a/src/terra-dev-site/test/workspace/OverlayWorkspace.test.jsx +++ b/src/terra-dev-site/test/workspace/OverlayWorkspace.test.jsx @@ -1,7 +1,7 @@ import React from 'react'; import ApplicationBase from '../../../application-base'; import Workspace, { WorkspaceItem } from '../../../workspace'; -import ActiveMainPageContext from '../../../application-container/private/active-main-page/ActiveMainPageContext'; +import ActiveMainContext from '../../../main-container/ActiveMainContext'; import Tab1 from './Tab1'; import Tab2 from './Tab2'; import Tab3 from './Tab3'; @@ -19,9 +19,9 @@ const WorkspaceTest = () => { const [activeItemKey, setActiveItemKey] = React.useState('tab-1'); const [workspaceSize, setWorkspaceSize] = React.useState('large'); const activeMainPageRef = React.useRef({ - pageKey: 'page-1', - pageLabel: 'Test Page', - pageMetaData: { + id: 'page-1', + label: 'Test Page', + metaData: { data: 'data here', }, }); @@ -36,7 +36,7 @@ const WorkspaceTest = () => { return ( - +

@@ -92,7 +92,7 @@ const WorkspaceTest = () => { />
- + ); }; diff --git a/src/terra-dev-site/test/workspace/Workspace.test.jsx b/src/terra-dev-site/test/workspace/Workspace.test.jsx index 4af07a411..6f75b7e09 100644 --- a/src/terra-dev-site/test/workspace/Workspace.test.jsx +++ b/src/terra-dev-site/test/workspace/Workspace.test.jsx @@ -1,7 +1,7 @@ import React from 'react'; import ApplicationBase from '../../../application-base'; import Workspace, { WorkspaceItem } from '../../../workspace'; -import ActiveMainPageContext from '../../../application-container/private/active-main-page/ActiveMainPageContext'; +import ActiveMainContext from '../../../main-container/ActiveMainContext'; import Tab1 from './Tab1'; import Tab2 from './Tab2'; import Tab3 from './Tab3'; @@ -19,9 +19,8 @@ const WorkspaceTest = () => { const [activeItemKey, setActiveItemKey] = React.useState('tab-1'); const [workspaceSize, setWorkspaceSize] = React.useState('large'); const activeMainPageRef = React.useRef({ - pageKey: 'page-1', - pageLabel: 'Test Page', - pageMetaData: { + label: 'Test Page', + metaData: { data: 'data here', }, }); @@ -36,7 +35,7 @@ const WorkspaceTest = () => { return ( - +
@@ -90,7 +89,7 @@ const WorkspaceTest = () => { />
- + ); }; diff --git a/tests/jest/application-container/useActiveMainPage.test.jsx b/tests/jest/application-container/useActiveMainPage.test.jsx deleted file mode 100644 index a024de811..000000000 --- a/tests/jest/application-container/useActiveMainPage.test.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { renderHook } from '@testing-library/react-hooks/dom'; -import '@testing-library/jest-dom/extend-expect'; - -import { useActiveMainPage } from '../../../src/application-container'; -import ActiveMainPageContext from '../../../src/application-container/private/active-main-page/ActiveMainPageContext'; - -describe('useActiveMainPage', () => { - test('should return ActiveMainPageContext value', () => { - const testValue = { test: 'data' }; - const wrapper = ({ children }) => ( // eslint-disable-line react/prop-types - {children} - ); - const { result } = renderHook(() => useActiveMainPage(), { wrapper }); - - expect(result.current).toBe(testValue); - }); -}); diff --git a/tests/jest/main-container/ActiveMainContext.test.jsx b/tests/jest/main-container/ActiveMainContext.test.jsx new file mode 100644 index 000000000..f6a225f13 --- /dev/null +++ b/tests/jest/main-container/ActiveMainContext.test.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { renderHook } from '@testing-library/react-hooks/dom'; +import '@testing-library/jest-dom/extend-expect'; + +import ActiveMainContext, { useActiveMain, contextShape } from '../../../src/main-container/ActiveMainContext'; + +describe('ActiveMainContext', () => { + test('should export ActiveMainContext', () => { + expect(ActiveMainContext).toBeDefined(); + }); +}); + +describe('useActiveMain', () => { + test('should return ActiveMainContext value', () => { + const testValue = { test: 'data' }; + const wrapper = ({ children }) => ( // eslint-disable-line react/prop-types + {children} + ); + const { result } = renderHook(() => useActiveMain(), { wrapper }); + + expect(result.current).toBe(testValue); + }); +}); + +describe('contextShape', () => { + test('should export contextShape', () => { + expect(contextShape).toBeDefined(); + expect(contextShape.label).toBe(PropTypes.string); + expect(contextShape.metaData).toBe(PropTypes.object); + }); +}); diff --git a/tests/jest/main-container/ActiveMainProvider.test.jsx b/tests/jest/main-container/ActiveMainProvider.test.jsx new file mode 100644 index 000000000..9053955f4 --- /dev/null +++ b/tests/jest/main-container/ActiveMainProvider.test.jsx @@ -0,0 +1,180 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { render, screen, waitFor } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; + +import ApplicationContainer from '../../../src/application-container/ApplicationContainer'; +import ActiveMainRegistrationContext from '../../../src/main-container/private/ActiveMainRegistrationContext'; +import PrimaryNavigationLayout from '../../../src/primary-navigation-layout/PrimaryNavigationLayout'; +import NavigationItem from '../../../src/navigation-item/NavigationItem'; +import { useActiveMain } from '../../../src/main-container/ActiveMainContext'; +import MockApplication from '../MockApplication'; + +const MockMainContainer = ({ label, metaData }) => { + const registration = React.useContext(ActiveMainRegistrationContext); + const unregisterRef = React.useRef(); + + React.useLayoutEffect(() => { + unregisterRef.current = registration.register({ label, metaData }); + }, [registration, label, metaData]); + + React.useEffect(() => () => { + unregisterRef.current(); + }, []); + + return
; +}; + +MockMainContainer.propTypes = { + label: PropTypes.string, + metaData: PropTypes.object, +}; + +const ActiveMainConsumer = () => { + const activeMain = useActiveMain(); + + if (!activeMain) { + return
; + } + + return ( +
+
+ {activeMain.metaData ?
: undefined} +
+ ); +}; + +test('provides active main registration context', async () => { + const view = render(( + + + + + + + )); + + // expect label to be present + await waitFor(() => expect(screen.queryByTestId('label-test-main')).toBeInTheDocument()); + + view.rerender(( + + + + + + + )); + + // expect new label and metaData to be present + await waitFor(() => expect(screen.queryByTestId('label-test-main-2')).toBeInTheDocument()); + await waitFor(() => expect(screen.queryByTestId('meta-test-value-2')).toBeInTheDocument()); + + view.rerender(( + + + + + + + )); + + // expect re-mountings to execute cleanup without error + await waitFor(() => expect(screen.queryByTestId('label-test-main-3')).toBeInTheDocument()); + await waitFor(() => expect(screen.queryByTestId('meta-test-value-3')).toBeInTheDocument()); + + view.rerender(( + + + + + + )); + + // Expect removals to be cleaned up without error + await waitFor(() => expect(screen.queryByTestId('no-main')).toBeInTheDocument()); +}); + +test('supports nested providers within navigation items', async () => { + const view = render(( + + + + + + + + + + + + + + + )); + + await waitFor(() => expect(screen.queryByTestId('label-test-main-1')).toBeInTheDocument()); + + view.rerender(( + + + + + + + + + + + + + + + )); + + // expect active main to change on navigation + await waitFor(() => expect(screen.queryByTestId('label-test-main-2')).toBeInTheDocument()); + + view.rerender(( + + + + + + + + + + + + + + + )); + + // expect returning to previous mains triggers activation logic + await waitFor(() => expect(screen.queryByTestId('label-test-main-1')).toBeInTheDocument()); +}); diff --git a/tests/jest/main-container/MainContainer.test.jsx b/tests/jest/main-container/MainContainer.test.jsx new file mode 100644 index 000000000..690246b4c --- /dev/null +++ b/tests/jest/main-container/MainContainer.test.jsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom/extend-expect'; + +import MainContainer from '../../../src/main-container/MainContainer'; +import ApplicationContainer from '../../../src/application-container/ApplicationContainer'; +import MockApplication from '../MockApplication'; + +const TestMainContainer = (props) => ( + + + + + +); + +test('renders main element', () => { + render(( + +
+ + )); + + expect(screen.queryByRole('main', { name: 'Test Main Container' })).toBeInTheDocument(); + expect(screen.queryByTestId('test-child')).toBeInTheDocument(); +}); + +test('renders main with custom class and attributes', () => { + render(( + + )); + + expect(screen.queryByRole('main', { name: 'Test Main Container' })).toHaveAttribute('data-testid', 'test-id'); + expect(screen.queryByRole('main', { name: 'Test Main Container' })).toHaveClass('test-class'); +}); + +test('renders with refCallback', () => { + const refCallback = jest.fn(); + render(( + + )); + + expect(refCallback).toHaveBeenCalledWith(expect.any(Object)); +}); + +test('renders SkipToLink', async () => { + let mainRef; + render(( + { mainRef = ref; }} /> + )); + + const skipToLinks = screen.queryAllByRole('link', { name: 'terraApplication.skipToLink.prefix' }); + + skipToLinks[0].focus(); + userEvent.click(skipToLinks[0]); + await waitFor(() => expect(mainRef).toHaveFocus()); +}); diff --git a/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-navigation-spec/1__rendering_with_active_main_as_nav_1.png b/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-navigation-spec/1__rendering_with_active_main_as_nav_1.png new file mode 100644 index 000000000..19af7210d Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-navigation-spec/1__rendering_with_active_main_as_nav_1.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-navigation-spec/2__rendering_with_active_main_as_nav_2.png b/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-navigation-spec/2__rendering_with_active_main_as_nav_2.png new file mode 100644 index 000000000..4944a6d28 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-navigation-spec/2__rendering_with_active_main_as_nav_2.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-navigation-spec/3__rendering_with_active_main_as_nav_3.png b/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-navigation-spec/3__rendering_with_active_main_as_nav_3.png new file mode 100644 index 000000000..eb2df1bdf Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-navigation-spec/3__rendering_with_active_main_as_nav_3.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-navigation-spec/4__rendering_without_active_main_for_nav_4.png b/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-navigation-spec/4__rendering_without_active_main_for_nav_4.png new file mode 100644 index 000000000..a5091d7b9 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-navigation-spec/4__rendering_without_active_main_for_nav_4.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-simple-spec/1__rendering_with_active_main_data.png b/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-simple-spec/1__rendering_with_active_main_data.png new file mode 100644 index 000000000..582dd4854 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-simple-spec/1__rendering_with_active_main_data.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-simple-spec/2__rendering_SkipToLink_for_main.png b/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-simple-spec/2__rendering_SkipToLink_for_main.png new file mode 100644 index 000000000..334c69e99 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/main-container-simple-spec/2__rendering_SkipToLink_for_main.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-navigation-spec/1__rendering_with_active_main_as_nav_1.png b/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-navigation-spec/1__rendering_with_active_main_as_nav_1.png new file mode 100644 index 000000000..b9fd380a6 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-navigation-spec/1__rendering_with_active_main_as_nav_1.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-navigation-spec/2__rendering_with_active_main_as_nav_2.png b/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-navigation-spec/2__rendering_with_active_main_as_nav_2.png new file mode 100644 index 000000000..3edd767c8 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-navigation-spec/2__rendering_with_active_main_as_nav_2.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-navigation-spec/3__rendering_with_active_main_as_nav_3.png b/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-navigation-spec/3__rendering_with_active_main_as_nav_3.png new file mode 100644 index 000000000..0563adc92 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-navigation-spec/3__rendering_with_active_main_as_nav_3.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-navigation-spec/4__rendering_without_active_main_for_nav_4.png b/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-navigation-spec/4__rendering_without_active_main_for_nav_4.png new file mode 100644 index 000000000..2b0bf6901 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-navigation-spec/4__rendering_without_active_main_for_nav_4.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-simple-spec/1__rendering_with_active_main_data.png b/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-simple-spec/1__rendering_with_active_main_data.png new file mode 100644 index 000000000..3fc908925 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-simple-spec/1__rendering_with_active_main_data.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-simple-spec/2__rendering_SkipToLink_for_main.png b/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-simple-spec/2__rendering_SkipToLink_for_main.png new file mode 100644 index 000000000..bcdb836e9 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/orion-fusion-theme/en/chrome_large/main-container-simple-spec/2__rendering_SkipToLink_for_main.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-navigation-spec/1__rendering_with_active_main_as_nav_1.png b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-navigation-spec/1__rendering_with_active_main_as_nav_1.png new file mode 100644 index 000000000..0accb0132 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-navigation-spec/1__rendering_with_active_main_as_nav_1.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-navigation-spec/2__rendering_with_active_main_as_nav_2.png b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-navigation-spec/2__rendering_with_active_main_as_nav_2.png new file mode 100644 index 000000000..6ef238938 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-navigation-spec/2__rendering_with_active_main_as_nav_2.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-navigation-spec/3__rendering_with_active_main_as_nav_3.png b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-navigation-spec/3__rendering_with_active_main_as_nav_3.png new file mode 100644 index 000000000..26f085bc9 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-navigation-spec/3__rendering_with_active_main_as_nav_3.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-navigation-spec/4__rendering_without_active_main_for_nav_4.png b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-navigation-spec/4__rendering_without_active_main_for_nav_4.png new file mode 100644 index 000000000..477037976 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-navigation-spec/4__rendering_without_active_main_for_nav_4.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-simple-spec/1__rendering_with_active_main_data.png b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-simple-spec/1__rendering_with_active_main_data.png new file mode 100644 index 000000000..cadae4ee0 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-simple-spec/1__rendering_with_active_main_data.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-simple-spec/2__rendering_SkipToLink_for_main.png b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-simple-spec/2__rendering_SkipToLink_for_main.png new file mode 100644 index 000000000..fe0995e16 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/de/chrome_large/main-container-simple-spec/2__rendering_SkipToLink_for_main.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-navigation-spec/1__rendering_with_active_main_as_nav_1.png b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-navigation-spec/1__rendering_with_active_main_as_nav_1.png new file mode 100644 index 000000000..0accb0132 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-navigation-spec/1__rendering_with_active_main_as_nav_1.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-navigation-spec/2__rendering_with_active_main_as_nav_2.png b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-navigation-spec/2__rendering_with_active_main_as_nav_2.png new file mode 100644 index 000000000..6ef238938 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-navigation-spec/2__rendering_with_active_main_as_nav_2.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-navigation-spec/3__rendering_with_active_main_as_nav_3.png b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-navigation-spec/3__rendering_with_active_main_as_nav_3.png new file mode 100644 index 000000000..26f085bc9 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-navigation-spec/3__rendering_with_active_main_as_nav_3.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-navigation-spec/4__rendering_without_active_main_for_nav_4.png b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-navigation-spec/4__rendering_without_active_main_for_nav_4.png new file mode 100644 index 000000000..44549f250 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-navigation-spec/4__rendering_without_active_main_for_nav_4.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-simple-spec/1__rendering_with_active_main_data.png b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-simple-spec/1__rendering_with_active_main_data.png new file mode 100644 index 000000000..cadae4ee0 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-simple-spec/1__rendering_with_active_main_data.png differ diff --git a/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-simple-spec/2__rendering_SkipToLink_for_main.png b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-simple-spec/2__rendering_SkipToLink_for_main.png new file mode 100644 index 000000000..fe0995e16 Binary files /dev/null and b/tests/wdio/main-container/__snapshots__/reference/terra-default-theme/en/chrome_large/main-container-simple-spec/2__rendering_SkipToLink_for_main.png differ diff --git a/tests/wdio/main-container/main-container-navigation-spec.js b/tests/wdio/main-container/main-container-navigation-spec.js new file mode 100644 index 000000000..052bae01d --- /dev/null +++ b/tests/wdio/main-container/main-container-navigation-spec.js @@ -0,0 +1,27 @@ +const selector = '#root'; + +Terra.describeViewports('MainContainer - Navigation Integration', ['large'], () => { + before(() => { + browser.url('#/main-container/navigation'); + }); + + it('renders with active main as nav 1', () => { + Terra.validates.element('1. rendering with active main as nav 1', { selector }); + }); + + it('renders with active main as nav 2', () => { + $('#main-container-navigation-integration-NavigationItem-2').click(); + Terra.validates.element('2. rendering with active main as nav 2', { selector }); + }); + + it('renders with active main as nav 3', () => { + $('#main-container-navigation-integration-NavigationItem-3').click(); + Terra.validates.element('3. rendering with active main as nav 3', { selector }); + }); + + it('renders no active main with nav 4', () => { + // Nav 4 does not use the MainContainer + $('#main-container-navigation-integration-NavigationItem-4').click(); + Terra.validates.element('4. rendering without active main for nav 4', { selector }); + }); +}); diff --git a/tests/wdio/main-container/main-container-simple-spec.js b/tests/wdio/main-container/main-container-simple-spec.js new file mode 100644 index 000000000..2b53c5966 --- /dev/null +++ b/tests/wdio/main-container/main-container-simple-spec.js @@ -0,0 +1,16 @@ +const selector = '#root'; + +Terra.describeViewports('MainContainer - Simple Configuration', ['large'], () => { + before(() => { + browser.url('#/main-container/simple'); + }); + + it('renders active main value output', () => { + Terra.validates.element('1. rendering with active main data', { selector }); + }); + + it('renders SkipToLink', () => { + browser.keys('Tab'); + Terra.validates.element('2. rendering SkipToLink for main', { selector }); + }); +}); diff --git a/tests/wdio/test-harness/index.jsx b/tests/wdio/test-harness/index.jsx index c9a5dd57f..0e3177438 100644 --- a/tests/wdio/test-harness/index.jsx +++ b/tests/wdio/test-harness/index.jsx @@ -8,6 +8,8 @@ import OverlayWorkspace from '../../../lib/terra-dev-site/test/workspace/Overlay import PrimaryNavigationLayout1 from '../../../src/terra-dev-site/test/primary-navigation-layout/PrimaryNavigationLayout1.test'; import PrimaryNavigationLayout2 from '../../../src/terra-dev-site/test/primary-navigation-layout/PrimaryNavigationLayout2.test'; import SkipToLinks from '../../../src/terra-dev-site/test/application-container/SkipToLinks.test'; +import MainContainerSimple from '../../../src/terra-dev-site/test/main-container/MainContainerSimple.test'; +import MainContainerNavigation from '../../../src/terra-dev-site/test/main-container/MainContainerNavigation.test'; const testMap = { '#/workspace': Workspace, @@ -15,6 +17,8 @@ const testMap = { '#/primary-navigation-layout-1': PrimaryNavigationLayout1, '#/primary-navigation-layout-2': PrimaryNavigationLayout2, '#/skip-to-links': SkipToLinks, + '#/main-container/simple': MainContainerSimple, + '#/main-container/navigation': MainContainerNavigation, }; const Entry = () => { diff --git a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png index c1fabb953..d693d75c3 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png and b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png index ef77524df..f7bc4930f 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png and b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png index d3b994f76..737979272 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png and b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png index 00e204d74..f4771b3bc 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png and b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png index 20954a300..1c9b09606 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png and b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png index ba91282a9..ad0f5a5fe 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png and b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png index e9ffaea81..ecbe80aba 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png and b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png index 5b51fd1f5..0137430a7 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png and b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png index faba7ee98..43cda93e0 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png and b/tests/wdio/workspace/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png index eb5ceb019..a1df1c9dd 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png and b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png index 3a54b8e49..e6acbd688 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png and b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png index e9c054aa7..1fd249165 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png and b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png index d9de387c6..7988841b9 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png and b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png index 25a2cf053..29356ed9f 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png and b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png index f5989126e..a929aaef6 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png and b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png index af9999121..163cec870 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png and b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png index 1d429041b..b5b6f7d02 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png and b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png index 68d625dec..6f2e9ab83 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png and b/tests/wdio/workspace/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png index 8b8941060..c18da3fb8 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png index bc1203f7e..ec4f73ac7 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png index e5d5e2a0c..d42a361db 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png index d9e165be9..70f4347e9 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png index 988ed65f4..00dcb8ee4 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png index 338257ed7..13b674d60 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png index c0d50bbe7..8e668dbae 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png index 554d940e3..21cb514f3 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png index e9b9ba9c1..da276d2d8 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/de/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png index 8b8941060..c18da3fb8 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-overlay-spec/1__renders_with_overlay_styles.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png index bc1203f7e..ec4f73ac7 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/10__Workspace_renders_Tab_1_with_notification_banner.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png index e5d5e2a0c..d42a361db 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/1__initial_rendering_at_large_size.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png index d9e165be9..70f4347e9 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/2__Tab_2_renders_after_selection.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png index 988ed65f4..00dcb8ee4 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/3__Settings_menu_renders_after_button_selection.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png index 338257ed7..13b674d60 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/4__Workspace_renders_at_medium_size.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png index c0d50bbe7..8e668dbae 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/5__Workspace_renders_at_small_size.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png index 554d940e3..21cb514f3 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/6__Workspace_renders_more_tabs_dropdown.png differ diff --git a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png index e9b9ba9c1..da276d2d8 100644 Binary files a/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png and b/tests/wdio/workspace/__snapshots__/reference/terra-default-theme/en/chrome_huge/workspace-spec/7__Workspace_renders_Tab_3_after_dropdown_selection.png differ diff --git a/translations/en-US.json b/translations/en-US.json index ce91a79c5..f60e5ecf1 100644 --- a/translations/en-US.json +++ b/translations/en-US.json @@ -54,6 +54,6 @@ "terraApplication.actionMenu.headerCloseButtonLabel": "Close", "TODO": "translations needed for the below", - "terraApplication.skipToLink.prefix": "Skip to {description}" - + "terraApplication.skipToLink.prefix": "Skip to {description}", + "terraApplication.mainContainer.skipToLabel": "Content" } diff --git a/translations/en.json b/translations/en.json index f185996df..f60e5ecf1 100644 --- a/translations/en.json +++ b/translations/en.json @@ -54,5 +54,6 @@ "terraApplication.actionMenu.headerCloseButtonLabel": "Close", "TODO": "translations needed for the below", - "terraApplication.skipToLink.prefix": "Skip to {description}" + "terraApplication.skipToLink.prefix": "Skip to {description}", + "terraApplication.mainContainer.skipToLabel": "Content" }