moving tabindex to List, cleaning up tests

.gitignore

@@ -5,5 +5,5 @@ node_modules
 /dist/
 /test/public/index.js
 /test/public/bundle.css
-/tests/page/public/build
+/spec/page/public/build
 /test-results

package.json

@@ -13,9 +13,9 @@
     "prepublishOnly": "npm test",
     "test": "node test/runner.js",
     "test:browser": "npm run build && serve test/public",
+    "test:playwright": "playwright test",
     "gen:docs": "node docs/generate_theming_variables_md.js",
-    "pretest": "npm run build",
-    "test:new": "playwright test"
+    "pretest": "npm run build"
   },
   "devDependencies": {
     "@babel/polyfill": "7.12.1",

playwright.config.js

@@ -12,5 +12,5 @@ module.exports = {
     screenshot: "only-on-failure",
     video: "retry-with-video",
   },
-  globalSetup: "tests/setup.js",
+  globalSetup: "spec/setup.js",
 };

tests/setup.js → spec/setup.js

@@ -11,7 +11,7 @@ module.exports = async () => {
   process.env.SERVER_PORT = port;
 
   const bundle = await rollup.rollup({
-    input: "./tests/page/src/index.js",
+    input: "./spec/page/src/index.js",
     plugins: [
       svelte({
         emitCss: true,
@@ -20,10 +20,10 @@ module.exports = async () => {
           dev: true,
         },
       }),
-      css({ output: { dir: "./tests/page/public/build" } }),
+      css({ output: { dir: "./spec/page/public/build" } }),
       resolve(),
       serve({
-        contentBase: "./tests/page/public",
+        contentBase: "./spec/page/public",
         host: "localhost",
         port,
       }),
@@ -32,7 +32,7 @@ module.exports = async () => {
 
   await bundle.write({
     output: {
-      dir: "./tests/page/public/build",
+      dir: "./spec/page/public/build",
       inlineDynamicImports: true,
     },
   });

src/List.svelte

@@ -13,7 +13,9 @@
     export let labelIdentifier = 'label';
     export let getOptionLabel = (option, filterText) => {
         if (option)
-            return option.isCreator ? `Create \"${filterText}\"` : option[labelIdentifier];
+            return option.isCreator
+                ? `Create \"${filterText}\"`
+                : option[labelIdentifier];
     };
     export let getGroupHeaderLabel = null;
     export let itemHeight = 40;
@@ -270,11 +272,13 @@
 
 <svelte:window on:keydown={handleKeyDown} on:resize={computePlacement} />
 
-{#if isVirtualList}
-    <div
-        class="listContainer virtualList"
-        bind:this={container}
-        style={listStyle}>
+<div
+    class="listContainer"
+    class:virtualList={isVirtualList}
+    bind:this={container}
+    style={listStyle}
+    tabindex="-1">
+    {#if isVirtualList}
         <svelte:component
             this={VirtualList}
             {items}
@@ -295,11 +299,7 @@
                     isHover={isItemHover(hoverItemIndex, item, i, items)} />
             </div>
         </svelte:component>
-    </div>
-{/if}
-
-{#if !isVirtualList}
-    <div class="listContainer" bind:this={container} style={listStyle}>
+    {:else}
         {#each items as item, i}
             {#if item.isGroupHeader && !item.isSelectable}
                 <div class="listGroupTitle">{getGroupHeaderLabel(item)}</div>
@@ -323,5 +323,5 @@
                 <div class="empty">{noOptionsMessage}</div>
             {/if}
         {/each}
-    </div>
-{/if}
+    {/if}
+</div>

src/Select.svelte

@@ -788,8 +788,7 @@
     class:focused={isFocused}
     style={containerStyles}
     on:click={handleClick}
-    bind:this={container}
-    tabindex="-1">
+    bind:this={container}>
     {#if Icon}
         <svelte:component this={Icon} {...iconProps} />
     {/if}

test/src/Select/Select--default.svelte

@@ -1,3 +1,3 @@
-<div class="selectContainer" tabindex="-1">
+<div class="selectContainer">
   <input autocomplete="off" autocorrect="off" spellcheck="{false}" placeholder="Select...">
 </div>

test/src/index.js

@@ -9,7 +9,6 @@ import TestIcon from './TestIcon.svelte';
 import TestClearIcon from './TestClearIcon.svelte';
 import SelectDefault from './Select/Select--default.svelte'
 import SelectMultiSelected from './Select/Select--multiSelected.svelte'
-import ListDefault from './List/List--default.svelte'
 import ParentContainer from './Select/ParentContainer.svelte'
 import {assert, test, done} from 'tape-modern';
 
@@ -435,24 +434,6 @@ test('List starts with first item in hover state', async (t) => {
   select.$destroy();
 });
 
-test('List starts with first item in hover state', async (t) => {
-  const testTemplate = new ListDefault({
-    target: testTarget
-  });
-
-  const select = new Select({
-    target,
-    props: {
-      items,
-    }
-  });
-
-  document.querySelector('.selectContainer').click();
-
-  testTemplate.$destroy();
-  select.$destroy();
-});
-
 test('select item from list', async (t) => {
   const select = new Select({
     target,