diff --git a/src/components/table-of-contents/toc.spec.js b/src/components/table-of-contents/toc.spec.js index 0c763ac907..4bb6e1b3c1 100644 --- a/src/components/table-of-contents/toc.spec.js +++ b/src/components/table-of-contents/toc.spec.js @@ -60,7 +60,7 @@ describe('script: table-of-contents', () => { }); }); -describe('script: table-of-contents-fixed', () => { +describe('script: table-of-contents-fixed-position', () => { beforeEach(async () => { await setTestPage( '/test', @@ -94,7 +94,7 @@ describe('script: table-of-contents-fixed', () => { }, ], })} - +

What is the census?

@@ -139,18 +139,33 @@ describe('script: table-of-contents-fixed', () => {
- `, + + `, + 'main', ); }); it('renders a fixed table of contents in full page and scrolls', async () => { - //test that the left column is sticky by scrolling the page and checking the viewport still has the left column await page.evaluate(() => { window.scrollTo(0, 1000); }); - // await page.waitForTimeout(250); - const leftColumn = await page.$eval('#sticky-container', (node) => node.innerText.trim()); - expect(leftColumn).toContain('Contents'); + await page.waitForTimeout(250); + const leftColumn = await page.$('#sticky-container'); + const boundingBox = await leftColumn.boundingBox(); + + const viewport = await page.evaluate(() => ({ + width: window.innerWidth, + height: window.innerHeight, + })); + + const isInViewport = + boundingBox && + boundingBox.x < viewport.width && + boundingBox.y < viewport.height && + boundingBox.x + boundingBox.width > 0 && + boundingBox.y + boundingBox.height > 0; + + expect(isInViewport).toBeTruthy(); }); }); diff --git a/src/tests/helpers/rendering.js b/src/tests/helpers/rendering.js index 4cb1f921b7..a7b6c5cc39 100644 --- a/src/tests/helpers/rendering.js +++ b/src/tests/helpers/rendering.js @@ -166,13 +166,13 @@ export async function gotoTestPath(path) { return await page.goto(`http://localhost:${process.env.TEST_PORT}${path}`); } -export async function setTestPage(path, template) { +export async function setTestPage(path, template, blockName = 'body') { const response = await gotoTestPath(path); verifyConsoleSubscription(page); const compositedTemplate = ` - {% block body %} + {% block ${blockName} %} ${template} {% endblock %} `;