fix duplicate id on collapsible container (#823)

microsoft · Jun 18, 2019 · d4c5f1c · d4c5f1c
1 parent 321b924
commit d4c5f1c
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 3 deletions.
diff --git a/src/DetailsView/reports/components/report-sections/collapsible-result-section.tsx b/src/DetailsView/reports/components/report-sections/collapsible-result-section.tsx
@@ -10,15 +10,16 @@ import { ResultSectionTitle } from './result-section-title';
 
 export type CollapsibleResultSectionProps = ResultSectionProps & {
     buttonAriaLabel: string;
+    containerId: string;
 };
 
 export const CollapsibleResultSection = NamedSFC<CollapsibleResultSectionProps>('CollapsibleResultSection', props => {
-    const { containerClassName, buttonAriaLabel } = props;
+    const { containerClassName, buttonAriaLabel, containerId } = props;
 
     return (
         <div className={containerClassName}>
             <CollapsibleContainer
-                id={containerClassName}
+                id={containerId}
                 summaryContent={<ResultSectionTitle {...props} />}
                 detailsContent={<ResultSectionContent {...props} />}
                 buttonAriaLabel={buttonAriaLabel}

diff --git a/src/DetailsView/reports/components/report-sections/not-applicable-checks-section.tsx b/src/DetailsView/reports/components/report-sections/not-applicable-checks-section.tsx
@@ -22,6 +22,7 @@ export const NotApplicableChecksSection = NamedSFC<NotApplicableChecksSectionPro
                 outcomeType="inapplicable"
                 badgeCount={rules.length}
                 buttonAriaLabel="show not applicable checks list"
+                containerId="not-applicable-checks-section"
             />
         );
     },

diff --git a/src/DetailsView/reports/components/report-sections/passed-checks-section.tsx b/src/DetailsView/reports/components/report-sections/passed-checks-section.tsx
@@ -21,6 +21,7 @@ export const PassedChecksSection = NamedSFC<PassedChecksSectionProps>(
                 outcomeType="pass"
                 badgeCount={rules.length}
                 buttonAriaLabel="show passed checks list"
+                containerId="passed-checks-section"
             />
         );
     },

diff --git a/...reports/components/report-sections/__snapshots__/collapsible-result-section.test.tsx.snap b/...reports/components/report-sections/__snapshots__/collapsible-result-section.test.tsx.snap
@@ -10,13 +10,15 @@ exports[`CollapsibleResultSection renders 1`] = `
       <ResultSectionContent
         buttonAriaLabel="button aria label test"
         containerClassName="result-section-class-name"
+        containerId="container-id"
       />
     }
-    id="result-section-class-name"
+    id="container-id"
     summaryContent={
       <ResultSectionTitle
         buttonAriaLabel="button aria label test"
         containerClassName="result-section-class-name"
+        containerId="container-id"
       />
     }
   />

diff --git a/...rts/components/report-sections/__snapshots__/not-applicable-checks-sections.test.tsx.snap b/...rts/components/report-sections/__snapshots__/not-applicable-checks-sections.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`NotApplicableChecksSection renders 1`] = `
   badgeCount={3}
   buttonAriaLabel="show not applicable checks list"
   containerClassName="result-section"
+  containerId="not-applicable-checks-section"
   deps={
     Object {
       "getGuidanceTagsFromGuidanceLinks": [Function],

diff --git a/...iew/reports/components/report-sections/__snapshots__/passed-checks-sections.test.tsx.snap b/...iew/reports/components/report-sections/__snapshots__/passed-checks-sections.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`PassedChecksSection renders 1`] = `
   badgeCount={3}
   buttonAriaLabel="show passed checks list"
   containerClassName="result-section"
+  containerId="passed-checks-section"
   deps={
     Object {
       "getGuidanceTagsFromGuidanceLinks": [Function],

diff --git a/.../tests/DetailsView/reports/components/report-sections/collapsible-result-section.test.tsx b/.../tests/DetailsView/reports/components/report-sections/collapsible-result-section.test.tsx
@@ -13,6 +13,7 @@ describe('CollapsibleResultSection', () => {
         const props: CollapsibleResultSectionProps = {
             containerClassName: 'result-section-class-name',
             buttonAriaLabel: 'button aria label test',
+            containerId: 'container-id',
         } as CollapsibleResultSectionProps;
 
         const wrapper = shallow(<CollapsibleResultSection {...props} />);