JSX and testing INTRODUCTION

SELF-REVIEW: BUILD A RADIO GROUP COMPONENT

1. In the RadioGroup component, when cloning each child element (RadioOption), what’s the condition that determines the value of the new checked prop that gets merged into the existing props of each RadioOption component? Recall that the RadioGroup component has three props – onChange, selected and children – and that each RadioOption component receives two props – value and children.

2. Inside the RadioOption component, what should be the value of the onChange prop from the radio input element? Recall that the RadioOption component receives four props – value, checked, onChange and children.

3. What are the arguments that the React.Children.map function receives?

KNOWLEDGE CHECK: JSX

1. Let’s suppose you have the below JSX that gets returned from a component, what would be the equivalent object representation (Element) that React will create internally?

2. What is the concept of component specialization?

3. You would like to clone a React element by using the React.cloneElement API, where the particular element has the below structure:

const buttonElement = {
  type: SubmitButton,
  props: {
    color: "green",
    children: "Submit!",
  },
};

What would be the value of the variable output when using the API with the following parameters?

const output = React.cloneElement(buttonElement, {disabled: true, color: “blue” });

4. Imagine you are using the spread operator in the below component as follows:

const props = { title: "tiramisu", cal: 400 };
const element = <Component title="cake" {...props} cal={500} />;

What would be the value of element.props?

5. Amongst the below expressions, select all that will not render anything on the screen when being used in JSX.

SELF-REVIEW: IMPLEMENTING SCROLLER POSITION WITH RENDER PROPS

1. Considering the MousePosition component receives a prop called render, which is a function, what are valid options of JSX returned from the component?

2. The PointMouseLogger component returns the below JSX.

<p> ({mousePosition.x}, {mousePosition.y})</p>

After incorporating the MousePosition component as part of the JSX returned by PointMouseLogger, what should be the new JSX that PointMouseLogger returns?

return(
  <MousePosition
    render={({ mousePosition }) => (
      <p>
        ({mousePosition.x}, {mousePosition.y})
      </p>
    )}
  />
); (CORRECT)

return(
  <MousePosition>
    {({ mousePosition }) => (
      <p>
        ({mousePosition.x}, {mousePosition.y})
      </p>
    )}
  </MousePosition>
);

return(
  <MousePosition>
    <p>
      ({mousePosition.x}, {mousePosition.y})
    </p>
  </MousePosition>
);

3. The App component initially presents the below output structure

function App() {
  return(
    <div className="App">
      <header className="Header">Little Lemon Restaurant 🍕</header>
      <PanelMouseLogger />
      <PointMouseLogger />
    </div>
  );
}

After adding the MousePosition component into the mix, would you still have to perform any changes to the App component?

KNOWLEDGE CHECK: REUSING BEHAVIOR

1. When dealing with cross-cutting data in your React applications, what are some of the problems of using a custom hook to encapsulate that logic? Select all that apply.

2. Here, you can find the APIs of some higher-order components that have been already implemented. Amongst all the options, which ones present an invalid signature that doesn’t follow the convention? Select all that apply.

3. What are some of the best practices to follow when implementing the higher-order component pattern? Select all that apply.

4. What are some of the differences between higher-order components and render props? Select all that apply.

5. True or false. A component with a render prop as renderer can do anything a higher-order component can do.

SELF-REVIEW: WRITING MORE TEST SCENARIOS

1. What’s the correct call to fire an onChange event on an input with react-testing-library’s fireEvent API?

2. How would you fire a click event on a submit button with react-testing-library fireEvent API?

3. When locating an element by using one of the screen querying methods from react-testing-library, such as screen.getByRole or screen.getByLabelText, what would be the return value of the call if the element is not found?

KNOWLEDGE CHECK: AUTOMATED TESTING

1. Why is automated testing important? Select all that apply.

2. What are some of the best practices when writing your automated tests? Select all that apply

3. Imagine you have a component that renders both an input tag and a label tag with the exact text Comments:. Inside your test, you have the below piece of code:

const element = screen.getByLabelText(/Comments:/);

What would be the type of element returned by getByLabelText?

4. In a particular test that’s been written for a form component, you encounter the below two lines of code. What kind of data would the handleSubmit variable represent?

const handleSubmit = jest.fn();
render(<FeedbackForm onSubmit={handleSubmit} />);

5. What are some of the benefits of Continuous Integration (CI)? Select all that apply.

Coursera Meta Front-End Developer Professional Certificate Answers and Study Guide

Weekly Breakdown | Meta Study Guides | Back to Top

MODULE QUIZ: JSX AND TESTING

1. What are some of the features of component containment? Select all that apply.

2. What are the props that all components have by default? Select all that apply.

3. What is a React Element? Select all that apply.

4. Assuming you have the below component, what are all the features implemented from component composition with children?

function ConfirmationDialog() {
  return (
    <Dialog color="blue">
      <h1 className="Dialog-title">
        Thanks!
      </h1>
      <p className="Dialog-message">
        We’ll process your order in less than 24 hours.
      </p>
    </Dialog>
  );
}

5. What are some of the use cases that the React.cloneElement API allows you to achieve? Select all that apply.

6. Assuming you have the following Row component that uses React.Children.map to perform some dynamic transformation in each child element, in order to add some custom styles, what’s wrong about its implementation? Select all that apply.

const Row = ({ children, spacing }) => {
  const childStyle = {
    marginLeft: `${spacing}px`,
  };
 
  return(
    <div className="Row">
      {React.Children.map(children, (child, index) => {
        child.props.style = {
          ...child.props.style,
          ...(index > 0 ? childStyle : {}),
        };
        
        return child;
      })}
    </div>
  );
};

7. Assuming you have the following set of components, what would be logged into the console when clicking the Submit button that gets rendered on the screen?

clicking the Submit button that gets rendered on the screen?
const Button = ({ children, ...rest }) => (
  <button onClick={() => console.log("ButtonClick")} {...rest}>
    {children}
  </button>
);
 
const withClick = (Component) => {
  const handleClick = () => {
    console.log("WithClick");
  };
 
  return (props) => {
    return <Component onClick={handleClick} {...props} />;
  };
};
 
const MyButton = withClick(Button);
 
export default function App() {
  return <MyButton onClick={() => console.log("AppClick")}>Submit</MyButton>;
}

8. Among the below options, what are valid solutions to encapsulate cross-cutting concerns? Select all that apply

9. What does the screen utility object from react-testing-library represent when performing queries against it?

10. When writing tests with Jest and react-testing-library, what matcher would you have to use to assert that a button is disabled?

11. Which of the examples below are valid types for Elements? Select all that apply. 

12. Which of the statements below clearly states the definitions of Containment and Specialization? Select all that apply.  

13. Which of the following operations does the React.cloneElementAPI enable a parent to perform? Select all that apply.  

14. A simple welcome screen for Little Lemon restaurant has been built, where users are able to sign up or login, depending on whether they have an account or not. The App component renders two buttons and uses the Button component for the sign up and the LoginButton component for log in.  

15. A higher order component (HOC), is an advanced pattern that emerges from React’s compositional nature. 

16. When defining a HOC, such as withMousePosition, why is the with part of the HOC name a general convention recommended by React?  

17. What is the result of the return statement of the DataFetcher component? 

18. Which of the following statements are true about Jest and React Testing Library tool? Select all that apply.  

19. When writing a part of your test to locate the range input and fill it with a value, which functions do you need to use?   

Interactive CSS CONCLUSION