test(core): guard branding of sign-in experience (#494)

* chore(core,ui): upgrade jest related dev dependencies to latest versions

* test(core): branding guard of sign-in experience

packages/core/package.json

@@ -51,7 +51,7 @@
     "@shopify/jest-koa-mocks": "^3.0.8",
     "@silverhand/eslint-config": "^0.10.2",
     "@silverhand/ts-config": "^0.10.2",
-    "@types/jest": "^27.0.1",
+    "@types/jest": "^27.4.1",
     "@types/koa": "^2.13.3",
     "@types/koa-logger": "^3.1.1",
     "@types/koa-mount": "^4.0.0",
@@ -62,7 +62,7 @@
     "@types/supertest": "^2.0.11",
     "copyfiles": "^2.4.1",
     "eslint": "^8.10.0",
-    "jest": "^27.0.6",
+    "jest": "^27.5.1",
     "jest-matcher-specific-error": "^1.0.0",
     "lint-staged": "^11.1.1",
     "nock": "^13.2.2",
@@ -70,7 +70,7 @@
     "prettier": "^2.3.2",
     "snake-case": "^3.0.4",
     "supertest": "^6.2.2",
-    "ts-jest": "^27.0.5",
+    "ts-jest": "^27.1.1",
     "tsc-watch": "^4.4.0",
     "typescript": "^4.6.2"
   },

packages/core/src/routes/sign-in-experience.guard.test.ts

@@ -0,0 +1,134 @@
+import { BrandingStyle, CreateSignInExperience, SignInExperience } from '@logto/schemas';
+
+import { mockBranding, mockSignInExperience } from '@/utils/mock';
+import { createRequester } from '@/utils/test-utils';
+
+import signInExperiencesRoutes from './sign-in-experience';
+
+jest.mock('@/queries/sign-in-experience', () => ({
+  updateDefaultSignInExperience: jest.fn(
+    async (data: Partial<CreateSignInExperience>): Promise<SignInExperience> => ({
+      ...mockSignInExperience,
+      ...data,
+    })
+  ),
+}));
+
+const signInExperienceRequester = createRequester({ authedRoutes: signInExperiencesRoutes });
+
+const expectPatchResponseStatus = async (signInExperience: any, status: number) => {
+  const response = await signInExperienceRequester.patch('/sign-in-exp').send(signInExperience);
+  expect(response.status).toEqual(status);
+};
+
+describe('branding', () => {
+  const colorKeys = ['primaryColor', 'backgroundColor', 'darkPrimaryColor', 'darkBackgroundColor'];
+
+  const invalidColors = [
+    undefined,
+    '',
+    '#',
+    '#1',
+    '#2B',
+    '#3cZ',
+    '#4D9e',
+    '#5f80E',
+    '#6GHiXY',
+    '#78Cb5dA',
+    'rgb(0,13,255)',
+  ];
+
+  const validColors = ['#aB3', '#169deF'];
+
+  describe('colors', () => {
+    test.each(validColors)('%p should succeed', async (validColor) => {
+      for (const colorKey of colorKeys) {
+        // eslint-disable-next-line no-await-in-loop
+        await expectPatchResponseStatus(
+          { branding: { ...mockBranding, [colorKey]: validColor } },
+          200
+        );
+      }
+    });
+    test.each(invalidColors)('%p should fail', async (invalidColor) => {
+      for (const colorKey of colorKeys) {
+        // eslint-disable-next-line no-await-in-loop
+        await expectPatchResponseStatus(
+          { branding: { ...mockBranding, [colorKey]: invalidColor } },
+          400
+        );
+      }
+    });
+  });
+
+  describe('style', () => {
+    test.each(Object.values(BrandingStyle))('%p should succeed', async (style) => {
+      const signInExperience = { branding: { ...mockBranding, style } };
+      await expectPatchResponseStatus(signInExperience, 200);
+    });
+
+    test.each([undefined, '', 'invalid'])('%p should fail', async (style) => {
+      const signInExperience = { branding: { ...mockBranding, style } };
+      await expectPatchResponseStatus(signInExperience, 400);
+    });
+  });
+
+  describe('logoUrl', () => {
+    test.each(['http://silverhand.com/silverhand.png', 'https://logto.dev/logto.jpg'])(
+      '%p should success',
+      async (logoUrl) => {
+        const signInExperience = { branding: { ...mockBranding, logoUrl } };
+        await expectPatchResponseStatus(signInExperience, 200);
+      }
+    );
+
+    test.each([undefined, '', 'invalid'])('%p should fail', async (logoUrl) => {
+      const signInExperience = { branding: { ...mockBranding, logoUrl } };
+      await expectPatchResponseStatus(signInExperience, 400);
+    });
+  });
+
+  describe('slogan', () => {
+    test.each([undefined, 'Silverhand.', 'Supercharge innovations.'])(
+      '%p should success',
+      async (slogan) => {
+        const signInExperience = {
+          branding: {
+            ...mockBranding,
+            style: BrandingStyle.Logo,
+            slogan,
+          },
+        };
+        await expectPatchResponseStatus(signInExperience, 200);
+      }
+    );
+
+    it('should fail when it is empty string', async () => {
+      const signInExperience = {
+        branding: {
+          ...mockBranding,
+          style: BrandingStyle.Logo,
+          slogan: '',
+        },
+      };
+      await expectPatchResponseStatus(signInExperience, 400);
+    });
+  });
+
+  it('should succeed when branding is valid', async () => {
+    const response = signInExperienceRequester
+      .patch('/sign-in-exp')
+      .send({ branding: mockBranding });
+    await expect(response).resolves.toMatchObject({ status: 200 });
+  });
+});
+
+describe('socialSignInConnectorIds', () => {
+  it('should throw when the type of social connector IDs is wrong', async () => {
+    const socialSignInConnectorIds = [123, 456];
+    const response = await signInExperienceRequester.patch('/sign-in-exp').send({
+      socialSignInConnectorIds,
+    });
+    expect(response.status).toEqual(400);
+  });
+});

packages/core/src/routes/sign-in-experience.test.ts

@@ -148,7 +148,6 @@ describe('PATCH /sign-in-exp', () => {
       socialSignInConnectorIds,
       [mockFacebookConnectorInstance, mockGithubConnectorInstance]
     );
-    // TODO: only update socialSignInConnectorIds when social sign-in is enabled.
 
     expect(response).toMatchObject({
       status: 200,
@@ -161,15 +160,4 @@ describe('PATCH /sign-in-exp', () => {
       },
     });
   });
-
-  it('should throw when the type of social connector IDs is wrong', async () => {
-    const socialSignInConnectorIds = [123, 456];
-
-    const response = await signInExperienceRequester.patch('/sign-in-exp').send({
-      socialSignInConnectorIds,
-    });
-    expect(response.status).toEqual(400);
-  });
-
-  // TODO: test other Zod guards of sign-in experiences
 });

packages/ui/package.json

@@ -56,7 +56,7 @@
     "postcss-modules": "^4.3.0",
     "prettier": "^2.3.2",
     "stylelint": "^13.13.1",
-    "ts-jest": "^27.0.5",
+    "ts-jest": "^27.1.1",
     "typescript": "^4.6.2"
   },
   "alias": {