From dc350cca873dd7375cbb227c09432f00fb573a69 Mon Sep 17 00:00:00 2001
From: Marcell Toth <marcell@stoplight.io>
Date: Tue, 19 May 2020 11:21:35 +0300
Subject: [PATCH] feat(table-of-contents): add data-test attribute (#161)

* feat(table-of-contents): add data-test attribute

* fix(table-of-contents): make prop optional
---
 src/TableOfContents/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/TableOfContents/index.tsx b/src/TableOfContents/index.tsx
index b1df307e..21c931d5 100644
--- a/src/TableOfContents/index.tsx
+++ b/src/TableOfContents/index.tsx
@@ -50,6 +50,11 @@ export interface ITableOfContents<T extends TableOfContentsItem = TableOfContent
   padding?: string;
   className?: string;
 
+  /**
+   * HTML data-test attribute to be set on the container div.
+   */
+  'data-test'?: string;
+
   // force items to render with active or selected if either is true.
   // for example if forceStateStyle=active, then if an item isSelected or isActive is true, will render with active styling
   forceStateStyle?: 'active' | 'selected';
@@ -167,6 +172,7 @@ function TableOfContentsInner<T extends TableOfContentsItem = TableOfContentsIte
 
 export function TableOfContents<T extends TableOfContentsItem = TableOfContentsItem>({
   className,
+  'data-test': dataTest,
   padding = '4',
   title,
   isOpen = false,
@@ -198,7 +204,7 @@ export function TableOfContents<T extends TableOfContentsItem = TableOfContentsI
         />
       )}
 
-      <div className={containerClassName}>
+      <div className={containerClassName} data-test={dataTest}>
         {renderWithScroll && withScroller ? <ScrollContainer>{toc}</ScrollContainer> : toc}
       </div>
     </>