remix-run / example-trellix Goto Github PK

Hi! In my company, we're using Remix, and we're making more or less the same approach of auth with Cookies, but haven't been able to test it correctly. We're trying to test that a loader has a cookie that an action has previously set with: redirect("/", {headers: {"Set-Cookie": "cookie=foo"}}). The problem is that the loader doesn't receive any cookie, and it has been impossible to test it using remixStub.

Testing auth is very important for us, but ideally, we don't want to start using an e2e tool such as playwright because Vitest (+ happy-dom) is way faster, is there anything you think we might be missing or do you have any comment?

Furthermore, it would be awesome if you show us how would you to test these kinds of examples!

The EditableText component is currently experiencing an error when handling the onBlur event. The intended functionality is for the onBlur event to trigger fetcher.submit, but instead, it produces the following error message: "Uncaught Error: Cannot submit element that is not <form>, <button>, or <input type='submit|image'>" in the console. Additionally, fetcher.submit does not trigger unless the user presses the Enter key after typing.

Observations:

• The use of event.currentTarget selects the input field rather than the form, potentially causing the error.
• While the onBlur event is meant to trigger fetcher.submit under certain conditions, the current implementation fails to do so.
• The error message indicates that the element being submitted does not meet the required criteria of <form>, <button>, or <input type='submit|image'>.
• Notably, the onSubmit functionality works as expected when the user presses Enter after typing.

Code Snippet:

onBlur={(event) => {
  if (
    inputRef.current?.value !== value &&
    inputRef.current?.value.trim() !== ""
  ) {
    fetcher.submit(event.currentTarget);
  }
  setEdit(false);
}}

onBlur={(event) => {
  if (
    inputRef.current?.value !== value &&
    inputRef.current?.value.trim() !== ""
  ) {
    fetcher.submit(event.currentTarget.parentElement as HTMLFormElement);
  }
  setEdit(false);
}}