Skip to content

feat(Tabs): Added OUIA compatibility to Tabs component #2704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jschuler merged 3 commits into from
Aug 23, 2019
Merged

feat(Tabs): Added OUIA compatibility to Tabs component #2704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
019f67e
feat(tabs): Added OUIA compatibility to Tabs component
Aug 14, 2019
702f839
test(Tabs): fixed some Tabs tests
Aug 15, 2019
4556a30
use render to avoid mounting issues
redallen Aug 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 8 additions & 9 deletions packages/patternfly-4/react-core/src/components/Tabs/Tabs.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import React from 'react';
import { shallow, mount } from 'enzyme';
import { render, mount } from 'enzyme';
import { Tabs } from './Tabs';
import { Tab } from './Tab';
import { TabContent } from './TabContent';

test('should render simple tabs', () => {
const view = shallow(
const view = render(
<Tabs id="simpleTabs">
<Tab id="tab1" eventKey={0} title="Tab item 1">
Tab 1 section
Expand All @@ -22,7 +21,7 @@ test('should render simple tabs', () => {
});

test('should render accessible tabs', () => {
const view = shallow(
const view = render(
<Tabs id="accessibleTabs" aria-label="accessible Tabs example" variant="nav">
<Tab id="tab1" eventKey={0} title="Tab item 1" href="#/items/1">
Tab 1 section
Expand All @@ -39,7 +38,7 @@ test('should render accessible tabs', () => {
});

test('should render filled tabs', () => {
const view = shallow(
const view = render(
<Tabs id="filledTabs" isFilled>
<Tab id="tab1" eventKey={0} title="Tab item 1">
Tab 1 section
Expand All @@ -56,8 +55,8 @@ test('should render filled tabs', () => {
});

test('should render secondary tabs', () => {
const view = shallow(
<Tabs id="primaryTabs">
const view = render(
<Tabs id="primarieTabs">
<Tab eventKey={0} title="Tab item 1">
<Tabs id="secondaryTabs">
<Tab id="secondary tab1" eventKey={10} title="Secondary Tab 1">
Expand Down Expand Up @@ -143,8 +142,8 @@ test('should call handleScrollButtons tabs with scrolls', () => {
});

test('should render tabs with eventKey Strings', () => {
const view = shallow(
<Tabs id="simpleTabs">
const view = render(
<Tabs id="eventKeyTabs">
<Tab id="tab1" eventKey={'one'} title="Tab item 1">
Tab 1 section
</Tab>
Expand Down
15 changes: 13 additions & 2 deletions packages/patternfly-4/react-core/src/components/Tabs/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { getUniqueId, isElementInView, sideElementIsOutOfView } from '../../help
import { SIDE } from '../../helpers/constants';
import { TabContent } from './TabContent';
import { Tab } from './Tab';
import { InjectedOuiaProps, withOuiaContext } from '../withOuia';

export enum TabsVariant {
div = 'div',
Expand Down Expand Up @@ -46,9 +47,9 @@ export interface TabsState {
highlightRightScrollButton: boolean;
}

export class Tabs extends React.Component<TabsProps, TabsState> {
class Tabs extends React.Component<TabsProps & InjectedOuiaProps, TabsState> {
tabList = React.createRef<HTMLUListElement>();
constructor(props: TabsProps) {
constructor(props: TabsProps & InjectedOuiaProps) {
super(props);
this.state = {
showLeftScrollButton: false,
Expand Down Expand Up @@ -177,6 +178,8 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
rightScrollAriaLabel,
'aria-label': ariaLabel,
variant,
ouiaContext,
ouiaId,
...props
} = this.props;
const {
Expand All @@ -203,6 +206,10 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
highlightRightScrollButton && styles.modifiers.endCurrent,
className
)}
{...ouiaContext.isOuia && {
'data-ouia-component-type': 'Tabs',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
}}
{...props}
>
<button
Expand Down Expand Up @@ -255,3 +262,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
);
}
}

const TabsWithOuiaContext = withOuiaContext(Tabs);

export { TabsWithOuiaContext as Tabs };
Loading