diff --git a/js/tests/unit/specs/components/Group/GroupSection.spec.ts b/js/tests/unit/specs/components/Group/GroupSection.spec.ts
new file mode 100644
index 000000000..970d2dc1a
--- /dev/null
+++ b/js/tests/unit/specs/components/Group/GroupSection.spec.ts
@@ -0,0 +1,95 @@
+import { config, createLocalVue, mount } from "@vue/test-utils";
+import GroupSection from "@/components/Group/GroupSection.vue";
+import Buefy from "buefy";
+import VueRouter, { Location } from "vue-router";
+import RouteName from "@/router/name";
+import { routes } from "@/router";
+
+const localVue = createLocalVue();
+localVue.use(Buefy);
+config.mocks.$t = (key: string): string => key;
+localVue.use(VueRouter);
+const router = new VueRouter({ routes, mode: "history" });
+
+const groupPreferredUsername = "my_group";
+const groupDomain = "remotedomain.net";
+const groupUsername = `${groupPreferredUsername}@${groupDomain}`;
+
+const defaultSlotText = "A list of elements";
+const createSlotButtonText = "+ Post a public message";
+
+type Props = {
+ title?: string;
+ icon?: string;
+ privateSection?: boolean;
+ route?: Location;
+};
+
+const baseProps: Props = {
+ title: "My group section",
+ icon: "bullhorn",
+ route: {
+ name: RouteName.POSTS,
+ params: {
+ preferredUsername: groupUsername,
+ },
+ },
+};
+
+const generateWrapper = (customProps: Props = {}) => {
+ return mount(GroupSection, {
+ localVue,
+ router,
+ propsData: { ...baseProps, ...customProps },
+ slots: {
+ default: `
${defaultSlotText}
`,
+ create: `{{ $t("${createSlotButtonText}") }}`,
+ },
+ });
+};
+
+describe("GroupSection", () => {
+ it("renders group section with basic informations", () => {
+ const wrapper = generateWrapper({});
+
+ expect(
+ wrapper
+ .find(".group-section-title h2 span.icon i")
+ .classes(`mdi-${baseProps.icon}`)
+ ).toBe(true);
+
+ expect(wrapper.find(".group-section-title h2 span:last-child").text()).toBe(
+ baseProps.title
+ );
+
+ expect(wrapper.find(".group-section-title a").attributes("href")).toBe(
+ `/@${groupUsername}/p`
+ );
+
+ expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
+ true
+ );
+
+ expect(wrapper.find(".main-slot div").text()).toBe(defaultSlotText);
+ expect(wrapper.find(".create-slot a").text()).toBe(createSlotButtonText);
+ expect(wrapper.find(".create-slot a").attributes("href")).toBe(
+ `/@${groupUsername}/p/new`
+ );
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ it("renders public group section", () => {
+ const wrapper = generateWrapper({ privateSection: false });
+
+ expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
+ false
+ );
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+});
diff --git a/js/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap b/js/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
new file mode 100644
index 000000000..f77d39f5b
--- /dev/null
+++ b/js/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GroupSection renders group section with basic informations 1`] = `
+
+`;
+
+exports[`GroupSection renders public group section 1`] = `
+
+`;