diff --git a/src/App.test.jsx b/src/App.test.jsx
index 76570279..7aebbe8a 100644
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -1,7 +1,5 @@
-import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
-import '@testing-library/jest-dom/extend-expect';
test("renders Ada's Task List", () => {
// Act
diff --git a/src/components/NewTaskForm.jsx b/src/components/NewTaskForm.jsx
index affd192a..17408fe5 100644
--- a/src/components/NewTaskForm.jsx
+++ b/src/components/NewTaskForm.jsx
@@ -48,8 +48,8 @@ const NewTaskForm = ({ onAddTaskCallback }) => {
// using the same handler for title and isComplete, but it's relatively
// straightforward to deal with here, as long as we don't forget to do it!
onAddTaskCallback({
- ...taskData,
- isComplete: taskData.isComplete === 'true'
+ ...taskData,
+ isComplete: taskData.isComplete === 'true'
});
};
@@ -62,43 +62,43 @@ const NewTaskForm = ({ onAddTaskCallback }) => {
// a "unique" value that we could concatenate into the control ids so that
// we could be sure the id was truly unique on the page.
- return (
-
+ );
};
NewTaskForm.propTypes = {
- onAddTaskCallback: PropTypes.func.isRequired,
+ onAddTaskCallback: PropTypes.func.isRequired,
};
export default NewTaskForm;
\ No newline at end of file
diff --git a/src/components/Task.test.jsx b/src/components/Task.test.jsx
index 51dae55d..3d4b5d03 100644
--- a/src/components/Task.test.jsx
+++ b/src/components/Task.test.jsx
@@ -1,7 +1,6 @@
-import React from 'react';
import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
import Task from './Task';
-import '@testing-library/jest-dom/extend-expect';
describe('Task', () => {
test('Renders title content', () => {
@@ -11,8 +10,8 @@ describe('Task', () => {
id={1}
title={'Test Title'}
isComplete={true}
- onClickCallback={() => {}}
- onDeleteCallback={() => {}}
+ onClickCallback={() => { }}
+ onDeleteCallback={() => { }}
/>
);
@@ -22,8 +21,8 @@ describe('Task', () => {
test.skip('Runs callbacks when buttons clicked', () => {
// Arrange
- const clickCallback = jest.fn();
- const deleteCallback = jest.fn();
+ const clickCallback = vi.fn();
+ const deleteCallback = vi.fn();
// Act
render(
@@ -54,8 +53,8 @@ describe('Task', () => {
id={1}
title={'Test Title'}
isComplete={true}
- onClickCallback={() => {}}
- onDeleteCallback={() => {}}
+ onClickCallback={() => { }}
+ onDeleteCallback={() => { }}
/>
);
@@ -71,8 +70,8 @@ describe('Task', () => {
id={1}
title={'Test Title'}
isComplete={false}
- onClickCallback={() => {}}
- onDeleteCallback={() => {}}
+ onClickCallback={() => { }}
+ onDeleteCallback={() => { }}
/>
);
diff --git a/src/components/TaskList.test.jsx b/src/components/TaskList.test.jsx
index 2e38d4d4..1da4973e 100644
--- a/src/components/TaskList.test.jsx
+++ b/src/components/TaskList.test.jsx
@@ -1,7 +1,5 @@
-import React from 'react';
import { render, screen } from '@testing-library/react';
import TaskList from './TaskList';
-import '@testing-library/jest-dom/extend-expect';
describe('TaskList Renders', () => {
const tasks = [
@@ -22,8 +20,8 @@ describe('TaskList Renders', () => {
render(
{}}
- onTaskDeleteCallback={() => {}}
+ onTaskClickCallback={() => { }}
+ onTaskDeleteCallback={() => { }}
/>
);
diff --git a/src/index.css b/src/index.css
index ec2585e8..c826589f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,5 @@
+@import url('./legacy/foundation.css');
+
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/src/legacy/foundation.css b/src/legacy/foundation.css
new file mode 100644
index 00000000..715cd0ae
--- /dev/null
+++ b/src/legacy/foundation.css
@@ -0,0 +1,67 @@
+blockquote, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, li, ol, p, pre, td, th, ul {
+ margin: 0;
+ padding: 0;
+}
+
+dl, ol, ul {
+ margin-bottom: 1rem;
+ list-style-position: outside;
+ line-height: 1.6;
+}
+
+button, input, optgroup, select, textarea {
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
+}
+
+button {
+ padding: 0;
+ appearance: none;
+ border: 0;
+ border-radius: 0;
+ background: 0 0;
+ line-height: 1;
+ cursor: auto;
+}
+
+.button {
+ display: inline-block;
+ vertical-align: middle;
+ margin: 0 0 1rem 0;
+ padding: .85em 1em;
+ border: 1px solid transparent;
+ border-radius: 0;
+ transition: background-color .25s ease-out,color .25s ease-out;
+ font-family: inherit;
+ font-size: .9rem;
+ line-height: 1;
+ text-align: center;
+ cursor: pointer;
+}
+
+.button, .button.disabled, .button.disabled:focus, .button.disabled:hover, .button[disabled], .button[disabled]:focus, .button[disabled]:hover {
+ background-color: #1779ba;
+ color: #fefefe;
+}
+
+.button:focus, .button:hover {
+ background-color: #14679e;
+ color: #fefefe;
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+ font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ color: inherit;
+ text-rendering: optimizeLegibility;
+}
+
+.h1, h1 {
+ font-size: 1.5rem;
+ line-height: 1.4;
+ margin-top: 0;
+ margin-bottom: .5rem;
+}
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 0e8d9d35..74bc199b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,7 +6,7 @@ export default defineConfig({
plugins: [react()],
test: {
reporters: ['verbose'],
- environments: ['jsdom'],
+ environment: 'jsdom',
globals: true,
setupFiles: ['./vitest.setup.js']
}
diff --git a/vitest.setup.js b/vitest.setup.js
index 3fee1d33..7237b3ca 100644
--- a/vitest.setup.js
+++ b/vitest.setup.js
@@ -1,3 +1,4 @@
import { expect } from 'vitest';
import * as matchers from 'jest-extended';
+import '@testing-library/jest-dom';
expect.extend(matchers);
\ No newline at end of file