chore: Allow PascalCase as Modulename (#567)

salisdemos · web-flow · commit 86acab8a3257 · 2024-07-14T15:00:24.000+02:00
* feat/fix: Allow PascalCase Types

* feat: Allow Pascalcase Keys

* feat/fix: Disperse moduleName and Type for relationsships

* test: Add/Adjust Tests

* doc: Add changelog

* chore: Linting

* fix: Use Type to access Store module in relationships

* fix: Correct data structure

* feat: Only use the Type-Name. No more upper-/lowercase transformation anywhere

* chore: remove commented out code and console logs

* fix: Revert wrong changes

* fix: Revert wrong changes
diff --git a/Changelog.md b/Changelog.md
@@ -1,5 +1,11 @@
 # next version
 
+- **BREAKING**: The response data now allows PascalCase Types and Keys.
+  With that, If the Type has been pascal case before, but Your module was
+  in camel case, it worked, because the Type was transformed to camel case
+  automatically. Now, the Type is not transformed anymore, so you have to
+  adjust your module to the correct case.
+
 # v0.1
 
 - **BREAKING**: Vue has been removed as a direct dependency.
diff --git a/src/api/ResourcefulApi.js b/src/api/ResourcefulApi.js
@@ -115,7 +115,7 @@ export class ResourcefulApi extends Api {
     }
 
     if (json.data) {
-      parsedResponse.data = normalize(json)
+      parsedResponse.data = normalize(json, { camelizeTypeValues: false, camelizeKeys: false })
     }
 
     if (json.errors) {
diff --git a/src/module/ModuleBuilder.js b/src/module/ModuleBuilder.js
@@ -120,7 +120,6 @@ export class ModuleBuilder {
    */
   buildMutations () {
     const resourceBuilder = new ResourceBuilder(this.api.store)
-
     const mutations = {
       resetItems: resetItemsMutation(this.isCollection),
       set: (this.isCollection) ? setAllMutation(resourceBuilder) : setMutation(resourceBuilder),
@@ -179,10 +178,9 @@ export class ModuleBuilder {
 
     for (const relatedObjectType in this.apiMethods.related) {
       const relatedObjectMethods = this.apiMethods.related[relatedObjectType]
-      const relatedObjectTypeActionName = relatedObjectType.charAt(0).toUpperCase() + relatedObjectType.slice(1)
 
       if (relatedObjectMethods.isCollection()) {
-        const listActionName = `listRelated${relatedObjectTypeActionName}`
+        const listActionName = `listRelated${relatedObjectType}`
         relatedActions[listActionName] = listRelatedAction(this.api, this.moduleName, relatedObjectType)
       }
     }
diff --git a/src/module/resource/ResourceBuilder.js b/src/module/resource/ResourceBuilder.js
@@ -56,7 +56,7 @@ export class ResourceBuilder {
    * Adds Methods (get, load, list) to the relationships for getting / loading them
    * Adds Shorthand Methods (rel / loadRel)
    *
-   * @param {Object} jsonResourceObject
+   * @param {Object} obj jsonResourceObject
    */
   buildRelationshipMethods (obj) {
     const relationships = obj.relationships
diff --git a/src/module/resource/getRelationship.js b/src/module/resource/getRelationship.js
@@ -2,20 +2,21 @@
 *
 * @param {Vuex.Store} store
 * @param {Object} relatedObject
+* @param {Object} config{isToMany: boolean}
 */
 export function getRelationship (store, relatedObject, config) {
   return new Proxy(() => {}, {
     apply (target, thisArg, argArray) {
-      const moduleName = relatedObject.data.type
-      const relatedModule = store.state[moduleName]
+      const moduleType = relatedObject.data.type
+      const relatedModule = store.state[moduleType]
 
       if (config.isToMany) {
         const [requestedId] = argArray
 
         try {
           return relatedModule.items[requestedId]
         } catch (e) {
-          throw new Error(`Related object ${relatedObject.id} not found in ${moduleName}`)
+          throw new Error(`Related object ${relatedObject.data.id} not found in ${moduleType}`)
         }
       }
 
diff --git a/src/module/resource/loadRelationship.js b/src/module/resource/loadRelationship.js
@@ -1,10 +1,9 @@
 export function loadRelationship (store, currentObjectId, currentObjectType, relatedObject, config) {
   return () => {
     const relatedObjectType = (config.isToMany) ? relatedObject.data[0].type : relatedObject.data.type
-    const relatedObjectNameForAction = relatedObjectType[0].toUpperCase() + relatedObjectType.slice(1)
 
     if (config.isToMany) {
-      return store.dispatch(`${currentObjectType}/listRelated${relatedObjectNameForAction}`, { id: currentObjectId })
+      return store.dispatch(`${currentObjectType}/listRelated${relatedObjectType}`, { id: currentObjectId })
     }
 
     return new Error('Failed to load relationship')
diff --git a/src/route/JsonApiRouter.js b/src/route/JsonApiRouter.js
@@ -74,7 +74,7 @@ export class JsonApiRouter extends Router {
   }
 
   parseApiResult (data) {
-    for (const routeResource of Object.values(data.vuexJsonApiRoute)) {
+    for (const routeResource of Object.values(data.VuexJsonApiRoute)) {
       this.addRoute(new JsonApiRoute(routeResource))
     }
   }
diff --git a/test/api/ResourcefulApi.spec.js b/test/api/ResourcefulApi.spec.js
@@ -51,7 +51,7 @@ test('reads the initial module list', () => {
 
   api.registerModule = registerModuleMock
 
-  api.setupApiModules(['foo', 'bar', 'baz'])
+  api.setupApiModules(['foo', 'bar', 'Baz'])
 
   expect(registerModuleMock.mock.calls.length).toBe(3)
 })
diff --git a/test/apiMock.js b/test/apiMock.js
@@ -35,9 +35,9 @@ export function initApiMockServer () {
   fetchMock.reset()
   fetchMock.config.sendAsJson = false
 
-  function book (id) {
+  function Author (id) {
     return {
-      type: 'Book',
+      type: 'Author',
       id,
       attributes: {
         author: faker.person.fullName(),
@@ -46,10 +46,39 @@ export function initApiMockServer () {
     }
   }
 
+  function book (id) {
+    return {
+      type: 'book',
+      id,
+      attributes: {
+        author: faker.name.findName(),
+        title: faker.lorem.words(3)
+      }
+    }
+  }
+
+  function category (id) {
+    return {
+      type: 'Category',
+      id,
+      attributes: {
+        author: faker.name.findName(),
+        title: faker.lorem.words(3)
+      }
+    }
+  }
+
+  fetchMock.get(url('/Author/1'), response(Author(1)))
   fetchMock.get(url('/book/1'), response(book(1)))
+  fetchMock.get(url('/category/1'), response(category(1)))
+
   fetchMock.getOnce(url('/book/1/nometa'), response(book(1), null))
   fetchMock.getOnce(url('/book/1/nolinks'), response(book(1), {}, null))
+
+  fetchMock.get(url('/Author/'), response([Author(1), Author(2), Author(3)]))
   fetchMock.get(url('/book/'), response([book(1), book(2), book(3)]))
+  fetchMock.get(url('/category/'), response([category(1), category(2), category(3)]))
+
   fetchMock.postOnce(url('/book/'), response(book('new'), {}, {}, 201))
   fetchMock.postOnce({
     url: url('/clientBook/'),
@@ -97,23 +126,33 @@ export function initApiMock () {
   initApiMockServer()
 
   const router = new Router()
+  router
+    .addRoute(new Route('Author', 'get', '/Author/{id}', ['id']))
+    .addRoute(new Route('Author', 'delete', '/Author/{id}', ['id']))
+    .addRoute(new Route('Author', 'list', '/Author/', []))
+    .addRoute(new Route('Author', 'create', '/Author/', []))
   router
     .addRoute(new Route('book', 'get', '/book/{id}', ['id']))
     .addRoute(new Route('book', 'delete', '/book/{id}', ['id']))
     .addRoute(new Route('book', 'list', '/book/', []))
     .addRoute(new Route('book', 'create', '/book/', []))
+  router
+    .addRoute(new Route('Category', 'get', '/category/{id}', ['id']))
+    .addRoute(new Route('Category', 'delete', '/category/{id}', ['id']))
+    .addRoute(new Route('Category', 'list', '/category/', []))
+    .addRoute(new Route('Category', 'create', '/category/', []))
 
   const store = new Vuex.Store()
   const api = new ResourcefulApi()
 
   api.setBaseUrl('http://api/')
   api.setStore(store)
   api.setupResourcefulRequests(router)
-  api.setupApiModules(['book'])
+  api.setupApiModules(['Author', 'book', 'Category'])
 
   return api
 }
 
-export function getVuexContextForResourceType (api, type) {
-  return api.store._modules.root._children[type].context
+export function getVuexContextForResourceType (api, moduleName) {
+  return api.store._modules.root._children[moduleName].context
 }
diff --git a/test/module/actions/createAction.spec.js b/test/module/actions/createAction.spec.js
@@ -6,5 +6,5 @@ const action = createAction(api, 'book')
 const bookModule = getVuexContextForResourceType(api, 'book')
 
 test.skip('creates without id', async () => {
-  action(bookModule, { type: 'Book', attributes: {} })
+  action(bookModule, { type: 'book', attributes: {} })
 })
diff --git a/test/module/actions/listAction.spec.js b/test/module/actions/listAction.spec.js
@@ -3,15 +3,17 @@ import { listAction } from '../../../src/module/actions/listAction'
 
 const api = initApiMock()
 
-test('simple list action', async () => {
-  const action = listAction(api, 'book', undefined)
-  expect(action).toBeInstanceOf(Function)
+test('simple list action with different casings of the moduleName', async () => {
+  ['Author', 'book', 'Category'].forEach(async (moduleName) => {
+    const action = listAction(api, moduleName, undefined)
+    expect(action).toBeInstanceOf(Function)
 
-  const bookModule = getVuexContextForResourceType(api, 'book')
-  const result = await action(bookModule)
+    const module = getVuexContextForResourceType(api, moduleName)
+    const result = await action(module)
 
-  expect(result).toBeInstanceOf(Object)
-  expect(result.status).toBe(200)
-  expect(Object.keys(result.data.book).length).toBe(3)
-  expect(Object.keys(bookModule.state.items).length).toBe(3)
+    expect(result).toBeInstanceOf(Object)
+    expect(result.status).toBe(200)
+    expect(Object.keys(result.data[moduleName]).length).toBe(3)
+    expect(Object.keys(module.state.items).length).toBe(3)
+  })
 })
diff --git a/test/module/resource/ResourceBuilder.spec.js b/test/module/resource/ResourceBuilder.spec.js
@@ -40,15 +40,66 @@ const jsonResourceMock = {
   }]
 }
 
+const jsonResourceMock2 = {
+  data: {
+    attributes: {
+      name: 'Some Other Name'
+    },
+    id: 'a1234',
+    type: 'Test',
+    relationships: {
+      relatedObject: {
+        data: {
+          id: 'bb22',
+          type: 'RelatedObject'
+        }
+      },
+      relObjs: {
+        data: [
+          {
+            id: 'ro1234',
+            type: 'RelObjs'
+          },
+          {
+            id: 'ro234',
+            type: 'RelObjs'
+          }
+        ]
+      }
+    }
+  },
+  includeds: [{
+    id: 'ro1234',
+    type: 'RelObjs',
+    attributes: {
+      name: 'relative lame name',
+      anotherProp: 'test'
+    }
+  }, {
+    id: 'ro234',
+    type: 'RelObjs',
+    attributes: {
+      name: 'some other lame name',
+      anotherProp: 'test me too'
+    }
+  }]
+}
+
 const normalizedMock = normalize(jsonResourceMock)
+const normalizedAltMock = normalize(jsonResourceMock2)
 
 const obj = new ResourceBuilder(Vuex).build(normalizedMock.test.aa1)
+const alternativeObj = new ResourceBuilder(Vuex).build(normalizedAltMock.test.a1234)
 
 test('shoud add a "get" Method wich returns the value from the given attribute', () => {
   expect(typeof obj.get).toBe('function')
+  expect(typeof alternativeObj.get).toBe('function')
 
   expect(obj.get('name')).toBe(jsonResourceMock.data.attributes.name)
   expect(obj.get('fail')).toEqual(new Error('attribute "fail" not found'))
+
+  expect(alternativeObj.get('name')).toBe(jsonResourceMock2.data.attributes.name)
+  expect(alternativeObj.get('fail')).toEqual(new Error('attribute "fail" not found'))
 })
 
 test('should return the value from the given attribute', () => {
@@ -59,6 +110,9 @@ test('should return the value from the given attribute', () => {
 test('should add relationship methods if there are relationships', () => {
   expect(typeof obj.loadRel).toBe('function')
   expect(typeof obj.rel).toBe('function')
+
+  expect(typeof alternativeObj.loadRel).toBe('function')
+  expect(typeof alternativeObj.rel).toBe('function')
 })
 
 test('should not add relationship methods if there are no relationships', () => {
@@ -91,7 +145,7 @@ test('should not add relationship methods for non-existing relationships', () =>
         },
         moreRel: {
           data: [
-            { id: 'first', type: 'more-rel' }, { id: 'second', type: 'more-rel' }
+            { id: 'first', type: 'More-rel' }, { id: 'second', type: 'More-rel' }
           ]
         },
         noSingleRel: {

Original file line number	Diff line number	Diff line change
`@@ -115,7 +115,7 @@ export class ResourcefulApi extends Api {`
`115`	`115`	`}`
`116`	`116`
`117`	`117`	`if (json.data) {`
`118`		`- parsedResponse.data = normalize(json)`
	`118`	`+ parsedResponse.data = normalize(json, { camelizeTypeValues: false, camelizeKeys: false })`
`119`	`119`	`}`
`120`	`120`
`121`	`121`	`if (json.errors) {`
Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@ export class ResourceBuilder {`
`56`	`56`	`* Adds Methods (get, load, list) to the relationships for getting / loading them`
`57`	`57`	`* Adds Shorthand Methods (rel / loadRel)`
`58`	`58`	`*`
`59`		`- * @param {Object} jsonResourceObject`
	`59`	`+ * @param {Object} obj jsonResourceObject`
`60`	`60`	`*/`
`61`	`61`	`buildRelationshipMethods (obj) {`
`62`	`62`	`const relationships = obj.relationships`
Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@ export class JsonApiRouter extends Router {`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`parseApiResult (data) {`
`77`		`- for (const routeResource of Object.values(data.vuexJsonApiRoute)) {`
	`77`	`+ for (const routeResource of Object.values(data.VuexJsonApiRoute)) {`
`78`	`78`	`this.addRoute(new JsonApiRoute(routeResource))`
`79`	`79`	`}`
`80`	`80`	`}`