fix tests

Author: Polleps

data-browser/src/components/Card.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { getTransitionName } from '../helpers/transitionName';
+import { transitionName } from '../helpers/transitionName';
 
 type CardProps = {
   /** Adds a colorful border */
@@ -23,7 +23,7 @@ export const Card = styled.div<CardProps>`
   border-color: ${props =>
     props.highlight ? props.theme.colors.main : props.theme.colors.bg2};
 
-  view-transition-name: ${p => getTransitionName('resource-page', p.about)};
+  ${p => transitionName('resource-page', p.about)};
 `;
 
 export interface CardRowProps {

data-browser/src/components/SideBar/index.tsx

@@ -101,8 +101,6 @@ const SideBarStyled = styled('nav').attrs<SideBarStyledProps>(p => ({
   flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
-
-  view-transition-name: sidebar;
 `;
 
 const MenuWrapper = styled.div`

data-browser/src/helpers/AppSettings.tsx

@@ -20,10 +20,10 @@ export const AppSettingsContextProvider = (
 ): JSX.Element => {
   const [darkMode, setDarkMode, darkModeSetting] = useDarkMode();
   const [mainColor, setMainColor] = useLocalStorage('mainColor', '#1b50d8');
-  const [navbarTop, setNavbarTop] = useLocalStorage('navbarTop', true);
+  const [navbarTop, setNavbarTop] = useLocalStorage('navbarTop', false);
   const [viewTransitionsEnabled, setViewTransitionsEnabled] = useLocalStorage(
     'viewTransitionsEnabled',
-    false,
+    true,
   );
   const [navbarFloating, setNavbarFloating] = useLocalStorage(
     'navbarFloating',

data-browser/src/helpers/transitionName.ts

@@ -1,4 +1,4 @@
-const cyrb53 = (str, seed = 0) => {
+const hashStringWithCYRB53 = (str, seed = 0) => {
   let h1 = 0xdeadbeef ^ seed,
     h2 = 0x41c6ce57 ^ seed;
 
@@ -21,7 +21,8 @@ export function getTransitionName(tag: string, subject: string | undefined) {
     throw new Error('Subject is required for transition name');
   }
 
-  return `${tag}-${cyrb53(subject ?? '')}`;
+  // URL's are not allowed in view-transition-name so we hash the subject.
+  return `${tag}-${hashStringWithCYRB53(subject ?? '')}`;
 }
 
 export function transitionName(tag: string, subject: string | undefined) {

data-browser/src/hooks/useGlobalStylesWhileMounted.ts

@@ -14,6 +14,10 @@ const getNode = (id: string) => {
   return node;
 };
 
+/**
+ * Add a style element to the head with the given cssText while the component is mounted.
+ * @param cssText CSS Styles to be added to the head.
+ */
 export function useGlobalStylesWhileMounted(cssText: string) {
   const id = useId();
 

data-browser/src/hooks/useNavigateWithTransition.ts

@@ -4,7 +4,10 @@ import { useNavigate } from 'react-router';
 import { useSettings } from '../helpers/AppSettings';
 const wait = (ms: number) => new Promise(r => setTimeout(r, ms));
 
-export function useNavigateWithTransition(onTransitionStart?: () => void) {
+/**
+ * A wrapper around react-router's navigate function that will trigger css view transitions if enabled.
+ */
+export function useNavigateWithTransition() {
   const navigate = useNavigate();
   const { viewTransitionsEnabled } = useSettings();
 
@@ -19,21 +22,20 @@ export function useNavigateWithTransition(onTransitionStart?: () => void) {
       }
 
       // @ts-ignore
-      document.startViewTransition(async () => {
-        onTransitionStart?.();
-
-        return new Promise<void>(resolve => {
-          flushSync(() => {
-            // @ts-ignore
-            navigate(to);
-            wait(1).then(() => {
-              resolve();
+      document.startViewTransition(
+        async () =>
+          new Promise<void>(resolve => {
+            flushSync(() => {
+              // @ts-ignore
+              navigate(to);
+              wait(1).then(() => {
+                resolve();
+              });
             });
-          });
-        });
-      });
+          }),
+      );
     },
-    [navigate, onTransitionStart],
+    [navigate],
   );
 
   return navigateWithTransition;

data-browser/tests/e2e.spec.ts

@@ -622,8 +622,19 @@ test.describe('data-browser', async () => {
   });
 });
 
+async function disableViewTransition(page: Page) {
+  await page.click('text=Theme Settings');
+  const checkbox = await page.getByLabel('Enable view transition');
+
+  await expect(checkbox).toBeVisible();
+
+  await checkbox.uncheck();
+  await page.goBack();
+}
+
 /** Signs in using an AtomicData.dev test user */
 async function signIn(page: Page) {
+  await disableViewTransition(page);
   await page.click('text=user settings');
   await expect(
     await page.locator('text=edit data and sign Commits'),
@@ -657,7 +668,7 @@ async function newDrive(page: Page) {
   return { driveURL: driveURL as string, driveTitle };
 }
 
-async function makeDrivePublic(page) {
+async function makeDrivePublic(page: Page) {
   await page.click(currentDriveTitle);
   await page.click(contextMenu);
   await page.click('button:has-text("share")');
@@ -686,13 +697,13 @@ async function openAtomic(page: Page) {
 async function editProfileAndCommit(page: Page) {
   await page.click('text=user settings');
   await page.click('text=Edit profile');
-  await expect(await page.locator('text=add another property')).toBeVisible();
+  await expect(page.locator('text=add another property')).toBeVisible();
   const username = `Test user edited at ${new Date().toLocaleDateString()}`;
   await page.fill('[data-test="input-name"]', username);
   await page.click('[data-test="save"]');
-  await expect(await page.locator('text=saved')).toBeVisible();
+  await expect(page.locator('text=Resource saved')).toBeVisible();
   await page.waitForURL(/\/app\/show/);
-  await expect(await page.locator(`text=${username}`).first()).toBeVisible();
+  await expect(page.locator(`text=${username}`).first()).toBeVisible();
 }
 
 /** Create a new Resource in the current Drive */