test: error and error details case is added (#1420)

frontend/package.json

@@ -16,6 +16,7 @@
 		"playwright": "NODE_ENV=testing playwright test --config=./playwright.config.ts",
 		"playwright:local:debug": "PWDEBUG=console yarn playwright --headed --browser=chromium",
 		"playwright:codegen:local":"playwright codegen http://localhost:3301",
+		"playwright:codegen:local:auth":"yarn playwright:codegen:local --load-storage=tests/auth.json",
 		"husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
 		"commitlint": "commitlint --edit $1"
 	},

frontend/playwright.config.ts

@@ -14,8 +14,8 @@ const config: PlaywrightTestConfig = {
 		baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3301',
 	},
 	updateSnapshots: 'all',
-	fullyParallel: false,
-	quiet: true,
+	fullyParallel: !!process.env.CI,
+	quiet: false,
 	testMatch: ['**/*.spec.ts'],
 	reporter: process.env.CI ? 'github' : 'list',
 };

frontend/src/store/index.ts

@@ -18,4 +18,8 @@ const store = createStore(
 	),
 );
 
+if (window !== undefined) {
+	window.store = store;
+}
+
 export default store;

frontend/src/store/reducers/global.ts

@@ -10,7 +10,9 @@ const intitalState: GlobalReducer = {
 	maxTime: Date.now() * 1000000,
 	minTime: (Date.now() - 15 * 60 * 1000) * 1000000,
 	loading: true,
-	selectedTime: getDefaultOption(window.location.pathname),
+	selectedTime: getDefaultOption(
+		typeof window !== 'undefined' ? window?.location?.pathname : '',
+	),
 };
 
 const globalTimeReducer = (

frontend/tests/expectionDetails/index.spec.ts

@@ -0,0 +1,101 @@
+import { expect, Page, test } from '@playwright/test';
+import ROUTES from 'constants/routes';
+
+import allErrorList from '../fixtures/api/allErrors/200.json';
+import errorDetailSuccess from '../fixtures/api/errorDetails/200.json';
+import errorDetailNotFound from '../fixtures/api/errorDetails/404.json';
+import nextPreviousSuccess from '../fixtures/api/getNextPrev/200.json';
+import { loginApi } from '../fixtures/common';
+import { JsonApplicationType } from '../fixtures/constant';
+
+let page: Page;
+const timestamp = '1657794588955274000';
+
+test.describe('Expections Details', async () => {
+	test.beforeEach(async ({ baseURL, browser }) => {
+		const context = await browser.newContext({ storageState: 'tests/auth.json' });
+		const newPage = await context.newPage();
+
+		await loginApi(newPage);
+
+		await newPage.goto(`${baseURL}${ROUTES.APPLICATION}`);
+
+		page = newPage;
+	});
+
+	test('Should have not found when api return 404', async () => {
+		await Promise.all([
+			page.route('**/errorFromGroupID**', (route) =>
+				route.fulfill({
+					status: 404,
+					contentType: JsonApplicationType,
+					body: JSON.stringify(errorDetailNotFound),
+				}),
+			),
+			page.route('**/nextPrevErrorIDs**', (route) =>
+				route.fulfill({
+					status: 404,
+					contentType: JsonApplicationType,
+					body: JSON.stringify([]),
+				}),
+			),
+		]);
+
+		await page.goto(
+			`${ROUTES.ERROR_DETAIL}?groupId=${allErrorList[0].groupID}&timestamp=${timestamp}`,
+			{
+				waitUntil: 'networkidle',
+			},
+		);
+
+		const NoDataLocator = page.locator('text=Not Found');
+		const isVisible = await NoDataLocator.isVisible();
+		const text = await NoDataLocator.textContent();
+
+		expect(isVisible).toBe(true);
+		expect(text).toBe('Not Found');
+		expect(await page.screenshot()).toMatchSnapshot();
+	});
+
+	test('Render Success Data when 200 from details page', async () => {
+		await Promise.all([
+			page.route('**/errorFromGroupID**', (route) =>
+				route.fulfill({
+					status: 200,
+					contentType: JsonApplicationType,
+					body: JSON.stringify(errorDetailSuccess),
+				}),
+			),
+			page.route('**/nextPrevErrorIDs**', (route) =>
+				route.fulfill({
+					status: 200,
+					contentType: JsonApplicationType,
+					body: JSON.stringify(nextPreviousSuccess),
+				}),
+			),
+		]);
+
+		await page.goto(
+			`${ROUTES.ERROR_DETAIL}?groupId=${allErrorList[0].groupID}&timestamp=${timestamp}`,
+			{
+				waitUntil: 'networkidle',
+			},
+		);
+
+		const traceDetailButton = page.locator('text=See the error in trace graph');
+		const olderButton = page.locator('text=Older');
+		const newerButton = page.locator(`text=Newer`);
+
+		expect(await traceDetailButton.isVisible()).toBe(true);
+		expect(await olderButton.isVisible()).toBe(true);
+		expect(await newerButton.isVisible()).toBe(true);
+
+		expect(await traceDetailButton.textContent()).toBe(
+			'See the error in trace graph',
+		);
+		expect(await olderButton.textContent()).toBe('Older');
+		expect(await newerButton.textContent()).toBe('Newer');
+
+		expect(await page.screenshot()).toMatchSnapshot();
+	});
+});

frontend/tests/expections/index.spec.ts

@@ -0,0 +1,148 @@
+import { expect, Page, test } from '@playwright/test';
+import ROUTES from 'constants/routes';
+
+import successAllErrors from '../fixtures/api/allErrors/200.json';
+import { loginApi } from '../fixtures/common';
+import { JsonApplicationType } from '../fixtures/constant';
+
+const noDataTableData = async (page: Page): Promise<void> => {
+	const text = page.locator('text=No Data');
+
+	expect(text).toBeVisible();
+	expect(text).toHaveText('No Data');
+
+	const textType = [
+		'Exception Type',
+		'Error Message',
+		'Last Seen',
+		'First Seen',
+		'Application',
+	];
+
+	textType.forEach(async (text) => {
+		const textLocator = page.locator(`text=${text}`);
+
+		const textContent = await textLocator.textContent();
+
+		expect(textContent).toBe(text);
+		expect(textLocator).not.toBeNull();
+
+		expect(textLocator).toBeVisible();
+		await expect(textLocator).toHaveText(`${text}`);
+	});
+};
+
+let page: Page;
+
+test.describe('Expections page', async () => {
+	test.beforeEach(async ({ baseURL, browser }) => {
+		const context = await browser.newContext({ storageState: 'tests/auth.json' });
+		const newPage = await context.newPage();
+
+		await loginApi(newPage);
+
+		await newPage.goto(`${baseURL}${ROUTES.APPLICATION}`);
+
+		page = newPage;
+	});
+
+	test('Should have a valid route', async () => {
+		await page.goto(ROUTES.ALL_ERROR);
+
+		await expect(page).toHaveURL(ROUTES.ALL_ERROR);
+		expect(await page.screenshot()).toMatchSnapshot();
+	});
+
+	test('Should have a valid Breadcrumbs', async () => {
+		await page.goto(ROUTES.ALL_ERROR, {
+			waitUntil: 'networkidle',
+		});
+
+		const expectionsLocator = page.locator('a:has-text("Exceptions")');
+
+		await expect(expectionsLocator).toBeVisible();
+		await expect(expectionsLocator).toHaveText('Exceptions');
+		await expect(expectionsLocator).toHaveAttribute('href', ROUTES.ALL_ERROR);
+		expect(await page.screenshot()).toMatchSnapshot();
+	});
+
+	test('Should render the page with 404 status', async () => {
+		await page.route('**listErrors', (route) =>
+			route.fulfill({
+				status: 404,
+				contentType: JsonApplicationType,
+				body: JSON.stringify([]),
+			}),
+		);
+
+		await page.goto(ROUTES.ALL_ERROR, {
+			waitUntil: 'networkidle',
+		});
+
+		await noDataTableData(page);
+		expect(await page.screenshot()).toMatchSnapshot();
+	});
+
+	test('Should render the page with 500 status in antd notification with no data antd table', async () => {
+		await page.route(`**/listErrors**`, (route) =>
+			route.fulfill({
+				status: 500,
+				contentType: JsonApplicationType,
+				body: JSON.stringify([]),
+			}),
+		);
+
+		await page.goto(ROUTES.ALL_ERROR, {
+			waitUntil: 'networkidle',
+		});
+
+		const text = 'Something went wrong';
+
+		const el = page.locator(`text=${text}`);
+
+		expect(el).toBeVisible();
+		expect(el).toHaveText(`${text}`);
+		expect(await el.getAttribute('disabled')).toBe(null);
+
+		await noDataTableData(page);
+		expect(await page.screenshot()).toMatchSnapshot();
+	});
+
+	test('Should render data in antd table', async () => {
+		await Promise.all([
+			page.route(`**/listErrors**`, (route) =>
+				route.fulfill({
+					status: 200,
+					contentType: JsonApplicationType,
+					body: JSON.stringify(successAllErrors),
+				}),
+			),
+
+			page.route('**/countErrors**', (route) =>
+				route.fulfill({
+					status: 200,
+					contentType: JsonApplicationType,
+					body: JSON.stringify(200),
+				}),
+			),
+		]);
+
+		await page.goto(ROUTES.ALL_ERROR, {
+			waitUntil: 'networkidle',
+		});
+
+		await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+
+		const expectionType = page.locator(
+			`td:has-text("${successAllErrors[1].exceptionType}")`,
+		);
+
+		expect(expectionType).toBeVisible();
+
+		const second = page.locator('li > a:has-text("2") >> nth=0');
+		const isVisisble = await second.isVisible();
+
+		expect(isVisisble).toBe(true);
+		expect(await page.screenshot()).toMatchSnapshot();
+	});
+});

frontend/tests/fixtures/api/allErrors/200.json

@@ -0,0 +1,92 @@
+[
+	{
+		"exceptionType": "ConnectionError",
+		"exceptionMessage": "HTTPSConnectionPool(host='run.mocekdy.io', port=443): Max retries exceeded with url: /v3/1cwb67153-a6ac-4aae-aca6-273ed68b5d9e (Caused by NewConnectionError('\u003curllib3.connection.HTTPSConnection object at 0x108ce9c10\u003e: Failed to establish a new connection: [Errno 8] nodename nor servname provided, or not known'))",
+		"exceptionCount": 2,
+		"lastSeen": "2022-07-14T10:29:48.955274Z",
+		"firstSeen": "2022-07-14T10:29:48.950721Z",
+		"serviceName": "1rfflaskAp",
+		"groupID": "e24d35bda98c5499a5c8df3ba61b0238"
+	},
+	{
+		"exceptionType": "NameError",
+		"exceptionMessage": "name 'listf' is not defined",
+		"exceptionCount": 8,
+		"lastSeen": "2022-07-14T10:30:42.411035Z",
+		"firstSeen": "2022-07-14T10:29:45.426784Z",
+		"serviceName": "1rfflaskAp",
+		"groupID": "efc46adcd5e87b65f8f244cba683b265"
+	},
+	{
+		"exceptionType": "ZeroDivisionError",
+		"exceptionMessage": "division by zero",
+		"exceptionCount": 1,
+		"lastSeen": "2022-07-14T10:29:54.195996Z",
+		"firstSeen": "2022-07-14T10:29:54.195996Z",
+		"serviceName": "1rfflaskAp",
+		"groupID": "a49058b540eef9aefe159d84f1a2b6df"
+	},
+	{
+		"exceptionType": "MaxRetryError",
+		"exceptionMessage": "HTTPSConnectionPool(host='rufn.fmoceky.io', port=443): Max retries exceeded with url: /v3/b851a5c6-ab54-495a-be04-69834ae0d2a7 (Caused by NewConnectionError('\u003curllib3.connection.HTTPSConnection object at 0x108ec2640\u003e: Failed to establish a new connection: [Errno 8] nodename nor servname provided, or not known'))",
+		"exceptionCount": 1,
+		"lastSeen": "2022-07-14T10:29:49.471402Z",
+		"firstSeen": "2022-07-14T10:29:49.471402Z",
+		"serviceName": "1rfflaskAp",
+		"groupID": "e59d39239f4d48842d83e3cc4cf53249"
+	},
+	{
+		"exceptionType": "MaxRetryError",
+		"exceptionMessage": "HTTPSConnectionPool(host='run.mocekdy.io', port=443): Max retries exceeded with url: /v3/1cwb67153-a6ac-4aae-aca6-273ed68b5d9e (Caused by NewConnectionError('\u003curllib3.connection.HTTPSConnection object at 0x108ce9c10\u003e: Failed to establish a new connection: [Errno 8] nodename nor servname provided, or not known'))",
+		"exceptionCount": 1,
+		"lastSeen": "2022-07-14T10:29:48.947579Z",
+		"firstSeen": "2022-07-14T10:29:48.947579Z",
+		"serviceName": "1rfflaskAp",
+		"groupID": "14d18a6fb1cd3f541de1566530e75486"
+	},
+	{
+		"exceptionType": "ConnectionError",
+		"exceptionMessage": "HTTPSConnectionPool(host='rufn.fmoceky.io', port=443): Max retries exceeded with url: /v3/b851a5c6-ab54-495a-be04-69834ae0d2a7 (Caused by NewConnectionError('\u003curllib3.connection.HTTPSConnection object at 0x108ec2640\u003e: Failed to establish a new connection: [Errno 8] nodename nor servname provided, or not known'))",
+		"exceptionCount": 2,
+		"lastSeen": "2022-07-14T10:29:49.476718Z",
+		"firstSeen": "2022-07-14T10:29:49.472271Z",
+		"serviceName": "1rfflaskAp",
+		"groupID": "bf6d88d10397ca3194b96a10f4719031"
+	},
+	{
+		"exceptionType": "github.com/gin-gonic/gin.Error",
+		"exceptionMessage": "Sample Error",
+		"exceptionCount": 6,
+		"lastSeen": "2022-07-15T18:55:32.3538096Z",
+		"firstSeen": "2022-07-14T14:47:19.874387Z",
+		"serviceName": "goApp",
+		"groupID": "b4fd099280072d45318e1523d82aa9c1"
+	},
+	{
+		"exceptionType": "MaxRetryError",
+		"exceptionMessage": "HTTPSConnectionPool(host='rufn.fmoceky.io', port=443): Max retries exceeded with url: /v3/b851a5c6-ab54-495a-be04-69834ae0d2a7 (Caused by NewConnectionError('\u003curllib3.connection.HTTPSConnection object at 0x10801b490\u003e: Failed to establish a new connection: [Errno 8] nodename nor servname provided, or not known'))",
+		"exceptionCount": 1,
+		"lastSeen": "2022-07-14T11:07:06.560593Z",
+		"firstSeen": "2022-07-14T11:07:06.560593Z",
+		"serviceName": "samplFlaskApp",
+		"groupID": "1945671c945b10641e73b0fe28c4d486"
+	},
+	{
+		"exceptionType": "ConnectionError",
+		"exceptionMessage": "HTTPSConnectionPool(host='rufn.fmoceky.io', port=443): Max retries exceeded with url: /v3/b851a5c6-ab54-495a-be04-69834ae0d2a7 (Caused by NewConnectionError('\u003curllib3.connection.HTTPSConnection object at 0x10801b490\u003e: Failed to establish a new connection: [Errno 8] nodename nor servname provided, or not known'))",
+		"exceptionCount": 2,
+		"lastSeen": "2022-07-14T11:07:06.56493Z",
+		"firstSeen": "2022-07-14T11:07:06.561074Z",
+		"serviceName": "samplFlaskApp",
+		"groupID": "5bea5295cac187404005f9c96e71aa53"
+	},
+	{
+		"exceptionType": "ConnectionError",
+		"exceptionMessage": "HTTPSConnectionPool(host='rufn.fmoceky.io', port=443): Max retries exceeded with url: /v3/b851a5c6-ab54-495a-be04-69834ae0d2a7 (Caused by NewConnectionError('\u003curllib3.connection.HTTPSConnection object at 0x108031820\u003e: Failed to establish a new connection: [Errno 8] nodename nor servname provided, or not known'))",
+		"exceptionCount": 2,
+		"lastSeen": "2022-07-14T11:07:06.363977Z",
+		"firstSeen": "2022-07-14T11:07:06.361163Z",
+		"serviceName": "samplFlaskApp",
+		"groupID": "52a1fbe033453d806c0f24ba39168a78"
+	}
+]

frontend/tests/fixtures/api/errorDetails/404.json

@@ -0,0 +1,5 @@
+{
+	"error": "Error/Exception not found",
+	"errorType": "not_found",
+	"status": "error"
+}

frontend/tests/fixtures/api/getNextPrev/200.json

@@ -0,0 +1,7 @@
+{
+	"nextErrorID": "",
+	"nextTimestamp": "0001-01-01T00:00:00Z",
+	"prevErrorID": "217133e5f7df429abd31b507859ea513",
+	"prevTimestamp": "2022-07-14T10:29:48.950721Z",
+	"groupID": "e24d35bda98c5499a5c8df3ba61b0238"
+}

frontend/tests/fixtures/constant.ts

@@ -6,3 +6,5 @@ export const validPassword = 'SamplePassword98@@';
 
 export const getStartedButtonSelector = 'button[data-attr="signup"]';
 export const confirmPasswordSelector = '#password-confirm-error';
+
+export const JsonApplicationType = 'application/json';

frontend/tests/login/fail.spec.ts

@@ -24,5 +24,6 @@ test.describe('Version API fail while loading login page', async () => {
 		expect(el).toBeVisible();
 		expect(el).toHaveText(`${text}`);
 		expect(await el.getAttribute('disabled')).toBe(null);
+		expect(await page.screenshot()).toMatchSnapshot();
 	});
 });

frontend/tests/login/index.spec.ts

@@ -45,5 +45,6 @@ test.describe('Login Page', () => {
 		element.isVisible();
 		const text = await element.innerText();
 		expect(text).toBe(`SigNoz ${version}`);
+		expect(await page.screenshot()).toMatchSnapshot();
 	});
 });

frontend/tests/service/index.spec.ts

@@ -16,7 +16,17 @@ test.describe('Service Page', () => {
 
 		page = newPage;
 	});
+
 	test('Serice Page is rendered', async ({ baseURL }) => {
 		await expect(page).toHaveURL(`${baseURL}${ROUTES.APPLICATION}`);
+		expect(await page.screenshot()).toMatchSnapshot();
+	});
+
+	test('Logged In must be true', async () => {
+		const { app } = await page.evaluate(() => window.store.getState());
+
+		const { isLoggedIn } = app;
+
+		expect(isLoggedIn).toBe(true);
 	});
 });

frontend/tests/signup/index.spec.ts

@@ -77,6 +77,7 @@ test.describe('Sign Up Page', () => {
 		await buttonSignupButton.click();
 
 		expect(page).toHaveURL(`${baseURL}${ROUTES.SIGN_UP}`);
+		expect(await page.screenshot()).toMatchSnapshot();
 	});
 
 	test('Invite link validation', async ({ baseURL, page }) => {
@@ -87,6 +88,7 @@ test.describe('Sign Up Page', () => {
 		const messageText = await page.locator(`text=${message}`).innerText();
 
 		expect(messageText).toBe(message);
+		expect(await page.screenshot()).toMatchSnapshot();
 	});
 
 	test('User Sign up with valid details', async ({ baseURL, page, context }) => {
@@ -125,6 +127,7 @@ test.describe('Sign Up Page', () => {
 		await context.storageState({
 			path: 'tests/auth.json',
 		});
+		expect(await page.screenshot()).toMatchSnapshot();
 	});
 
 	test('Empty name with valid details', async ({ baseURL, page }) => {
@@ -142,6 +145,7 @@ test.describe('Sign Up Page', () => {
 		const gettingStartedButton = page.locator(getStartedButtonSelector);
 
 		expect(await gettingStartedButton.isDisabled()).toBe(true);
+		expect(await page.screenshot()).toMatchSnapshot();
 	});
 
 	test('Empty Company name with valid details', async ({ baseURL, page }) => {
@@ -159,6 +163,7 @@ test.describe('Sign Up Page', () => {
 		const gettingStartedButton = page.locator(getStartedButtonSelector);
 
 		expect(await gettingStartedButton.isDisabled()).toBe(true);
+		expect(await page.screenshot()).toMatchSnapshot();
 	});
 
 	test('Empty Email with valid details', async ({ baseURL, page }) => {
@@ -176,6 +181,7 @@ test.describe('Sign Up Page', () => {
 		const gettingStartedButton = page.locator(getStartedButtonSelector);
 
 		expect(await gettingStartedButton.isDisabled()).toBe(true);
+		expect(await page.screenshot()).toMatchSnapshot();
 	});
 
 	test('Empty Password and confirm password with valid details', async ({
@@ -200,6 +206,7 @@ test.describe('Sign Up Page', () => {
 		// password validation message is not present
 		const locator = await page.locator(confirmPasswordSelector).isVisible();
 		expect(locator).toBe(false);
+		expect(await page.screenshot()).toMatchSnapshot();
 	});
 
 	test('Miss Match Password and confirm password with valid details', async ({
@@ -220,5 +227,6 @@ test.describe('Sign Up Page', () => {
 		// password validation message is not present
 		const locator = await page.locator(confirmPasswordSelector).isVisible();
 		expect(locator).toBe(true);
+		expect(await page.screenshot()).toMatchSnapshot();
 	});
 });