Skip to content

bookmarkcard.tsx and test.tsx file changed #336

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
R-Sandor merged 1 commit into from
Feb 13, 2025
Merged

bookmarkcard.tsx and test.tsx file changed #336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 78 additions & 4 deletions frontend/__tests__/Bookmark/NewBookmarkCard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
await user.click(toggle);
expect(submit).not.toBeDisabled();

// fields should be populated
// Fields should be populated
expect(url).toHaveValue("https://foodnetwork.com");

const axiosMock = new MockAdapter(instance);
Expand Down Expand Up @@ -103,7 +103,7 @@

await user.click(submit);

// if everything submitted correctly then it should be empty input field.
// If submitted correctly, the fields should be reset.
expect(url).toHaveValue("");
expect(tags).toHaveValue("");
expect(submit).toBeDisabled();
Expand Down Expand Up @@ -171,7 +171,7 @@
await user.type(tags, "food");
expect(submit).not.toBeDisabled();

// fields should be populated
// Fields should be populated
expect(url).toHaveValue("https://foodnetwork.com");

const axiosMock = new MockAdapter(instance);
Expand Down Expand Up @@ -226,7 +226,7 @@

await user.click(submit);

// if everything submitted correctly then it should be empty input field.
// If submitted correctly, the fields should be reset.
expect(url).toHaveValue("");
expect(tags).toHaveValue("");
expect(submit).toBeDisabled();
Expand Down Expand Up @@ -276,3 +276,77 @@
expect(screen.queryByTestId("Tag2")).toEqual(null);
});
});

describe("Success Toast", () => {
it("displays a green success toast when bookmark is added successfully", async () => {
render(
<div data-bs-theme="dark" className="row pt-3">
<div className="col-6 col-sm-12 col-md-12 col-lg-4">
<NewBookmarkCard />
</div>
</div>,
);

const submit = screen.getByText("Submit");
const tagsInput = screen.getByPlaceholderText("Enter a tag");
const urlInput = screen.getByPlaceholderText(/discover/i);

// Type in the URL (it will be prefixed with "https://")
await user.type(urlInput, "example.com");
expect(urlInput).toHaveValue("https://example.com");

// Type a tag and add it
await user.type(tagsInput, "testtag");
await user.type(tagsInput, "{enter}");

// Setup axios mocks for API calls
const axiosMock = new MockAdapter(instance);
const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL;
const tagsAPI = SERVER_URL + "/api/tags";
const bookmarkAPI = SERVER_URL + "/api/bookmark";

const expectedResult = [
{
id: 1,
title: "testtag",
bookmarks: [],
},
];

const expectedBookmark: Bookmark = {
id: 1,
title: "example.com",
url: "https://example.com",
tags: [
{
id: 1,
title: "testtag",
},
],
screenshotUrl: "",
scrapable: true,
};

axiosMock.onPost(tagsAPI, ["testtag"]).reply(() => {
return [200, expectedResult];
});

axiosMock
.onPost(bookmarkAPI, {
title: "https://example.com",
url: "https://example.com",
tagIds: [1],
scrapable: true,
})
.reply(() => {
return [200, expectedBookmark];
});

await user.click(submit);

// Wait for the success toast to appear
expect(
await screen.findByText("Bookmark added successfully!")

Check failure on line 349 in frontend/__tests__/Bookmark/NewBookmarkCard.test.tsx

View workflow job for this annotation

GitHub Actions / sonarQube Frontend

__tests__/Bookmark/NewBookmarkCard.test.tsx > Success Toast > displays a green success toast when bookmark is added successfully 

TestingLibraryElementError: Unable to find an element with the text: Bookmark added successfully!. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="row pt-3"
      data-bs-theme="dark"
    >
      <div
        class="col-6 col-sm-12 col-md-12 col-lg-4"
      >
        <div
          class="_main_ba4702"
        >
          <form
            action="#"
          >
            <div
              class="card _newBookmarkCard_ba4702 undefined"
            >
              <div
                class="card-header"
              >
                Add Bookmark 
                <i
                  class="bi bi-bookmarks-fill"
                />
                 
              </div>
              <div
                class="card-body"
              >
                <div
                  class="card-text _title_ba4702"
                >
                  <input
                    class="form-control"
                    id="url"
                    name="url"
                    placeholder="url: https://findfirst.com/discover"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="card-footer _cardFooter_ba4702 "
              >
                <div
                  class="_container_ba4702"
                >
                  <input
                    class="_input_ba4702"
                    data-testid="new-bk-tag-input"
                    placeholder="Enter a tag"
                    value=""
                  />
                </div>
                <button
                  class="_formButton_ba4702  _submit_ba4702"
                  disabled=""
                  type="submit"
                >
                  Submit
                </button>
                <button
                  class="_formButton_ba4702 _reset_ba4702"
                  type="reset"
                >
                  Reset
                </button>
              </div>
            </div>
          </form>
          <section
            aria-atomic="false"
            aria-label="Notifications Alt+T"
            aria-live="polite"
            aria-relevant="additions text"
            class="Toastify"
          />
        </div>
      </div>
    </div>
  </div>
</body>

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="row pt-3"
      data-bs-theme="dark"
    >
      <div
        class="col-6 col-sm-12 col-md-12 col-lg-4"
      >
        <div
          class="_main_ba4702"
        >
          <form
            action="#"
          >
            <div
              class="card _newBookmarkCard_ba4702 undefined"
            >
              <div
                class="card-header"
              >
                Add Bookmark 
                <i
                  class="bi bi-bookmarks-fill"
                />
                 
              </div>
              <div
                class="card-body"
              >
                <div
                  class="card-text _title_ba4702"
                >
                  <input
                    class="form-control"
                    id="url"
                    name="url"
                    placeholder="url: https://findfirst.com/discover"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="card-footer _cardFooter_ba4702 "
              >
                <div
                  class="_container_ba4702"
                >
                  <input
                    class="_input_ba4702"
                    data-testid="new-bk-tag-input"
                    placeholder="Enter a tag"
                    value=""
                  />
                </div>
                <button
                  class="_formButton_ba4702  _submit_ba4702"
).toBeInTheDocument();
});
});
41 changes: 24 additions & 17 deletions frontend/components/Bookmark/NewBookmarkCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,14 @@ import { AxiosError, AxiosResponse } from "axios";
import { ScrapableNewBookmarkToggle } from "./ScrapableToggle";

async function makeNewBookmark(createBmk: Bookmark): Promise<Bookmark> {
let newBkmkRequest: NewBookmarkRequest;
newBkmkRequest = {
let newBkmkRequest: NewBookmarkRequest = {
title: createBmk.title,
url: createBmk.url,
tagIds: [],
scrapable: createBmk.scrapable,
};
console.log(createBmk.scrapable);
let tagTitles: string[] = createBmk.tags.map((t) => {
return t.title;
});
let tagTitles: string[] = createBmk.tags.map((t) => t.title);

await api.addAllTag(tagTitles).then((response) => {
let respTags: Tag[] = response.data;
Expand All @@ -55,16 +52,27 @@ async function makeNewBookmark(createBmk: Bookmark): Promise<Bookmark> {
theme: "colored",
});
}

return;
}
if (!(response instanceof AxiosError)) {
console.log(response.data.scrapable);
// Update the bookmark with the response data
createBmk.id = response.data.id;
createBmk.tags = response.data.tags;
createBmk.screenshotUrl = response.data.screenshotUrl;
createBmk.scrapable = response.data.scrapable;
createBmk.title = response.data.title;

// Show a green success toast for a successful add
toast.success("Bookmark added successfully!", {
position: "bottom-right",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});
}
});
return createBmk;
Expand Down Expand Up @@ -95,10 +103,8 @@ export default function NewBookmarkCard() {
submittedBmk: NewBookmarkForm,
actions: any,
) => {
// get the the last inputed string and all the tags already entered.
let tags: Tag[] = strTags.map((t) => {
return { title: t, id: -1 };
});
// Get the last inputted string and all the tags already entered.
let tags: Tag[] = strTags.map((t) => ({ title: t, id: -1 }));
if (tagInput) {
tags.push({ title: tagInput, id: -1 });
}
Expand All @@ -112,10 +118,12 @@ export default function NewBookmarkCard() {
scrapable: isScrapable,
};

actions.resetForm({ newcard }, setStrTags([]), setTagInput(""));
actions.resetForm({ newcard });
setStrTags([]);
setTagInput("");
let retBkmk = await makeNewBookmark(newBkmk);
// if adding the bookmark was successful.
if (retBkmk.id != -1) {
// If adding the bookmark was successful, dispatch actions.
if (retBkmk.id !== -1) {
retBkmk.tags.forEach((t) => {
let tAct: TagAction = {
type: "add",
Expand Down Expand Up @@ -146,7 +154,7 @@ export default function NewBookmarkCard() {
const { key } = e;
const trimmedInput = tagInput.trim();
if (
// add tag via space bar or enter
// Add tag via space bar or enter
(key === "Enter" || key === "Space" || key === " ") &&
trimmedInput.length &&
!strTags.includes(trimmedInput)
Expand All @@ -156,8 +164,7 @@ export default function NewBookmarkCard() {
values.tagTitles = strTags.concat(trimmedInput);
setTagInput("");
}
// user hits backspace and the user has input field of 0
// then pop the last tag only if there is one.
// If backspace is pressed on an empty input field, remove the last tag.
if (key === "Backspace" && !tagInput.length && strTags.length) {
e.preventDefault();
const tagsCopy = [...strTags];
Expand Down
Loading