Lint fix.

components/pages/TestConsole.js

@@ -4,19 +4,22 @@ import classNames from 'classnames';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import Page from '../layout/Page';
-import PageHeader from '../layout/PageHeader';
-import useFetch from '../../hooks/useFetch';
-import DropDown from '../common/DropDown';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import DropDown from 'components/common/DropDown';
+import WebsiteChart from 'components/metrics/WebsiteChart';
+import EventsChart from 'components/metrics/EventsChart';
+import Button from 'components/common/Button';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import Icon from 'components/common/Icon';
+import useFetch from 'hooks/useFetch';
+import ChevronDown from 'assets/chevron-down.svg';
 import styles from './TestConsole.module.css';
-import WebsiteChart from '../metrics/WebsiteChart';
-import EventsChart from '../metrics/EventsChart';
-import Button from '../common/Button';
-import EmptyPlaceholder from '../common/EmptyPlaceholder';
 
 export default function TestConsole() {
   const user = useSelector(state => state.user);
   const [website, setWebsite] = useState();
+  const [show, setShow] = useState(true);
   const { basePath } = useRouter();
   const { data } = useFetch('/api/websites');
 
@@ -55,6 +58,14 @@ export default function TestConsole() {
       {!selectedValue && <EmptyPlaceholder msg="I hope you know what you're doing here" />}
       {selectedValue && (
         <>
+          <div>
+            <Icon
+              icon={<ChevronDown />}
+              className={classNames({ [styles.hidden]: !show })}
+              onClick={() => setShow(!show)}
+            />
+          </div>
+          {show && (
             <div className={classNames(styles.test, 'row')}>
               <div className="col-4">
                 <PageHeader>Page links</PageHeader>
@@ -71,7 +82,11 @@ export default function TestConsole() {
               </div>
               <div className="col-4">
                 <PageHeader>CSS events</PageHeader>
-              <Button id="primary-button" className="umami--click--primary-button" variant="action">
+                <Button
+                  id="primary-button"
+                  className="umami--click--primary-button"
+                  variant="action"
+                >
                   Send event
                 </Button>
               </div>
@@ -82,6 +97,7 @@ export default function TestConsole() {
                 </Button>
               </div>
             </div>
+          )}
           <div className="row">
             <div className="col-12">
               <WebsiteChart

components/pages/TestConsole.module.css

@@ -3,3 +3,7 @@
   border-radius: 5px;
   padding: 0 20px 20px 20px;
 }
+
+.hidden {
+  transform: rotate(-90deg);
+}

tracker/index.js

@@ -108,7 +108,13 @@ import { removeTrailingSlash } from '../lib/url';
 
   /* Handle events */
 
+  const addEvents = node => {
+    const elements = node.querySelectorAll(eventSelect);
+    Array.prototype.forEach.call(elements, addEvent);
+  };
+
   const addEvent = element => {
+    element.className &&
       element.className.split(' ').forEach(className => {
         if (!eventClass.test(className)) return;
 
@@ -125,8 +131,7 @@ import { removeTrailingSlash } from '../lib/url';
     mutations.forEach(mutation => {
       const element = mutation.target;
       addEvent(element);
-      const elements = element.querySelectorAll(eventSelect);
-      Array.prototype.forEach.call(elements, addEvent);
+      addEvents(element);
     });
   };
 
@@ -166,19 +171,12 @@ import { removeTrailingSlash } from '../lib/url';
     history.replaceState = hook(history, 'replaceState', handlePush);
 
     const update = () => {
-      switch (document.readyState) {
-        /* DOM rendered, add event listeners */
-        case 'interactive': {
-          const events = document.querySelectorAll(eventSelect);
-          Array.prototype.forEach.call(events, addEvent);
+      if (document.readyState === 'complete') {
+        addEvents(document);
+        trackView();
+
         const observer = new MutationObserver(monitorMutate);
         observer.observe(document, { childList: true, subtree: true });
-          break;
-        }
-        /* Page loaded, track our view */
-        case 'complete':
-          trackView();
-          break;
       }
     };
     document.addEventListener('readystatechange', update, true);