Skip to content

Commit f40e91e

Browse files
R35007R35007
authored
Merge pull request #22 from R35007/feature/14/cypress
refactor: welcome card style refactored and updated readme
2 parents fc88b42 + 4902d00 commit f40e91e

File tree

7 files changed

+37
-38
lines changed

7 files changed

+37
-38
lines changed

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44

55
A simple vite react typescript starter template with husky, conventional commit, eslint, stylelint, prettier, sass, tailwindcss, material ui, tanstack routing, redux and saga, vitest and cypress
66

7-
## [Trying this Online!](https://codesandbox.io/p/github/R35007/vite-react-typescript/main?file=%2Fsrc%2FApp.tsx)
7+
## [Trying this Online!](https://codesandbox.io/p/github/R35007/vite-react-typescript/main?file=/src/main.tsx)
88

9-
![image](https://github.com/R35007/vite-react-typescript/assets/23217228/4cb162b2-4c6a-4c5a-a1cc-e9022b049fdd)
9+
![image](https://github.com/R35007/vite-react-typescript/assets/23217228/09dfc7f4-bf2f-4b6b-9885-3476099164ff)
1010

1111
## Features
1212

@@ -93,6 +93,7 @@ npm run prepare # create Husky hooks
9393
npm run clean # removes node_modules package-lock.json .husky dist reports
9494
npm run uninstall:husky # uninstall husky and remove .husky folder
9595
npm run uninstall:tailwindcss # uninstall tailwindcss and its related plugins
96+
npm run uninstall:cypress # uninstall cypress and its related plugins and test files
9697
npm run commit # cli prompt for conventional commit
9798
```
9899

‎cypress/e2e/app.cy.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
11
describe('Vite React Typescript Template Test Suite', () => {
22
it('should navigate to about page', () => {
33
cy.visit('/');
4-
cy.get('.MuiCardHeader-content > .MuiTypography-root').should('contain.text', 'Home Page');
4+
cy.findByRole('heading', { level: 5 }).should('contain.text', 'Home Page');
55
cy.get('button>a:contains("About")').click();
6-
cy.get('.MuiCardHeader-content > .MuiTypography-root').should('contain.text', 'About Page');
6+
cy.findByRole('heading', { level: 5 }).should('contain.text', 'About Page');
77
});
88

99
it('should perform counter operations', () => {
1010
cy.visit('/');
1111

12-
cy.contains('Decrement By 1').click();
12+
cy.findByRole('button', { name: 'Decrement' }).click();
1313
cy.get('.Counter [role="note"]').should('contain.text', 'count is -1');
1414

15-
cy.contains('Increment By 1').click();
15+
cy.findByRole('button', { name: 'Increment' }).click();
1616
cy.get('.Counter [role="note"]').should('contain.text', 'count is 0');
1717

1818
cy.get('input.MuiInput-input').clear().type('5');
19-
cy.contains('Increment By Value').click();
19+
cy.findByRole('button', { name: 'Increment By Value' }).click();
2020
cy.get('.Counter [role="note"]').should('contain.text', 'count is 5');
2121

2222
cy.get('input.MuiInput-input').clear().type('-5');
23-
cy.contains('Increment By Value').click();
23+
cy.findByRole('button', { name: 'Increment By Value' }).click();
2424
cy.get('.Counter [role="note"]').should('contain.text', 'count is 0');
2525

26-
cy.contains('Decrement Async By 1').click();
26+
cy.findByRole('button', { name: 'Decrement Async' }).click();
2727
cy.get('.Counter [role="note"]').should('contain.text', 'count is -1');
2828

29-
cy.contains('Increment Async By 1').click();
29+
cy.findByRole('button', { name: 'Increment Async' }).click();
3030
cy.get('.Counter [role="note"]').should('contain.text', 'count is 0');
3131

3232
cy.get('input.MuiInput-input').clear().type('5');
33-
cy.contains('Increment Async By Value').click();
33+
cy.findByRole('button', { name: 'Increment Async By Value' }).click();
3434
cy.get('.Counter [role="note"]').should('contain.text', 'count is 5');
3535

3636
cy.get('input.MuiInput-input').clear().type('-5');
37-
cy.contains('Increment Async By Value').click();
37+
cy.findByRole('button', { name: 'Increment Async By Value' }).click();
3838
cy.get('.Counter [role="note"]').should('contain.text', 'count is 0');
3939
});
4040

4141
it('should count value persist on routing', () => {
4242
cy.visit('/');
4343

44-
cy.contains('Decrement By 1').click();
44+
cy.contains('Decrement').click();
4545
cy.get('.Counter [role="note"]').should('contain.text', 'count is -1');
4646

4747
cy.get('button>a:contains("About")').click();
48-
cy.get('.MuiCardHeader-content > .MuiTypography-root').should('contain.text', 'About Page');
48+
cy.findByRole('heading', { level: 5 }).should('contain.text', 'About Page');
4949

5050
cy.get('.Counter [role="note"]').should('contain.text', 'count is -1');
5151
});

‎src/App.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ describe('App', () => {
1010

1111
it('should render Home Page by root route', () => {
1212
expect(screen.getByRole('heading', { name: /home page/i })).toBeInTheDocument();
13-
expect(screen.getByRole('heading', { name: /vite \+ react/i })).toBeInTheDocument();
13+
expect(screen.getByRole('heading', { name: /vite react typescript template/i })).toBeInTheDocument();
1414
});
1515

1616
it('should render About Page on clicking about link', async () => {

‎src/features/Counter/Counter.cy.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,32 +16,32 @@ describe('<Counter />', () => {
1616
</ThemeProvider>
1717
);
1818

19-
cy.contains('Decrement By 1').click();
19+
cy.findByRole('button', { name: 'Decrement' }).click();
2020
cy.get('.Counter [role="note"]').should('contain.text', 'count is -1');
2121

22-
cy.contains('Increment By 1').click();
22+
cy.findByRole('button', { name: 'Increment' }).click();
2323
cy.get('.Counter [role="note"]').should('contain.text', 'count is 0');
2424

2525
cy.get('input.MuiInput-input').clear().type('5');
26-
cy.contains('Increment By Value').click();
26+
cy.findByRole('button', { name: 'Increment By Value' }).click();
2727
cy.get('.Counter [role="note"]').should('contain.text', 'count is 5');
2828

2929
cy.get('input.MuiInput-input').clear().type('-5');
30-
cy.contains('Increment By Value').click();
30+
cy.findByRole('button', { name: 'Increment By Value' }).click();
3131
cy.get('.Counter [role="note"]').should('contain.text', 'count is 0');
3232

33-
cy.contains('Decrement Async By 1').click();
33+
cy.findByRole('button', { name: 'Decrement Async' }).click();
3434
cy.get('.Counter [role="note"]').should('contain.text', 'count is -1');
3535

36-
cy.contains('Increment Async By 1').click();
36+
cy.findByRole('button', { name: 'Increment Async' }).click();
3737
cy.get('.Counter [role="note"]').should('contain.text', 'count is 0');
3838

3939
cy.get('input.MuiInput-input').clear().type('5');
40-
cy.contains('Increment Async By Value').click();
40+
cy.findByRole('button', { name: 'Increment Async By Value' }).click();
4141
cy.get('.Counter [role="note"]').should('contain.text', 'count is 5');
4242

4343
cy.get('input.MuiInput-input').clear().type('-5');
44-
cy.contains('Increment Async By Value').click();
44+
cy.findByRole('button', { name: 'Increment Async By Value' }).click();
4545
cy.get('.Counter [role="note"]').should('contain.text', 'count is 0');
4646
});
4747
});

‎src/features/Counter/Counter.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ describe('Counter Feature Test Suite', () => {
2121
});
2222

2323
it('should increment by 1', async () => {
24-
const $incrementButton = screen.getByRole('button', { name: 'Increment By 1' });
24+
const $incrementButton = screen.getByRole('button', { name: 'Increment' });
2525
await userEvent.click($incrementButton);
2626
expect(screen.getByRole('note').textContent).toBe('count is 1');
2727
});
2828

2929
it('should decrement by 1', async () => {
30-
const $decrementButton = screen.getByRole('button', { name: 'Decrement By 1' });
30+
const $decrementButton = screen.getByRole('button', { name: 'Decrement' });
3131
await userEvent.click($decrementButton);
3232
expect(screen.getByRole('note').textContent).toBe('count is -1');
3333
});
@@ -51,14 +51,14 @@ describe('Counter Feature Test Suite', () => {
5151
});
5252

5353
it('should increment async by 1', async () => {
54-
const $incrementAsyncButton = screen.getByRole('button', { name: 'Increment Async By 1' });
54+
const $incrementAsyncButton = screen.getByRole('button', { name: 'Increment Async' });
5555
await userEvent.click($incrementAsyncButton);
5656

5757
await waitFor(() => expect(screen.getByRole('note').textContent).toBe('count is 1'), { timeout: 1000 });
5858
});
5959

6060
it('should decrement async by 1', async () => {
61-
const $decrementAsyncButton = screen.getByRole('button', { name: 'Decrement Async By 1' });
61+
const $decrementAsyncButton = screen.getByRole('button', { name: 'Decrement Async' });
6262
await userEvent.click($decrementAsyncButton);
6363

6464
await waitFor(() => expect(screen.getByRole('note').textContent).toBe('count is -1'), { timeout: 1000 });

‎src/features/Counter/Counter.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,19 +39,19 @@ function Counter() {
3939
</Box>
4040
<Box sx={{ boxShadow: 'none', display: 'flex', flexWrap: 'wrap', gap: '1rem', justifyContent: 'center', marginTop: '1rem' }}>
4141
<Button variant="contained" onClick={() => dispatch(actions.decrement())}>
42-
Decrement By 1
42+
Decrement
4343
</Button>
4444
<Button variant="contained" onClick={() => dispatch(actions.increment())}>
45-
Increment By 1
45+
Increment
4646
</Button>
4747
<Button variant="contained" onClick={() => dispatch(actions.incrementByAmount(parseInt(inputRef.current?.value || '0', 10)))}>
4848
Increment By Value
4949
</Button>
5050
<Button variant="contained" onClick={() => dispatch(actions.decrementAsync())}>
51-
Decrement Async By 1
51+
Decrement Async
5252
</Button>
5353
<Button variant="contained" onClick={() => dispatch(actions.incrementAsync())}>
54-
Increment Async By 1
54+
Increment Async
5555
</Button>
5656
<Button variant="contained" onClick={() => dispatch(actions.incrementByAmountAsync(inputRef.current?.value))}>
5757
Increment Async By Value

‎src/features/WelcomeCard/WelcomeCard.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Typography } from '@mui/material';
33
import Card from '@mui/material/Card';
44
import CardActionArea from '@mui/material/CardActions';
55
import CardContent from '@mui/material/CardContent';
6-
import CardHeader from '@mui/material/CardHeader';
76

87
// svgs
98
import reactLogo from '~assets/react.svg';
@@ -17,11 +16,10 @@ import Logo from './Logo.style';
1716

1817
function WelcomeCard({ title = 'Welcome' }: { title: string }) {
1918
return (
20-
<Card
21-
sx={{ background: 'palette.background.paper', margin: 'auto', maxWidth: '45rem', textAlign: 'center' }}
22-
className=" WelcomeCard p-8"
23-
>
24-
<CardHeader component="h1" title={title} />
19+
<Card sx={{ background: 'palette.background.paper', margin: 'auto', textAlign: 'center' }} className=" WelcomeCard p-8">
20+
<Typography component="h1" sx={{ fontSize: '2.5rem' }}>
21+
Vite React Typescript Template
22+
</Typography>
2523
<CardContent sx={{ padding: '0' }}>
2624
<Logo className="inline-block" href="https://vitejs.dev" target="_blank" rel="noreferrer">
2725
<img src={viteLogo} className="logo" alt="Vite logo" />
@@ -30,7 +28,7 @@ function WelcomeCard({ title = 'Welcome' }: { title: string }) {
3028
<img src={reactLogo} className="logo react" alt="React logo" />
3129
</Logo>
3230
</CardContent>
33-
<Typography variant="h3">Vite + React</Typography>
31+
<Typography variant="h5">{title}</Typography>
3432
<CardContent className="p-0">
3533
<Counter />
3634
<Typography className="my-5">

0 commit comments

Comments
 (0)