Skip to content
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.

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

Support unenclosed inner text for details elements in to be visible #396

19 changes: 12 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ clear to read and to maintain.
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this, and the other formatting change might have been automatic, I didn't do them intentionally but I can try to revert those changes if necessary.

- [Installation](#installation)
- [Usage](#usage)
- [With TypeScript](#with-typescript)
Expand Down Expand Up @@ -423,6 +422,14 @@ An element is visible if **all** the following conditions are met:
</div>
<div data-testid="visible">Visible Example</div>
<div data-testid="hidden-attribute" hidden>Hidden Attribute Example</div>
<details>
<summary>Title of hidden text</summary>
Hidden Details Example
</details>
<details open>
<summary>Title of visible text</summary>
<div>Visible Details Example</div>
</details>
```

```javascript
Expand All @@ -432,6 +439,8 @@ expect(getByText('Display None Example')).not.toBeVisible()
expect(getByText('Hidden Parent Example')).not.toBeVisible()
expect(getByText('Visible Example')).toBeVisible()
expect(getByText('Hidden Attribute Example')).not.toBeVisible()
expect(getByText('Hidden Details Example')).not.toBeVisible()
expect(getByText('Visible Details Example')).toBeVisible()
```

<hr />
Expand Down Expand Up @@ -1203,12 +1212,8 @@ To perform a partial match, you can pass a `RegExp` or use
#### Examples

```html
<button aria-label="Close" aria-describedby="description-close">
X
</button>
<div id="description-close">
Closing will discard any changes
</div>
<button aria-label="Close" aria-describedby="description-close">X</button>
<div id="description-close">Closing will discard any changes</div>

<button>Delete</button>
```
Expand Down
179 changes: 179 additions & 0 deletions src/__tests__/to-be-visible.js
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,185 @@ describe('.toBeVisible', () => {
).toBeVisible()
})
})

describe('when the details inner text does not have an enclosing element', () => {
describe('when the details is not opened', () => {
beforeEach(() => {
subject = render(`
<details>
<summary>Title of hidden innerText</summary>
hidden innerText
</details>
`)
})

it('returns false to the details content', () => {
expect(subject.container.querySelector('details')).not.toBeVisible()
})

it('returns true to the details summary', () => {
expect(subject.container.querySelector('summary')).toBeVisible()
})

describe('when the user clicks on the summary', () => {
beforeEach(() => subject.container.querySelector('summary').click())

it('returns true to the details content', () => {
expect(subject.container.querySelector('details')).toBeVisible()
})

it('returns true to the details summary', () => {
expect(subject.container.querySelector('summary')).toBeVisible()
})
})
})

describe('when the details is opened', () => {
beforeEach(() => {
subject = render(`
<details open>
<summary>Title of visible innerText</summary>
visible <small>innerText</small>
</details>
`)
})

it('returns true to the details content', () => {
expect(subject.container.querySelector('details')).toBeVisible()
})

it('returns true to inner small content', () => {
expect(subject.container.querySelector('small')).toBeVisible()
})

describe('when the user clicks on the summary', () => {
beforeEach(() => subject.container.querySelector('summary').click())

it('returns false to the details content', () => {
expect(
subject.container.querySelector('details'),
).not.toBeVisible()
})

it('returns false to the inner small content', () => {
expect(subject.container.querySelector('small')).not.toBeVisible()
})

it('returns true to the details summary', () => {
expect(subject.container.querySelector('summary')).toBeVisible()
})
})
})

describe('with nested details (unenclosed outer, enclosed inner)', () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This set of tests might be a bit redundant, I added them because I wasn't sure how the unenclosed and enclosed details would interact. But thinking it over, there really shouldn't be a significant difference as opposed to the previous nested tests (which these are based off).

describe('when both outer and inner are opened', () => {
beforeEach(() => {
subject = render(`
<details open>
<summary>Title of outer unenclosed</summary>
Unenclosed innerText
<details open>
<summary>Title of inner enclosed</summary>
<div>Enclosed innerText</div>
</details>
</details>
`)
})

it('returns true to outer unenclosed innerText', () => {
expect(subject.container.querySelector('details')).toBeVisible()
})

it('returns true to outer summary', () => {
expect(subject.container.querySelector('summary')).toBeVisible()
})

it('returns true to inner enclosed innerText', () => {
expect(
subject.container.querySelector('details > details > div'),
).toBeVisible()
})

it('returns true to inner summary', () => {
expect(
subject.container.querySelector('details > details > summary'),
).toBeVisible()
})
})

describe('when outer is opened and inner is not opened', () => {
beforeEach(() => {
subject = render(`
<details open>
<summary>Title of outer unenclosed</summary>
Unenclosed innerText
<details>
<summary>Title of inner enclosed</summary>
<div>Enclosed innerText</div>
</details>
</details>
`)
})

it('returns true to outer unenclosed innerText', () => {
expect(subject.container.querySelector('details')).toBeVisible()
})

it('returns true to outer summary', () => {
expect(subject.container.querySelector('summary')).toBeVisible()
})

it('returns false to inner enclosed innerText', () => {
expect(
subject.container.querySelector('details > details > div'),
).not.toBeVisible()
})

it('returns true to inner summary', () => {
expect(
subject.container.querySelector('details > details > summary'),
).toBeVisible()
})
})

describe('when outer is not opened and inner is opened', () => {
beforeEach(() => {
subject = render(`
<details>
<summary>Title of outer unenclosed</summary>
Unenclosed innerText
<details open>
<summary>Title of inner enclosed</summary>
<div>Enclosed innerText</div>
</details>
</details>
`)
})

it('returns true to outer unenclosed innerText', () => {
expect(
subject.container.querySelector('details'),
).not.toBeVisible()
})

it('returns true to outer summary', () => {
expect(subject.container.querySelector('summary')).toBeVisible()
})

it('returns false to inner enclosed innerText', () => {
expect(
subject.container.querySelector('details > details > div'),
).not.toBeVisible()
})

it('returns true to inner summary', () => {
expect(
subject.container.querySelector('details > details > summary'),
).not.toBeVisible()
})
})
})
})
})
})
})
19 changes: 13 additions & 6 deletions src/to-be-visible.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,19 @@ function isStyleVisible(element) {
}

function isAttributeVisible(element, previousElement) {
return (
!element.hasAttribute('hidden') &&
(element.nodeName === 'DETAILS' && previousElement.nodeName !== 'SUMMARY'
? element.hasAttribute('open')
: true)
)
let detailsVisibility

if (previousElement) {
detailsVisibility =
element.nodeName === 'DETAILS' && previousElement.nodeName !== 'SUMMARY'
? element.hasAttribute('open')
: true
} else {
detailsVisibility =
element.nodeName === 'DETAILS' ? element.hasAttribute('open') : true
}

return !element.hasAttribute('hidden') && detailsVisibility
}

function isElementVisible(element, previousElement) {
Expand Down