share tests

src/components/creator/Editor/ActionButtons/ShareChallenge/ShareButton.tsx

@@ -3,7 +3,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 import { useContext, useState } from "react";
 import { Dialog, DialogContent, DialogTitle, InputAdornment, Stack, TextField } from "@mui/material";
 import { CreatorContext } from "../../CreatorContext";
-import { Buttons, CopyToClipboardButton } from "./ShareModalButtons";
+import { ShareButtons, CopyToClipboardButton } from "./ShareModalButtons";
 import { useTranslation } from "react-i18next";
 
 export const ShareButton = () => {
@@ -59,7 +59,7 @@ const ShareModal = () => {
             </Stack>
             : <></>
         }
-        <Buttons />
+        <ShareButtons />
     </Stack>
 }
 

src/components/creator/Editor/ActionButtons/ShareChallenge/ShareModalButtons.tsx

@@ -35,7 +35,7 @@ export const CopyToClipboardButton = ({ textToCopy }: { textToCopy: string }) =>
     </>
 }
 
-export const Buttons = () => {
+export const ShareButtons = () => {
     const { shareId } = useContext(CreatorContext)
 
     return <>
@@ -51,7 +51,6 @@ const ShareUrlButton = () => {
     const shareChallenge = async (): Promise<string> => {
         const challenge: SerializedChallenge = LocalStorage.getCreatorChallenge()!
         const sharedChallenge = await PilasBloquesApi.shareChallenge(challenge)
-
         return sharedChallenge.sharedId
     }
 
@@ -79,7 +78,7 @@ const SaveButton = () => {
     </>
 }
 
-const ChallengeUpsertButton = ({ Icon, challengeUpsert, nametag }: { Icon: ReactNode, nametag: string, challengeUpsert: () => Promise<string> }) => {
+export const ChallengeUpsertButton = ({ Icon, challengeUpsert, nametag }: { Icon: ReactNode, nametag: string, challengeUpsert: () => Promise<string> }) => {
 
     const { setShareId } = useContext(CreatorContext)
     const userLoggedIn = !!LocalStorage.getUser()
@@ -98,7 +97,7 @@ const ChallengeUpsertButton = ({ Icon, challengeUpsert, nametag }: { Icon: React
     return <>
         <Tooltip title={!userLoggedIn ? t('editor.loginWarning') : ''} followCursor>
             <div>
-                <CreatorActionButton onClick={handleClick} disabled={!userLoggedIn} startIcon={Icon} variant='contained' nametag={nametag} />
+                <CreatorActionButton data-testid="upsertButton" onClick={handleClick} disabled={!userLoggedIn} startIcon={Icon} variant='contained' nametag={nametag} />
             </div>
         </Tooltip>
         <DialogSnackbar open={serverError} onClose={() => setServerError(false)} message={t('editor.serverError')} />

src/components/creator/Editor/CreatorContext.tsx

@@ -43,7 +43,7 @@ export const CreatorContextProvider: React.FC<CreatorProviderProps> = ({ childre
     const challenge = LocalStorage.getCreatorChallenge() || defaultChallenge("Duba")
     const [maps, setMaps] = useState(challenge.scene.maps)
     const [index, setIndex] = useState(defaultIndex)
-    const [shareId, setShareId] = useState(challenge.shareId || "")
+    const [shareId, setShareId] = useState(challenge.sharedId || "")
 
     const currentMap = maps[index] || challenge.scene.maps[index]
 
@@ -54,7 +54,7 @@ export const CreatorContextProvider: React.FC<CreatorProviderProps> = ({ childre
 
     useEffect(() => {
         challenge.scene.maps = maps
-        challenge.shareId = shareId
+        challenge.sharedId = shareId
         LocalStorage.saveCreatorChallenge(challenge)
     }, [maps, challenge, shareId])
 

src/components/serializedChallenge.ts

@@ -19,7 +19,7 @@ export type SerializedChallenge = {
     stepByStep?: boolean,
     predefinedSolution?: string,
     assesments?: Assesments,
-    shareId?: string
+    sharedId?: string
 }
 
 
@@ -178,7 +178,7 @@ export const isValidChallenge = (json: unknown): json is SerializedChallenge =>
                 maxProgramLength: SimpleNumber
             })
         }),
-        shareId: SimpleStringOptional
+        sharedId: SimpleStringOptional
     })
 
     return structureIsValid && sceneIsValid((json as any).scene)

src/pbApi.ts

@@ -46,7 +46,7 @@ export namespace PilasBloquesApi{
     }
 
     export const saveChallenge = async (challenge: SerializedChallenge) => {
-      return await _send<SerializedChallenge>('PUT', `share/${challenge.shareId}`, challenge)
+      return await _send<SerializedChallenge>('PUT', `share/${challenge.sharedId}`, challenge)
     }
 
     export const baseURL = window.PBRuntime?.apiURL || process.env.REACT_APP_API_URL

src/test/shareByUrl.test.tsx

@@ -0,0 +1,92 @@
+import { ChallengeUpsertButton, ShareButtons } from "../components/creator/Editor/ActionButtons/ShareChallenge/ShareModalButtons"
+import { CreatorContextProvider } from "../components/creator/Editor/CreatorContext"
+import { SerializedChallenge } from "../components/serializedChallenge"
+import { LocalStorage } from "../localStorage"
+import { User } from "../pbApi"
+import { renderComponent } from "./testUtils"
+import { act, screen } from '@testing-library/react'
+
+jest.mock("../pbApi", () => {
+    return {
+        PilasBloquesApi: ({
+            shareChallenge: (challenge: SerializedChallenge) => {
+                challenge.sharedId = `shared`
+                return challenge
+            },
+
+            getSharedChallenge: (id: string) => mockChallenge,
+
+        })
+    }
+})
+
+const mockUser: User = {
+    id: "pepita",
+    token: "fi3nof",
+    nickName: "pepitaGolondrina",
+    avatarURL: "pepita",
+    answeredQuestionIds: []}
+
+const mockChallenge: SerializedChallenge = {
+    fileVersion:1,
+    title: "Pepita",
+    statement: {
+        description: "Pepita",
+   },
+    scene: {
+        type: 'Lita',
+        maps: []
+    },
+    toolbox: {
+        blocks: []
+    }
+}
+
+describe("Share by url", () => {
+
+
+    describe("Upsert button", () => {
+
+        const UpsertButton = <ChallengeUpsertButton Icon={<></>} nametag="" challengeUpsert={async () => ""}/>
+
+        test('Should not be able to share challenge if not logged in', async () => {
+            renderComponent(UpsertButton)
+
+            const shareButton = await screen.findByTestId('upsertButton')
+            expect(shareButton.getAttributeNode('disabled')).toBeTruthy()
+        })
+
+        test('Should be able to share challenge if logged in', async () => {
+            LocalStorage.saveUser(mockUser)
+            renderComponent(UpsertButton)
+
+            const shareButton = await screen.findByTestId('upsertButton')
+            expect(shareButton.getAttributeNode('disabled')).toBeFalsy()
+        })
+    })
+
+    describe("Sharing and saving challenge", () => {
+
+        beforeEach(() => {
+            LocalStorage.saveCreatorChallenge(mockChallenge)
+        })
+
+        test("Should show share button when the challenge hasn't been shared", async () => {
+            renderComponent(<ShareButtons/>)
+
+            const shareButton = await screen.findByTestId('upsertButton')
+
+            expect(shareButton.textContent).toBe("Compartir por url")
+        })
+
+        test("Should save sharedId when challenge is shared", async () => {
+            renderComponent(<CreatorContextProvider><ShareButtons/></CreatorContextProvider>)
+            const shareButton = await screen.findByTestId('upsertButton')
+            await act(async () => {shareButton.click()})
+
+            expect(LocalStorage.getCreatorChallenge()!.sharedId).toBe("shared")
+        })
+
+    })
+
+})