We use cookies to ensure you have the best browsing experience on our website. Please read our cookie policy for more information about how we use cookies.
  1. Prepare
  2. React
  3. State Management
  4. Code Review Feedback
  5. Discussions

Code Review Feedback

Sort by

recency

|

79 Discussions

|

  • test__new
     + 0 comments

    I have working code for this problem i am able to check required functionality, but its giving 0 score via run tests

  • manjuvnachu
     + 0 comments

    my test cases are failing! although the solution works fine

  • cardox95
     + 0 comments

    I dont see clean up in the test file that ensures that after every test, React Testing Library completely unmounts the component and resets all internal hook states — so each test starts fresh.

    import { cleanup } from "@testing-library/react";

afterEach(() => {
  cleanup();
});

    import React, { useMemo, useReducer } from "react";

const init = [
  {
    name: "Readability",
    up: 0,
    down: 0,
  },
  {
    name: "Performance",
    up: 0,
    down: 0,
  },
  {
    name: "Security",
    up: 0,
    down: 0,
  },
  {
    name: "Documentation",
    up: 0,
    down: 0,
  },
  {
    name: "Testing",
    up: 0,
    down: 0,
  },
]
const reducer = (s, { aspectName, choice }) => {
  const state = [...s]
  const index = state.findIndex(a => a.name === aspectName)
  if (choice === "up")
    state[index].up += 1
  else
    state[index].down += 1
  return [...state]
}

const FeedbackSystem = () => {
  const [aspects, vote] = useReducer(reducer, [...init])
  const aspectsMemo = useMemo(() => aspects.map((a, i) => {
    return <div className="pa-10 w-300 card" key={a.name}>
      <h2>{a.name}</h2>
      <div className="flex my-30 mx-0 justify-content-around">
        <button className="py-10 px-15" data-testid={"upvote-btn-" + i}
          onClick={() => vote({ aspectName: a.name, choice: "up" })}>
          👍 Upvote
        </button>
        <button className="py-10 px-15 danger" data-testid={"downvote-btn-" + i}
          onClick={() => vote({ aspectName: a.name, choice: "down" })}>
          👎 Downvote
        </button>
      </div>
      <p className="my-10 mx-0" data-testid={"upvote-count-" + i}>
        Upvotes: <strong>{a.up}</strong>
      </p>
      <p className="my-10 mx-0" data-testid={"downvote-count-" + i}>
        Downvotes: <strong>{a.down}</strong>
      </p>
    </div>
  }), [aspects, vote])
  return (
    <div className="my-0 mx-auto text-center w-mx-1200">
      <div className="flex wrap justify-content-center mt-30 gap-30">
        {aspectsMemo}
      </div>
    </div>
  );
};

export default FeedbackSystem;

    `Any suggestions?

  • nicolae_gheorgh1
     + 0 comments

    Hint: you can create a component and use 2 props (one for the title and one for the index). The index is important for the tests, not for the component to work.

  • danieldram
     + 1 comment

    Before you begin any of these coding tests, you must read the test file to see how they test it. They are not testing functionality sometimes, your failing test might just be an improper test-id that has to be dynamically set.