Skip to content

Commit 06a805a

Browse files
wiltonlee948wiltonlee948
authored
Merge pull request #24 from oslabs-beta/testing
added unit tests for www directory
2 parents 2eaedfc + 8f3da68 commit 06a805a

File tree

13 files changed

+398
-1002
lines changed

13 files changed

+398
-1002
lines changed

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@
55
"transform": {
66
"^.+\\.(js|ts|tsx)$": "ts-jest"
77
},
8-
"transformIgnorePatterns": ["/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"],
8+
"testPathIgnorePatterns": ["www"],
9+
"transformIgnorePatterns": [
10+
"/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
11+
],
912
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
1013
"moduleFileExtensions": [
1114
"ts",
@@ -98,6 +101,7 @@
98101
"@babel/preset-react": "^7.12.7",
99102
"@emotion/babel-plugin": "^11.7.2",
100103
"@testing-library/jest-dom": "^4.2.4",
104+
"@testing-library/react": "^13.4.0",
101105
"@types/chai": "^4.2.14",
102106
"@types/chrome": "^0.0.119",
103107
"@types/d3": "^7.4.0",

‎www/__tests__/Blogs.test.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { render, screen } from '@testing-library/react';
2+
import '@testing-library/jest-dom/extend-expect';
3+
import Blogs from '../src/pages/components/Blogs';
4+
import React from 'react';
5+
6+
const posts = [
7+
{
8+
title: 'Our Legendary Article here',
9+
href: '#',
10+
category: { name: 'Greatness', href: '#' },
11+
description:
12+
'Reactime v17, we have come a long way from beta. Now introducing full Context API support and CustomHooks support: thereby allowing developers to better visualize the states and ... ',
13+
date: 'Dec 14, 2022',
14+
datetime: '2022-12-14',
15+
imageUrl:
16+
'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
17+
readingTime: '6 min',
18+
author: {
19+
name: 'James Nghiem',
20+
href: '#',
21+
imageUrl:
22+
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
23+
},
24+
},
25+
{
26+
title: 'Time-Traveling Through React State',
27+
href: 'https://rxlina.medium.com/time-traveling-through-react-state-with-reactime-9-0-371dbdc99319',
28+
category: { name: 'React', href: 'https://medium.com/tag/react' },
29+
description:
30+
'Reactime is a Chrome extension and time-travel debugger for React that allows developers to record, track, and visualize state changes. Reactime leverages React’s core reconciliation... ',
31+
date: 'Oct 7, 2021',
32+
datetime: '2020-10-07',
33+
imageUrl:
34+
'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
35+
readingTime: '4 min',
36+
author: {
37+
name: 'Lina Shin',
38+
href: 'https://rxlina.medium.com/',
39+
imageUrl:
40+
'https://media-exp1.licdn.com/dms/image/C5603AQHQGFvRHt25WQ/profile-displayphoto-shrink_200_200/0/1623865299399?e=1676505600&v=beta&t=yDqgIaJOhO3oOWLROIH9rHPBHdVzDSV3VlB2axWqXr4',
41+
},
42+
},
43+
{
44+
title: 'What time is it? Reactime!',
45+
href: 'https://medium.com/@robbytiptontol/inter-route-time-travel-with-reactime-d84cd55ec73b',
46+
category: { name: 'React Devtools', href: 'https://medium.com/tag/react-devtools' },
47+
description: 'Reactime is a debugging tool that lets developers take snapshots of an application\’s state data as well as time-travel through these snapshots. The snapshots display React...',
48+
date: 'Jun 16, 2022',
49+
datetime: '2022-06-16',
50+
imageUrl:
51+
'https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
52+
readingTime: '9 min',
53+
author: {
54+
name: 'Robby Tipton',
55+
href: 'https://medium.com/@robbytiptontol',
56+
imageUrl:
57+
'https://miro.medium.com/fit/c/96/96/1*pi-RH2LRvsZA9vLZTvY2mg.jpeg',
58+
},
59+
},
60+
]
61+
62+
describe('Blog component test ', () => {
63+
beforeEach(() => {
64+
render (<Blogs />)
65+
})
66+
67+
it ('the title appears on the page', () => {
68+
expect(screen.getByText(/From the Blog/i)).toBeInTheDocument()
69+
expect(screen.getByText(/See the blogs from the most recent updates and to the past years!/i)).toBeInTheDocument()
70+
});
71+
72+
it ('displays the correct information for each blog post', () => {
73+
const blogs = screen.getAllByTestId('blog')
74+
blogs.forEach((blog) => {
75+
76+
77+
})
78+
});
79+
});

‎www/__tests__/FeaturesSection.test.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {screen, render} from '@testing-library/react';
2+
import '@testing-library/jest-dom/extend-expect';
3+
import FeaturesSection from '../src/pages/components/FeaturesSection';
4+
5+
const features = [
6+
{
7+
name: 'State SnapShot Display',
8+
description: 'See your application state in a stylized and interactive format, for clear concise state management',
9+
},
10+
{
11+
name: 'Time Travel Rendering',
12+
description: 'Simulate any state change from your DOM history, with a simple click of a button',
13+
},
14+
{
15+
name: 'Action Comparison & Snapshot Series',
16+
description: 'Save a series of state snapshots and use it to analyze changes in component render performance between current and previous series of snapshots.',
17+
},
18+
]
19+
20+
describe('FeatureSection component test ', () => {
21+
beforeEach(() => {
22+
render(<FeaturesSection />)
23+
});
24+
25+
it('Renders the core features section', () => {
26+
expect(screen.getByText(/Core Features/i)).toBeInTheDocument();
27+
});
28+
29+
it('Title appears on the page', () => {
30+
expect(screen.getByText(/What makes Reactime so great\?/i)).toBeInTheDocument();
31+
});
32+
33+
it('Subheading shows up on the page', () => {
34+
expect(screen.getByText(/Reactime is full of features that make your life easier as a developer. From time-travel debugging to state snapshot display, check out how using Reactime will improve your developer experience./i)).toBeInTheDocument();
35+
})
36+
37+
it('Renders all feature name and descriptions', () => {
38+
features.forEach((feature) => {
39+
expect(screen.getByText(feature.name)).toBeInTheDocument();
40+
expect(screen.getByText(feature.description)).toBeInTheDocument();
41+
});
42+
})
43+
});

‎www/jest.config.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/** @type {import('ts-jest').JestConfigWithTsJest} */
2+
module.exports = {
3+
preset: 'ts-jest',
4+
testEnvironment: 'jsdom',
5+
transform: {
6+
// '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`
7+
// '^.+\\.m?[tj]sx?$' to process js/ts/mjs/mts with `ts-jest`
8+
'^.+\\.tsx?$': [
9+
'ts-jest',
10+
{
11+
tsconfig: 'tsconfig.jest.json',
12+
},
13+
],
14+
},
15+
};

‎www/package.json‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"dev": "next dev",
88
"postinstall": "prisma generate",
99
"lint": "next lint",
10-
"start": "next start"
10+
"start": "next start",
11+
"test": "jest"
1112
},
1213
"dependencies": {
1314
"@headlessui/react": "^1.7.5",
@@ -28,21 +29,28 @@
2829
"zod": "^3.18.0"
2930
},
3031
"devDependencies": {
32+
"@testing-library/jest-dom": "^5.16.5",
33+
"@testing-library/react": "^13.4.0",
34+
"@types/jest": "^29.2.5",
3135
"@types/node": "^18.0.0",
3236
"@types/react": "^18.0.14",
3337
"@types/react-dom": "^18.0.5",
38+
"@types/testing-library__react": "^10.2.0",
3439
"@types/tiny-slider-react": "^0.3.4",
3540
"@typescript-eslint/eslint-plugin": "^5.33.0",
3641
"@typescript-eslint/parser": "^5.33.0",
3742
"autoprefixer": "^10.4.7",
3843
"eslint": "^8.26.0",
3944
"eslint-config-next": "13.0.2",
45+
"jest": "^29.3.1",
46+
"jest-environment-jsdom": "^29.3.1",
4047
"postcss": "^8.4.14",
4148
"prettier": "^2.7.1",
4249
"prettier-plugin-tailwindcss": "^0.1.13",
4350
"prisma": "^4.5.0",
4451
"tailwindcss": "^3.2.0",
45-
"typescript": "^4.8.4"
52+
"ts-jest": "^29.0.3",
53+
"typescript": "^4.9.4"
4654
},
4755
"ct3aMetadata": {
4856
"initVersion": "6.11.3"

‎www/prisma/schema.prisma‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@ generator client {
66
}
77

88
datasource db {
9-
provider = "sqlite"
9+
provider = "mysql"
1010
url = env("DATABASE_URL")
11+
relationMode = "prisma"
1112
}
1213

1314
model User {
14-
id String @id @default(cuid())
15+
id String @id @default(cuid())
1516
name String
1617
email String
1718
admin Boolean @default(false)

‎www/src/pages/components/Blogs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export default function Blogs() {
6969
</div>
7070
<div className="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
7171
{posts.map((post) => (
72-
<div key={post.title} className="flex flex-col overflow-hidden rounded-lg shadow-lg">
72+
<div key={post.title} data-testid='blog' className="flex flex-col overflow-hidden rounded-lg shadow-lg">
7373
<div className="flex-shrink-0">
7474
<img className="h-48 w-full object-cover" src={post.imageUrl} alt="" />
7575
</div>

‎www/src/pages/components/FeaturesSection.jsx‎ renamed to ‎www/src/pages/components/FeaturesSection.tsx‎

File renamed without changes.

‎www/src/pages/components/LandingPage.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ export default function LandingPage() {
1111
const [name, setName] = useState('');
1212
const [email, setEmail] = useState('');
1313
const { mutate } = trpc.user.createUser.useMutation();
14-
14+
1515
const handleSubmit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
1616
e.preventDefault();
1717
// grab the information of name and email
1818
// bundle those together to be an object to be sent to backend
1919
mutate({name, email});
20+
setName('');
21+
setEmail('');
2022
}
2123

2224
return (

‎www/src/pages/secret.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ const secret: NextPage = () => {
2323
}
2424
};
2525

26+
const { data:users } = trpc.user.findAll.useQuery();
27+
2628
return (
2729
<>
2830
{!isAdmin && <div className = 'flex h-screen items-center justify-center'>
@@ -36,7 +38,7 @@ const secret: NextPage = () => {
3638
</input>
3739
<button onClick={clickHandler} className="blockrounded-md border rounded border-transparent bg-rose-500 px-5 py-3 text-base font-medium text-white shadow hover:bg-rose-600 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-10">Submit</button>
3840
</div>}
39-
{isAdmin && <div>You logged in!</div>}
41+
{isAdmin && <div>{users?.map(user => <span key={user.id}>{user.email}, </span>)}</div>}
4042

4143
</>
4244
);

0 commit comments

Comments
 (0)