Merge pull request #66 from infinum/recommended-type-checked

Recommended type checked

Author: Kristian Djaković

.eslintrc

@@ -12,5 +12,14 @@
 	],
 	"parserOptions": {
 		"project": ["./tsconfig.json"]
-	}
+	},
+	"overrides": [
+		{
+			"files": ["*.ts", "*.tsx"],
+			"extends": ["plugin:@typescript-eslint/recommended-requiring-type-checking"],
+			"rules": {
+				"@typescript-eslint/no-misused-promises": "off"
+			}
+		}
+	]
 }

__mocks__/matchMedia.ts

@@ -1,6 +1,6 @@
 Object.defineProperty(window, 'matchMedia', {
 	writable: true,
-	value: jest.fn().mockImplementation((query) => ({
+	value: jest.fn().mockImplementation((query: string) => ({
 		matches: false,
 		media: query,
 		onchange: null,

__tests__/pages/_error.test.tsx

@@ -0,0 +1,46 @@
+import CustomErrorPage, { ICustomErrorPageProps } from '@/pages/_error';
+import { render, screen } from 'test-utils';
+import NextErrorComponent from 'next/error';
+import { axe } from 'jest-axe';
+import { NextPageContext } from 'next';
+import Bugsnag from '@bugsnag/js';
+
+jest.mock('@bugsnag/js', () => ({ notify: jest.fn() }));
+
+describe('CustomErrorPage', () => {
+	it('should be accessible', async () => {
+		const context = {} as NextPageContext;
+
+		const props = (await NextErrorComponent.getInitialProps(context)) as ICustomErrorPageProps;
+
+		const { container } = render(<CustomErrorPage {...props} />);
+
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+
+	it('should show heading and subheading', async () => {
+		const context = {} as NextPageContext;
+
+		const props = (await NextErrorComponent.getInitialProps(context)) as ICustomErrorPageProps;
+
+		render(<CustomErrorPage {...props} />);
+
+		expect(screen.getByRole('heading', { name: /404/i })).toBeInTheDocument();
+		expect(screen.getByRole('heading', { name: /Error occurred!/i })).toBeInTheDocument();
+		expect(screen.getByRole('img', { name: /presentation/i })).toHaveAttribute(
+			'src',
+			'/images/infinum-contruction.png'
+		);
+	});
+
+	it('should notify Bugnsag', () => {
+		const props = { statusCode: 404, hasGetInitialPropsRun: false, err: new Error('Does not exist') };
+
+		render(<CustomErrorPage {...props} />);
+
+		// eslint-disable-next-line @typescript-eslint/unbound-method
+		expect(Bugsnag.notify).toHaveBeenCalled();
+	});
+});

jest.setup.ts

@@ -7,6 +7,7 @@ import { server } from '@/mocks/server';
 import '@testing-library/jest-dom/extend-expect';
 import 'jest-axe/extend-expect';
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-return
 jest.mock('next/router', () => require('next-router-mock'));
 
 // In order to run `jest-axe` assertions for components containing

next.config.js

@@ -29,7 +29,8 @@ module.exports = {
 		if (
 			process.env.NEXT_PUBLIC_BUGSNAG_API_KEY &&
 			process.env.NODE_ENV === 'production' &&
-			process.env.NEXT_PUBLIC_NEXT_APP_ENV !== 'development'
+			process.env.NEXT_PUBLIC_NEXT_APP_ENV !== 'development' &&
+			process.env.SITE_URL
 		) {
 			config.plugins.push(
 				new BugsnagBuildReporterPlugin(

package-lock.json

@@ -8,7 +8,7 @@
 		"build": "next build",
 		"postbuild": "next-sitemap",
 		"start": "next start",
-		"lint": "eslint . --ext .js,.jsx,.ts,.tsx,.d.ts",
+		"lint": "eslint . --ext .js,.jsx,.ts,.tsx,.d.ts --report-unused-disable-directives",
 		"lint:next": "next lint",
 		"test": "jest",
 		"test:coverage": "jest --coverage",
@@ -34,6 +34,7 @@
 		"@chakra-ui/utils": "~2.0.15",
 		"@datx/core": "~3.0.0",
 		"@datx/jsonapi": "~3.0.0",
+		"@datx/jsonapi-types": "~3.0.0",
 		"@datx/swr": "~3.0.0",
 		"@emotion/react": "~11.11.0",
 		"@emotion/styled": "~11.11.0",
@@ -104,8 +105,8 @@
 		"lint-staged": "~13.2.1",
 		"msw": "~1.2.2",
 		"msw-storybook-addon": "~1.8.0",
-		"node-fetch": "~2.6.12",
 		"next-router-mock": "~0.9.7",
+		"node-fetch": "~2.6.12",
 		"plop": "~3.1.2",
 		"prettier": "~2.8.7",
 		"react-intersection-observer": "~9.5.2",

package.json

@@ -42,15 +42,19 @@ declare module 'i18next' {
 
 fs.readdir(readPath, (err, files) => {
 	if (err) {
-		return console.log(`Unable to scan directory: ${err}`);
+		console.log(`Unable to scan directory: ${err}`);
+
+		return;
 	}
 
 	const names = files.map((file) => getNameData(file.replace('.json', '')));
 	const template = generate(names);
 
 	fs.writeFile(savePath, template, (err) => {
 		if (err) {
-			return console.log(`Unable to save: ${err}`);
+			console.log(`Unable to save: ${err}`);
+
+			return;
 		}
 
 		console.log('The file was saved!');

scripts/i18next-cli.js

@@ -12,6 +12,7 @@ import theme from '@/styles/theme';
 import { MockedRequest, matchRequestUrl } from 'msw';
 import common from '../public/locales/en-US/common.json';
 
+// eslint-disable-next-line @typescript-eslint/no-floating-promises
 i18n.use(initReactI18next).init({
 	lng: 'en-US',
 	fallbackLng: 'en-US',

scripts/test-utils.tsx

@@ -62,7 +62,7 @@ describe('LoginForm', () => {
 	it('should not display error when value is valid', async () => {
 		server.use(
 			rest.post(MOCKED_URLS.Session, async (req, res, ctx) => {
-				const body = await req.json();
+				const body = await req.json<{ data?: { attributes?: { email?: string } } }>();
 				const emailOverride = body.data?.attributes?.email || undefined;
 
 				return res(