@startinblox/boilerplate 4.3.1 → 6.0.0

package/cypress/component/solid-boilerplate.cy.ts

@@ -1,9 +1,898 @@
-import { html } from "lit";
+import type { LiveOrbit, PropertiesPicker, Resource } from "@src/component";
+import { orbit, sibRouter, sibStore } from "@src/mocks/orbit.mock";
+import { user } from "@src/mocks/user.mock";
+import { html, nothing } from "lit";
 
-describe("<solid-boilerplate>", () => {
-  it("should mount", () => {
-    cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+/*
+  Testing OrbitComponent via solid-boilerplate
+*/
 
-    cy.get("solid-boilerplate").should("exist");
+// Interface for type checking in tests
+interface MockedSolidBoilerplate extends HTMLElement {
+  ready: boolean;
+  defaultDataSrc?: string;
+  dataSrc?: string;
+  nestedField?: string;
+  uniq?: string;
+  route?: string;
+  cherryPickedProperties: PropertiesPicker[];
+  orbit?: LiveOrbit;
+  currentRoute: string;
+  objects?: Resource[];
+  datas?: Resource[];
+  hasCachedDatas?: boolean;
+  oldDataSrc?: string;
+  noRouter?: boolean;
+  component?: any;
+  _getResource?: any;
+
+  _attach(
+    defaultRoute?: boolean,
+    setupSubscriptions?: boolean,
+    ignoreRouter?: boolean,
+  ): Promise<boolean>;
+  _afterAttach(): Promise<void>;
+  _navigate(e: Event): void;
+  _normalizeLdpContains(value: Resource[] | Resource | null): Resource[];
+  _expandContainer(
+    value: Resource[],
+    recursive?: boolean,
+    targetProperties?: PropertiesPicker[],
+  ): Promise<Resource[]>;
+  _getProperties(
+    resource: Resource,
+    recursive?: boolean,
+    targetProperties?: PropertiesPicker[],
+  ): Promise<Resource>;
+  _hasCherryPickedProperties(resource: Resource): Promise<boolean>;
+  _getProxyValue(
+    resource: string | Resource | any,
+    recursive?: boolean,
+    targetProperties?: PropertiesPicker[],
+  ): Promise<any>;
+  _responseAdaptator(response: Resource): Promise<Resource>;
+  gatekeeper(): symbol;
+  hasType(type: string, objs?: Resource[]): boolean;
+  render(): any;
+}
+
+describe("<solid-boilerplate> OrbitComponent methods", () => {
+  beforeEach(() => {
+    cy.window().then((win) => {
+      win.orbit = orbit;
+      win.sibStore = sibStore;
+      win.sibRouter = sibRouter;
+    });
+  });
+
+  describe("Properties", () => {
+    it("should have ready property", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.ready).to.be.a("boolean");
+      });
+    });
+
+    it("should have defaultDataSrc property", () => {
+      cy.mount(
+        html`<solid-boilerplate
+          default-data-src="https://example.com/data"
+        ></solid-boilerplate>`,
+      );
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.defaultDataSrc).to.equal("https://example.com/data");
+      });
+    });
+
+    it("should have dataSrc property", () => {
+      cy.mount(
+        html`<solid-boilerplate
+          data-src="https://example.com/data"
+        ></solid-boilerplate>`,
+      );
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.dataSrc).to.equal("https://example.com/data");
+      });
+    });
+
+    it("should have nestedField property", () => {
+      cy.mount(
+        html`<solid-boilerplate nested-field="items"></solid-boilerplate>`,
+      );
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.nestedField).to.equal("items");
+      });
+    });
+
+    it("should have uniq property", () => {
+      cy.mount(html`<solid-boilerplate uniq="unique-id"></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.uniq).to.equal("unique-id");
+      });
+    });
+
+    it("should have route property", () => {
+      cy.mount(html`<solid-boilerplate route="/my-route"></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.route).to.equal("/my-route");
+      });
+    });
+
+    it("should have cherryPickedProperties", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.cherryPickedProperties).to.be.an("array");
+        expect(component.cherryPickedProperties[0]).to.have.property("key");
+        expect(component.cherryPickedProperties[0]).to.have.property("value");
+      });
+    });
+
+    it("should have orbit property", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.orbit).to.exist;
+      });
+    });
+
+    it("should have currentRoute property", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.currentRoute).to.be.a("string");
+      });
+    });
+
+    it("should have objects property", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.objects).to.be.an("array");
+      });
+    });
+  });
+
+  describe("_attach method", () => {
+    it("should attach to orbit when available", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.orbit).to.exist;
+      });
+    });
+
+    it("should set ready to true after attach", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.wait(100)
+        .get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          expect(component.ready).to.be.true;
+        });
+    });
+
+    it("should dispatch component-ready event", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.ready).to.be.true;
+      });
+    });
+  });
+
+  describe("_afterAttach method", () => {
+    it("should call _afterAttach after mount", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          return component._afterAttach();
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+
+    it("should setup cache invalidation", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component._afterAttach).to.exist;
+      });
+    });
+  });
+
+  describe("_navigate method", () => {
+    it("should handle navigation event", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        const mockEvent = {
+          preventDefault: cy.stub(),
+          target: {
+            closest: cy.stub().returns({
+              getAttribute: cy.stub().callsFake((attr) => {
+                if (attr === "navigation-target") return "/target";
+                if (attr === "navigation-resource") return "resource-id";
+                return null;
+              }),
+            }),
+          },
+        } as any;
+
+        component._navigate(mockEvent);
+        expect(mockEvent.preventDefault).to.be.called;
+      });
+    });
+
+    it("should handle navigation with rdf-type", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        const mockEvent = {
+          preventDefault: cy.stub(),
+          target: {
+            closest: cy.stub().returns({
+              getAttribute: cy.stub().callsFake((attr) => {
+                if (attr === "navigation-rdf-type") return "foaf:user";
+                if (attr === "navigation-resource") return "resource-id";
+                return null;
+              }),
+            }),
+          },
+        } as any;
+
+        component._navigate(mockEvent);
+        expect(mockEvent.preventDefault).to.be.called;
+      });
+    });
+
+    it("should handle navigation with subrouter", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        const mockEvent = {
+          preventDefault: cy.stub(),
+          target: {
+            closest: cy.stub().returns({
+              getAttribute: cy.stub().callsFake((attr) => {
+                if (attr === "navigation-target") return "/target";
+                if (attr === "navigation-subrouter") return "sub";
+                if (attr === "navigation-resource") return "resource-id";
+                return null;
+              }),
+            }),
+          },
+        } as any;
+
+        component._navigate(mockEvent);
+        expect(mockEvent.preventDefault).to.be.called;
+      });
+    });
+  });
+
+  describe("_normalizeLdpContains method", () => {
+    it("should normalize single resource to array", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        const result = component._normalizeLdpContains(user);
+        expect(result).to.be.an("array");
+        expect(result).to.have.length(1);
+        expect(result[0]).to.equal(user);
+      });
+    });
+
+    it("should return array unchanged", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        const arr = [user];
+        const result = component._normalizeLdpContains(arr);
+        expect(result).to.equal(arr);
+      });
+    });
+
+    it("should return empty array for null", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        const result = component._normalizeLdpContains(null);
+        expect(result).to.be.an("array");
+        expect(result).to.have.length(0);
+      });
+    });
+  });
+
+  describe("_expandContainer method", () => {
+    it("should expand container with resources", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const resources = [user, user];
+          return component._expandContainer(resources);
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+
+    it("should expand container with recursive false", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const resources = [user];
+          return component._expandContainer(resources, false);
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+
+    it("should expand container with custom targetProperties", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const resources = [user];
+          const targetProperties: PropertiesPicker[] = [
+            { key: "name", value: "name" },
+          ];
+          return component._expandContainer(resources, true, targetProperties);
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+  });
+
+  describe("_getProperties method", () => {
+    it("should get properties from resource", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const mockResource = {
+            "@id": "https://example.com/resource",
+            "@type": "foaf:user",
+            properties: Promise.resolve(["name", "email"]),
+            get: (key: string) => {
+              if (key === "name") return Promise.resolve("John Doe");
+              if (key === "email") return Promise.resolve("john@example.com");
+              return Promise.resolve(undefined);
+            },
+          } as any;
+
+          const cherryPickedProperties: PropertiesPicker[] = [
+            { key: "name", value: "name" },
+            { key: "email", value: "email" },
+          ];
+
+          return component._getProperties(
+            mockResource,
+            true,
+            cherryPickedProperties,
+          );
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+
+    it("should expand nested properties", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const mockNestedResource = {
+            "@id": "https://example.com/nested",
+            "@type": "foaf:user",
+          };
+          const mockResource = {
+            "@id": "https://example.com/resource",
+            "@type": "foaf:user",
+            properties: Promise.resolve(["nested"]),
+            get: (key: string) => {
+              if (key === "nested") return Promise.resolve(mockNestedResource);
+              return Promise.resolve(undefined);
+            },
+          } as any;
+
+          const cherryPickedProperties: PropertiesPicker[] = [
+            { key: "nested", value: "nested", expand: true },
+          ];
+
+          return component._getProperties(
+            mockResource,
+            true,
+            cherryPickedProperties,
+          );
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+
+    it("should cast property values", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        const mockResource = {
+          "@id": "https://example.com/resource",
+          "@type": "foaf:user",
+          properties: Promise.resolve(["date"]),
+          get: () => Promise.resolve("2024-01-01"),
+        } as any;
+
+        const cherryPickedProperties: PropertiesPicker[] = [
+          {
+            key: "date",
+            value: "formattedDate",
+            cast: (val: any) => `CAST: ${val}`,
+          },
+        ];
+
+        cy.wrap(
+          component._getProperties(mockResource, true, cherryPickedProperties),
+        ).then((result) => {
+          const typedResult = result as Resource;
+          expect(typedResult).to.have.property("formattedDate");
+          expect(typedResult.formattedDate).to.equal("CAST: 2024-01-01");
+        });
+      });
+    });
+  });
+
+  describe("_hasCherryPickedProperties method", () => {
+    it("should return true if resource has cherry picked properties", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const mockResource = {
+            "@id": "https://example.com/resource",
+            properties: Promise.resolve(["name", "email"]),
+          } as any;
+
+          return component._hasCherryPickedProperties(mockResource);
+        })
+        .then((result) => {
+          expect(result).to.be.true;
+        });
+    });
+
+    it("should return false if resource has no cherry picked properties", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const mockResource = {
+            "@id": "https://example.com/resource",
+            properties: Promise.resolve(["other", "stuff"]),
+          } as any;
+
+          return component._hasCherryPickedProperties(mockResource);
+        })
+        .then((result) => {
+          expect(result).to.be.false;
+        });
+    });
+  });
+
+  describe("_getProxyValue method", () => {
+    it("should get proxy value from URL string", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          return component._getProxyValue("https://example.com/resource");
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+
+    it("should get proxy value from resource object", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const mockResource = {
+            "@id": "https://example.com/resource",
+            "@type": "foaf:user",
+            isFullResource: () => true,
+            properties: Promise.resolve(["name"]),
+            get: () => Promise.resolve("John"),
+          } as any;
+
+          return component._getProxyValue(mockResource);
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+
+    it("should handle container resources", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const mockContainer = {
+            "@id": "https://example.com/container",
+            "@type": "ldp:Container",
+            isContainer: () => true,
+            "ldp:contains": Promise.resolve([user]),
+          } as any;
+
+          return component._getProxyValue(mockContainer);
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+
+    it("should handle recursive parameter", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const mockResource = {
+            "@id": "https://example.com/resource",
+            isFullResource: () => true,
+          } as any;
+
+          return component._getProxyValue(mockResource, false);
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+
+    it("should handle custom targetProperties", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const mockResource = {
+            "@id": "https://example.com/resource",
+            isFullResource: () => true,
+          } as any;
+
+          const targetProperties: PropertiesPicker[] = [
+            { key: "custom", value: "custom" },
+          ];
+
+          return component._getProxyValue(mockResource, true, targetProperties);
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+  });
+
+  describe("_responseAdaptator method", () => {
+    it("should adapt response", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const mockResponse = {
+            "@id": "https://example.com/resource",
+            name: "Test",
+          } as Resource;
+
+          return component._responseAdaptator(mockResponse);
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+
+    it("should allow override in subclass", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component._responseAdaptator).to.be.a("function");
+      });
+    });
+  });
+
+  describe("gatekeeper method", () => {
+    it("should return nothing when orbit is not available", () => {
+      cy.window().then((win) => {
+        (win as any).orbit = undefined;
+      });
+
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        const result = component.gatekeeper();
+        expect(result).to.equal(nothing);
+      });
+    });
+
+    it("should return nothing when dataSrc is not set", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        const result = component.gatekeeper();
+        expect(result).to.equal(nothing);
+      });
+    });
+
+    it("should allow render when route starts with currentRoute", () => {
+      cy.mount(
+        html`<solid-boilerplate
+          data-src="https://example.com/data"
+          route="/my-route"
+        ></solid-boilerplate>`,
+      );
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        component.currentRoute = "/my";
+        const result = component.gatekeeper();
+        expect(result).to.be.undefined;
+      });
+    });
+
+    it("should allow render when route equals currentRoute", () => {
+      cy.mount(
+        html`<solid-boilerplate
+          data-src="https://example.com/data"
+          route="/my-route"
+        ></solid-boilerplate>`,
+      );
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        component.currentRoute = "/my-route";
+        const result = component.gatekeeper();
+        expect(result).to.be.undefined;
+      });
+    });
+  });
+
+  describe("hasType method (from ComponentObjectsHandler)", () => {
+    it("should return true if objects contain type", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        component.objects = [user];
+        const result = component.hasType("foaf:user");
+        expect(result).to.be.true;
+      });
+    });
+
+    it("should return false if objects don't contain type", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        component.objects = [user];
+        const result = component.hasType("foaf:group");
+        expect(result).to.be.false;
+      });
+    });
+
+    it("should work with array types", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        const multiTypeUser = {
+          ...user,
+          "@type": ["foaf:user", "schema:Person"],
+        };
+        component.objects = [multiTypeUser];
+        expect(component.hasType("schema:Person")).to.be.true;
+        expect(component.hasType("foaf:group")).to.be.false;
+      });
+    });
+
+    it("should accept custom objects parameter", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        const customObjects = [user];
+        const result = component.hasType("foaf:user", customObjects);
+        expect(result).to.be.true;
+      });
+    });
+
+    it("should handle empty objects array", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        component.objects = [];
+        const result = component.hasType("foaf:user");
+        expect(result).to.be.false;
+      });
+    });
+  });
+
+  describe("Integration tests", () => {
+    it("should mount component", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").should("exist");
+    });
+
+    it("should have red background div", () => {
+      cy.mount(
+        html`<solid-boilerplate
+          data-src="https://example.com/data"
+          no-router
+          route="/data"
+        ></solid-boilerplate>`,
+      );
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        component.datas = [user];
+        component.currentRoute = "/data";
+        (component as any).requestUpdate();
+      });
+
+      cy.get("solid-boilerplate")
+        .shadow()
+        .find("div")
+        .should("have.css", "background-color")
+        .and("eq", "rgb(255, 0, 0)");
+    });
+
+    it("should show loader when loading", () => {
+      cy.mount(
+        html`<solid-boilerplate
+          data-src="https://example.com/data"
+          no-router
+          route="/data"
+        ></solid-boilerplate>`,
+      );
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        cy.stub(component._getResource, "render").callsFake((obj: any) => {
+          return obj.pending();
+        });
+        component.currentRoute = "/data";
+        (component as any).requestUpdate();
+      });
+
+      cy.get("solid-boilerplate").shadow().find("solid-loader").should("exist");
+    });
+
+    it("should render sample-objects when data is loaded", () => {
+      cy.mount(
+        html`<solid-boilerplate
+          data-src="https://example.com/data"
+          no-router
+          route="/data"
+        ></solid-boilerplate>`,
+      );
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        component.datas = [user];
+        component.currentRoute = "/data";
+        (component as any).requestUpdate();
+      });
+
+      cy.get("solid-boilerplate")
+        .shadow()
+        .find("sample-objects")
+        .should("exist");
+    });
+  });
+
+  describe("Orbit integration", () => {
+    it("should get component from orbit via route", () => {
+      cy.window().then((win) => {
+        const mockOrbit = {
+          ...orbit,
+          components: [
+            {
+              uniq: "test-component",
+              route: "/test",
+              parameters: {},
+            },
+          ],
+          getComponentFromRoute: (route: string) => {
+            return mockOrbit.components?.find((c) => c.route === route);
+          },
+        };
+        win.orbit = mockOrbit as any;
+      });
+
+      cy.mount(html`<solid-boilerplate route="/test"></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate").then(($el) => {
+        const component = $el[0] as unknown as MockedSolidBoilerplate;
+        expect(component.orbit?.getComponentFromRoute("/test")).to.exist;
+      });
+    });
+  });
+
+  describe("Error handling", () => {
+    it("should handle invalid resource gracefully", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          return component._getProxyValue(null);
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
+
+    it("should handle missing properties", () => {
+      cy.mount(html`<solid-boilerplate></solid-boilerplate>`);
+
+      cy.get("solid-boilerplate")
+        .then(($el) => {
+          const component = $el[0] as unknown as MockedSolidBoilerplate;
+          const mockResource = {
+            "@id": "https://example.com/resource",
+            properties: Promise.resolve([]),
+          } as any;
+
+          return component._getProperties(mockResource);
+        })
+        .then(() => {
+          expect(true).to.be.true;
+        });
+    });
   });
 });