created tutorial steps for webmetrics page

Co-authored-by: Mark Teets <markteets@gmail.com>
Co-authored-by: Jasmine Noor <jasnoo@users.noreply.github.com>
Co-authored-by: Minzo Kim <minzo-kim@users.noreply.github.com>
Co-authored-by: Jackie Yuan <yuanjackie1@users.noreply.github.com>

Author: 4 people

src/app/__tests__/WebMetrics.test.tsx

@@ -2,8 +2,14 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import WebMetrics from '../components/WebMetrics';
+import { useStoreContext } from '../store';
 
 jest.mock('react-apexcharts', () => ({ __esModule: true, default: () => <div /> }));
+const dispatch = jest.fn();
+// jest.spyOn(React, 'useEffect').mockImplementation(() => jest.fn());
+jest.mock('../store');
+const mockedStoreContext = jest.mocked(useStoreContext);
+mockedStoreContext.mockImplementation(() => [, dispatch]);
 
 describe('WebMetrics graph testing', () => {
   test('should have 1 div with class name "metric" ', () => {

src/app/components/Tutorial.tsx

@@ -237,6 +237,47 @@ export default class Tutorial extends React.Component<tutorialProps, tutorialSta
           },
         ];
         break;
+      case 'webmetrics':
+        steps = [
+          {
+            title: 'Webmetrics Tab',
+            element: '.web-metrics-container',
+            intro: 'This section will show 4 webmetrics for your page.',
+            position: 'top',
+          },
+          {
+            title: 'LCP',
+            element: document.querySelectorAll('.metric')[0],
+            intro:
+              '<strong>Largest Contentful Paint</strong><br/>The amount of time it takes for the largest image, video or text block within the viewport to be fully rendered and interactive.',
+            position: 'top',
+          },
+
+          {
+            title: 'FID',
+            element: document.querySelectorAll('.metric')[1],
+            intro:
+              '<strong>First Input Delay</strong><br/>A measurement of load responsiveness, the time from the first user interaction (for example, a click) to the browser responding to that interaction.',
+            position: 'top',
+          },
+
+          {
+            title: 'FCP',
+            element: document.querySelectorAll('.metric')[2],
+            intro:
+              '<strong>First Contentful Paint</strong><br/>The amount of time it takes to render the first DOM element of any variety',
+            position: 'top',
+          },
+
+          {
+            title: 'TTFB',
+            element: document.querySelectorAll('.metric')[3],
+            intro:
+              "<strong>Time to first Byte</strong><br/>The amount of time it takes for a user's browser to receive the first byte of page content from the server.",
+            position: 'top',
+          },
+        ];
+        break;
       default:
         steps = [
           {

src/app/components/WebMetrics.tsx

@@ -90,10 +90,10 @@ const radialGraph = (props) => {
 
   // This updates currentTabInApp which is used to determine what tutorial to display (depending on the active tab within Reactime)
   // Code is commented out because it interferes with the testing suite
-  // const [ store, dispatch] = useStoreContext();
-  // useEffect(() => {
-  //   dispatch(setCurrentTabInApp('history'));
-  // }, []);
+  const [store, dispatch] = useStoreContext();
+  useEffect(() => {
+    dispatch(setCurrentTabInApp('webmetrics'));
+  }, []);
 
   const optionsCursorTrueWithMargin = {
     followCursor: true,