@instructure/ui-toggle-details 10.14.1-snapshot-0 → 10.14.1-snapshot-2

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.14.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.14.1-snapshot-0) (2025-03-17)
+## [10.14.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.14.1-snapshot-2) (2025-03-18)
 
 **Note:** Version bump only for package @instructure/ui-toggle-details
 

package/es/ToggleDetails/__new-tests__/ToggleDetails.test.js

@@ -0,0 +1,166 @@
+var _ToggleDetails, _ToggleDetails2, _ToggleDetails3, _ToggleDetails4, _ToggleDetails5, _ToggleDetails6, _ToggleDetails7, _ToggleDetails8;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { ToggleDetails } from '../index';
+describe('<ToggleDetails />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should hide its content', async () => {
+    render(_ToggleDetails || (_ToggleDetails = /*#__PURE__*/React.createElement(ToggleDetails, {
+      summary: "Click me"
+    }, "Content")));
+    const content = screen.queryByText('Content');
+    expect(content).not.toBeInTheDocument();
+  });
+  it('should place the icon after the summary when prop is set', async () => {
+    const _render = render(_ToggleDetails2 || (_ToggleDetails2 = /*#__PURE__*/React.createElement(ToggleDetails, {
+        iconPosition: "end",
+        summary: "Click me"
+      }, "Content"))),
+      container = _render.container;
+    const summary = container.querySelector('[class$="-toggleDetails__summaryText"]');
+    const icon = container.querySelector('[class$="-toggleDetails__icon"]');
+    expect(icon === null || icon === void 0 ? void 0 : icon.previousSibling).toBe(summary);
+  });
+  it('should have an aria-controls attribute', async () => {
+    const _render2 = render(_ToggleDetails3 || (_ToggleDetails3 = /*#__PURE__*/React.createElement(ToggleDetails, {
+        summary: "Click me"
+      }, "Details"))),
+      container = _render2.container;
+    const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
+    const content = container.querySelector('[class$="-toggleDetails__details"]');
+    expect(toggle).toHaveAttribute('aria-controls', content === null || content === void 0 ? void 0 : content.id);
+  });
+  it('should have an aria-expanded attribute', async () => {
+    const _render3 = render(_ToggleDetails4 || (_ToggleDetails4 = /*#__PURE__*/React.createElement(ToggleDetails, {
+        summary: "Click me"
+      }, "Details"))),
+      container = _render3.container;
+    const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  });
+  it('should not have aria attributes when it has no children', async () => {
+    render(_ToggleDetails5 || (_ToggleDetails5 = /*#__PURE__*/React.createElement(ToggleDetails, {
+      summary: "Click me",
+      "data-testid": "td__0"
+    })));
+    const toggle = screen.getByTestId('td__0');
+    expect(toggle).not.toHaveAttribute('aria-controls');
+    expect(toggle).not.toHaveAttribute('aria-expanded');
+  });
+  it('should toggle on click events', async () => {
+    const _render4 = render(_ToggleDetails6 || (_ToggleDetails6 = /*#__PURE__*/React.createElement(ToggleDetails, {
+        summary: "Click me"
+      }, "Details"))),
+      container = _render4.container;
+    const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    await userEvent.click(screen.getByText('Click me'));
+    await waitFor(() => {
+      expect(toggle).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+  it('should call onToggle on click events', async () => {
+    const onToggle = vi.fn();
+    render(/*#__PURE__*/React.createElement(ToggleDetails, {
+      summary: "Click me",
+      expanded: false,
+      onToggle: onToggle
+    }, "Details"));
+    await userEvent.click(screen.getByText('Click me'));
+    await waitFor(() => {
+      const args = onToggle.mock.calls[0];
+      expect(onToggle).toHaveBeenCalledTimes(1);
+      expect(args[0].type).toBe('click');
+      expect(args[1]).toBe(true);
+    });
+  });
+  it('should call onToggle on click events when it has no children', async () => {
+    const onToggle = vi.fn();
+    render(/*#__PURE__*/React.createElement(ToggleDetails, {
+      summary: "Click me",
+      expanded: false,
+      onToggle: onToggle,
+      "data-testid": "td__1"
+    }));
+    const toggle = screen.getByTestId('td__1');
+    await userEvent.click(toggle);
+    await waitFor(() => {
+      const args = onToggle.mock.calls[0];
+      expect(onToggle).toHaveBeenCalledTimes(1);
+      expect(args[0].type).toBe('click');
+      expect(args[1]).toBe(true);
+    });
+  });
+  it('should be initialized by defaultExpanded prop', async () => {
+    const _render5 = render(_ToggleDetails7 || (_ToggleDetails7 = /*#__PURE__*/React.createElement(ToggleDetails, {
+        summary: "Click me",
+        defaultExpanded: true
+      }, "Content"))),
+      container = _render5.container;
+    const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
+    const content = container.querySelector('[class$="-toggleDetails__details"]');
+    expect(toggle).toHaveAttribute('aria-expanded', 'true');
+    expect(content).toHaveTextContent('Content');
+  });
+  it('should meet a11y standards', async () => {
+    const _render6 = render(_ToggleDetails8 || (_ToggleDetails8 = /*#__PURE__*/React.createElement(ToggleDetails, {
+        summary: "Click me"
+      }, "Content"))),
+      container = _render6.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('focuses with the focus helper', async () => {
+    var _toggleRef;
+    let toggleRef;
+    const _render7 = render(/*#__PURE__*/React.createElement(ToggleDetails, {
+        summary: "Click me",
+        ref: el => {
+          toggleRef = el;
+        }
+      }, "Content")),
+      container = _render7.container;
+    const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
+    expect(document.activeElement).not.toBe(toggle);
+    (_toggleRef = toggleRef) === null || _toggleRef === void 0 ? void 0 : _toggleRef.focus();
+    expect(document.activeElement).toBe(toggle);
+  });
+});

package/es/ToggleGroup/__new-tests__/ToggleGroup.test.js

@@ -0,0 +1,201 @@
+var _ToggleGroup, _ToggleGroup2, _ToggleGroup3, _ToggleGroup4, _ToggleGroup5, _svg, _svg2, _ToggleGroup6;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { ToggleGroup } from '../index';
+describe('<ToggleGroup />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should show its summary and hide its children by default', async () => {
+    render(_ToggleGroup || (_ToggleGroup = /*#__PURE__*/React.createElement(ToggleGroup, {
+      "data-testId": "toggle-group",
+      transition: false,
+      summary: "This is the summary section",
+      toggleLabel: "This is the toggleLabel"
+    }, "This is the details section")));
+    const toggleGroup = screen.getByTestId('toggle-group');
+    expect(toggleGroup).toHaveTextContent('This is the summary section');
+    expect(toggleGroup).not.toHaveTextContent('This is the details section');
+  });
+  it('should render with children showing with the defaultExpanded prop', async () => {
+    const _render = render(_ToggleGroup2 || (_ToggleGroup2 = /*#__PURE__*/React.createElement(ToggleGroup, {
+        "data-testId": "toggle-group",
+        transition: false,
+        summary: "This is the summary section",
+        toggleLabel: "This is the toggleLabel",
+        defaultExpanded: true
+      }, "This is the details section"))),
+      container = _render.container;
+    const toggleGroup = screen.getByTestId('toggle-group');
+    const toggle = container.querySelector('button');
+    expect(toggle).toHaveAttribute('aria-expanded', 'true');
+    expect(toggleGroup).toHaveTextContent('This is the details section');
+  });
+  it('should have an aria-controls attribute', async () => {
+    const _render2 = render(_ToggleGroup3 || (_ToggleGroup3 = /*#__PURE__*/React.createElement(ToggleGroup, {
+        transition: false,
+        summary: "This is the summary section",
+        toggleLabel: "This is the toggleLabel",
+        defaultExpanded: true
+      }, "This is the details section"))),
+      container = _render2.container;
+    const content = screen.getByText('This is the details section');
+    const toggle = container.querySelector('button');
+    expect(toggle).toHaveAttribute('aria-controls', content.id);
+  });
+  it('should have an aria-expanded attribute', async () => {
+    const _render3 = render(_ToggleGroup4 || (_ToggleGroup4 = /*#__PURE__*/React.createElement(ToggleGroup, {
+        transition: false,
+        summary: "This is the summary section",
+        toggleLabel: "This is the toggleLabel"
+      }, "This is the details section"))),
+      container = _render3.container;
+    const toggle = container.querySelector('button');
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  });
+  it('should toggle on click events', async () => {
+    const _render4 = render(_ToggleGroup5 || (_ToggleGroup5 = /*#__PURE__*/React.createElement(ToggleGroup, {
+        transition: false,
+        summary: "This is the summary section",
+        toggleLabel: "This is the toggleLabel"
+      }, "This is the details section"))),
+      container = _render4.container;
+    const toggle = container.querySelector('button');
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    await userEvent.click(toggle);
+    await waitFor(() => {
+      expect(toggle).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+  it('should call onToggle on click events', async () => {
+    const onToggle = vi.fn();
+    const _render5 = render(/*#__PURE__*/React.createElement(ToggleGroup, {
+        transition: false,
+        summary: "This is the summary section",
+        toggleLabel: "This is the toggleLabel",
+        expanded: false,
+        onToggle: onToggle
+      }, "This is the details section")),
+      container = _render5.container;
+    const toggle = container.querySelector('button');
+    await userEvent.click(toggle);
+    await waitFor(() => {
+      const args = onToggle.mock.calls[0];
+      expect(onToggle).toHaveBeenCalledTimes(1);
+      expect(args[0].type).toBe('click');
+      expect(args[1]).toBe(true);
+    });
+  });
+  it('should update the toggle screenreader label based on the expanded state', async () => {
+    const _render6 = render(/*#__PURE__*/React.createElement(ToggleGroup, {
+        transition: false,
+        summary: "This is the summary section",
+        toggleLabel: expanded => expanded ? 'Hide content' : 'Show content'
+      }, "This is the details section")),
+      container = _render6.container;
+    const toggle = container.querySelector('button');
+    const scrContent = container.querySelector('[class$="-screenReaderContent"]');
+    expect(scrContent).toHaveTextContent('Show content');
+    await userEvent.click(toggle);
+    await waitFor(() => {
+      expect(scrContent).toHaveTextContent('Hide content');
+    });
+  });
+  it('should accept custom icons', async () => {
+    const Icon = _svg || (_svg = /*#__PURE__*/React.createElement("svg", {
+      height: "50",
+      width: "50"
+    }, /*#__PURE__*/React.createElement("title", null, "Icon collapsed"), /*#__PURE__*/React.createElement("circle", {
+      cx: "25",
+      cy: "25",
+      r: "20"
+    })));
+    const IconExpanded = _svg2 || (_svg2 = /*#__PURE__*/React.createElement("svg", {
+      height: "50",
+      width: "50"
+    }, /*#__PURE__*/React.createElement("title", null, "Icon expanded"), /*#__PURE__*/React.createElement("circle", {
+      cx: "25",
+      cy: "25",
+      r: "20"
+    })));
+    const _render7 = render(/*#__PURE__*/React.createElement(ToggleGroup, {
+        transition: false,
+        summary: "This is the summary section",
+        toggleLabel: "This is the toggleLabel",
+        icon: () => Icon,
+        iconExpanded: () => IconExpanded
+      }, "This is the details section")),
+      container = _render7.container;
+    const toggle = container.querySelector('button');
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveTextContent('Icon collapsed');
+    await userEvent.click(toggle);
+    await waitFor(() => {
+      expect(svg).toHaveTextContent('Icon expanded');
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render8 = render(_ToggleGroup6 || (_ToggleGroup6 = /*#__PURE__*/React.createElement(ToggleGroup, {
+        transition: false,
+        summary: "This is the summary section",
+        toggleLabel: "This is the toggleLabel"
+      }, "This is the details section"))),
+      container = _render8.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('focuses with the focus helper', async () => {
+    var _toggleRef;
+    let toggleRef;
+    const _render9 = render(/*#__PURE__*/React.createElement(ToggleGroup, {
+        "data-testId": "toggle-group",
+        transition: false,
+        summary: "This is the summary section",
+        toggleLabel: "This is the toggleLabel",
+        ref: el => {
+          toggleRef = el;
+        }
+      }, "This is the details section")),
+      container = _render9.container;
+    const toggle = container.querySelector('button');
+    expect(document.activeElement).not.toBe(toggle);
+    (_toggleRef = toggleRef) === null || _toggleRef === void 0 ? void 0 : _toggleRef.focus();
+    expect(document.activeElement).toBe(toggle);
+  });
+});

package/lib/ToggleDetails/__new-tests__/ToggleDetails.test.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _vitest = require("vitest");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _ToggleDetails, _ToggleDetails2, _ToggleDetails3, _ToggleDetails4, _ToggleDetails5, _ToggleDetails6, _ToggleDetails7, _ToggleDetails8;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<ToggleDetails />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should hide its content', async () => {
+    (0, _react2.render)(_ToggleDetails || (_ToggleDetails = /*#__PURE__*/_react.default.createElement(_index.ToggleDetails, {
+      summary: "Click me"
+    }, "Content")));
+    const content = _react2.screen.queryByText('Content');
+    expect(content).not.toBeInTheDocument();
+  });
+  it('should place the icon after the summary when prop is set', async () => {
+    const _render = (0, _react2.render)(_ToggleDetails2 || (_ToggleDetails2 = /*#__PURE__*/_react.default.createElement(_index.ToggleDetails, {
+        iconPosition: "end",
+        summary: "Click me"
+      }, "Content"))),
+      container = _render.container;
+    const summary = container.querySelector('[class$="-toggleDetails__summaryText"]');
+    const icon = container.querySelector('[class$="-toggleDetails__icon"]');
+    expect(icon === null || icon === void 0 ? void 0 : icon.previousSibling).toBe(summary);
+  });
+  it('should have an aria-controls attribute', async () => {
+    const _render2 = (0, _react2.render)(_ToggleDetails3 || (_ToggleDetails3 = /*#__PURE__*/_react.default.createElement(_index.ToggleDetails, {
+        summary: "Click me"
+      }, "Details"))),
+      container = _render2.container;
+    const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
+    const content = container.querySelector('[class$="-toggleDetails__details"]');
+    expect(toggle).toHaveAttribute('aria-controls', content === null || content === void 0 ? void 0 : content.id);
+  });
+  it('should have an aria-expanded attribute', async () => {
+    const _render3 = (0, _react2.render)(_ToggleDetails4 || (_ToggleDetails4 = /*#__PURE__*/_react.default.createElement(_index.ToggleDetails, {
+        summary: "Click me"
+      }, "Details"))),
+      container = _render3.container;
+    const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  });
+  it('should not have aria attributes when it has no children', async () => {
+    (0, _react2.render)(_ToggleDetails5 || (_ToggleDetails5 = /*#__PURE__*/_react.default.createElement(_index.ToggleDetails, {
+      summary: "Click me",
+      "data-testid": "td__0"
+    })));
+    const toggle = _react2.screen.getByTestId('td__0');
+    expect(toggle).not.toHaveAttribute('aria-controls');
+    expect(toggle).not.toHaveAttribute('aria-expanded');
+  });
+  it('should toggle on click events', async () => {
+    const _render4 = (0, _react2.render)(_ToggleDetails6 || (_ToggleDetails6 = /*#__PURE__*/_react.default.createElement(_index.ToggleDetails, {
+        summary: "Click me"
+      }, "Details"))),
+      container = _render4.container;
+    const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    await _userEvent.default.click(_react2.screen.getByText('Click me'));
+    await (0, _react2.waitFor)(() => {
+      expect(toggle).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+  it('should call onToggle on click events', async () => {
+    const onToggle = _vitest.vi.fn();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ToggleDetails, {
+      summary: "Click me",
+      expanded: false,
+      onToggle: onToggle
+    }, "Details"));
+    await _userEvent.default.click(_react2.screen.getByText('Click me'));
+    await (0, _react2.waitFor)(() => {
+      const args = onToggle.mock.calls[0];
+      expect(onToggle).toHaveBeenCalledTimes(1);
+      expect(args[0].type).toBe('click');
+      expect(args[1]).toBe(true);
+    });
+  });
+  it('should call onToggle on click events when it has no children', async () => {
+    const onToggle = _vitest.vi.fn();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ToggleDetails, {
+      summary: "Click me",
+      expanded: false,
+      onToggle: onToggle,
+      "data-testid": "td__1"
+    }));
+    const toggle = _react2.screen.getByTestId('td__1');
+    await _userEvent.default.click(toggle);
+    await (0, _react2.waitFor)(() => {
+      const args = onToggle.mock.calls[0];
+      expect(onToggle).toHaveBeenCalledTimes(1);
+      expect(args[0].type).toBe('click');
+      expect(args[1]).toBe(true);
+    });
+  });
+  it('should be initialized by defaultExpanded prop', async () => {
+    const _render5 = (0, _react2.render)(_ToggleDetails7 || (_ToggleDetails7 = /*#__PURE__*/_react.default.createElement(_index.ToggleDetails, {
+        summary: "Click me",
+        defaultExpanded: true
+      }, "Content"))),
+      container = _render5.container;
+    const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
+    const content = container.querySelector('[class$="-toggleDetails__details"]');
+    expect(toggle).toHaveAttribute('aria-expanded', 'true');
+    expect(content).toHaveTextContent('Content');
+  });
+  it('should meet a11y standards', async () => {
+    const _render6 = (0, _react2.render)(_ToggleDetails8 || (_ToggleDetails8 = /*#__PURE__*/_react.default.createElement(_index.ToggleDetails, {
+        summary: "Click me"
+      }, "Content"))),
+      container = _render6.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('focuses with the focus helper', async () => {
+    var _toggleRef;
+    let toggleRef;
+    const _render7 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ToggleDetails, {
+        summary: "Click me",
+        ref: el => {
+          toggleRef = el;
+        }
+      }, "Content")),
+      container = _render7.container;
+    const toggle = container.querySelector('[class$="-toggleDetails__toggle"]');
+    expect(document.activeElement).not.toBe(toggle);
+    (_toggleRef = toggleRef) === null || _toggleRef === void 0 ? void 0 : _toggleRef.focus();
+    expect(document.activeElement).toBe(toggle);
+  });
+});