- My
- Gear
+ My Gear
-
+
Dashboard
@@ -51,9 +52,10 @@ export function Footer() {
© Made with ❤️ in
{' '}
- {getCopyright()}
+ {getCopyrightYearString(YEAR_OF_CREATE, new Date().getFullYear())}
{' '}
- by Serhii Shramko
+ by
+ Serhii Shramko
);
diff --git a/components/footer/get-copyright.test.ts b/components/footer/get-copyright.test.ts
new file mode 100644
index 0000000..3dc0aa2
--- /dev/null
+++ b/components/footer/get-copyright.test.ts
@@ -0,0 +1,21 @@
+import { getCopyrightYearString } from '@/components/footer/get-copyright';
+
+describe('getCopyrightYearString', () => {
+ test('Return current year if now is 2022', () => {
+ const currentYear = 2022;
+ const createYear = 2022;
+
+ const result = getCopyrightYearString(createYear, currentYear);
+
+ expect(result).toStrictEqual('2022');
+ });
+
+ test('Return string range between create and current', () => {
+ const currentYear = 2022;
+ const createYear = 2020;
+
+ const result = getCopyrightYearString(createYear, currentYear);
+
+ expect(result).toStrictEqual(`${createYear} - ${currentYear}`);
+ });
+});
diff --git a/components/footer/get-copyright.ts b/components/footer/get-copyright.ts
index fc3832b..2170035 100644
--- a/components/footer/get-copyright.ts
+++ b/components/footer/get-copyright.ts
@@ -1,11 +1,10 @@
-const YEAR_OF_CREATE = 2022;
-
-export const getCopyright = () => {
- const currentYear = new Date().getFullYear();
-
- if (YEAR_OF_CREATE === currentYear) {
+export const getCopyrightYearString = (
+ createYear: number,
+ currentYear: number,
+) => {
+ if (createYear === currentYear) {
return currentYear.toString();
}
- return `${YEAR_OF_CREATE} - ${currentYear}`;
+ return `${createYear} - ${currentYear}`;
};
diff --git a/components/post-reaction/post-reaction.test.tsx b/components/post-reaction/post-reaction.test.tsx
new file mode 100644
index 0000000..febec10
--- /dev/null
+++ b/components/post-reaction/post-reaction.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { PostReaction } from '@/components/post-reaction/post-reaction';
+
+describe('PostReaction component', () => {
+ test('Render with initial state', () => {
+ render(
);
+
+ const title = screen.getByRole('heading', {
+ name: 'Was this article helpful ?',
+ });
+ const description = screen.getByText('Help me improve my blog');
+
+ expect(title).toBeInTheDocument();
+ expect(description).toBeInTheDocument();
+ });
+
+ describe('reactions click:', () => {
+ test('worthless', () => {
+ window.gtag = jest.fn();
+ render(
);
+
+ const worthlessReactionButton = screen.getByRole('button', {
+ name: 'No',
+ });
+ fireEvent.click(worthlessReactionButton);
+
+ expect(window.gtag).toHaveBeenCalledWith('event', 'Reaction click', {
+ event_category: 'Blog - article',
+ event_label: 'No',
+ value: undefined,
+ });
+ });
+
+ test('helpful', () => {
+ window.gtag = jest.fn();
+ render(
);
+
+ const worthlessReactionButton = screen.getByRole('button', {
+ name: 'Yes',
+ });
+ fireEvent.click(worthlessReactionButton);
+
+ expect(window.gtag).toHaveBeenCalledWith('event', 'Reaction click', {
+ event_category: 'Blog - article',
+ event_label: 'Yes',
+ value: undefined,
+ });
+ });
+ });
+});
diff --git a/components/view-counter/view-counter.test.tsx b/components/view-counter/view-counter.test.tsx
new file mode 100644
index 0000000..54fe5d5
--- /dev/null
+++ b/components/view-counter/view-counter.test.tsx
@@ -0,0 +1,28 @@
+import { render } from '@testing-library/react';
+
+import { ViewCounter } from '@/components/view-counter/view-counter';
+
+describe('ViewCounter component', () => {
+ beforeAll(() => {
+ global.fetch = jest.fn();
+ });
+
+ afterAll(() => {
+ jest.clearAllMocks();
+ });
+
+ test('Fetch views with SWC', () => {
+ const slug = 'test-article-slug';
+ render(
);
+
+ // undefined because its get fetch from SWC
+ expect(global.fetch).toHaveBeenNthCalledWith(
+ 1,
+ `/api/views/${slug}`,
+ undefined,
+ );
+ expect(global.fetch).toHaveBeenNthCalledWith(2, `/api/views/${slug}`, {
+ method: 'POST',
+ });
+ });
+});
diff --git a/components/view-counter/view-counter.tsx b/components/view-counter/view-counter.tsx
index 05a1d7d..51cc74a 100644
--- a/components/view-counter/view-counter.tsx
+++ b/components/view-counter/view-counter.tsx
@@ -3,7 +3,6 @@ import useSWR from 'swr';
import { Views } from '@/lib/types';
import { fetcher } from '@/lib/fetcher';
-import { isProduction } from '@/lib/utils';
interface ViewCounterProps {
slug: string;
@@ -20,9 +19,7 @@ export function ViewCounter(props: ViewCounterProps) {
method: 'POST',
});
- if (isProduction()) {
- registerView();
- }
+ registerView();
}, [slug]);
return
{`${views ? views.toLocaleString() : '---'} views`};
diff --git a/jest.config.js b/jest.config.js
index 25e67c3..cd125cc 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -9,6 +9,7 @@ const customJestConfig = {
moduleNameMapper: {
'^@/components/(.*)$': '
/components/$1',
'^@/pages/(.*)$': '/pages/$1',
+ '^@/lib/(.*)$': '/lib/$1',
},
testEnvironment: 'jest-environment-jsdom'
};
diff --git a/lib/constants.ts b/lib/constants.ts
new file mode 100644
index 0000000..7193150
--- /dev/null
+++ b/lib/constants.ts
@@ -0,0 +1 @@
+export const YEAR_OF_CREATE = 2022;
diff --git a/package.json b/package.json
index 70c6d42..6aa0844 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
"prepare": "husky install",
"start": "next start",
"test": "jest --watch",
- "test:ci": "jest --ci"
+ "test:ci": "jest --ci",
+ "test:coverage": "jest --coverage"
},
"engines": {
"node": ">=16"
diff --git a/pages/404.tsx b/pages/404.tsx
index 5feb6e7..0bb9e4d 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -5,6 +5,7 @@ import { useEffect } from 'react';
function NotFoundPage() {
useEffect(() => {
+ // TODO refactor to some ErrorProvider
Sentry.captureException(new Error('404'));
}, []);