chore: phonenumber test

packages/blade/.storybook/react/main.ts

@@ -22,6 +22,7 @@ const config: StorybookConfig = {
     '../../src/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/**/*.internal.stories.mdx',
     '../../src/**/*.internal.stories.@(ts|tsx|js|jsx)',
+    '../../src/**/*.e2e.stories.@(ts|tsx|js|jsx)',
   ],
   addons: [
     '@storybook/addon-links',

packages/blade/src/components/Button/Button/Button.stories.tsx

@@ -19,7 +19,6 @@ import {
   getStyledPropsArgTypes,
 } from '~components/Box/BaseBox/storybookArgTypes';
 import { castWebType } from '~utils';
-import { Box } from '~components/Box';
 
 const Page = (): ReactElement => {
   return (
@@ -446,14 +445,3 @@ ButtonRef.parameters = {
     },
   },
 };
-
-export const ButtonTest = (): React.ReactElement => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <Box>
-      <ButtonComponent onClick={() => setCount((prev) => prev + 1)}>Increase</ButtonComponent>
-      <Text testID="counter">Clicked: {count}</Text>
-    </Box>
-  );
-};

packages/blade/src/components/Input/PhoneNumberInput/__tests__/PhoneNumberInput.e2e.stories.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { StoryFn, Meta } from '@storybook/react';
+import React from 'react';
+import { PhoneNumberInput } from '../PhoneNumberInput';
+import type { PhoneNumberInputProps } from '../types';
+
+export default {
+  title: 'Components/E2E Tests/PhoneNumberInput',
+  component: PhoneNumberInput,
+} as Meta<PhoneNumberInputProps>;
+
+const label = 'Phone Number';
+
+export const SelectACountry: StoryFn<typeof PhoneNumberInput> = (): React.ReactElement => {
+  return <PhoneNumberInput label={label} />;
+};
+
+export const UncontrolledState: StoryFn<typeof PhoneNumberInput> = (): React.ReactElement => {
+  return (
+    <PhoneNumberInput
+      label={label}
+      defaultValue="9876543210"
+      onChange={(data) => {
+        (window as any).onChangeData = data;
+      }}
+    />
+  );
+};
+
+export const ControlledState: StoryFn<typeof PhoneNumberInput> = (): React.ReactElement => {
+  const [value, setValue] = React.useState('9876543210');
+  return (
+    <PhoneNumberInput
+      label={label}
+      value={value}
+      onChange={(data) => {
+        (window as any).onChangeData = data;
+        setValue(data.value);
+      }}
+    />
+  );
+};
+
+export const Disabled: StoryFn<typeof PhoneNumberInput> = (): React.ReactElement => {
+  return <PhoneNumberInput isDisabled label={label} />;
+};
+
+export const AutoFocus: StoryFn<typeof PhoneNumberInput> = (): React.ReactElement => {
+  // eslint-disable-next-line jsx-a11y/no-autofocus
+  return <PhoneNumberInput autoFocus label={label} />;
+};

packages/blade/src/components/Input/PhoneNumberInput/__tests__/PhoneNumberInput.e2e.test.ts

@@ -0,0 +1,132 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import { expect, browser } from '@wdio/globals';
+import { setupBrowser } from '@testing-library/webdriverio';
+import { Key } from 'webdriverio';
+
+const goTo = async (test: string): Promise<void> => {
+  await browser.url(`?args=&id=${test}&viewMode=story`);
+  await browser.waitUntil(async () => (await browser.getTitle()).match(test), {
+    timeout: 5000,
+  });
+};
+
+const label = 'Phone Number';
+
+describe('PhoneNumberInput', () => {
+  it('Should select a country', async () => {
+    await goTo('components-e2e-tests-phonenumberinput--select-a-country');
+    const { getByLabelText, getByRole, queryByRole } = setupBrowser(browser);
+
+    // Ensure the country selector is closed
+    await expect(await queryByRole('menu')).not.toExist();
+
+    // Click on the country selector and open it
+    const button = await getByRole('button', { name: /select country/i });
+    await button.click();
+    await browser.pause(300);
+
+    // Use arrow keys to navigate to a country
+    await browser.keys(['ArrowDown', 'ArrowDown']);
+
+    // Click on the country to select it
+    await browser.keys(['Enter']);
+    await browser.pause(300);
+
+    // Ensure the country selector is closed
+    await expect(await queryByRole('menu')).not.toExist();
+
+    // expect albania to be selected
+    await expect(await getByRole('button', { name: /albania/i })).toExist();
+    await browser.pause(300);
+
+    // Ensure that input is in focus, input is tel type;
+    await expect(await getByLabelText(label)).toBeFocused();
+  });
+
+  it('should work with uncontrolled state', async () => {
+    await goTo('components-e2e-tests-phonenumberinput--uncontrolled-state');
+    const { getByLabelText } = setupBrowser(browser);
+
+    const input = await getByLabelText(label);
+
+    // Focus on input
+    await input.click();
+
+    // Ensure default value is set
+    await expect(input).toHaveValue('9876543210');
+
+    // Type inside input
+    await input.clearValue();
+    await input.setValue('1234567890');
+
+    // Ensure the value of the input updates
+    await expect(input).toHaveValue('1234567890');
+
+    // expect onChange to be called
+    const onChangeData = await browser.execute(() => (window as any).onChangeData);
+    expect(onChangeData).toEqual({
+      country: 'IN',
+      dialCode: '+91',
+      name: null,
+      phoneNumber: '1234 567890',
+      value: '1234567890',
+    });
+  });
+
+  it('should work with controlled state', async () => {
+    await goTo('components-e2e-tests-phonenumberinput--controlled-state');
+    const { getByLabelText } = setupBrowser(browser);
+
+    await browser.pause(300);
+    const input = await getByLabelText(label);
+
+    // Focus on input
+    await input.click();
+
+    // Ensure default value is set
+    await expect(input).toHaveValue('9876543210');
+
+    // Type inside input
+    const length = (await input.getValue()).length;
+    const backSpaces = new Array(length).fill(Key.Backspace);
+    await browser.keys(backSpaces);
+    await input.setValue('1234567890');
+
+    // Ensure the value of the input updates
+    await expect(input).toHaveValue('1234567890');
+
+    // expect onChange to be called
+    const onChangeData = await browser.execute(() => (window as any).onChangeData);
+    expect(onChangeData).toEqual({
+      country: 'IN',
+      dialCode: '+91',
+      name: null,
+      phoneNumber: '1234 567890',
+      value: '1234567890',
+    });
+  });
+
+  it('should not respond to events if disabled', async () => {
+    await goTo('components-e2e-tests-phonenumberinput--disabled');
+    const { getByLabelText } = setupBrowser(browser);
+
+    const input = await getByLabelText(label);
+    await expect(input).toHaveValue('');
+
+    // Ensure the input is disabled
+    await expect(input).toBeDisabled();
+
+    // expect input to not be focused
+    await expect(input).not.toBeFocused();
+  });
+
+  it('should be autofocused', async () => {
+    await goTo('components-e2e-tests-phonenumberinput--auto-focus');
+    const { getByLabelText } = setupBrowser(browser);
+
+    const input = await getByLabelText(label);
+    await browser.pause(300);
+    await expect(input).toBeFocused();
+  });
+});