fix: add playwright dependency in the correct order

Currently, the schematics adds playwright at the end of the dev dependencies.
This updates the schematic to insert it ar the proper place (with the same code used by the angular-eslint schematics).

src/schematics/ng-add/index.spec.ts

@@ -53,5 +53,9 @@ describe('ng-add', () => {
 
     const packageJSON = JSON.parse(tree.readContent('/package.json'));
     expect(packageJSON.devDependencies['@playwright/test']).toBeTruthy();
+    // check that the dependency is added in the correct place
+    expect(Object.keys(packageJSON.devDependencies)).toEqual(
+      Object.keys(packageJSON.devDependencies).sort(),
+    );
   });
 });

src/schematics/ng-add/index.ts

@@ -106,6 +106,7 @@ function addPackageToPackageJson(
   if (!json.devDependencies[pkg]) {
     json.devDependencies[pkg] = version;
   }
+  json.devDependencies = sortObjectByKeys(json.devDependencies);
   tree.overwrite('package.json', JSON.stringify(json, null, 2));
 
   return tree;
@@ -123,3 +124,17 @@ function addPlaywright(tree: Tree, context: SchematicContext) {
     PLAYWRIGHT_TEST_VERSION,
   );
 }
+
+function sortObjectByKeys(
+  obj: Record<string, unknown>,
+): Record<string, unknown> {
+  return Object.keys(obj)
+    .sort()
+    .reduce((result, key) => {
+      return {
+        // biome-ignore lint/performance/noAccumulatingSpread: small object, no perf cost
+        ...result,
+        [key]: obj[key],
+      };
+    }, {});
+}