Sort by

recency

|

36 Discussions

|

  • + 0 comments

    Hello there, so I have no idea why the code is missing the tests...i was getting an error reggarding the data-testsid but i made them dinamyc but im still missing those test cases, any help pls??

    import React from "react";
    
    const FeedbackSystem = () => {
    
      const subjects = ["Readability", "Performance", "Security", "Documentation", "Testing"];
      const [votes, setVotes] = React.useState(subjects.map((s)=>({subject: s, upvotes: 0, downvotes: 0})));
    
      const handleUpVote = (index) =>{
        setVotes(prevState=>{
          const newData = [...prevState];
          newData[index].upvotes +=1;
          return newData
        })
      }
    
      const handleDownVote = (index) =>{
        setVotes(prevState=>{
          const newData = [...prevState];
          newData[index].downvotes +=1;
          return newData
        })
      }
      return (
        <div className="my-0 mx-auto text-center w-mx-1200">
          <div className="flex wrap justify-content-center mt-30 gap-30">
            {subjects.map((subject,index) =>(
              <div key={subject} className="pa-10 w-300 card">
              <h2>{subject}</h2>
              <div className="flex my-30 mx-0 justify-content-around">
                <button onClick={()=> handleUpVote(index)} className="py-10 px-15" data-testid={`upvote-btn-0-${subject}`}>
                  👍 Upvote
                </button>
                <button onClick={()=> handleDownVote(index)} className="py-10 px-15 danger" data-testid={`downvote-btn-0-${subject}`}>
                  👎 Downvote
                </button>
              </div>
              <p className="my-10 mx-0" data-testid={`upvote-count-0-${subject}`}>
                Upvotes: <strong>{votes[index].upvotes}</strong>
              </p>
              <p className="my-10 mx-0" data-testid={`downvote-count-0-${subject}`}>
                Downvotes: <strong>{votes[index].downvotes}</strong>
              </p>
            </div>
            ))}
          </div>
        </div>
      );
    };
    
    export default FeedbackSystem;
    
  • + 0 comments
    import React, { useState } from "react";
    
    const FeedbackSystem = () => {
      const [items, setItems] = useState([
        { id: 1, name: 'Readability', Upvotes: 0, Downvotes: 0 },
        { id: 2, name: 'Performance', Upvotes: 0, Downvotes: 0 },
        { id: 3, name: 'Security', Upvotes: 0, Downvotes: 0 },
        { id: 4, name: 'Documentation', Upvotes: 0, Downvotes: 0 },
        { id: 5, name: 'Testing', Upvotes: 0, Downvotes: 0 }
      ]);
    
      const handleUpvote = (selectedId) => {
        const newItems = items.map((item) =>
          item.id === selectedId ? { ...item, Upvotes: item.Upvotes + 1 } : item
        );
        setItems(newItems);
      };
    
      const handleDownvote = (selectedId) => {
        const newItems = items.map((item) =>
          item.id === selectedId ? { ...item, Downvotes: item.Downvotes + 1 } : item
        );
        setItems(newItems);
      };
    
      return (
        <div className="my-0 mx-auto text-center w-mx-1200">
          <div className="flex wrap justify-content-center mt-30 gap-30">
            {
            
            items.map((item, idx) => (
              <div key={item.id} className="pa-10 w-300 card">
                <h2>{item.name}</h2>
                <div className="flex my-30 mx-0 justify-content-around">
    
                  <button
                    className="py-10 px-15"
                    data-testid={`upvote-btn-${idx}`}
                    onClick={() => handleUpvote(item.id)}
                  >
                    👍 Upvote
                  </button>
    
                  <button
                    className="py-10 px-15 danger"
                    data-testid={`downvote-btn-${idx}`}
                    onClick={() => handleDownvote(item.id)}
                  >
                    👎 Downvote
                  </button>
    
                </div>
                <p className="my-10 mx-0" data-testid={`upvote-count-${idx}`}>
                  Upvotes: <strong>{item.Upvotes}</strong>
                </p>
                <p className="my-10 mx-0" data-testid={`downvote-count-${idx}`}>
                  Downvotes: <strong>{item.Downvotes}</strong>
                </p>
              </div>
            ))}
            
          </div>
        </div>
      );
    };
    
    export default FeedbackSystem;
    
  • + 0 comments

    import React, { useState } from "react";

    const FeedbackSystem = () => {

    const [list, setList] = useState([{ label:"Readablity", up:0, down:0 }, { label:"Performance", up:0, down:0 }, { label:"Security", up:0, down:0 }, { label:"Documentation", up:0, down:0 }, { label:"Testing", up:0, down:0 } ]);

    const handleUpvote = (index) => { const data = [...list] data[index].up+=1 setList(data) };

    const handleDownvote = (index) => { const data = [...list] data[index].down+=1 setList(data) };

    return ( {list.map((lists,index) => (

    {lists.label}

    upvote-btn-Extra close brace or missing open brace{lists.down}} onClick={() => handleDownvote(index)} > 👎 Downvote upvote-count-${lists.up}}> Upvotes: {lists.up}

    downvote-count-${lists.down}}> Downvotes: {lists.down}

    ))} ); };

    export default FeedbackSystem;

    why the test cases are failing

  • + 0 comments

    This is my code but test cases failed!

    import React, { useState } from "react";

    const intialFeedback = [{ name: "Readability", upvote: 0, downvote: 0 }, { name: "Performance", upvote: 0, downvote: 0 }, { name: "Security", upvote: 0, downvote: 0 }, { name: "Documentation", upvote: 0, downvote: 0 }, { name: "Testing", upvote: 0, downvote: 0 }];

    const FeedbackSystem = () => { const [feedback, setFeedback] = useState(intialFeedback)

    const handleUpVote = (name) => { setFeedback(pre => { return pre.map(item => { if(item.name === name){ item.upvote+=1; }

        return item;
      }); 
    })
    

    }

    const handleDownVote = (name) => { setFeedback(pre => { return pre.map(item => { if(item.name === name){ item.downvote+=1; }

        return item;
      }); 
    })
    

    }

    return ( {feedback.map((item, index) => {handleDownVote(item.name)}} handleUpVote={()=>{handleUpVote(item.name)}} index={index} {...item} /> )} ); };

    export default FeedbackSystem;

    function FeedbackCard({ name,upvote, downvote, handleDownVote, handleUpVote, index }) { return (

    {name}

    upvote-btn-Extra close brace or missing open brace{index}} onClick={handleDownVote}> 👎 Downvote upvote-count-${index}}> Upvotes: {upvote}

    downvote-count-${index}}> Downvotes: {downvote}

    ) }

  • + 0 comments

    Hello everyone,

    to fix the problem with the testing feedback you need to modify 4 parts of the code so the test can pass.

    The issue is that the initial code has data-testid attributes that are fixed to 0. This prevents the testing mechanism from working properly because the tests rely on unique identifiers for each element. To resolve this, you need to change the fixed 0 to a dynamic value (like using index), ensuring each element has a unique data-testid.

    1 - first change the (data-testid) in the upvote and downvote buttons:

    • upvote button -> data-testid={upvote-btn-${index}}
    • downvote button -> data-testid={downvote-btn-${index}}

    2- Finally, change the (data-testid) in the p tags that shows the upvote and downvote count inside of them like this:

    • upvote count -> data-testid={upvote-count-${index}}
    • downvote count -> data-testid={downvote-count-${index}}

    you need to be mapping through an array of the feedback aspects for this to work.

    this will hopefully solve the problem with the testing, if anything else occurs, check your code again.