test: restore e2e tests

packages/calcite-components/src/components/action-bar/action-bar.e2e.ts

@@ -437,9 +437,10 @@ describe("calcite-action-bar", () => {
       expect(await page.findAll(slottedActionsSelector)).toHaveLength(7);
     });
 
-    it.skip("should slot 'menu-actions' on resize of component", async () => {
-      const page = await newE2EPage({
-        html: html`<div style="width:500px; height:500px;">
+    it("should slot 'menu-actions' on resize of component", async () => {
+      const page = await newE2EPage();
+      await page.setContent(
+        html`<div style="width:500px; height:500px;">
           <calcite-action-bar style="height: 290px">
             <calcite-action-group id="dynamic-group"
               ><calcite-action text="Layer properties" icon="sliders-horizontal"></calcite-action>
@@ -458,7 +459,7 @@ describe("calcite-action-bar", () => {
             <calcite-action slot="actions-end" text="Tips" icon="lightbulb"></calcite-action>
           </calcite-action-bar>
         </div>`,
-      });
+      );
       await page.waitForTimeout(overflowActionsDebounceInMs + 10);
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);

packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts

@@ -1,7 +1,7 @@
 import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests";
 import { selectText } from "../../tests/utils";
-import { canConvertToHexa, isValidHex, normalizeHex } from "../color-picker/utils";
+import { normalizeHex } from "../color-picker/utils";
 import { CSS } from "./resources";
 
 describe("calcite-color-picker-hex-input", () => {
@@ -283,34 +283,19 @@ describe("calcite-color-picker-hex-input", () => {
     let page: E2EPage;
     let input: E2EElement;
 
-    async function assertTabAndEnterBehavior(
-      hexInputChars: string,
-      expectedValue: string | null,
-      alphaChannel = false,
-    ): Promise<void> {
+    async function assertTabAndEnterBehavior(hexInputChars: string, expectedValue: string | null): Promise<void> {
       const normalizedInputHex = normalizeHex(hexInputChars);
-      const resetHex = alphaChannel ? "#face0fff" : "#efface";
+      const initialValue = await input.getProperty("value");
 
-      if (normalizedInputHex === resetHex) {
-        throw new Error(`input hex (${hexInputChars}) cannot be the same as reset value (${resetHex})`);
+      if (normalizedInputHex === initialValue) {
+        throw new Error(`input hex (${hexInputChars}) cannot be the same as reset value (${initialValue})`);
       }
 
-      expectedValue =
-        expectedValue === null ||
-        (alphaChannel
-          ? isValidHex(normalizedInputHex, true) || canConvertToHexa(normalizedInputHex)
-          : isValidHex(normalizedInputHex))
-          ? expectedValue
-          : resetHex;
-
-      await typeHexValue(resetHex, "Enter");
-      expect(await input.getProperty("value")).toBe(resetHex);
-
       await typeHexValue(hexInputChars, "Enter");
       expect(await input.getProperty("value")).toBe(expectedValue);
 
-      await typeHexValue(resetHex, "Enter");
-      expect(await input.getProperty("value")).toBe(resetHex);
+      await input.setProperty("value", initialValue);
+      await page.waitForChanges();
 
       await typeHexValue(hexInputChars, "Tab");
       expect(await input.getProperty("value")).toBe(expectedValue);
@@ -345,7 +330,7 @@ describe("calcite-color-picker-hex-input", () => {
         it("commits hex chars on Tab and Enter", async () => {
           await assertTabAndEnterBehavior("b00", "#bb0000");
           await assertTabAndEnterBehavior("c0ffee", "#c0ffee");
-          await assertTabAndEnterBehavior("", startingHex);
+          await assertTabAndEnterBehavior("", "#c0ffee");
         });
 
         it("prevents committing invalid hex values", async () => {
@@ -451,23 +436,23 @@ describe("calcite-color-picker-hex-input", () => {
           input = await page.find("calcite-color-picker-hex-input");
         });
 
-        it.skip("commits hexa chars on Tab and Enter", async () => {
-          await assertTabAndEnterBehavior("b00", "#bb0000ff", true);
-          await assertTabAndEnterBehavior("abcd", "#aabbccdd", true);
-          await assertTabAndEnterBehavior("c0ffee", "#c0ffeeff", true);
-          await assertTabAndEnterBehavior("b0b0b0b0", "#b0b0b0b0", true);
-          await assertTabAndEnterBehavior("", startingHexa, true);
+        it("commits hexa chars on Tab and Enter", async () => {
+          await assertTabAndEnterBehavior("b00", "#bb000000");
+          await assertTabAndEnterBehavior("b0b0", "#bb00bb00");
+          await assertTabAndEnterBehavior("c0ffee", "#c0ffee00");
+          await assertTabAndEnterBehavior("b0b0b0b0", "#b0b0b000");
+          await assertTabAndEnterBehavior("", "#b0b0b000");
         });
 
-        it.skip("prevents committing invalid hexa values", async () => {
-          await assertTabAndEnterBehavior("aabbccd", startingHexa, true);
-          await assertTabAndEnterBehavior("aabbcc", "#aabbccff", true);
-          await assertTabAndEnterBehavior("ff00f", "#aabbccff", true);
-          await assertTabAndEnterBehavior("ff00", "#ffff0000", true);
-          await assertTabAndEnterBehavior("aab", "#aaaabbff", true);
-          await assertTabAndEnterBehavior("aa", "#aaaabbff", true);
-          await assertTabAndEnterBehavior("a", "#aaaabbff", true);
-          await assertTabAndEnterBehavior("", "#aaaabbff", true);
+        it("prevents committing invalid hexa values", async () => {
+          await assertTabAndEnterBehavior("aabbccd", "#aabbcc00");
+          await assertTabAndEnterBehavior("aabbcc", "#aabbcc00");
+          await assertTabAndEnterBehavior("ff00f", "#aabbcc00");
+          await assertTabAndEnterBehavior("ff00", "#ffff0000");
+          await assertTabAndEnterBehavior("aab", "#aaaabb00");
+          await assertTabAndEnterBehavior("aa", "#aaaabb00");
+          await assertTabAndEnterBehavior("a", "#aaaabb00");
+          await assertTabAndEnterBehavior("", "#aaaabb00");
         });
 
         it("allows nudging RGB channels with arrow keys (+/-1) and shift modifies amount (+/-10)", async () => {
@@ -502,23 +487,23 @@ describe("calcite-color-picker-hex-input", () => {
             await page.waitForChanges();
           });
 
-          it.skip("commits hexa chars on Tab and Enter", async () => {
-            await assertTabAndEnterBehavior("b00", "#bb0000ff", true);
-            await assertTabAndEnterBehavior("baba", "#bbaabbaa", true);
-            await assertTabAndEnterBehavior("c0ffee", "#c0ffeeff", true);
-            await assertTabAndEnterBehavior("c0c0c0c0", "#c0c0c0c0", true);
-            await assertTabAndEnterBehavior("", null, true);
+          it("commits hexa chars on Tab and Enter", async () => {
+            await assertTabAndEnterBehavior("b00", "#bb000000");
+            await assertTabAndEnterBehavior("b0b0", "#bb00bb00");
+            await assertTabAndEnterBehavior("c0ffee", "#c0ffee00");
+            await assertTabAndEnterBehavior("c0c0c0c0", "#c0c0c000");
+            await assertTabAndEnterBehavior("", null);
           });
 
-          it.skip("prevents committing invalid hexa values", async () => {
-            await assertTabAndEnterBehavior("aabbccd", startingHexa, true);
-            await assertTabAndEnterBehavior("aabbcc", "#aabbccff", true);
-            await assertTabAndEnterBehavior("ff00f", "#aabbccff", true);
-            await assertTabAndEnterBehavior("ff00", "#ffff0000", true);
-            await assertTabAndEnterBehavior("aab", "#aaaabbff", true);
-            await assertTabAndEnterBehavior("aa", "#aaaabbff", true);
-            await assertTabAndEnterBehavior("a", "#aaaabbff", true);
-            await assertTabAndEnterBehavior("", null, true);
+          it("prevents committing invalid hexa values", async () => {
+            await assertTabAndEnterBehavior("aabbccd", "#aabbcc00");
+            await assertTabAndEnterBehavior("aabbcc", "#aabbcc00");
+            await assertTabAndEnterBehavior("ff00f", "#aabbcc00");
+            await assertTabAndEnterBehavior("ff00", "#ffff0000");
+            await assertTabAndEnterBehavior("aab", "#aaaabb00");
+            await assertTabAndEnterBehavior("aa", "#aaaabb00");
+            await assertTabAndEnterBehavior("a", "#aaaabb00");
+            await assertTabAndEnterBehavior("", null);
           });
 
           it("restores previous value when a nudge key is pressed and no-color is allowed and set", async () => {

packages/calcite-components/src/components/date-picker/date-picker.e2e.ts

@@ -224,7 +224,7 @@ describe("calcite-date-picker", () => {
     expect(changedEvent).toHaveReceivedEventTimes(0);
   });
 
-  it.skip("correctly changes date on next/prev", async () => {
+  it("correctly changes date on next/prev", async () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-date-picker value='2000-11-27'></calcite-date-picker>");
     const getMonth = () => {

packages/calcite-components/src/components/date-picker/date-picker.tsx

@@ -316,6 +316,7 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
   @Watch("effectiveLocale")
   effectiveLocaleChange(): void {
     updateMessages(this, this.effectiveLocale);
+    this.loadLocaleData();
   }
 
   @State() endAsDate: Date;
@@ -349,7 +350,6 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
     }
   }
 
-  @Watch("effectiveLocale")
   private async loadLocaleData(): Promise<void> {
     if (!Build.isBrowser) {
       return;

packages/calcite-components/src/components/dropdown/dropdown.e2e.ts

@@ -71,7 +71,7 @@ describe("calcite-dropdown", () => {
     hidden("calcite-dropdown");
   });
 
-  describe.skip("disabled", () => {
+  describe("disabled", () => {
     disabled(simpleDropdownHTML, {
       focusTarget: {
         tab: "calcite-button",
@@ -1114,7 +1114,7 @@ describe("calcite-dropdown", () => {
     await expect(finalSelectedItem).toBe("item-3");
   });
 
-  it.skip("dropdown should not overflow when wrapped inside a tab #3007", async () => {
+  it("dropdown should not overflow when wrapped inside a tab #3007", async () => {
     const page = await newE2EPage({
       html: html`<calcite-tabs>
         <calcite-tab-nav slot="title-group">

packages/calcite-components/src/components/icon/icon.e2e.ts

@@ -69,8 +69,9 @@ describe("calcite-icon", () => {
       expect(path.getAttribute("d")).toBe(iconPathData);
     });
 
-    it.skip("loads icon when it's close to viewport", async () => {
+    it("loads icon when it's close to viewport", async () => {
       const page = await newE2EPage();
+      await page.setViewport({ width: 800, height: 100 });
       await page.setContent(`<calcite-icon icon="a-z" style="margin-top: 1000px"></calcite-icon>`);
       await page.waitForChanges();
 

packages/calcite-components/src/components/input-number/input-number.e2e.ts

@@ -20,9 +20,10 @@ import {
   testHiddenInputSyncing,
   testPostValidationFocusing,
 } from "../input/common/tests";
+import { valueNudgeDelayInMs } from "../input/common/input";
 
 describe("calcite-input-number", () => {
-  const delayFor2UpdatesInMs = 200;
+  const delayFor2UpdatesInMs = valueNudgeDelayInMs * 2;
 
   /**
    * This helper wraps number typing to work around test instability
@@ -219,7 +220,7 @@ describe("calcite-input-number", () => {
     });
   });
 
-  describe.skip("increment/decrement functionality", () => {
+  describe("increment/decrement functionality", () => {
     let page: E2EPage;
     beforeEach(async () => {
       page = await newE2EPage();
@@ -571,16 +572,16 @@ describe("calcite-input-number", () => {
       });
 
       describe("data-adjustment='up'", () => {
-        let buttonUpLocation;
+        let buttonUpLocation: [number, number];
 
         beforeEach(async () => {
           const [x, y] = await getElementXY(page, "calcite-input-number", ".number-button-item[data-adjustment='up']");
           buttonUpLocation = [x, y];
         });
 
-        it.skip("should emit an event regularly on mousedown", async () => {
+        it("should emit an event regularly on mousedown", async () => {
           expect(calciteInputNumberInput).toHaveReceivedEventTimes(0);
-          await page.mouse.move(buttonUpLocation.x, buttonUpLocation.y);
+          await page.mouse.move(buttonUpLocation[0], buttonUpLocation[1]);
           await page.mouse.down();
           await page.waitForTimeout(delayFor2UpdatesInMs);
           await page.mouse.up();
@@ -589,12 +590,12 @@ describe("calcite-input-number", () => {
           expect(await input.getProperty("value")).toBe(`${totalNudgesUp}`);
         });
 
-        it.skip("should stop emitting an event on mouseleave", async () => {
+        it("should stop emitting an event on mouseleave", async () => {
           expect(calciteInputNumberInput).toHaveReceivedEventTimes(0);
-          await page.mouse.move(buttonUpLocation.x, buttonUpLocation.y);
+          await page.mouse.move(buttonUpLocation[0], buttonUpLocation[1]);
           await page.mouse.down();
           await page.waitForTimeout(delayFor2UpdatesInMs);
-          await page.mouse.move(buttonUpLocation.x - 1, buttonUpLocation.y - 1);
+          await page.mouse.move(buttonUpLocation[0] - 1, buttonUpLocation[1] - 1);
 
           const totalNudgesUp = calciteInputNumberInput.length;
           // assert changes no longer emitted after moving away from stepper
@@ -605,7 +606,7 @@ describe("calcite-input-number", () => {
       });
 
       describe("data-adjustment='down'", () => {
-        let buttonDownLocation;
+        let buttonDownLocation: [number, number];
 
         beforeEach(async () => {
           const [x, y] = await getElementXY(
@@ -616,29 +617,30 @@ describe("calcite-input-number", () => {
           buttonDownLocation = [x, y];
         });
 
-        it.skip("should emit an event regularly on mousedown", async () => {
+        it("should emit an event regularly on mousedown", async () => {
           expect(calciteInputNumberInput).toHaveReceivedEventTimes(0);
-          await page.mouse.move(buttonDownLocation.x, buttonDownLocation.y);
+          await page.mouse.move(buttonDownLocation[0], buttonDownLocation[1]);
           await page.mouse.down();
           await page.waitForTimeout(delayFor2UpdatesInMs);
           await page.mouse.up();
           await page.waitForChanges();
-          const totalNudgesUp = calciteInputNumberInput.length;
-          expect(await input.getProperty("value")).toBe(`${totalNudgesUp}`);
+          const totalNudgesDown = calciteInputNumberInput.length;
+          expect(await input.getProperty("value")).toBe(`${-totalNudgesDown}`);
         });
 
-        it.skip("should stop emitting an event on mouseleave", async () => {
+        it("should stop emitting an event on mouseleave", async () => {
           expect(calciteInputNumberInput).toHaveReceivedEventTimes(0);
-          await page.mouse.move(buttonDownLocation.x, buttonDownLocation.y);
+          await page.mouse.move(buttonDownLocation[0], buttonDownLocation[1]);
           await page.mouse.down();
           await page.waitForTimeout(delayFor2UpdatesInMs);
-          await page.mouse.move(buttonDownLocation.x - 1, buttonDownLocation.y - 1);
+          await page.mouse.move(buttonDownLocation[0] - 1, buttonDownLocation[1] - 1);
 
-          const totalNudgesUp = calciteInputNumberInput.length;
+          const totalNudgesDown = calciteInputNumberInput.length;
           // assert changes no longer emitted after moving away from stepper
           await page.waitForTimeout(delayFor2UpdatesInMs);
           await page.mouse.up(); // mouseleave assertion done, we release
-          expect(await input.getProperty("value")).toBe(`${totalNudgesUp}`);
+          await page.waitForChanges();
+          expect(await input.getProperty("value")).toBe(`${-totalNudgesDown}`);
         });
       });
     });

packages/calcite-components/src/components/input-number/input-number.tsx

@@ -73,6 +73,7 @@ import {
   NumericInputComponent,
   syncHiddenFormInput,
   TextualInputComponent,
+  valueNudgeDelayInMs,
 } from "../input/common/input";
 import { CSS, SLOTS } from "./resources";
 import { InputNumberMessages } from "./assets/input-number/t9n";
@@ -807,7 +808,6 @@ export class InputNumber
 
     const inputMax = this.maxString ? parseFloat(this.maxString) : null;
     const inputMin = this.minString ? parseFloat(this.minString) : null;
-    const valueNudgeDelayInMs = 150;
 
     this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
 

packages/calcite-components/src/components/input-text/input-text.e2e.ts

@@ -126,50 +126,40 @@ describe("calcite-input-text", () => {
     expect(changeEventSpy).not.toHaveReceivedEvent();
   });
 
-  it.skip("emits events when value is modified", async () => {
+  it("emits events when value is modified", async () => {
     const page = await newE2EPage();
     await page.setContent(html`<calcite-input-text></calcite-input-text>`);
 
     const element = await page.find("calcite-input-text");
     const calciteInputTextInput = await element.spyOnEvent("calciteInputTextInput");
     const calciteInputTextChange = await element.spyOnEvent("calciteInputTextChange");
+    await element.callMethod("setFocus");
 
     const inputFirstPart = "12345";
-    await element.callMethod("setFocus");
     await page.waitForChanges();
     await page.keyboard.type(inputFirstPart);
     expect(await element.getProperty("value")).toBe(inputFirstPart);
     expect(calciteInputTextInput).toHaveReceivedEventTimes(5);
     expect(calciteInputTextChange).toHaveReceivedEventTimes(0);
 
-    await element.callMethod("setFocus");
-    await page.waitForChanges();
     await page.keyboard.press("Enter");
     expect(calciteInputTextInput).toHaveReceivedEventTimes(5);
     expect(calciteInputTextChange).toHaveReceivedEventTimes(1);
 
-    await element.callMethod("setFocus");
-    await page.waitForChanges();
     await page.keyboard.press("Enter");
     expect(calciteInputTextInput).toHaveReceivedEventTimes(5);
     expect(calciteInputTextChange).toHaveReceivedEventTimes(1);
 
     const textSecondPart = "67890";
-    await element.callMethod("setFocus");
-    await page.waitForChanges();
     await page.keyboard.type(textSecondPart);
     expect(calciteInputTextInput).toHaveReceivedEventTimes(10);
     expect(calciteInputTextChange).toHaveReceivedEventTimes(1);
 
-    await element.callMethod("setFocus");
-    await page.waitForChanges();
     await page.keyboard.press("Tab");
     expect(calciteInputTextInput).toHaveReceivedEventTimes(10);
     expect(calciteInputTextChange).toHaveReceivedEventTimes(2);
     expect(await element.getProperty("value")).toBe(`${inputFirstPart}${textSecondPart}`);
 
-    await element.callMethod("setFocus");
-    await page.waitForChanges();
     await page.keyboard.press("Tab");
     expect(calciteInputTextInput).toHaveReceivedEventTimes(10);
     expect(calciteInputTextChange).toHaveReceivedEventTimes(2);
@@ -183,8 +173,6 @@ describe("calcite-input-text", () => {
     expect(calciteInputTextInput).toHaveReceivedEventTimes(10);
     expect(calciteInputTextChange).toHaveReceivedEventTimes(2);
 
-    await element.callMethod("setFocus");
-    await page.waitForChanges();
     await selectText(element);
     await page.keyboard.press("Backspace");
     await page.keyboard.press("Tab");