Skip to content

Feature 2232 eslint integration #2235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 24, 2024
Merged

Feature 2232 eslint integration #2235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
79cbe34
integrated use of ESLint
mvolkmann Apr 24, 2024
8b25a8b
ESLint config cleanup
mvolkmann Apr 24, 2024
11e81ee
updated a snapshot test
mvolkmann Apr 24, 2024
3537152
Merge branch 'develop' into feature-2232-eslint-integration
mvolkmann Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions web-ui/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import globals from "globals";
Copy link
Collaborator Author

@mvolkmann mvolkmann Apr 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It took a few hours to arrive at this config!

import reactHooksPlugin from "eslint-plugin-react-hooks";
import reactPlugin from "eslint-plugin-react";
import vitestPlugin from "eslint-plugin-vitest";

export default [
{
files: ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
languageOptions: {
parserOptions: {
ecmaFeatures: {
jsx: true
}
},
globals: {
...globals.browser,
...globals.node,
...vitestPlugin.environments.env.globals,
HttpResponse: false,
snapshot: false,
waitForSnapshot: false,
}
},
plugins: {
react: reactPlugin,
'react-hooks': reactHooksPlugin,
vitest: vitestPlugin
},
rules: {
// Override default rules here.
'react-hooks/exhaustive-deps': 'warn',
...vitestPlugin.configs.recommended.rules,
'vitest/expect-expect': 'off',
}
}
];
8 changes: 7 additions & 1 deletion web-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@
"build-storybook": "storybook build",
"build": "vite build",
"coverage": "vitest run --coverage --watch=false",
"format": "prettier --write 'src/**/*.{css,html,js,jsx}'",
"format": "prettier --write 'src/**/*.{css,html,js,jsx,ts,tsx}'",
"lint": "eslint --fix --quiet",
Copy link
Collaborator Author

@mvolkmann mvolkmann Apr 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New script to run ESLint.

"serve": "vite preview",
"start": "vite",
"storybook": "storybook dev -p 6006",
Expand Down Expand Up @@ -85,6 +86,11 @@
"@testing-library/user-event": "^14.5.2",
"@vitejs/plugin-react-swc": "^3.6.0",
"@vitest/coverage-v8": "^1.4.0",
"eslint": "^9.1.1",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-vitest": "^0.5.4",
"globals": "^15.0.0",
"happy-dom": "^14.3.9",
"jest-fetch-mock": "^3.0.3",
"jsdom": "^24.0.0",
Expand Down
4 changes: 2 additions & 2 deletions web-ui/src/components/reviews/periods/ReviewPeriods.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,9 +364,9 @@ const ReviewPeriods = ({ onPeriodSelected, mode }) => {
) : periods.length > 0 ? (
periods
.sort((a, b) => {
return !!a.open === !!b.open
return Boolean(a.open) === Boolean(b.open)
Copy link
Collaborator Author

@mvolkmann mvolkmann Apr 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ESLint likes this better.

? ('' + a.name).localeCompare(b.name)
: !!a.open
: Boolean(a.open)
? -1
: 1;
})
Expand Down
18 changes: 6 additions & 12 deletions web-ui/src/components/skeleton_loader/SkeletonLoader.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,35 @@ import React from 'react';
import renderer from 'react-test-renderer';
import SkeletonLoader from './SkeletonLoader';

it("renders correctly when 'team' is passed as prop ", () => {
Copy link
Collaborator Author

@mvolkmann mvolkmann Apr 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ESLint removed the extra space at the ends of these description strings.

it("renders correctly when 'team' is passed as prop", () => {
const component = renderer.create(<SkeletonLoader type="team" />);
expect(component.toJSON()).toMatchSnapshot();
});

it("renders correctly when 'guild' is passed as prop ", () => {
it("renders correctly when 'guild' is passed as prop", () => {
const component = renderer.create(<SkeletonLoader type="guild" />);
expect(component.toJSON()).toMatchSnapshot();
});

it("renders correctly when 'people' is passed as prop ", () => {
it("renders correctly when 'people' is passed as prop", () => {
const component = renderer.create(<SkeletonLoader type="people" />);
expect(component.toJSON()).toMatchSnapshot();
});

it("renders correctly when 'feedback_requests' is passed as prop ", () => {
it("renders correctly when 'feedback_requests' is passed as prop", () => {
const component = renderer.create(
<SkeletonLoader type="feedback_requests" />
);
expect(component.toJSON()).toMatchSnapshot();
});

it("renders correctly when 'feedback_requests' is passed as prop ", () => {
it("renders correctly when 'received_requests' is passed as prop", () => {
Copy link
Collaborator Author

@mvolkmann mvolkmann Apr 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The previous description string was repeated several times.

const component = renderer.create(
<SkeletonLoader type="received_requests" />
);
expect(component.toJSON()).toMatchSnapshot();
});
it("renders correctly when 'feedback_requests' is passed as prop ", () => {
Copy link
Collaborator Author

@mvolkmann mvolkmann Apr 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was a duplicate test.

const component = renderer.create(
<SkeletonLoader type="received_requests" />
);
expect(component.toJSON()).toMatchSnapshot();
});
it("renders correctly when 'feedback_requests' is passed as prop ", () => {
it("renders correctly when 'view_feedback_requests' is passed as prop", () => {
const component = renderer.create(
<SkeletonLoader type="view_feedback_responses" />
);
Expand Down
134 changes: 59 additions & 75 deletions web-ui/src/components/skeleton_loader/__snapshots__/SkeletonLoader.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`renders correctly when 'feedback_requests' is passed as prop 1`] = `
Copy link
Collaborator Author

@mvolkmann mvolkmann Apr 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This snapshot file was updated to match the test updates.

exports[`renders correctly when 'feedback_requests' is passed as prop 1`] = `
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-12qqhfb-MuiPaper-root-MuiCard-root"
style={
Expand Down Expand Up @@ -103,78 +103,7 @@ exports[`renders correctly when 'feedback_requests' is passed as prop 1`] = `
</div>
`;

exports[`renders correctly when 'feedback_requests' is passed as prop 2`] = `
<div
className="MuiBox-root css-1lads1q"
>
<span
className="MuiSkeleton-root MuiSkeleton-rectangular MuiSkeleton-pulse css-153n0d3-MuiSkeleton-root"
style={
{
"height": "2.7rem",
"width": "100%",
}
}
/>
</div>
`;

exports[`renders correctly when 'feedback_requests' is passed as prop 3`] = `
<div
className="MuiBox-root css-1lads1q"
>
<span
className="MuiSkeleton-root MuiSkeleton-rectangular MuiSkeleton-pulse css-153n0d3-MuiSkeleton-root"
style={
{
"height": "2.7rem",
"width": "100%",
}
}
/>
</div>
`;

exports[`renders correctly when 'feedback_requests' is passed as prop 4`] = `
<div
className="MuiBox-root css-0"
>
<span
className="MuiSkeleton-root MuiSkeleton-text MuiSkeleton-pulse makeStyles-smallMargin-2 css-1e1x4vv-MuiSkeleton-root"
style={
{
"height": 40,
"marginBottom": "1em",
"width": "50vw",
}
}
/>
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-12qqhfb-MuiPaper-root-MuiCard-root"
width={100}
>
<div
className="MuiCardContent-root makeStyles-noTopBottomPadding-1 css-46bh2p-MuiCardContent-root"
>
<div
className="MuiBox-root css-1lads1q"
>
<span
className="MuiSkeleton-root MuiSkeleton-rectangular MuiSkeleton-pulse css-153n0d3-MuiSkeleton-root"
style={
{
"height": "8vh",
"width": "100%",
}
}
/>
</div>
</div>
</div>
</div>
`;

exports[`renders correctly when 'guild' is passed as prop 1`] = `
exports[`renders correctly when 'guild' is passed as prop 1`] = `
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root SkeletonLoader-card css-12qqhfb-MuiPaper-root-MuiCard-root"
>
Expand Down Expand Up @@ -249,7 +178,7 @@ exports[`renders correctly when 'guild' is passed as prop 1`] = `
</div>
`;

exports[`renders correctly when 'people' is passed as prop 1`] = `
exports[`renders correctly when 'people' is passed as prop 1`] = `
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root SkeletonLoader-card css-12qqhfb-MuiPaper-root-MuiCard-root"
>
Expand Down Expand Up @@ -312,7 +241,23 @@ exports[`renders correctly when 'people' is passed as prop 1`] = `
</div>
`;

exports[`renders correctly when 'team' is passed as prop 1`] = `
exports[`renders correctly when 'received_requests' is passed as prop 1`] = `
<div
className="MuiBox-root css-1lads1q"
>
<span
className="MuiSkeleton-root MuiSkeleton-rectangular MuiSkeleton-pulse css-153n0d3-MuiSkeleton-root"
style={
{
"height": "2.7rem",
"width": "100%",
}
}
/>
</div>
`;

exports[`renders correctly when 'team' is passed as prop 1`] = `
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root SkeletonLoader-card css-12qqhfb-MuiPaper-root-MuiCard-root"
>
Expand Down Expand Up @@ -386,3 +331,42 @@ exports[`renders correctly when 'team' is passed as prop 1`] = `
</div>
</div>
`;

exports[`renders correctly when 'view_feedback_requests' is passed as prop 1`] = `
<div
className="MuiBox-root css-0"
>
<span
className="MuiSkeleton-root MuiSkeleton-text MuiSkeleton-pulse makeStyles-smallMargin-2 css-1e1x4vv-MuiSkeleton-root"
style={
{
"height": 40,
"marginBottom": "1em",
"width": "50vw",
}
}
/>
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-12qqhfb-MuiPaper-root-MuiCard-root"
width={100}
>
<div
className="MuiCardContent-root makeStyles-noTopBottomPadding-1 css-46bh2p-MuiCardContent-root"
>
<div
className="MuiBox-root css-1lads1q"
>
<span
className="MuiSkeleton-root MuiSkeleton-rectangular MuiSkeleton-pulse css-153n0d3-MuiSkeleton-root"
style={
{
"height": "8vh",
"width": "100%",
}
}
/>
</div>
</div>
</div>
</div>
`;
8 changes: 4 additions & 4 deletions web-ui/src/components/team-member/TeamMemberSelect.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ it('clicks single item', done => {
const name = 'jesse';
const handleChange = teamMembers => {
expect(teamMembers).toHaveLength(1);
expect(teamMembers[0].name === name);
expect(teamMembers[0].name).toBe(name);
};
render(
<TeamMemberSelect
Expand All @@ -48,10 +48,10 @@ it('clicks multiple items', done => {
const name2 = 'michael';
const handleChange = teamMembers => {
if (teamMembers.length === 1) {
expect(teamMembers[0].name === name1);
expect(teamMembers[0].name).toBe(name1);
} else if (teamMembers.length === 2) {
expect(teamMembers[0].name === name1);
expect(teamMembers[1].name === name2);
expect(teamMembers[0].name).toBe(name1);
expect(teamMembers[1].name).toBe(name2);
}
};
render(
Expand Down
Loading