Start adding editor, fix up sidebar styling

src/app/proto-definition.service.spec.ts

@@ -0,0 +1,57 @@
+import { TestBed } from '@angular/core/testing';
+
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { MessageType, ProtoMessage } from './model/proto-message.model';
+import { ProtoDefinitionService } from './proto-definition.service';
+
+let testProto = `
+syntax="proto3";
+
+message Test {
+    string hello = 1;
+    int32 hello2 = 2;
+    int64 hello3 = 3;
+    float hello4 = 4;
+    double hello5 = 5;
+    bool hello6 = 6;
+    repeated string hello7 = 7;
+    map<string, string> hello8 = 8;
+}
+`;
+
+describe('TestService', () => {
+  let service: ProtoDefinitionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideExperimentalZonelessChangeDetection()],
+    });
+    service = TestBed.inject(ProtoDefinitionService);
+  });
+
+  it('should convert parse protobuf correctly', async () => {
+    const testMessages = await service.parseProtoDefinition(testProto);
+    const converted = testMessages[0];
+
+    expect(converted.name).toBe('Test');
+
+    expect(converted.values.length).toBe(8);
+    checkNameAndType(converted, 'hello', MessageType.String);
+    checkNameAndType(converted, 'hello2', MessageType.Numeric);
+    checkNameAndType(converted, 'hello3', MessageType.Numeric);
+    checkNameAndType(converted, 'hello4', MessageType.Numeric);
+    checkNameAndType(converted, 'hello5', MessageType.Numeric);
+    checkNameAndType(converted, 'hello6', MessageType.Boolean);
+    checkNameAndType(converted, 'hello7', MessageType.List);
+    checkNameAndType(converted, 'hello8', MessageType.Map);
+  });
+});
+
+const checkNameAndType = (
+  converted: ProtoMessage,
+  name: string,
+  type: MessageType
+) => {
+  const field = converted.values.find((value) => value.name === name);
+  expect(field?.type).toBe(type);
+};