test: add basic render tests with snapshots (#2009)

src/renderer/app/App.test.ts

@@ -0,0 +1,16 @@
+import { createLocalVue, shallowMount } from "@vue/test-utils";
+
+import App from "@/app/App.vue";
+
+const createStubbedVue = () => ({
+	localVue: createLocalVue(),
+	stubs: ["router-link", "router-view"],
+});
+
+describe("App", () => {
+	it("should render", () => {
+		const wrapper = shallowMount(App, createStubbedVue());
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});

src/renderer/app/SplashScreen.vue

@@ -63,7 +63,7 @@
 </template>
 
 <script lang="ts">
-	import "@/styles/style.css";
+	import "@/app/styles/style.css";
 
 	import { Component, Vue } from "vue-property-decorator";
 

src/renderer/app/Splashscreen.test.ts

@@ -0,0 +1,11 @@
+import { shallowMount } from "@vue/test-utils";
+
+import Splashscreen from "@/app/Splashscreen.vue";
+
+describe("Splashscreen", () => {
+	it("should render", () => {
+		const wrapper = shallowMount(Splashscreen, { mocks: { $t: (input) => input } });
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});

src/renderer/app/__snapshots__/App.test.ts.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App should render 1`] = `
+<div id="app" class="theme-light">
+  <router-view-stub></router-view-stub>
+</div>
+`;

src/renderer/app/__snapshots__/Splashscreen.test.ts.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Splashscreen should render 1`] = `
+<div class="absolute flex flex-col w-full h-full text-center select-none SplashScreen bg-default-background">
+  <div class="flex justify-center flex-1">
+    <div class="flex p-5 m-auto mb-3 rounded-lg bg-red-logo"><img src="@/assets/images/ark-logo.png" class="h-12"></div>
+  </div>
+  <div class="flex-inline">
+    <div class="mb-4 text-4xl"><span class="font-semibold">COMMON.ARK</span>
+      COMMON.DESKTOP_WALLET
+    </div>
+    <div class="mb-2 text-sm">
+      COMMON.INITIALIZING
+    </div>
+  </div>
+  <div class="flex-1"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve" class="inline-block">
+      <path fill="#e5f0f8" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+          s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+          c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>
+      <path fill="#007dff" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+          C22.32,8.481,24.301,9.057,26.013,10.047z">
+        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.8s" repeatCount="indefinite"></animateTransform>
+      </path>
+    </svg></div>
+  <div class="pb-4 text-sm flex-inline">
+    COMMON.VERSION 2.9.1
+  </div>
+</div>
+`;

src/renderer/app/components/Button/ButtonSwitch.test.ts

@@ -0,0 +1,26 @@
+import { shallowMount } from "@vue/test-utils";
+
+import ButtonSwitch from "@/app/components/Button/ButtonSwitch.vue";
+
+describe("ButtonSwitch", () => {
+	it("should render", () => {
+		const wrapper = shallowMount(ButtonSwitch);
+
+		expect(wrapper.html()).not.toContain("ButtonSwitch--active");
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it("should render if active", () => {
+		const wrapper = shallowMount(ButtonSwitch, { propsData: { isActive: true } });
+
+		expect(wrapper.html()).toContain("ButtonSwitch--active");
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it("should render if disabled", () => {
+		const wrapper = shallowMount(ButtonSwitch, { propsData: { isDisabled: true } });
+
+		expect(wrapper.html()).not.toContain("ButtonSwitch--active");
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});

src/renderer/app/components/Button/ButtonSwitch.vue

@@ -14,7 +14,7 @@
 					'bg-theme-switch-button-circle': !inputIsActive,
 					'bg-blue-600': inputIsActive,
 				}"
-				class="ButtonSwitch__circle transition"
+				class="transition ButtonSwitch__circle"
 			/>
 		</span>
 	</button>

src/renderer/app/components/Button/__snapshots__/ButtonSwitch.test.ts.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonSwitch should render 1`] = `<button type="button" class="ButtonSwitch"><span class="ButtonSwitch__line"><span class="transition ButtonSwitch__circle bg-theme-switch-button-circle"></span></span></button>`;
+
+exports[`ButtonSwitch should render if active 1`] = `<button type="button" class="ButtonSwitch ButtonSwitch--active"><span class="ButtonSwitch__line"><span class="transition ButtonSwitch__circle bg-blue-600"></span></span></button>`;
+
+exports[`ButtonSwitch should render if disabled 1`] = `<button disabled="disabled" type="button" class="ButtonSwitch"><span class="ButtonSwitch__line"><span class="transition ButtonSwitch__circle bg-theme-switch-button-circle"></span></span></button>`;

src/renderer/app/components/ListDivided/ListDivided.test.ts

@@ -0,0 +1,11 @@
+import { shallowMount } from "@vue/test-utils";
+
+import ListDivided from "@/app/components/ListDivided/ListDivided.vue";
+
+describe("ListDivided", () => {
+	it("should render", () => {
+		const wrapper = shallowMount(ListDivided);
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});

src/renderer/app/components/ListDivided/ListDividedItem.test.ts

@@ -0,0 +1,13 @@
+import { shallowMount } from "@vue/test-utils";
+
+import ListDividedItem from "@/app/components/ListDivided/ListDividedItem.vue";
+
+describe("ListDividedItem", () => {
+	it("should render", () => {
+		const wrapper = shallowMount(ListDividedItem, {
+			propsData: { label: "Item" },
+		});
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});

src/renderer/app/components/ListDivided/__snapshots__/ListDivided.test.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListDivided should render 1`] = `<ul class="w-full ListDivided"></ul>`;

src/renderer/app/components/ListDivided/__snapshots__/ListDividedItem.test.ts.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListDividedItem should render 1`] = `
+<li class="flex flex-col w-full py-4 border-b border-dashed ListDividedItem border-theme-line-separator">
+  <div class="flex justify-between items-center">
+    <div class="flex flex-col ListDividedItem__container__label"><span class="mr-5 ListDividedItem__label text-theme-page-text-light">Item</span>
+      <!---->
+    </div>
+    <div class="ListDividedItem__value">
+      <!---->
+    </div>
+  </div>
+  <!---->
+</li>
+`;

src/renderer/app/components/Navbar/Navbar.test.ts

@@ -0,0 +1,11 @@
+import { shallowMount } from "@vue/test-utils";
+
+import Navbar from "@/app/components/Navbar/Navbar.vue";
+
+describe("Navbar", () => {
+	it("should render", () => {
+		const wrapper = shallowMount(Navbar);
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});

src/renderer/app/components/Navbar/__snapshots__/Navbar.test.ts.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navbar should render 1`] = `
+<nav class="bg-white shadow-header-smooth relative">
+  <div class="px-4 sm:px-6 lg:px-8">
+    <div class="relative flex justify-between h-20 md:h-24">
+      <div class="flex-shrink-0 flex items-center">
+        <div class="flex rounded-lg p-2 bg-red-logo"><img src="@/assets/images/ark-logo.png" class="h-6 md:h-8 lg:h-10"></div>
+      </div>
+    </div>
+  </div>
+</nav>
+`;

src/renderer/domain/profile/pages/ProfileNew.test.ts

@@ -1,6 +1,6 @@
 import { Enums } from "@arkecosystem/platform-sdk-profiles";
 import { createLocalVue, mount } from "@vue/test-utils";
-import flushPromises from "flush-promises";
+import * as flushPromises from "flush-promises";
 import { ValidationObserver, ValidationProvider } from "vee-validate/dist/vee-validate.full";
 
 import ProfileNew from "@/domain/profile/pages/ProfileNew.vue";

src/renderer/support/services/http.test.ts

@@ -0,0 +1,30 @@
+import * as nock from "nock";
+
+import { HttpClient } from "@/support/services/http";
+
+let subject: HttpClient;
+beforeAll(() => {
+	subject = new HttpClient();
+
+	nock.disableNetConnect();
+});
+
+afterEach(() => nock.cleanAll());
+
+describe("HttpClient", () => {
+	it("should perform a GET request", async () => {
+		nock("http://my.server.com")
+			.get("/")
+			.reply(200, JSON.stringify({ key: "value" }));
+
+		await expect(subject.get("http://my.server.com/")).resolves.toEqual({ key: "value" });
+	});
+
+	it("should perform a POST request", async () => {
+		nock("http://my.server.com")
+			.post("/")
+			.reply(200, JSON.stringify({ key: "value" }));
+
+		await expect(subject.post("http://my.server.com/", { key: "value" })).resolves.toEqual({ key: "value" });
+	});
+});