@squiz/dx-json-schema-lib 1.12.0-alpha.8 → 1.12.1-alpha.0

package/src/JsonValidationService.ts

@@ -1,3 +1,5 @@
+import JSONQuery, { Input } from '@sagold/json-query';
+
 import DxComponentInputSchema from './manifest/v1/DxComponentInputSchema.json';
 import DxComponentIcons from './manifest/v1/DxComponentIcons.json';
 import DxContentMetaSchema from './manifest/v1/DxContentMetaSchema.json';
@@ -7,10 +9,12 @@ import FormattedText from './formatted-text/v1/formattedText.json';
 
 import v1 from './manifest/v1/v1.json';
 import { SchemaValidationError } from './errors/SchemaValidationError';
-import { Draft07, JSONError, JSONSchema, Draft, DraftConfig } from 'json-schema-library';
+import { Draft07, JSONError, JSONSchema, Draft, DraftConfig, isJSONError } from 'json-schema-library';
 
 import { draft07Config } from 'json-schema-library';
 import { MANIFEST_MODELS } from '.';
+import { AnyPrimitiveType, AnyResolvableType, TypeResolver } from './jsonTypeResolution/arbitraryTypeResolution';
+import { JsonResolutionError } from './errors/JsonResolutionError';
 
 const defaultConfig: DraftConfig = {
   ...draft07Config,
@@ -71,6 +75,7 @@ export const ComponentInputSchema = new Draft(
       if (!resolvedSchema) {
         return resolvedSchema;
       }
+
       if (resolvedSchema.type === 'FormattedText') {
         return FTSchema.rootSchema;
       } else if (Array.isArray(resolvedSchema.type) && resolvedSchema.type.includes('FormattedText')) {
@@ -88,6 +93,27 @@ export const ComponentInputSchema = new Draft(
 );
 ComponentInputSchema.addRemoteSchema('DxComponentInputSchema.json/DxContentMetaSchema.json', DxContentMetaSchema);
 
+export const RenderInputSchema = new Draft({
+  ...defaultConfig,
+  resolveRef(schema, rootSchema) {
+    const resolvedSchema = draft07Config.resolveRef(schema, rootSchema) as MANIFEST_MODELS.v1.CoreSchemaMetaSchema;
+    if (!resolvedSchema) {
+      return resolvedSchema;
+    }
+
+    if (resolvedSchema.type === 'FormattedText') {
+      return { type: 'string' };
+    } else if (Array.isArray(resolvedSchema.type) && resolvedSchema.type.includes('FormattedText')) {
+      return {
+        ...schema,
+        type: resolvedSchema.type.filter((t) => t !== 'FormattedText').concat('string'),
+      };
+    } else {
+      return resolvedSchema;
+    }
+  },
+});
+
 const v1Schema = new Draft07(v1, defaultConfig);
 
 v1Schema.addRemoteSchema('DxComponentInputSchema.json/DxContentMetaSchema.json', DxContentMetaSchema);
@@ -96,6 +122,127 @@ v1Schema.addRemoteSchema('/DxComponentIcons.json', DxComponentIcons);
 v1Schema.addRemoteSchema('http://json-schema.org/draft-07/schema', Draft07Schema);
 v1Schema.addRemoteSchema('http://json-schema.org/draft-07/schema#', Draft07Schema);
 
+export const ComponentInputMetaSchema: MetaSchemaInput = {
+  root: DxComponentInputSchema,
+  remotes: {
+    'DxComponentInputSchema.json/DxContentMetaSchema.json': DxContentMetaSchema,
+  },
+};
+
+export const RenderInputMetaSchema: MetaSchemaInput = {
+  root: Draft07Schema,
+};
+
+export const ManifestV1MetaSchema: MetaSchemaInput = {
+  root: v1,
+  remotes: {
+    'DxComponentInputSchema.json/DxContentMetaSchema.json': DxContentMetaSchema,
+    '/DxComponentInputSchema.json': DxComponentInputSchema,
+    '/DxComponentIcons.json': DxComponentIcons,
+    'http://json-schema.org/draft-07/schema': Draft07Schema,
+    'http://json-schema.org/draft-07/schema#': Draft07Schema,
+  },
+};
+
+interface MetaSchemaInput {
+  root: JSONSchema;
+  remotes?: Record<string, JSONSchema>;
+}
+/**
+ * A service that can be used to validate and resolve JSON against a schema.
+ */
+export class JSONSchemaService<P extends AnyPrimitiveType, R extends AnyResolvableType> {
+  schema: Draft;
+  constructor(private typeResolver: TypeResolver<P, R>, metaSchema: MetaSchemaInput) {
+    this.schema = new Draft(
+      {
+        ...defaultConfig,
+        resolveRef: (schema, rootSchema) => this.doResolveRef(schema, rootSchema),
+      },
+      metaSchema.root,
+    );
+
+    for (const [key, value] of Object.entries(metaSchema.remotes || {})) {
+      this.schema.addRemoteSchema(key, value);
+    }
+  }
+
+  private doResolveRef(schema: JSONSchema, rootSchema: JSONSchema): JSONSchema {
+    const initialRef = draft07Config.resolveRef(schema, rootSchema);
+
+    if (!initialRef) return initialRef;
+    if (!this.typeResolver.isPrimitiveType(initialRef.type)) return initialRef;
+
+    return this.typeResolver.getValidationSchemaForPrimitive(initialRef.type);
+  }
+
+  /**
+   * Validate an input value against a specified schema
+   * @throws {SchemaValidationError} if the input is invalid
+   * @returns true if the input is valid
+   */
+  public validateInput(input: unknown, inputSchema: JSONSchema = this.schema.rootSchema): true | never {
+    inputSchema = this.schema.compileSchema(inputSchema);
+    const errors = this.schema.validate(input, inputSchema);
+    return this.processValidationResult(errors);
+  }
+
+  private processValidationResult(errors: JSONError[]): true {
+    if (errors.length > 0) {
+      throw new SchemaValidationError(errors.map((a) => a.message).join(',\n'));
+    }
+
+    return true;
+  }
+
+  /**
+   * Resolve an input object by replacing all resolvable shapes with their resolved values
+   * @param input any input object which matches the input schema
+   * @param inputSchema a JSONSchema which provides type information about the input object
+   * @returns the input object with all resolvable shapes resolved
+   */
+  public async resolveInput(input: Input, inputSchema: JSONSchema) {
+    const setters: Array<Promise<(input: Input) => Input>> = [];
+    this.schema.each(
+      input,
+      (schema, value, pointer) => {
+        // First we check for if value is a resolvable shape
+        if (!this.typeResolver.isResolvableSchema(schema)) return;
+        // If its a resolvable schema, it should exist in a oneOf array with other schemas
+        // Including a primitive schema
+        const allPossibleSchemas: Array<JSONSchema> = schema.oneOfSchema.oneOf;
+        if (isJSONError(allPossibleSchemas)) return;
+
+        const primitiveSchema = allPossibleSchemas.find((schema): schema is P =>
+          this.typeResolver.isPrimitiveSchema(schema),
+        );
+        if (!primitiveSchema) return;
+
+        const resolver = this.typeResolver.tryGetResolver(primitiveSchema, schema);
+        if (!resolver) return;
+        const setResolvedData = Promise.resolve()
+          .then(() => resolver(value))
+          .then((resolvedData) => (item: typeof input) => JSONQuery.set(item, pointer, resolvedData))
+          .catch((e) => Promise.reject(new JsonResolutionError(e, pointer, value)));
+        setters.push(setResolvedData);
+      },
+      inputSchema,
+    );
+
+    const potentialResolutionErrors = [];
+    for (const resolveResult of await Promise.allSettled(setters)) {
+      if (resolveResult.status === 'rejected') {
+        potentialResolutionErrors.push(resolveResult.reason);
+        continue;
+      }
+
+      input = resolveResult.value(input);
+    }
+
+    return input;
+  }
+}
+
 export class JsonValidationService {
   validateManifest(manifest: unknown, version: 'v1') {
     switch (version) {
@@ -119,6 +266,12 @@ export class JsonValidationService {
     return this.processValidationResult(errors);
   }
 
+  validateRenderInput(functionInputSchema: JSONSchema, inputValue: unknown) {
+    const inputSchema = RenderInputSchema.compileSchema(functionInputSchema);
+    const errors = RenderInputSchema.validate(inputValue, inputSchema);
+    return this.processValidationResult(errors);
+  }
+
   private processValidationResult(errors: JSONError[]): true {
     if (errors.length > 0) {
       throw new SchemaValidationError(errors.map((a) => a.message).join(',\n'));

package/src/errors/JsonResolutionError.ts

@@ -0,0 +1,5 @@
+export class JsonResolutionError extends Error {
+  constructor(error: Error, public pointer: string, public value: any) {
+    super(`Error resolving JSON at ${pointer}: ${error.message}`);
+  }
+}

package/src/index.ts

@@ -9,3 +9,6 @@ export * as SUB_SCHEMAS from './manifest/v1/subSchemas';
 
 export * from './JsonValidationService';
 export * from './errors/SchemaValidationError';
+export * from './errors/JsonResolutionError';
+
+export * from './jsonTypeResolution';

package/src/jsonTypeResolution/arbitraryTypeResolution.spec.ts

@@ -0,0 +1,134 @@
+import { JSONSchema } from 'json-schema-library';
+import { PrimitiveType, ResolvableType, TypeResolver } from './arbitraryTypeResolution';
+
+const defaultSchema: JSONSchema = {
+  type: 'object',
+  properties: {
+    myProperty: {
+      type: 'string',
+    },
+  },
+  required: ['myProperty'],
+};
+function primitiveTypeFixture<T extends string>(title: T, schema: JSONSchema = defaultSchema) {
+  return PrimitiveType({
+    ...schema,
+    title,
+  });
+}
+
+function resolvableTypeFixture<T extends string>(title: T, schema: JSONSchema = defaultSchema) {
+  return ResolvableType({
+    ...schema,
+    title,
+  });
+}
+
+describe('getValidationSchemaForPrimitive', () => {
+  it('should return only the primitive schema when no resolvers are defined', () => {
+    const primitiveType = primitiveTypeFixture('MyPrimitive');
+    const resolvableType = resolvableTypeFixture('MyResolvable');
+    const resolver = new TypeResolver(
+      {
+        MyPrimitive: primitiveType,
+      },
+      {
+        MyResolvable: resolvableType,
+      },
+      {},
+    );
+
+    expect(resolver.getValidationSchemaForPrimitive('MyPrimitive')).toEqual({
+      oneOf: [primitiveType],
+    });
+  });
+
+  it('should return the primitive schema and the resolvable schema when a resolver is defined', () => {
+    const primitiveType = primitiveTypeFixture('MyPrimitive');
+    const resolvableType = resolvableTypeFixture('MyResolvable');
+    const resolver = new TypeResolver(
+      {
+        MyPrimitive: primitiveType,
+      },
+      {
+        MyResolvable: resolvableType,
+      },
+      {
+        MyPrimitive: {
+          MyResolvable: () => null,
+        },
+      },
+    );
+
+    expect(resolver.getValidationSchemaForPrimitive('MyPrimitive')).toEqual({
+      oneOf: [primitiveType, resolvableType],
+    });
+  });
+
+  it('should return the primitive schema and the resolvable schema when a resolver is defined for a different primitive', () => {
+    const primitiveType = primitiveTypeFixture('MyPrimitive');
+    const resolvableType = resolvableTypeFixture('MyResolvable');
+    const resolver = new TypeResolver(
+      {
+        MyPrimitive: primitiveType,
+        MyOtherPrimitive: primitiveTypeFixture('MyOtherPrimitive'),
+      },
+      {
+        MyResolvable: resolvableType,
+      },
+      {
+        MyOtherPrimitive: {
+          MyResolvable: () => null,
+        },
+      },
+    );
+
+    expect(resolver.getValidationSchemaForPrimitive('MyPrimitive')).toEqual({
+      oneOf: [primitiveType],
+    });
+  });
+
+  it('should error when resolver map contains a key not listed in resolver schemas', () => {
+    const primitiveType = primitiveTypeFixture('MyPrimitive');
+    const resolvableType = resolvableTypeFixture('MyResolvable');
+    expect(
+      () =>
+        new TypeResolver<typeof primitiveType, typeof resolvableType>(
+          {
+            MyPrimitive: primitiveType,
+          },
+          {
+            MyResolvable: resolvableType,
+          },
+          {
+            MyPrimitive: {
+              // @ts-expect-error - this is not a valid resolvable type
+              MyOtherResolvable: () => null,
+            },
+          },
+        ),
+    ).toThrowError();
+  });
+
+  it('should error when resolver map contains a key not listed in primitive schemas', () => {
+    const primitiveType = primitiveTypeFixture('MyPrimitive');
+    const resolvableType = resolvableTypeFixture('MyResolvable');
+    expect(
+      () =>
+        new TypeResolver<typeof primitiveType, typeof resolvableType>(
+          {
+            MyPrimitive: primitiveType,
+          },
+          {
+            MyResolvable: resolvableType,
+          },
+          {
+            // @ts-expect-error - this is not a valid primitive type
+            MyOtherPrimitive: {
+              MyResolvable: () => null,
+            },
+          },
+        ),
+    ).toThrowError();
+  });
+});

package/src/jsonTypeResolution/arbitraryTypeResolution.ts

@@ -0,0 +1,100 @@
+import type { JSONSchema } from 'json-schema-library';
+import * as t from 'ts-brand';
+
+type MaybePromise<T> = T | Promise<T>;
+
+type JsonResolutionSchema<TITLE extends string> = JSONSchema & { title: TITLE };
+/**
+ * This type allows the TypeScript type to be encoded onto the JSON schema object
+ */
+type SchemaWithShape<TITLE extends string, SHAPE> = JsonResolutionSchema<TITLE> & { __shape__: SHAPE };
+
+/**
+ * A JSON schema which represents a primitive type which can be a resolve target
+ *
+ * The brand ensures that TypeScript can differentiate between a primitive type and a resolvable type
+ */
+export type PrimitiveType<TITLE extends string, SHAPE> = t.Brand<SchemaWithShape<TITLE, SHAPE>, 'primitive'>;
+export function PrimitiveType<SHAPE, TITLE extends string>(
+  jsonSchema: JsonResolutionSchema<TITLE>,
+): PrimitiveType<TITLE, SHAPE> {
+  return jsonSchema as PrimitiveType<TITLE, SHAPE>;
+}
+export type AnyPrimitiveType = PrimitiveType<string, any>;
+
+/**
+ * A JSON schema which represents a type which can be resolved into a primitive type
+ *
+ * The brand ensures that TypeScript can differentiate between a primitive type and a resolvable type
+ */
+export type ResolvableType<TITLE extends string, SHAPE> = t.Brand<SchemaWithShape<TITLE, SHAPE>, 'resolvable'>;
+export function ResolvableType<SHAPE, TITLE extends string>(
+  jsonSchema: JsonResolutionSchema<TITLE>,
+): ResolvableType<TITLE, SHAPE> {
+  return jsonSchema as ResolvableType<TITLE, SHAPE>;
+}
+export type AnyResolvableType = ResolvableType<string, any>;
+
+type Resolver<INPUT, OUTPUT> = (input: INPUT) => MaybePromise<OUTPUT>;
+
+/**
+ * A JSON Type Resolver class which stores the primitive and resolvable JSON Schema types and their resolvers
+ *
+ * No serious logic is required here. The class should only provide data access methods and type safety
+ */
+export class TypeResolver<P extends AnyPrimitiveType, R extends AnyResolvableType> {
+  constructor(
+    private primitives: { [K in P as P['title']]: K },
+    private resolvables: { [K in R as R['title']]: K },
+    public resolvers: {
+      [PT in P as PT['title']]?: {
+        [RT in R as RT['title']]?: Resolver<RT['__shape__'], PT['__shape__']>;
+      };
+    },
+  ) {
+    for (const [primitiveKey, primitiveResolvers] of Object.entries(resolvers) as [string, Record<string, any>][]) {
+      if (!(primitiveKey in primitives)) {
+        throw new Error('Resolver keys must match a primitive schema');
+      }
+      if (!Object.keys(primitiveResolvers).every((k) => k in resolvables)) {
+        throw new Error('Primitive resolvers keys must match a resolvable schema');
+      }
+    }
+  }
+
+  isPrimitiveType(type: string): type is P['title'] {
+    return type in this.primitives;
+  }
+
+  isPrimitiveSchema(schema: JSONSchema): schema is P {
+    return this.isPrimitiveType(schema.title);
+  }
+
+  isResolvableSchema(schema: JSONSchema): schema is R {
+    return schema.title in this.resolvables;
+  }
+
+  getValidationSchemaForPrimitive(type: keyof typeof this.primitives) {
+    const primitiveSchema = this.primitives[type];
+    const validSchemas = [primitiveSchema, ...this.fetchResolvableSchemasForPrimitive(type)];
+
+    return {
+      oneOf: validSchemas,
+    };
+  }
+
+  private *fetchResolvableSchemasForPrimitive(type: keyof typeof this.primitives) {
+    for (const resolverKey in this.resolvers[type]) {
+      yield this.resolvables[resolverKey];
+    }
+  }
+
+  tryGetResolver<PS extends P, RS extends R>(
+    primitiveSchema: PS,
+    resolvableSchema: RS,
+  ): Resolver<RS['__shape__'], PS['__shape__']> | undefined {
+    if (!(primitiveSchema.title in this.resolvers)) return;
+    // Sometimes typescript can be insanely annoying
+    return (this.resolvers[primitiveSchema.title as keyof typeof this.resolvers] as any)?.[resolvableSchema.title];
+  }
+}

package/src/jsonTypeResolution/index.ts

@@ -0,0 +1,16 @@
+import * as PRIMITIVES from './primitiveTypes';
+import * as RESOLVABLES from './resolvableTypes';
+
+export type AllPrimitiveTypes = (typeof PRIMITIVES)[keyof typeof PRIMITIVES];
+export const PrimitiveSchemas = Object.fromEntries(
+  Object.entries(PRIMITIVES).map(([_key, typeSchema]) => [typeSchema.title, typeSchema]),
+) as { [P in AllPrimitiveTypes as P['title']]: P };
+export { PRIMITIVES };
+
+export type AllResolvableTypes = (typeof RESOLVABLES)[keyof typeof RESOLVABLES];
+export const ResolvableSchemas = Object.fromEntries(
+  Object.entries(RESOLVABLES).map(([_key, typeSchema]) => [typeSchema.title, typeSchema]),
+) as { [P in AllResolvableTypes as P['title']]: P };
+export { RESOLVABLES };
+
+export { TypeResolver as JsonTypeResolver } from './arbitraryTypeResolution';

package/src/jsonTypeResolution/primitiveTypes.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+import { FORMATTED_TEXT_SCHEMAS } from '..';
+import { BaseFormattedNodes } from '../formatted-text/v1/formattedText';
+import { PrimitiveType } from './arbitraryTypeResolution';
+
+export interface SquizImageShape {
+  src: string;
+  alt: string;
+}
+export const SquizImageType = PrimitiveType<SquizImageShape, 'SquizImage'>({
+  title: 'SquizImage',
+  type: 'object',
+  properties: {
+    src: {
+      type: 'string',
+    },
+    alt: {
+      type: 'string',
+    },
+  },
+  required: ['src', 'alt'],
+});
+export type SquizImageType = typeof SquizImageType;
+
+export const PrimitiveFormattedTextType = PrimitiveType<BaseFormattedNodes[], 'FormattedText'>({
+  ...FORMATTED_TEXT_SCHEMAS.v1,
+  items: {
+    $ref: '#/definitions/BaseFormattedNodes',
+  },
+  title: 'FormattedText',
+});
+export type PrimitiveFormattedTextType = typeof PrimitiveFormattedTextType;

package/src/jsonTypeResolution/resolvableTypes.ts

@@ -0,0 +1,37 @@
+import { FORMATTED_TEXT_SCHEMAS } from '..';
+import { BaseFormattedNodes, FormattedText } from '../formatted-text/v1/formattedText';
+import { ResolvableType } from './arbitraryTypeResolution';
+
+export interface MatrixImageShape {
+  assetId: string;
+  matrixIdentifier: string;
+}
+export const MatrixImageType = ResolvableType<MatrixImageShape, 'MatrixImage'>({
+  title: 'MatrixImage',
+  type: 'object',
+  properties: {
+    assetId: {
+      type: 'string',
+    },
+    matrixIdentifier: {
+      type: 'string',
+    },
+  },
+  required: ['assetId', 'matrixIdentifier'],
+});
+export type MatrixImageType = typeof MatrixImageType;
+
+export const HigherOrderFormattedTextType = ResolvableType<FormattedText, 'HigherOrderFormattedText'>({
+  ...FORMATTED_TEXT_SCHEMAS.v1,
+  title: 'HigherOrderFormattedText',
+});
+export type HigherOrderFormattedTextType = typeof HigherOrderFormattedTextType;
+
+export const LowerOrderFormattedTextType = ResolvableType<BaseFormattedNodes[], 'LowerOrderFormattedText'>({
+  ...FORMATTED_TEXT_SCHEMAS.v1,
+  items: {
+    $ref: '#/definitions/BaseFormattedNodes',
+  },
+  title: 'LowerOrderFormattedText',
+});
+export type LowerOrderFormattedTextType = typeof LowerOrderFormattedTextType;

package/src/manifest/v1/v1.json

@@ -35,7 +35,7 @@
         "properties": {
           "name": {
             "type": "string",
-            "$ref": "#/definitions/name-pattern",
+            "pattern": "^[a-zA-Z_][a-zA-Z0-9_]*$",
             "description": "Environmental variable name"
           },
           "required": {
@@ -279,7 +279,8 @@
       "type": "object",
       "description": "A map of previews which provide configuration to preview the component in isolation",
       "propertyNames": {
-        "$ref": "#/definitions/name-pattern"
+        "type": "string",
+        "pattern": "^[a-zA-Z0-9_\\-]+$"
       },
       "minProperties": 1,
       "additionalProperties": {
@@ -373,7 +374,7 @@
   "definitions": {
     "name-pattern": {
       "type": "string",
-      "pattern": "^[a-zA-Z0-9_\\-]+$"
+      "pattern": "^[a-z][a-z0-9_\\-]+$"
     }
   }
 }

package/src/manifest/v1/v1.spec.ts

@@ -3,6 +3,8 @@ import { resolve } from 'path';
 import { SchemaValidationError } from '../../errors/SchemaValidationError';
 import { JsonValidationService } from '../../JsonValidationService';
 
+const NAME_PATTERN = '^[a-z][a-z0-9_\\-]+$';
+
 async function fetchTestManifest(filename: string) {
   const contents = await readFile(resolve(__dirname, '__test__', 'schemas', filename), {
     encoding: 'utf-8',
@@ -70,4 +72,98 @@ describe('manifest/v1', () => {
       'failed validation: Expected value at `#/functions/0/input/type` to be `object`, but value given is `string`',
     );
   });
+
+  describe.each(['_my-name', '-my-name', 'MyName', 'myName', '0my-name'])(
+    'fails name-pattern validation for %s',
+    (propertyValue) => {
+      it.each(['namespace', 'name'])(`fails validation for manifests with %s of %s`, async (propertyName) => {
+        const manifest = await fetchTestManifest('validComponent.json');
+
+        expectToThrowErrorMatchingTypeAndMessage(
+          () => {
+            validationService.validateManifest(
+              {
+                ...manifest,
+                [propertyName]: propertyValue,
+              },
+              'v1',
+            );
+          },
+          SchemaValidationError,
+          `failed validation: Value in \`#/${propertyName}\` should match \`${NAME_PATTERN}\`, but received \`${propertyValue}\``,
+        );
+      });
+
+      it('fails validation for manifests with function names of %s', async () => {
+        const manifest = await fetchTestManifest('validComponent.json');
+
+        expectToThrowErrorMatchingTypeAndMessage(
+          () => {
+            validationService.validateManifest(
+              {
+                ...manifest,
+                functions: [
+                  {
+                    name: propertyValue,
+                    entry: 'main.js',
+                    input: {},
+                    output: {
+                      responseType: 'html',
+                    },
+                  },
+                ],
+              },
+              'v1',
+            );
+          },
+          SchemaValidationError,
+          `failed validation: Value in \`#/functions/0/name\` should match \`${NAME_PATTERN}\`, but received \`${propertyValue}\``,
+        );
+      });
+    },
+  );
+
+  it('should allow uppercase letters in property names withe previews', async () => {
+    const manifest = await fetchTestManifest('validComponent.json');
+
+    expect(
+      validationService.validateManifest(
+        {
+          ...manifest,
+          previews: {
+            ValidPreview: {
+              functionData: {
+                main: {},
+              },
+            },
+          },
+        },
+        'v1',
+      ),
+    ).toEqual(true);
+  });
+
+  it('errors for non-alphanumeric characters in preview keys', async () => {
+    const manifest = await fetchTestManifest('validComponent.json');
+
+    expectToThrowErrorMatchingTypeAndMessage(
+      () => {
+        validationService.validateManifest(
+          {
+            ...manifest,
+            previews: {
+              'Bad-@@@Preview': {
+                functionData: {
+                  main: {},
+                },
+              },
+            },
+          },
+          'v1',
+        );
+      },
+      SchemaValidationError,
+      'failed validation: Invalid property name `Bad-@@@Preview` at `#/previews`',
+    );
+  });
 });