#39 Add test and better styling

Author: Polleps

data-browser/src/routes/History/HistoryRoute.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import { useResource, useStore, Version } from '@tomic/react';
 
 import { ContainerNarrow } from '../../components/Containers';
@@ -18,21 +18,37 @@ import {
   groupVersionsByMonth,
   setResourceToVersion,
 } from './versionHelpers';
+import { toast } from 'react-hot-toast';
+import { useNavigateWithTransition } from '../../hooks/useNavigateWithTransition';
+import { constructOpenURL } from '../../helpers/navigation';
 
 /** Shows an activity log of previous versions */
 export function History(): JSX.Element {
   const store = useStore();
+  const navigate = useNavigateWithTransition();
+  const scrollerTitleId = useId();
+
   const [subject] = useCurrentSubject();
   const resource = useResource(subject);
   const { versions, loading, error } = useVersions(resource);
-  const [selectedVersion, setSelectedVersion] = useState<Version | undefined>(
-    versions[versions.length - 1],
-  );
+  const [selectedVersion, setSelectedVersion] = useState<Version | undefined>();
 
   const groupedVersions: {
     [key: string]: Version[];
   } = useMemo(() => groupVersionsByMonth(dedupeVersions(versions)), [versions]);
 
+  useEffect(() => {
+    setSelectedVersion(versions[versions.length - 1]);
+  }, [versions]);
+
+  const setResourceToCurrentVersion = async () => {
+    if (selectedVersion && subject) {
+      await setResourceToVersion(resource, selectedVersion, store);
+      toast.success('Resource version updated');
+      navigate(constructOpenURL(subject));
+    }
+  };
+
   if (loading) {
     return <ContainerNarrow>Loading history of {subject}...</ContainerNarrow>;
   }
@@ -48,28 +64,24 @@ export function History(): JSX.Element {
   return (
     <SplitView about={subject}>
       <CurrentItem>
-        <Column>
+        <Column fullHeight>
           <Title resource={resource} prefix='History of' link />
           {selectedVersion && selectedVersion?.resource && (
             <>
               <VersionTitle version={selectedVersion} />
-              <Card>
+              <StyledCard>
                 <ResourceCardDefault resource={selectedVersion.resource} />
-              </Card>
-              <Button
-                onClick={() =>
-                  setResourceToVersion(resource, selectedVersion, store)
-                }
-              >
+              </StyledCard>
+              <Button onClick={setResourceToCurrentVersion}>
                 Make current version
               </Button>
             </>
           )}
         </Column>
       </CurrentItem>
-      <Scroller>
+      <ScrollerSection aria-labelledby={scrollerTitleId}>
         <Column>
-          <h2>Versions</h2>
+          <ScrollerTitle id={scrollerTitleId}>Versions</ScrollerTitle>
           {Object.entries(groupedVersions).map(([key, group]) => (
             <React.Fragment key={key}>
               <GroupHeading>{key}</GroupHeading>
@@ -84,30 +96,38 @@ export function History(): JSX.Element {
             </React.Fragment>
           ))}
         </Column>
-      </Scroller>
+      </ScrollerSection>
     </SplitView>
   );
 }
 
-const SplitView = styled.div`
+const SplitView = styled.main`
   display: flex;
   /* Fills entire view on all devices */
   width: 100%;
   height: 100%;
-  height: calc(100vh - 4rem);
+  height: calc(100vh - 5rem);
+  padding: ${p => p.theme.margin}rem;
+  gap: ${p => p.theme.margin}rem;
+`;
+
+const StyledCard = styled(Card)`
+  flex: 1;
+  overflow: auto;
 `;
 
 const CurrentItem = styled.div`
   flex: 1;
-  padding: 1rem;
 `;
 
-const Scroller = styled.div`
+const ScrollerTitle = styled.h2`
+  text-align: center;
+`;
+const ScrollerSection = styled.section`
   overflow: auto;
   /* flex: 1; */
   border: 1px solid ${p => p.theme.colors.bg2};
   border-radius: ${p => p.theme.radius};
-  margin: 1rem;
   background-color: ${p => p.theme.colors.bg};
   padding: 1rem;
   width: 20rem;

data-browser/src/routes/History/VersionButton.tsx

@@ -21,6 +21,7 @@ export function VersionButton({
       key={version.commit.signature}
       onClick={onClick}
       about={version.commit.id}
+      data-testid='version-button'
     >
       <DateTime date={new Date(version.commit.createdAt)} />
     </VersionRow>

data-browser/tests/e2e.spec.ts

@@ -620,6 +620,38 @@ test.describe('data-browser', async () => {
       ),
     );
   });
+
+  test('history page', async ({ page }) => {
+    await signIn(page);
+    await newDrive(page);
+    // Create new class from new resource menu
+    await newResource('document', page);
+
+    // commit for saving initial document
+    await page.waitForResponse(`${serverUrl}/commit`);
+    // commit for initializing the first element (paragraph)
+    await page.waitForResponse(`${serverUrl}/commit`);
+
+    await editTitle('First Title', page);
+    expect(page.locator('text=First Title')).toBeVisible();
+
+    await editTitle('Second Title', page, true);
+    expect(page.locator('text=Second Title')).toBeVisible();
+
+    await contextMenuClick('history', page);
+    expect(page.locator('text=History of Second Title')).toBeVisible();
+
+    await page.getByTestId('version-button').nth(1).click();
+
+    expect(page.locator('text=First Title')).toBeVisible();
+
+    await page.click('text=Make current version');
+
+    expect(page.locator('text=Resource version updated')).toBeVisible();
+    await page.waitForNavigation();
+    expect(page.locator('h1:has-text("First Title")')).toBeVisible();
+    expect(page.locator('text=History of First Title')).not.toBeVisible();
+  });
 });
 
 async function disableViewTransition(page: Page) {
@@ -743,8 +775,13 @@ async function changeDrive(subject: string, page: Page) {
   await expect(page.locator('text=Create new resource')).toBeVisible();
 }
 
-async function editTitle(title: string, page: Page) {
+async function editTitle(title: string, page: Page, clear = false) {
   await page.locator(editableTitle).click();
+
+  if (clear) {
+    await page.locator(editableTitle).clear();
+  }
+
   // These keys make sure the onChange handler is properly called
   await page.keyboard.press('Space');
   await page.keyboard.press('Backspace');