update selectors

masewo · Jan 30, 2024 · a311d59 · a311d59
1 parent be4388e
commit a311d59
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 17 deletions.
diff --git a/test/basic.test.ts b/test/basic.test.ts
@@ -27,14 +27,14 @@ test.describe('basic behavior', async () => {
   })
 
   test('first item is selected by default', async ({ page }) => {
-    const item = page.locator(`[cmdk-item][aria-selected]`)
+    const item = page.locator(`[cmdk-item][aria-selected="true"]`)
     await expect(item).toHaveText('Item')
   })
 
   test('first item is selected when search changes', async ({ page }) => {
     const input = page.locator(`[cmdk-input]`)
     await input.type('x')
-    const selected = page.locator(`[cmdk-item][aria-selected]`)
+    const selected = page.locator(`[cmdk-item][aria-selected="true"]`)
     await expect(selected).toHaveText('Value')
   })
 

diff --git a/test/item.test.ts b/test/item.test.ts
@@ -21,10 +21,10 @@ test.describe('item', async () => {
 
   test('unmount item that is selected', async ({ page }) => {
     await page.locator(`data-testid=mount`).click()
-    await expect(page.locator(`[cmdk-item][aria-selected]`)).toHaveText('A')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveText('A')
     await page.locator(`data-testid=unmount`).click()
     await expect(page.locator(`[cmdk-item]`)).toHaveCount(1)
-    await expect(page.locator(`[cmdk-item][aria-selected]`)).toHaveText('B')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveText('B')
   })
 
   test('unmount item that is the only result', async ({ page }) => {
@@ -43,9 +43,9 @@ test.describe('item', async () => {
   test('selected does not change when mounting new items', async ({ page }) => {
     await page.locator(`data-testid=mount`).click()
     await page.locator(`[cmdk-item][data-value="b"]`).click()
-    await expect(page.locator(`[cmdk-item][aria-selected]`)).toHaveText('B')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveText('B')
     await page.locator(`data-testid=many`).click()
-    await expect(page.locator(`[cmdk-item][aria-selected]`)).toHaveText('B')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveText('B')
   })
 
   test('mounted item still rendered with filter usingForceMount', async ({ page }) => {

diff --git a/test/props.test.ts b/test/props.test.ts
@@ -16,29 +16,33 @@ test.describe('props', async () => {
 
   test('controlled value', async ({ page }) => {
     await page.goto('/props')
-    await expect(page.locator(`[cmdk-item][aria-selected]`)).toHaveAttribute('data-value', 'ant')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveAttribute('data-value', 'ant')
     await page.locator(`data-testid=controlledValue`).click()
-    await expect(page.locator(`[cmdk-item][aria-selected]`)).toHaveAttribute('data-value', 'anteater')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveAttribute('data-value', 'anteater')
   })
 
   test('keep controlled value if empty results', async ({ page }) => {
+    const input = await page.locator(`[cmdk-input]`)
+    const value = await page.locator(`[data-testid=value]`)
+
     await page.goto('/props')
-    await expect(page.locator(`[data-testid=value]`)).toHaveText('ant')
-    await page.locator(`[cmdk-input]`).fill('d')
-    await expect(page.locator(`[data-testid=value]`)).toHaveText('')
-    await page.locator(`[cmdk-input]`).fill('ant')
-    await expect(page.locator(`[data-testid=value]`)).toHaveText('ant')
+    await expect(value).toHaveText('ant')
+    await input.fill('d')
+    await expect(value).toHaveText('')
+    await input.clear()
+    await input.fill('ant')
+    await expect(value).toHaveText('ant')
   })
 
   test('controlled search', async ({ page }) => {
     await page.goto('/props')
-    await expect(page.locator(`[cmdk-item][aria-selected]`)).toHaveAttribute('data-value', 'ant')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveAttribute('data-value', 'ant')
     await page.locator(`data-testid=controlledSearch`).click()
-    await expect(page.locator(`[cmdk-item][aria-selected]`)).toHaveAttribute('data-value', 'anteater')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveAttribute('data-value', 'anteater')
   })
 
   test('keep focus on the provided initial value', async ({ page }) => {
     await page.goto('/props?initialValue=anteater')
-    await expect(page.locator(`[cmdk-item][aria-selected]`)).toHaveAttribute('data-value', 'anteater')
+    await expect(page.locator(`[cmdk-item][aria-selected="true"]`)).toHaveAttribute('data-value', 'anteater')
   })
 })
diff --git a/website/styles/index.module.scss b/website/styles/index.module.scss
@@ -286,7 +286,7 @@
       height: 16px;
     }
 
-    &[aria-selected] {
+    &[aria-selected="true"] {
       background: #ffffff;
       color: var(--gray12);
       box-shadow: 0px 2px 5px -2px rgb(0 0 0 / 15%), 0 1px 3px -1px rgb(0 0 0 / 20%);