import * as React from 'react';

import { render } from '../../../../vitest/render';

import { DatePicker } from './DatePicker';

describe('DatePicker component', () => {
  it('DatePicker with valid value', () => {
    const { container } = render(<DatePicker value='2024-12-31' label='Some label' />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dateField__container sm"
    data-rac=""
  >
    <div
      aria-describedby="react-aria-description-0"
      aria-label="Some label"
      aria-labelledby="_r_0_"
      class="dateField__containerInner"
      data-rac=""
      data-react-aria-pressable="true"
      id="_r_0_"
      role="group"
    >
      <div
        class="dateField"
        data-rac=""
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        role="presentation"
        style="unicode-bidi: isolate;"
      >
        <span
          aria-describedby="react-aria-description-0"
          aria-label="month, Some label"
          aria-valuemax="12"
          aria-valuemin="1"
          aria-valuenow="12"
          aria-valuetext="12 – December"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="month"
          enterkeyhint="next"
          id="react-aria-_r_2_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          12
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="day, Some label"
          aria-valuemax="31"
          aria-valuemin="1"
          aria-valuenow="31"
          aria-valuetext="31"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="day"
          enterkeyhint="next"
          id="react-aria-_r_3_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          31
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="year, Some label"
          aria-valuemax="9999"
          aria-valuemin="1"
          aria-valuenow="2024"
          aria-valuetext="2024"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="year"
          enterkeyhint="next"
          id="react-aria-_r_4_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          2024
        </span>
      </div>
      <input
        class=""
        data-rac=""
        hidden=""
        title=""
        type="text"
        value="2024-12-31"
      />
      <button
        aria-describedby="react-aria-description-0"
        aria-expanded="false"
        aria-haspopup="dialog"
        aria-label="Calendar"
        aria-labelledby="react-aria-_r_5_ _r_0_"
        class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-calendar"
        />
      </button>
    </div>
  </div>
  <div
    aria-hidden="true"
    data-a11y-ignore="aria-hidden-focus"
    data-react-aria-prevent-focus="true"
    data-testid="hidden-dateinput-container"
    style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; width: 1px; white-space: nowrap; top: 0px; left: 0px;"
  >
    <input
      form=""
      step="60"
      tabindex="-1"
      type="date"
      value="2024-12-31"
    />
  </div>
</div>
`);
  });

  it('DatePicker with loading', () => {
    const { container } = render(<DatePicker value='2024-12-31' loading label='Some label' />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dateField__container sm"
    data-rac=""
  >
    <div
      aria-describedby="react-aria-description-0"
      aria-label="Some label"
      aria-labelledby="_r_0_"
      class="dateField__containerInner"
      data-rac=""
      data-react-aria-pressable="true"
      id="_r_0_"
      role="group"
    >
      <div
        class="dateField"
        data-rac=""
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        role="presentation"
        style="unicode-bidi: isolate;"
      >
        <span
          aria-describedby="react-aria-description-0"
          aria-label="month, Some label"
          aria-valuemax="12"
          aria-valuemin="1"
          aria-valuenow="12"
          aria-valuetext="12 – December"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="month"
          enterkeyhint="next"
          id="react-aria-_r_2_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          12
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="day, Some label"
          aria-valuemax="31"
          aria-valuemin="1"
          aria-valuenow="31"
          aria-valuetext="31"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="day"
          enterkeyhint="next"
          id="react-aria-_r_3_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          31
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="year, Some label"
          aria-valuemax="9999"
          aria-valuemin="1"
          aria-valuenow="2024"
          aria-valuetext="2024"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="year"
          enterkeyhint="next"
          id="react-aria-_r_4_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          2024
        </span>
      </div>
      <input
        class=""
        data-rac=""
        hidden=""
        title=""
        type="text"
        value="2024-12-31"
      />
      <div
        aria-label="Loading"
        aria-live="polite"
        aria-valuemax="100"
        aria-valuemin="0"
        class="loader loader--sm"
        id="react-aria-_r_5_"
        role="progressbar"
      />
      <button
        aria-describedby="react-aria-description-0"
        aria-expanded="false"
        aria-haspopup="dialog"
        aria-label="Calendar"
        aria-labelledby="react-aria-_r_6_ _r_0_"
        class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
        data-react-aria-pressable="true"
        id="react-aria-_r_6_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-calendar"
        />
      </button>
    </div>
  </div>
  <div
    aria-hidden="true"
    data-a11y-ignore="aria-hidden-focus"
    data-react-aria-prevent-focus="true"
    data-testid="hidden-dateinput-container"
    style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; width: 1px; white-space: nowrap; top: 0px; left: 0px;"
  >
    <input
      form=""
      step="60"
      tabindex="-1"
      type="date"
      value="2024-12-31"
    />
  </div>
</div>
`);
  });

  it('DatePicker with error', () => {
    const { container } = render(<DatePicker value='2024-12-31' error label='Some label' />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dateField__container sm"
    data-rac=""
  >
    <div
      aria-describedby="react-aria-description-0"
      aria-label="Some label"
      aria-labelledby="_r_0_"
      class="dateField__containerInner"
      data-rac=""
      data-react-aria-pressable="true"
      id="_r_0_"
      role="group"
    >
      <div
        class="dateField error-field"
        data-rac=""
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        role="presentation"
        style="unicode-bidi: isolate;"
      >
        <span
          aria-describedby="react-aria-description-0"
          aria-label="month, Some label"
          aria-valuemax="12"
          aria-valuemin="1"
          aria-valuenow="12"
          aria-valuetext="12 – December"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="month"
          enterkeyhint="next"
          id="react-aria-_r_2_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          12
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="day, Some label"
          aria-valuemax="31"
          aria-valuemin="1"
          aria-valuenow="31"
          aria-valuetext="31"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="day"
          enterkeyhint="next"
          id="react-aria-_r_3_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          31
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="year, Some label"
          aria-valuemax="9999"
          aria-valuemin="1"
          aria-valuenow="2024"
          aria-valuetext="2024"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="year"
          enterkeyhint="next"
          id="react-aria-_r_4_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          2024
        </span>
      </div>
      <input
        class=""
        data-rac=""
        hidden=""
        title=""
        type="text"
        value="2024-12-31"
      />
      <button
        aria-describedby="react-aria-description-0"
        aria-expanded="false"
        aria-haspopup="dialog"
        aria-label="Calendar"
        aria-labelledby="react-aria-_r_5_ _r_0_"
        class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-calendar"
        />
      </button>
    </div>
  </div>
  <div
    aria-hidden="true"
    data-a11y-ignore="aria-hidden-focus"
    data-react-aria-prevent-focus="true"
    data-testid="hidden-dateinput-container"
    style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; width: 1px; white-space: nowrap; top: 0px; left: 0px;"
  >
    <input
      form=""
      step="60"
      tabindex="-1"
      type="date"
      value="2024-12-31"
    />
  </div>
</div>
`);
  });

  it('DatePicker with warning', () => {
    const { container } = render(<DatePicker value='2024-12-31' warning label='Some label' />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dateField__container sm"
    data-rac=""
  >
    <div
      aria-describedby="react-aria-description-0"
      aria-label="Some label"
      aria-labelledby="_r_0_"
      class="dateField__containerInner"
      data-rac=""
      data-react-aria-pressable="true"
      id="_r_0_"
      role="group"
    >
      <div
        class="dateField warning-field"
        data-rac=""
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        role="presentation"
        style="unicode-bidi: isolate;"
      >
        <span
          aria-describedby="react-aria-description-0"
          aria-label="month, Some label"
          aria-valuemax="12"
          aria-valuemin="1"
          aria-valuenow="12"
          aria-valuetext="12 – December"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="month"
          enterkeyhint="next"
          id="react-aria-_r_2_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          12
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="day, Some label"
          aria-valuemax="31"
          aria-valuemin="1"
          aria-valuenow="31"
          aria-valuetext="31"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="day"
          enterkeyhint="next"
          id="react-aria-_r_3_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          31
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="year, Some label"
          aria-valuemax="9999"
          aria-valuemin="1"
          aria-valuenow="2024"
          aria-valuetext="2024"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="year"
          enterkeyhint="next"
          id="react-aria-_r_4_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          2024
        </span>
      </div>
      <input
        class=""
        data-rac=""
        hidden=""
        title=""
        type="text"
        value="2024-12-31"
      />
      <button
        aria-describedby="react-aria-description-0"
        aria-expanded="false"
        aria-haspopup="dialog"
        aria-label="Calendar"
        aria-labelledby="react-aria-_r_5_ _r_0_"
        class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-calendar"
        />
      </button>
    </div>
  </div>
  <div
    aria-hidden="true"
    data-a11y-ignore="aria-hidden-focus"
    data-react-aria-prevent-focus="true"
    data-testid="hidden-dateinput-container"
    style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; width: 1px; white-space: nowrap; top: 0px; left: 0px;"
  >
    <input
      form=""
      step="60"
      tabindex="-1"
      type="date"
      value="2024-12-31"
    />
  </div>
</div>
`);
  });

  it('DatePicker with disabled', () => {
    const { container } = render(<DatePicker value='2024-12-31' disabled label='Some label' />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dateField__container sm"
    data-disabled="true"
    data-rac=""
  >
    <div
      aria-describedby="react-aria-description-0"
      aria-disabled="true"
      aria-label="Some label"
      aria-labelledby="_r_0_"
      class="dateField__containerInner"
      data-disabled="true"
      data-rac=""
      data-react-aria-pressable="true"
      id="_r_0_"
      role="group"
    >
      <div
        class="dateField"
        data-disabled="true"
        data-rac=""
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        role="presentation"
        style="unicode-bidi: isolate;"
      >
        <span
          aria-describedby="react-aria-description-0"
          aria-disabled="true"
          aria-label="month, Some label"
          aria-valuemax="12"
          aria-valuemin="1"
          aria-valuenow="12"
          aria-valuetext="12 – December"
          class="dateField__segment"
          contenteditable="false"
          data-disabled="true"
          data-rac=""
          data-type="month"
          id="react-aria-_r_2_"
          role="spinbutton"
          style="caret-color: transparent;"
        >
          12
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-disabled="true"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-disabled="true"
          aria-label="day, Some label"
          aria-valuemax="31"
          aria-valuemin="1"
          aria-valuenow="31"
          aria-valuetext="31"
          class="dateField__segment"
          contenteditable="false"
          data-disabled="true"
          data-rac=""
          data-type="day"
          id="react-aria-_r_3_"
          role="spinbutton"
          style="caret-color: transparent;"
        >
          31
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-disabled="true"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-disabled="true"
          aria-label="year, Some label"
          aria-valuemax="9999"
          aria-valuemin="1"
          aria-valuenow="2024"
          aria-valuetext="2024"
          class="dateField__segment"
          contenteditable="false"
          data-disabled="true"
          data-rac=""
          data-type="year"
          id="react-aria-_r_4_"
          role="spinbutton"
          style="caret-color: transparent;"
        >
          2024
        </span>
      </div>
      <input
        class=""
        data-disabled="true"
        data-rac=""
        disabled=""
        hidden=""
        type="text"
        value="2024-12-31"
      />
      <button
        aria-describedby="react-aria-description-0"
        aria-expanded="false"
        aria-haspopup="dialog"
        aria-label="Calendar"
        aria-labelledby="react-aria-_r_5_ _r_0_"
        class="iconButton iconButton--sm iconButton--primary--disabled iconButton--ghost"
        data-react-aria-pressable="true"
        disabled=""
        id="react-aria-_r_5_"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-calendar"
        />
      </button>
    </div>
  </div>
  <div
    aria-hidden="true"
    data-a11y-ignore="aria-hidden-focus"
    data-react-aria-prevent-focus="true"
    data-testid="hidden-dateinput-container"
    style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; width: 1px; white-space: nowrap; top: 0px; left: 0px;"
  >
    <input
      disabled=""
      form=""
      step="60"
      tabindex="-1"
      type="date"
      value="2024-12-31"
    />
  </div>
</div>
`);
  });

  it('DatePicker with required', () => {
    const { container } = render(<DatePicker value='2024-12-31' required label='Some label' />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dateField__container sm"
    data-rac=""
  >
    <div
      aria-describedby="react-aria-description-0"
      aria-label="Some label"
      aria-labelledby="_r_0_"
      class="dateField__containerInner"
      data-rac=""
      data-react-aria-pressable="true"
      id="_r_0_"
      role="group"
    >
      <div
        class="dateField"
        data-rac=""
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        role="presentation"
        style="unicode-bidi: isolate;"
      >
        <span
          aria-describedby="react-aria-description-0"
          aria-label="month, Some label"
          aria-required="true"
          aria-valuemax="12"
          aria-valuemin="1"
          aria-valuenow="12"
          aria-valuetext="12 – December"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="month"
          enterkeyhint="next"
          id="react-aria-_r_2_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          12
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="day, Some label"
          aria-required="true"
          aria-valuemax="31"
          aria-valuemin="1"
          aria-valuenow="31"
          aria-valuetext="31"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="day"
          enterkeyhint="next"
          id="react-aria-_r_3_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          31
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="year, Some label"
          aria-required="true"
          aria-valuemax="9999"
          aria-valuemin="1"
          aria-valuenow="2024"
          aria-valuetext="2024"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="year"
          enterkeyhint="next"
          id="react-aria-_r_4_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          2024
        </span>
      </div>
      <input
        class=""
        data-rac=""
        hidden=""
        required=""
        title=""
        type="text"
        value="2024-12-31"
      />
      <button
        aria-describedby="react-aria-description-0"
        aria-expanded="false"
        aria-haspopup="dialog"
        aria-label="Calendar"
        aria-labelledby="react-aria-_r_5_ _r_0_"
        class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-calendar"
        />
      </button>
    </div>
  </div>
  <div
    aria-hidden="true"
    data-a11y-ignore="aria-hidden-focus"
    data-react-aria-prevent-focus="true"
    data-testid="hidden-dateinput-container"
    style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; width: 1px; white-space: nowrap; top: 0px; left: 0px;"
  >
    <input
      form=""
      step="60"
      tabindex="-1"
      type="date"
      value="2024-12-31"
    />
  </div>
</div>
`);
  });

  it('DatePicker with readOnly', () => {
    const { container } = render(<DatePicker value='2024-12-31' readOnly label='Some label' />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dateField__container sm"
    data-rac=""
    data-readonly="true"
  >
    <div
      aria-describedby="react-aria-description-0"
      aria-label="Some label"
      aria-labelledby="_r_0_"
      class="dateField__containerInner"
      data-rac=""
      data-react-aria-pressable="true"
      id="_r_0_"
      role="group"
    >
      <div
        class="dateField"
        data-rac=""
        data-react-aria-pressable="true"
        data-readonly="true"
        id="react-aria-_r_1_"
        role="presentation"
        style="unicode-bidi: isolate;"
      >
        <span
          aria-describedby="react-aria-description-0"
          aria-label="month, Some label"
          aria-readonly="true"
          aria-valuemax="12"
          aria-valuemin="1"
          aria-valuenow="12"
          aria-valuetext="12 – December"
          class="dateField__segment"
          contenteditable="false"
          data-rac=""
          data-readonly="true"
          data-type="month"
          id="react-aria-_r_2_"
          role="spinbutton"
          style="caret-color: transparent;"
          tabindex="0"
        >
          12
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-readonly="true"
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="day, Some label"
          aria-readonly="true"
          aria-valuemax="31"
          aria-valuemin="1"
          aria-valuenow="31"
          aria-valuetext="31"
          class="dateField__segment"
          contenteditable="false"
          data-rac=""
          data-readonly="true"
          data-type="day"
          id="react-aria-_r_3_"
          role="spinbutton"
          style="caret-color: transparent;"
          tabindex="0"
        >
          31
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-readonly="true"
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="year, Some label"
          aria-readonly="true"
          aria-valuemax="9999"
          aria-valuemin="1"
          aria-valuenow="2024"
          aria-valuetext="2024"
          class="dateField__segment"
          contenteditable="false"
          data-rac=""
          data-readonly="true"
          data-type="year"
          id="react-aria-_r_4_"
          role="spinbutton"
          style="caret-color: transparent;"
          tabindex="0"
        >
          2024
        </span>
      </div>
      <input
        class=""
        data-rac=""
        hidden=""
        title=""
        type="text"
        value="2024-12-31"
      />
      <button
        aria-describedby="react-aria-description-0"
        aria-expanded="false"
        aria-haspopup="dialog"
        aria-label="Calendar"
        aria-labelledby="react-aria-_r_5_ _r_0_"
        class="iconButton iconButton--sm iconButton--primary--disabled iconButton--ghost"
        data-react-aria-pressable="true"
        disabled=""
        id="react-aria-_r_5_"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-calendar"
        />
      </button>
    </div>
  </div>
  <div
    aria-hidden="true"
    data-a11y-ignore="aria-hidden-focus"
    data-react-aria-prevent-focus="true"
    data-testid="hidden-dateinput-container"
    style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; width: 1px; white-space: nowrap; top: 0px; left: 0px;"
  >
    <input
      form=""
      step="60"
      tabindex="-1"
      type="date"
      value="2024-12-31"
    />
  </div>
</div>
`);
  });

  it('DatePicker with width md', () => {
    const { container } = render(<DatePicker value='2024-12-31' width='md' label='Some label' />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="dateField__container md"
    data-rac=""
  >
    <div
      aria-describedby="react-aria-description-0"
      aria-label="Some label"
      aria-labelledby="_r_0_"
      class="dateField__containerInner"
      data-rac=""
      data-react-aria-pressable="true"
      id="_r_0_"
      role="group"
    >
      <div
        class="dateField"
        data-rac=""
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        role="presentation"
        style="unicode-bidi: isolate;"
      >
        <span
          aria-describedby="react-aria-description-0"
          aria-label="month, Some label"
          aria-valuemax="12"
          aria-valuemin="1"
          aria-valuenow="12"
          aria-valuetext="12 – December"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="month"
          enterkeyhint="next"
          id="react-aria-_r_2_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          12
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="day, Some label"
          aria-valuemax="31"
          aria-valuemin="1"
          aria-valuenow="31"
          aria-valuetext="31"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="day"
          enterkeyhint="next"
          id="react-aria-_r_3_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          31
        </span>
        <span
          aria-hidden="true"
          class="dateField__segment"
          data-rac=""
          data-type="literal"
        >
          /
        </span>
        <span
          aria-label="year, Some label"
          aria-valuemax="9999"
          aria-valuemin="1"
          aria-valuenow="2024"
          aria-valuetext="2024"
          autocorrect="off"
          class="dateField__segment"
          contenteditable="true"
          data-rac=""
          data-type="year"
          enterkeyhint="next"
          id="react-aria-_r_4_"
          inputmode="numeric"
          role="spinbutton"
          spellcheck="false"
          style="caret-color: transparent;"
          tabindex="0"
        >
          2024
        </span>
      </div>
      <input
        class=""
        data-rac=""
        hidden=""
        title=""
        type="text"
        value="2024-12-31"
      />
      <button
        aria-describedby="react-aria-description-0"
        aria-expanded="false"
        aria-haspopup="dialog"
        aria-label="Calendar"
        aria-labelledby="react-aria-_r_5_ _r_0_"
        class="iconButton iconButton--sm iconButton--primary iconButton--ghost"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          aria-hidden="true"
          class="shoptet-icon icon icon--default icon--md shp-calendar"
        />
      </button>
    </div>
  </div>
  <div
    aria-hidden="true"
    data-a11y-ignore="aria-hidden-focus"
    data-react-aria-prevent-focus="true"
    data-testid="hidden-dateinput-container"
    style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; width: 1px; white-space: nowrap; top: 0px; left: 0px;"
  >
    <input
      form=""
      step="60"
      tabindex="-1"
      type="date"
      value="2024-12-31"
    />
  </div>
</div>
`);
  });
});