0

Screenshot tests always falling in tests with my custom Input component. Screenshots with difference shows me difference in border-radius even after adding these tests.this is the difference Sometimes it falls in different places with input but always trouble in border-radius.

This is my story

export default {
  title: "shared/Input",
  component: Input,
  argTypes: {
    backgroundColor: { control: "color" },
  },
} as ComponentMeta<typeof Input>

const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />

export const Primary = Template.bind({})
Primary.args = {
  placeholder: "Type text",
  value: "123123",
}

export const WithoutPlaceholder = Template.bind({})
WithoutPlaceholder.args = {
  value: "123123",
}

This is my Input component

export const Input = memo(
  ({
    className,
    value,
    onChange,
    type = "text",
    placeholder,
    placeholderInline = false,
    autofocus,
    ...otherProps
  }: InputProps) => {
    const ref = useRef<HTMLInputElement>(null)
    const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
      onChange?.(e.target.value)
    }

    useEffect(() => {
      if (autofocus) {
        ref.current?.focus()
      }
    }, [autofocus])

    const mods: Record<string, boolean> = {
      [cls.placeholderInline]: placeholderInline,
    }

    return (
      <div className={classNames(cls.Input, mods, [className])}>
        {placeholder && <div className={cls.placeholder}>{placeholder}</div>}
        <input
          ref={ref}
          type={type}
          value={value}
          onChange={onChangeHandler}
          className={cls.input}
          {...otherProps}
        />
      </div>
    )
  }
)

And styles(scss)

.input {
  width: 100%;
  background: var(--bg-color);
  border: none;
  border: 1.5px solid var(--primary-color);
  border-radius: 5px;
  color: var(--primary-color);

  &:focus {
    outline: 1.5px solid var(--inverted-primary-color);
  }
}

.placeholderInline {
  display: flex;
  margin-right: 5px;
}

I tried find a problem in storybook config and loki config but it's to no avail.

DmoJK
  • 13
  • 2

0 Answers0