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 %}
`;