|
| 1 | +/* Finding "design one bin" without reading past the thing you are not doing. |
| 2 | + * |
| 3 | + * The two ways in were the bottom of panel 03 — which only appears with nothing selected |
| 4 | + * — and a button under the drawer map. Both sit below a large panel about laying out a |
| 5 | + * whole drawer, so someone who wants one bin has to read past it to find it. |
| 6 | + */ |
| 7 | +'use strict'; |
| 8 | +const { test, expect } = require('@playwright/test'); |
| 9 | +const { openBins, openPlates } = require('./helpers'); |
| 10 | + |
| 11 | +const inMode = (page) => page.evaluate(() => ({ |
| 12 | + loose: document.body.classList.contains('binscratch'), |
| 13 | + scratch: !!scratch, |
| 14 | +})); |
| 15 | + |
| 16 | +test('the way in is in the header, before any panel', async ({ page }) => { |
| 17 | + const errors = await openBins(page); |
| 18 | + const btn = page.locator('#scratchBinTop'); |
| 19 | + await expect(btn).toBeVisible(); |
| 20 | + |
| 21 | + /* In the header itself, not merely early in the document — that is what makes it |
| 22 | + findable without scrolling past the drawer-layout panel. */ |
| 23 | + expect(await btn.evaluate((el) => !!el.closest('header')), |
| 24 | + 'it lives in the header').toBe(true); |
| 25 | + |
| 26 | + /* Above the panel it used to be buried at the bottom of. */ |
| 27 | + const top = await btn.boundingBox(); |
| 28 | + const panel = await page.locator('#s-bin').boundingBox(); |
| 29 | + expect(top.y, 'and above the bin panel, not below it').toBeLessThan(panel.y); |
| 30 | + expect(errors).toEqual([]); |
| 31 | +}); |
| 32 | + |
| 33 | +test('it opens the same loose bin the old ways in do', async ({ page }) => { |
| 34 | + const errors = await openBins(page); |
| 35 | + await page.locator('#scratchBinTop').click(); |
| 36 | + await page.waitForTimeout(300); |
| 37 | + |
| 38 | + const m = await inMode(page); |
| 39 | + expect(m.loose, 'the body class the mode is defined by').toBe(true); |
| 40 | + expect(m.scratch, 'and a real loose bin behind it').toBe(true); |
| 41 | + /* One shared handler, so this cannot drift from the other two entry points. */ |
| 42 | + expect(await page.evaluate(() => layers[cur].bins.length), |
| 43 | + 'still in no layer — a loose bin is not a drawer bin').toBe(0); |
| 44 | + expect(errors).toEqual([]); |
| 45 | +}); |
| 46 | + |
| 47 | +/* Already designing one bin, so the way in is noise. The way OUT is the focus bar's job. */ |
| 48 | +test('it gets out of the way once you are in the mode', async ({ page }) => { |
| 49 | + await openBins(page); |
| 50 | + await expect(page.locator('#scratchBinTop')).toBeVisible(); |
| 51 | + await page.locator('#scratchBinTop').click(); |
| 52 | + await page.waitForTimeout(300); |
| 53 | + await expect(page.locator('#quickstart')).toBeHidden(); |
| 54 | + |
| 55 | + await page.locator('#scratchDrop').click(); |
| 56 | + await page.waitForTimeout(300); |
| 57 | + await expect(page.locator('#quickstart'), |
| 58 | + 'and comes back when the drawer does').toBeVisible(); |
| 59 | +}); |
| 60 | + |
| 61 | +/* The header is shared furniture. Bins-only markup belongs in the bins template, and the |
| 62 | + proof is that the baseplates page never grew a button for a mode it does not have. */ |
| 63 | +test('the baseplates page does not sprout a bins control', async ({ page }) => { |
| 64 | + await openPlates(page); |
| 65 | + expect(await page.locator('#scratchBinTop').count(), |
| 66 | + 'chrome.js is shared; this control is not').toBe(0); |
| 67 | +}); |
0 commit comments