diff --git a/changes/mario_3345-new-tutorial-component b/changes/mario_3345-new-tutorial-component new file mode 100644 index 0000000000..da3b8368a6 --- /dev/null +++ b/changes/mario_3345-new-tutorial-component @@ -0,0 +1 @@ +[Added] [#3345](https://github.com/cosmos/lunie/issues/3345) New tutorial component @mariopino \ No newline at end of file diff --git a/public/img/tutorials/bg1.png b/public/img/tutorials/bg1.png new file mode 100644 index 0000000000..bb18862ee1 Binary files /dev/null and b/public/img/tutorials/bg1.png differ diff --git a/src/components/common/ModalTutorial.vue b/src/components/common/ModalTutorial.vue new file mode 100644 index 0000000000..19ee11657a --- /dev/null +++ b/src/components/common/ModalTutorial.vue @@ -0,0 +1,234 @@ + + + + + diff --git a/src/components/wallet/PagePortfolio.vue b/src/components/wallet/PagePortfolio.vue index bbbf558cc4..11d5eac563 100644 --- a/src/components/wallet/PagePortfolio.vue +++ b/src/components/wallet/PagePortfolio.vue @@ -3,21 +3,78 @@ diff --git a/tests/unit/specs/components/common/ModalTutorial.spec.js b/tests/unit/specs/components/common/ModalTutorial.spec.js new file mode 100644 index 0000000000..a276777ff3 --- /dev/null +++ b/tests/unit/specs/components/common/ModalTutorial.spec.js @@ -0,0 +1,86 @@ +import { shallowMount, createLocalVue } from "@vue/test-utils" +import ModalTutorial from "common/ModalTutorial" +import { focusParentLast } from "src/directives" + +let localVue = createLocalVue() +localVue.directive("focus-last", focusParentLast) + +global.window = Object.create(window) +window.open = jest.fn() + +describe(`TmModal`, () => { + let wrapper + let mockCloseFn + + beforeEach(() => { + mockCloseFn = jest.fn() + wrapper = shallowMount(ModalTutorial, { + localVue, + propsData: { + close: mockCloseFn, + fullguide: "https://lunie.io", + steps: [ + { + title: "How to get tokens?", + // Each content array element will be enclosed in a span (newline) + content: [ + "Praesent vitae tristique erat.", + "Integer ullamcorper ligula vel dolor sagittis nec fermentum risus pharetra.", + "Nulla mollis tempus sem, a sollicitudin est facilisis ac." + ] + }, + { + title: "How to get tokens?", + content: [ + "Praesent vitae tristique erat.", + "Integer ullamcorper ligula vel dolor sagittis nec fermentum risus pharetra.", + "Nulla mollis tempus sem, a sollicitudin est facilisis ac." + ] + }, + { + title: "How to get tokens?", + content: [ + "Praesent vitae tristique erat.", + "Integer ullamcorper ligula vel dolor sagittis nec fermentum risus pharetra.", + "Nulla mollis tempus sem, a sollicitudin est facilisis ac." + ] + }, + { + title: "How to get tokens?", + content: [ + "Praesent vitae tristique erat.", + "Integer ullamcorper ligula vel dolor sagittis nec fermentum risus pharetra.", + "Nulla mollis tempus sem, a sollicitudin est facilisis ac." + ] + } + ] + } + }) + }) + + it(`has the expected html structure`, () => { + expect(wrapper.element).toMatchSnapshot() + }) + + it(`should go next step`, () => { + wrapper.vm.nextLink() + expect(wrapper.vm.currentStep).toBe(2) + }) + + it(`should go prev step`, () => { + wrapper.vm.currentStep = 2 + wrapper.vm.prevLink() + expect(wrapper.vm.currentStep).toBe(1) + }) + + it(`should go to target URL in the last step`, () => { + wrapper.vm.currentStep = 4 + wrapper.vm.nextLink() + expect(window.open).toBeCalled() + }) + + it(`should close with escape key`, () => { + wrapper.trigger("keyup.esc") + expect(mockCloseFn).toBeCalled() + }) +}) diff --git a/tests/unit/specs/components/common/__snapshots__/ModalTutorial.spec.js.snap b/tests/unit/specs/components/common/__snapshots__/ModalTutorial.spec.js.snap new file mode 100644 index 0000000000..7d5d22e41b --- /dev/null +++ b/tests/unit/specs/components/common/__snapshots__/ModalTutorial.spec.js.snap @@ -0,0 +1,117 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TmModal has the expected html structure 1`] = ` +
+
+
+ + + + + + + + + + + + +
+
+ +
+
+ + STEP 1 + + +
+ + + + +
+
+ +

+ How to get tokens? +

+ +

+ + + Praesent vitae tristique erat. + + + + + Integer ullamcorper ligula vel dolor sagittis nec fermentum risus pharetra. + + + + + Nulla mollis tempus sem, a sollicitudin est facilisis ac. + + +

+ + + + + +
+
+
+`; diff --git a/tests/unit/specs/components/wallet/PagePortfolio.spec.js b/tests/unit/specs/components/wallet/PagePortfolio.spec.js index 51b6c4c772..899218dfff 100644 --- a/tests/unit/specs/components/wallet/PagePortfolio.spec.js +++ b/tests/unit/specs/components/wallet/PagePortfolio.spec.js @@ -2,10 +2,25 @@ import PagePortfolio from "wallet/PagePortfolio" import { shallowMount } from "@vue/test-utils" describe(`PagePortfolio`, () => { - let wrapper + let wrapper, $store + + const state = { + session: { experimentalMode: false } + } + + beforeEach(() => { + $store = { + state + } + + wrapper = shallowMount(PagePortfolio, { + mocks: { + $store + } + }) + }) it("should display the portfolio page", async () => { - wrapper = shallowMount(PagePortfolio) expect(wrapper.element).toMatchSnapshot() }) }) diff --git a/tests/unit/specs/components/wallet/__snapshots__/PagePortfolio.spec.js.snap b/tests/unit/specs/components/wallet/__snapshots__/PagePortfolio.spec.js.snap index 633f771560..fad13fbbee 100644 --- a/tests/unit/specs/components/wallet/__snapshots__/PagePortfolio.spec.js.snap +++ b/tests/unit/specs/components/wallet/__snapshots__/PagePortfolio.spec.js.snap @@ -11,6 +11,8 @@ exports[`PagePortfolio should display the portfolio page 1`] = ` + + `;