feat: create new profile (without avatar)

__tests__/unit.jest.conf.js

@@ -16,27 +16,27 @@ module.exports = {
 		"^@/(.*)$": "<rootDir>/src/renderer/$1",
 		"^@tests/(.*)$": "<rootDir>/__tests__/$1",
 		vue$: "<rootDir>/node_modules/vue/dist/vue.common.js",
+		'vee-validate/dist/rules': 'babel-jest',
 	},
-	preset: "ts-jest/presets/js-with-ts",
 	transform: {
+		".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
 		"^.+\\.js$": "babel-jest",
 		"^.+\\.ts$": "babel-jest",
-		".*\\.vue$": "vue-jest",
 		"^.+\\.tsx?$": "ts-jest",
-		".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
+		"^.+\\.vue$": "vue-jest",
 	},
 	testPathIgnorePatterns: [
 		"<rootDir>/__tests__/e2e",
 		"<rootDir>/__tests__/unit.jest.conf.js",
 		"<rootDir>/__tests__/unit/.coverage",
 		"<rootDir>/__tests__/unit/__fixtures__",
 		"<rootDir>/__tests__/unit/__mocks__",
-		"<rootDir>/__tests__/unit/__utils__",
+		"<rootDir>/__tests__/unit/__support__",
+		'<rootDir>/node_modules/(?!vee-validate/dist/rules)',
 	],
 	snapshotSerializers: ["jest-serializer-vue"],
 	coverageReporters: ["json", "lcov", "text", "clover", "html"],
 	coverageDirectory: "<rootDir>/__tests__/unit/.coverage",
 	collectCoverageFrom: ["src/renderer/**/*.{js,ts,tsx,vue}"],
-	// setupFilesAfterEnv: ["jest-extended", "<rootDir>/__tests__/unit/__utils__/setup.js"],
 	watchman: false,
 };

config/index.js

@@ -1,17 +1,12 @@
 const os = require("os");
 const path = require("path");
 
-exports.APP = {
-	website: "https://ark.io",
-	transactionExpiryMinutes: 45,
-};
-
-exports.I18N = {
+export const I18N = {
 	defaultLocale: "en-US",
 	enabledLocales: ["en-US"],
 };
 
-exports.BIP39 = {
+export const BIP39 = {
 	defaultLanguage: "english",
 	languages: [
 		"chinese_simplified",
@@ -25,15 +20,15 @@ exports.BIP39 = {
 	],
 };
 
-exports.INTERVALS = {
+export const INTERVALS = {
 	short: 30000, // 30 seconds
 	medium: 60000, // 1 minute
 	long: 180000, // 3 minute
 };
 
 // This section handles fetching Desktop-Wallet Plugins from the NPM registry.
 // It should remain "ARK" unless intentionally implementing a custom package.
-exports.PLUGINS = {
+export const PLUGINS = {
 	adapters: ["npm"],
 	pluginsUrl: "https://raw.githubusercontent.com/ark-ecosystem-desktop-plugins/config/master/plugins.json",
 	categories: ["gaming", "theme", "language", "utility", "other"],
@@ -52,7 +47,7 @@ exports.PLUGINS = {
 	validation: require("./plugin-validation.json"),
 };
 
-exports.THEMES = [
+export const THEMES = [
 	{
 		id: "light",
 		title: "Light theme", // TODO translate
@@ -62,3 +57,34 @@ exports.THEMES = [
 		title: "Dark theme", // TODO translate
 	},
 ];
+
+/**
+ * These are the new values that will be used as defaults for forms and other things reliant on defaults.
+ */
+
+export const MARKET_PROVIDERS = {
+	coingecko: "CoinGecko",
+	coincap: "CoinCap",
+	cryptocompare: "CryptoCompare",
+};
+
+export const CURRENCIES = {
+	btc: "BTC",
+	eth: "ETH",
+	ltc: "LTC",
+	aud: "AUD",
+	brl: "BRL",
+	cad: "CAD",
+	chf: "CHF",
+	cny: "CNY",
+	eur: "EUR",
+	gbp: "GBP",
+	hkd: "HKD",
+	idr: "IDR",
+	inr: "INR",
+	jpy: "JPY",
+	krw: "KRW",
+	mxn: "MXN",
+	rub: "RUB",
+	usd: "USD",
+};

package.json

@@ -173,7 +173,9 @@
 		"eslint-plugin-simple-import-sort": "^5.0.3",
 		"eslint-plugin-standard": "^4.0.1",
 		"eslint-plugin-vue": "^6.2.2",
+		"esm": "^3.2.25",
 		"file-loader": "^6.0.0",
+		"flush-promises": "^1.0.2",
 		"full-icu": "^1.3.1",
 		"glob-all": "^3.2.1",
 		"html-webpack-plugin": "^4.3.0",

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

@@ -5,7 +5,9 @@ import Alert from "@/app/components/Alert/Alert.vue";
 describe("Alert", () => {
 	it("should render", () => {
 		const wrapper = shallowMount(Alert);
+
 		expect(wrapper.find(".Alert")).toBeTruthy();
+		expect(wrapper.html()).toMatchSnapshot();
 	});
 
 	it("should render with title", () => {
@@ -14,7 +16,9 @@ describe("Alert", () => {
 				title: "Test",
 			},
 		});
+
 		const title = wrapper.find(`[data-testid="Alert__title"]`);
 		expect(title.text()).toBe("Test");
+		expect(wrapper.html()).toMatchSnapshot();
 	});
 });

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Alert should render 1`] = `
+<div role="alert" class="Alert flex rounded-lg overflow-hidden Alert--status-warning Alert--size-default">
+  <div class="Alert__icon Alert--padding w-24 flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-8 h-8">
+      <path d="M0 10C0 4.5 4.5 0 10 0s10 4.5 10 10-4.5 10-10 10S0 15.5 0 10zm2 0c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8-8 3.6-8 8zm7 4c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.4-1-1zm0-3V6c0-.6.4-1 1-1s1 .4 1 1v5c0 .6-.4 1-1 1s-1-.4-1-1z" fill="currentColor"></path>
+    </svg></div>
+  <div class="Alert__content Alert--padding flex-1">
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`Alert should render with title 1`] = `
+<div role="alert" class="Alert flex rounded-lg overflow-hidden Alert--status-warning Alert--size-default">
+  <div class="Alert__icon Alert--padding w-24 flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-8 h-8">
+      <path d="M0 10C0 4.5 4.5 0 10 0s10 4.5 10 10-4.5 10-10 10S0 15.5 0 10zm2 0c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8-8 3.6-8 8zm7 4c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.4-1-1zm0-3V6c0-.6.4-1 1-1s1 .4 1 1v5c0 .6-.4 1-1 1s-1-.4-1-1z" fill="currentColor"></path>
+    </svg></div>
+  <div class="Alert__content Alert--padding flex-1">
+    <p data-testid="Alert__title" class="Alert__content__title">
+      Test
+    </p>
+  </div>
+</div>
+`;

src/renderer/app/components/Form/FormError.test.ts

@@ -0,0 +1,23 @@
+import { shallowMount } from "@vue/test-utils";
+
+import FormError from "@/app/components/Form/FormError.vue";
+
+describe("FormError", () => {
+	it("should render with errors", () => {
+		const wrapper = shallowMount(FormError, {
+			propsData: {
+				errors: ["Error 0", "Error 1"],
+			},
+		});
+
+		expect(wrapper.element.innerHTML).toContain("Error 0");
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it("should not render without errors", () => {
+		const wrapper = shallowMount(FormError);
+
+		expect(wrapper.element.innerHTML).toBeUndefined();
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+});

src/renderer/app/components/Form/FormError.vue

@@ -0,0 +1,14 @@
+<template>
+	<div v-if="errors">
+		<span class="inline-block mt-1 text-red-500">{{ errors[0] }}</span>
+	</div>
+</template>
+
+<script lang="ts">
+	import { Component, Prop, Vue } from "vue-property-decorator";
+
+	@Component({ name: "FormError" })
+	export default class FormError extends Vue {
+		@Prop() public errors: string[] | undefined;
+	}
+</script>

src/renderer/app/components/Form/__snapshots__/FormError.test.ts.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormError should not render without errors 1`] = `""`;
+
+exports[`FormError should render with errors 1`] = `<div><span class="inline-block mt-1 text-red-500">Error 0</span></div>`;

src/renderer/app/components/Form/index.ts

@@ -0,0 +1,3 @@
+import FormError from "./FormError.vue";
+
+export { FormError };

src/renderer/app/components/ListDivided/ListDivided.vue

@@ -1,8 +1,9 @@
 <template>
-	<ul class="ListDivided w-full">
+	<ul class="w-full ListDivided">
 		<template v-if="items">
 			<ListDividedItem v-for="(value, key) in items" :key="key" :label="key" :value="value" />
 		</template>
+
 		<template v-else>
 			<slot />
 		</template>
@@ -15,6 +16,7 @@
 	import ListDividedItem from "./ListDividedItem";
 
 	@Component({
+		name: "ListDivided",
 		components: {
 			ListDividedItem,
 		},

src/renderer/app/components/ListDivided/ListDividedItem.vue

@@ -1,22 +1,20 @@
 <template>
 	<li class="flex flex-col w-full py-4 border-b border-dashed ListDividedItem border-theme-line-separator">
 		<div :class="isFloatingLabel ? 'flex-col items-start' : 'items-center'" class="flex justify-between">
-			<div class="ListDividedItem__container__label flex flex-col">
+			<div class="flex flex-col ListDividedItem__container__label">
 				<span
 					:class="[
 						{ 'font-semibold text-xs mb-1': isFloatingLabel },
 						{ 'text-theme-page-text-light': !itemLabelClass },
 						itemLabelClass,
 					]"
 					class="mr-5 ListDividedItem__label"
-					>{{ label }}</span
-				>
+				>{{ label }}</span>
 				<span
 					v-if="labelDescription"
 					:class="itemLabelDescriptionClass"
-					class="ListDividedItem__label__description text-gray-500 text-sm"
-					>{{ labelDescription }}</span
-				>
+					class="text-sm text-gray-500 ListDividedItem__label__description"
+				>{{ labelDescription }}</span>
 			</div>
 
 			<div :class="itemValueClass" class="ListDividedItem__value">
@@ -34,7 +32,9 @@
 <script lang="ts">
 	import { Component, Inject, Prop, Vue } from "vue-property-decorator";
 
-	@Component
+	@Component({
+		name: "ListDividedItem",
+	})
 	export default class ListDividedItem extends Vue {
 		@Prop({ required: true }) public label!: string;
 		@Prop({ default: null }) public labelDescription!: string | null;

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

@@ -1,5 +1,4 @@
 import ListDivided from "./ListDivided.vue";
 import ListDividedItem from "./ListDividedItem.vue";
 
-export default ListDivided;
 export { ListDivided, ListDividedItem };

src/renderer/app/i18n/i18n-setup.ts

@@ -1,7 +1,7 @@
 import { I18N } from "@config";
 import { readFileSync } from "fs";
 
-import i18n from "@/app/i18n";
+import { i18n } from "@/app/i18n";
 
 const loadedLanguages = {
 	[I18N.defaultLocale]: true,

src/renderer/app/i18n/index.ts

@@ -21,4 +21,4 @@ for (const property of ["messages", "dateTimeFormats", "numberFormats"]) {
 	config[property][language.locale] = language[property];
 }
 
-export default new VueI18n(config);
+export const i18n = new VueI18n(config);

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

@@ -1,11 +1,86 @@
-import { shallowMount } from "@vue/test-utils";
+import { Enums } from "@arkecosystem/platform-sdk-profiles";
+import { createLocalVue, mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { ValidationObserver, ValidationProvider } from "vee-validate/dist/vee-validate.full";
 
 import ProfileNew from "@/domain/profile/pages/ProfileNew.vue";
 
+const profileSettings = { set: jest.fn() };
+
+const createStubbedVue = () => {
+	const localVue = createLocalVue();
+	localVue.component("ValidationObserver", ValidationObserver);
+	localVue.component("ValidationProvider", ValidationProvider);
+
+	return {
+		localVue,
+		mocks: {
+			$profiles: {
+				push() {
+					return { settings: jest.fn(() => profileSettings) };
+				},
+			},
+		},
+		stubs: {
+			ButtonSwitch: true,
+			FormError: true,
+			ListDivided: true,
+			ListDividedItem: true,
+		},
+		sync: false,
+	};
+};
+
 describe("ProfileNew", () => {
 	it("should render", () => {
-		const wrapper = shallowMount(ProfileNew);
+		const wrapper = mount(ProfileNew, createStubbedVue());
 
 		expect(wrapper.text()).toContain("Create Profile");
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it("should submit the form and create a profile without any errors", async () => {
+		const wrapper = mount(ProfileNew, createStubbedVue());
+
+		expect(wrapper.vm.$data).toEqual({
+			form: {
+				name: "",
+				marketProvider: "coingecko",
+				currency: "btc",
+				darkTheme: false,
+			},
+		});
+
+		wrapper.find("input[name='name']").setValue("John Doe");
+		wrapper.find("select[name='market_provider']").setValue("coincap");
+		wrapper.find("select[name='currency']").setValue("eth");
+		// wrapper.find("[name='dark_theme']").setValue(true);
+
+		expect(wrapper.vm.$data).toEqual({
+			form: {
+				name: "John Doe",
+				marketProvider: "coincap",
+				currency: "eth",
+				darkTheme: false,
+			},
+		});
+
+		wrapper.find("form").trigger("submit.prevent");
+
+		await wrapper.vm.$nextTick();
+		await flushPromises();
+
+		expect(wrapper.vm.$data).toEqual({
+			form: {
+				name: "",
+				marketProvider: "coingecko",
+				currency: "btc",
+				darkTheme: false,
+			},
+		});
+
+		expect(profileSettings.set).toHaveBeenNthCalledWith(1, Enums.ProfileSetting.MarketProvider, "coincap");
+		expect(profileSettings.set).toHaveBeenNthCalledWith(2, Enums.ProfileSetting.ChartCurrency, "eth");
+		expect(profileSettings.set).toHaveBeenNthCalledWith(3, Enums.ProfileSetting.Theme, "light");
 	});
 });