git2thehub

Final Project

Application Requirements

You and your group will use everything you’ve learned to create a real-world client-side single-page application that you’ll be able to showcase to potential employers. The user story and acceptance criteria will depend on the project that you create, but your project must fulfill the following requirements:

• Must use ReactJS.

• Must use Node.

git2thehub

Explain the following test snippet

    it("Renders the Character's Spouse", () => {
        render(<Character { ...samwiseGamgee } />);
        const charSpouse = screen.getByText(`Spouse: ${samwiseGamgee.spouse}`);

        expect(charSpouse).toBeDefined();
    });

git2thehub

Continuous Integration/Continuous Deployment

CI/CD stands for Continuous Integration/Continuous Deployment (or Continuous Delivery). It's a set of practices in software development aimed at automating the process of integrating code changes into a shared repository (Continuous Integration) and then automatically deploying those changes to production environments (Continuous Deployment or Continuous Delivery).

Here's a simple example to illustrate CI/CD:

1. Continuous Integration (CI): Imagine you're working on a team developing a web application. Each developer works on different features or fixes in separate branches of the code repository. With CI, every time a developer pushes their changes to the shared repository (e.g., GitHub, GitLab, Bitbucket), a series of automated tests and checks are triggered to ensure that the new code integrates smoothly with the existing codebase. If any tests fail or there are issues detected, the team is notified immediately, allowing them to address the problems e

git2thehub

{
     "printWidth": 80,
     "tabWidth": 2,
     "useTabs": false,
     "semi": true,
     "singleQuote": true,
     "trailingComma": "all",
     "bracketSpacing": true,
     "arrowParens": "avoid",
     "endOfLine": "lf"

git2thehub

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from '../App';

const renderApp = () => {
    render(<App />);

    return {
        getIncrementBtn: () => screen.getByRole('button', { name: 'increment counter' }),
        getDecrementBtn: () => screen.getByRole('button', { name: 'decrement counter' }),

git2thehub

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from '../App';

const renderApp = () => {
    render(<App />);

    return {
        getIncrementBtn: () => screen.getByRole('button', { name: 'increment counter' }),
        getDecrementBtn: () => screen.getByRole('button', { name: 'decrement counter' }),

git2thehub

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from '../App';

// Our custom render function renders the App component and
// returns an object that contains all the methods needed to 
// select the elements used in our tests.

// This helps us to DRY up our code by removing duplicate calls to screen.getByRole() and screen.getByText()
const renderApp = () => {

git2thehub

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from '../App';

// Test 1: Write a test that checks to see if our `App` component renders without throwing an error.
it('App Component Renders Without Error', () => {
    render(<App />);
});

// Test 2: Write a test that checks if the button within the `App` component renders properly.

git2thehub

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from '../App';

// Test 1: Write a test that checks to see if our `App` component renders without throwing an error.
it('App Component Renders Without Error', () => {
    render(<App />);
});

// Test 2: Write a test that checks if the button within the `App` component renders properly.

git2thehub

import { useState } from 'react';
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  const incrementCount = () => {
    if (count >= 0) {
      setCount(count + 1)
    }