upgrade deps

codegrade_mvp.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, fireEvent, screen, waitForElementToBeRemoved } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { setupServer, getHandlers } from './backend/mock-server'
 import { st } from './backend/helpers'
 import App from './frontend/components/App'
@@ -55,8 +55,7 @@ describe('Advanced Applications', () => {
   describe('Login', () => {
     test(`[1] Submit credentials button is disabled until
         - username (after trimming) is at least 3 chars AND
-        - password (after trimming) is at least 8 chars
-        - Review how to conditionally disable a button element.`, () => {
+        - password (after trimming) is at least 8 chars`, () => {
       expect(loginBtn()).toBeDisabled()
       fireEvent.change(usernameInput(), { target: { value: ' 12 ' } })
       fireEvent.change(passwordInput(), { target: { value: ' 1234567 ' } })
@@ -67,16 +66,14 @@ describe('Advanced Applications', () => {
     })
     test(`[2] Attempting to navigate to Articles
         - renders a redirect back to login screen
-        - articles form never 
-        - Review how to implement protected routes using an authentication token and redirect users.`, () => {
+        - articles form never loads`, () => {
       fireEvent.click(articlesLink())
       expect(titleInput()).not.toBeInTheDocument()
       expect(usernameInput()).toBeInTheDocument()
     })
     test(`[3] Filling out the login form and submitting
         - article titles, texts, topics render on the page
-        - success message renders on the page
-        - Review how to handle authentication with tokens in a React app (using local storage) and how to render data from state.`, async () => {
+        - success message renders on the page`, async () => {
       // login flow
       fireEvent.change(usernameInput(), { target: { value: 'Foo' } })
       fireEvent.change(passwordInput(), { target: { value: '12345678' } })
@@ -115,8 +112,7 @@ describe('Advanced Applications', () => {
     test(`[4] Clicking the logout button
         - redirection to the login screen
         - the "token" key is removed from local storage
-        - a success message renders on the page
-        -  Review how to handle authentication with tokens in a React app (using local storage) and redirect the user.`, async () => {
+        - a success message renders on the page`, async () => {
       await loginFlow()
       // token set sanity check
       expect(token()).toBeTruthy()
@@ -132,7 +128,7 @@ describe('Advanced Applications', () => {
     })
   })
   describe('Posting a new article', () => {
-    test(`[5] Submit button is disabled on page load, Review how to conditionally disable a button element.`, async () => {
+    test(`[5] Submit button is disabled on page load`, async () => {
       await loginFlow()
       expect(submitArticleBtn()).toBeDisabled()
     })
@@ -162,7 +158,7 @@ describe('Advanced Applications', () => {
     })
   })
   describe('Editing an existing article', () => {
-    test('[7] Clicking edit button populates the article information into the form, Review how to manipulate and use state and reset a form using initial values.', async () => {
+    test('[7] Clicking edit button populates the article information into the form', async () => {
       await loginFlow()
       // entering edit mode
       fireEvent.click(screen.getAllByText('Edit')[0])
@@ -173,9 +169,7 @@ describe('Advanced Applications', () => {
     test(`[8] Editing the form values and submitting
         - updates the edited article on the page
         - resets the form
-        - a success message renders on the page
-        - Review how to utilize state to set current values.
-        -  Review how to make PUT requests to an external API using Axios and how to manipulate and use state.`, async () => {
+        - a success message renders on the page`, async () => {
       await loginFlow()
       // entering edit mode
       fireEvent.click(screen.getAllByText('Edit')[0])
@@ -200,8 +194,7 @@ describe('Advanced Applications', () => {
   describe('Deleting an existing article', () => {
     test(`[9] Clicking delete button on an article
         - removes it from the page
-        - a success message renders on the page
-        - Review how to make DELETE requests to an external API using Axios.`, async () => {
+        - a success message renders on the page`, async () => {
       await loginFlow()
       // hitting delete
       fireEvent.click(screen.getAllByText('Delete')[0])

jest.config.js

@@ -1,17 +1,18 @@
-/*
+/**
  * For a detailed explanation regarding each configuration property, visit:
  * https://jestjs.io/docs/configuration
  */
 
-module.exports = {
+/** @type {import('jest').Config} */
+const config = {
   // All imported modules in your tests should be mocked automatically
   // automock: false,
 
   // Stop running tests after `n` failures
   // bail: 0,
 
   // The directory where Jest should store its cached dependency information
-  // cacheDirectory: "/private/var/folders/mq/wc13nlwj4gdgcyshdy5j1hgr0000gn/T/jest_dx",
+  // cacheDirectory: "/private/var/folders/96/mtz831_d14j85kmn9jcn1mc40000gn/T/jest_dx",
 
   // Automatically clear mock calls, instances, contexts and results before every test
   // clearMocks: false,
@@ -195,3 +196,5 @@ module.exports = {
   // Whether to use watchman for file crawling
   // watchman: true,
 };
+
+module.exports = config;

jest.globals.js

@@ -1,2 +1 @@
-// Soon Node will have fetch API and this won't be needed
 globalThis.fetch = require('node-fetch')