diff --git a/src/__tests__/to-be-visible.js b/src/__tests__/to-be-visible.js index d1a4c6e5..177a938c 100644 --- a/src/__tests__/to-be-visible.js +++ b/src/__tests__/to-be-visible.js @@ -134,6 +134,74 @@ describe('.toBeVisible', () => { }) }) + describe('when the
inner text does not have an enclosing element', () => { + describe('when the details is not opened', () => { + beforeEach(() => { + subject = render(` +
+ Title of hidden innerText + hidden innerText +
+ `) + }) + + 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(` +
+ Title of visible innerText + visible innerText +
+ `) + }) + + 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 a nested
element', () => { describe('when the nested
is opened', () => { beforeEach(() => { @@ -248,181 +316,109 @@ describe('.toBeVisible', () => { }) }) - describe('when the details inner text does not have an enclosing element', () => { - describe('when the details is not opened', () => { + describe('with nested details (unenclosed outer, enclosed inner)', () => { + describe('when both outer and inner are opened', () => { beforeEach(() => { subject = render(` -
- Title of hidden innerText - hidden innerText +
+ Title of outer unenclosed + Unenclosed innerText +
+ Title of inner enclosed +
Enclosed innerText
+
`) }) - it('returns false to the details content', () => { - expect(subject.container.querySelector('details')).not.toBeVisible() + it('returns true to outer unenclosed innerText', () => { + expect(subject.container.querySelector('details')).toBeVisible() }) - it('returns true to the details summary', () => { + it('returns true to outer 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 inner enclosed innerText', () => { + expect( + subject.container.querySelector('details > details > div'), + ).toBeVisible() + }) - it('returns true to the details summary', () => { - expect(subject.container.querySelector('summary')).toBeVisible() - }) + it('returns true to inner summary', () => { + expect( + subject.container.querySelector('details > details > summary'), + ).toBeVisible() }) }) - describe('when the details is opened', () => { + describe('when outer is opened and inner is not opened', () => { beforeEach(() => { subject = render(`
- Title of visible innerText - visible innerText + Title of outer unenclosed + Unenclosed innerText +
+ Title of inner enclosed +
Enclosed innerText
+
`) }) - it('returns true to the details content', () => { + it('returns true to outer unenclosed innerText', () => { expect(subject.container.querySelector('details')).toBeVisible() }) - it('returns true to inner small content', () => { - expect(subject.container.querySelector('small')).toBeVisible() + it('returns true to outer summary', () => { + expect(subject.container.querySelector('summary')).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 false to inner enclosed innerText', () => { + expect( + subject.container.querySelector('details > details > div'), + ).not.toBeVisible() + }) - it('returns true to the details summary', () => { - expect(subject.container.querySelector('summary')).toBeVisible() - }) + it('returns true to inner summary', () => { + expect( + subject.container.querySelector('details > details > summary'), + ).toBeVisible() }) }) - describe('with nested details (unenclosed outer, enclosed inner)', () => { - describe('when both outer and inner are opened', () => { - beforeEach(() => { - subject = render(` + describe('when outer is not opened and inner is opened', () => { + beforeEach(() => { + subject = render(` +
+ Title of outer unenclosed + Unenclosed innerText
- Title of outer unenclosed - Unenclosed innerText -
- Title of inner enclosed -
Enclosed innerText
-
+ Title of inner enclosed +
Enclosed innerText
- `) - }) - - 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(` -
- Title of outer unenclosed - Unenclosed innerText -
- Title of inner enclosed -
Enclosed innerText
-
-
- `) - }) - - 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() - }) + it('returns true to outer unenclosed innerText', () => { + expect(subject.container.querySelector('details')).not.toBeVisible() }) - describe('when outer is not opened and inner is opened', () => { - beforeEach(() => { - subject = render(` -
- Title of outer unenclosed - Unenclosed innerText -
- Title of inner enclosed -
Enclosed innerText
-
-
- `) - }) - - 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() - }) + 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() }) }) })