rename all components to new namespace (#1515)
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Liyas Thomas
GitHub
299
components/smart/__tests__/AutoComplete.spec.js
Normal file
299
components/smart/__tests__/AutoComplete.spec.js
Normal file
@@ -0,0 +1,299 @@
|
||||
import autocomplete from "../AutoComplete"
|
||||
import { mount } from "@vue/test-utils"
|
||||
|
||||
const props = {
|
||||
placeholder: "",
|
||||
value: "",
|
||||
spellcheck: false,
|
||||
source: ["app", "apple", "appliance", "brian", "bob", "alice"],
|
||||
}
|
||||
|
||||
// ["pp", "pple", "ppliance", "lice"]
|
||||
const suggestionStr = props.source.filter((str) => str.startsWith("a")).map((str) => str.slice(1))
|
||||
|
||||
const factory = (props) =>
|
||||
mount(autocomplete, {
|
||||
propsData: props,
|
||||
})
|
||||
|
||||
describe("autocomplete", () => {
|
||||
test("mounts properly", () => {
|
||||
const wrapper = factory(props)
|
||||
|
||||
expect(wrapper).toBeTruthy()
|
||||
})
|
||||
|
||||
test("emits input event on text update [v-model compat]", async () => {
|
||||
const wrapper = factory(props)
|
||||
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("testval")
|
||||
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.emitted("input")).toBeTruthy()
|
||||
expect(wrapper.emitted("input").length).toEqual(1)
|
||||
})
|
||||
|
||||
test("shows matching suggestions", async () => {
|
||||
const wrapper = factory(props)
|
||||
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("a")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const suggestions = wrapper.findAll("li").wrappers.map((el) => el.text())
|
||||
|
||||
suggestionStr.forEach((str) => expect(suggestions).toContain(str))
|
||||
})
|
||||
|
||||
test("doesnt show non-matching suggestions", async () => {
|
||||
const wrapper = factory(props)
|
||||
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("b")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const suggestions = wrapper.findAll("li").wrappers.map((el) => el.text())
|
||||
|
||||
suggestionStr.forEach((str) => expect(suggestions).not.toContain(str))
|
||||
})
|
||||
|
||||
test("updates suggestions on input", async () => {
|
||||
const wrapper = factory(props)
|
||||
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("b")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const suggestions = wrapper.findAll("li").wrappers.map((el) => el.text())
|
||||
|
||||
suggestionStr.forEach((str) => expect(suggestions).not.toContain(str))
|
||||
})
|
||||
|
||||
test("applies suggestion on clicking", async () => {
|
||||
const wrapper = factory(props)
|
||||
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("b")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const selectedSuggestion = wrapper.findAll("li").at(0)
|
||||
const selectedText = selectedSuggestion.text()
|
||||
|
||||
await selectedSuggestion.trigger("click")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(input.element.value).toEqual(`b${selectedText}`)
|
||||
})
|
||||
|
||||
test("hide selection on pressing ESC", async () => {
|
||||
const wrapper = factory(props)
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("b")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keyup", { code: "Escape" })
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.find("ul").exists()).toEqual(false)
|
||||
})
|
||||
|
||||
test("pressing up when nothing is selected selects the first in the list", async () => {
|
||||
const wrapper = factory(props)
|
||||
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("a")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowUp",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
|
||||
})
|
||||
|
||||
test("pressing down arrow when nothing is selected selects the first in the list", async () => {
|
||||
const wrapper = factory(props)
|
||||
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("a")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowDown",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
|
||||
})
|
||||
|
||||
test("pressing down arrow moves down the selection list", async () => {
|
||||
const wrapper = factory(props)
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("a")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowDown",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowDown",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.findAll("li").at(1).element.classList.contains("active")).toEqual(true)
|
||||
})
|
||||
|
||||
test("pressing up arrow moves up the selection list", async () => {
|
||||
const wrapper = factory(props)
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("a")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowDown",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowDown",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowUp",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
|
||||
})
|
||||
|
||||
test("pressing down arrow at the end of the list doesn't update the selection", async () => {
|
||||
const wrapper = factory(props)
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("b")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowDown",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowDown",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.findAll("li").at(1).element.classList.contains("active")).toEqual(true)
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowDown",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.findAll("li").at(1).element.classList.contains("active")).toEqual(true)
|
||||
})
|
||||
|
||||
test("pressing up arrow at the top of the list doesn't update the selection", async () => {
|
||||
const wrapper = factory(props)
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("b")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowDown",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowUp",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowUp",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
|
||||
})
|
||||
|
||||
test("pressing tab performs the current completion", async () => {
|
||||
const wrapper = factory(props)
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("a")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowDown",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const selectedSuggestion = wrapper.find("li.active").text()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "Tab",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(input.element.value).toEqual(`a${selectedSuggestion}`)
|
||||
})
|
||||
|
||||
test("pressing tab when nothing is selected selects the first suggestion", async () => {
|
||||
const wrapper = factory(props)
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("a")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const firstSuggestionText = wrapper.findAll("li").at(0).text()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "Tab",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(input.element.value).toEqual(`a${firstSuggestionText}`)
|
||||
})
|
||||
|
||||
test("pressing any non-special key doesn't do anything", async () => {
|
||||
const wrapper = factory(props)
|
||||
const input = wrapper.find("input")
|
||||
|
||||
await input.setValue("a")
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "ArrowDown",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const selectedSuggestion = wrapper.find("li.active").text()
|
||||
|
||||
await input.trigger("keydown", {
|
||||
code: "Tab",
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(input.element.value).toEqual(`a${selectedSuggestion}`)
|
||||
})
|
||||
})
|
||||
85
components/smart/__tests__/Tab.spec.js
Normal file
85
components/smart/__tests__/Tab.spec.js
Normal file
@@ -0,0 +1,85 @@
|
||||
import tab from "../Tab"
|
||||
import { mount } from "@vue/test-utils"
|
||||
|
||||
const factory = (props, data) => {
|
||||
if (data) {
|
||||
return mount(tab, {
|
||||
propsData: props,
|
||||
data: () => data,
|
||||
slots: {
|
||||
default: '<div id="testdiv"></div>',
|
||||
},
|
||||
})
|
||||
} else {
|
||||
return mount(tab, {
|
||||
propsData: props,
|
||||
slots: {
|
||||
default: '<div id="testdiv"></div>',
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
describe("tab", () => {
|
||||
test("mounts properly when needed props are passed in", () => {
|
||||
const wrapper = factory({
|
||||
label: "TestLabel",
|
||||
icon: "TestIcon",
|
||||
id: "testid",
|
||||
selected: true,
|
||||
})
|
||||
|
||||
expect(wrapper).toBeTruthy()
|
||||
})
|
||||
|
||||
test("mounts properly when selected prop is not passed", () => {
|
||||
const wrapper = factory({
|
||||
label: "TestLabel",
|
||||
icon: "TestIcon",
|
||||
id: "testid",
|
||||
})
|
||||
|
||||
expect(wrapper).toBeTruthy()
|
||||
})
|
||||
|
||||
test("if 'selected' prop is not passed, it is set to false by default", () => {
|
||||
const wrapper = factory({
|
||||
label: "TestLabel",
|
||||
icon: "TestIcon",
|
||||
id: "testid",
|
||||
})
|
||||
|
||||
expect(wrapper.props("selected")).toEqual(false)
|
||||
})
|
||||
|
||||
test("if set active, the slot is shown", () => {
|
||||
const wrapper = factory(
|
||||
{
|
||||
label: "TestLabel",
|
||||
icon: "TestIcon",
|
||||
id: "testid",
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
isActive: true,
|
||||
}
|
||||
)
|
||||
|
||||
expect(wrapper.find("#testdiv").element.parentElement).toBeVisible()
|
||||
})
|
||||
|
||||
test("if not set active, the slot is not rendered", () => {
|
||||
const wrapper = factory(
|
||||
{
|
||||
label: "TestLabel",
|
||||
icon: "TestIcon",
|
||||
id: "testid",
|
||||
},
|
||||
{
|
||||
isActive: false,
|
||||
}
|
||||
)
|
||||
|
||||
expect(wrapper.find("#testdiv").element.parentElement).not.toBeVisible()
|
||||
})
|
||||
})
|
||||
68
components/smart/__tests__/Tabs.spec.js
Normal file
68
components/smart/__tests__/Tabs.spec.js
Normal file
@@ -0,0 +1,68 @@
|
||||
import tabs from "../Tabs"
|
||||
import tab from "../Tab"
|
||||
|
||||
import { mount } from "@vue/test-utils"
|
||||
|
||||
const factory = () =>
|
||||
mount(tabs, {
|
||||
slots: {
|
||||
default: [
|
||||
`<Tab id="tab1" href="#" :label="'tab 1'" :icon="'testicon1'" :selected=true><div id="tab1render">tab1</div></Tab>`,
|
||||
`<Tab id="tab2" href="#" :label="'tab 2'" :icon="'testicon2'"><div id="tab2render">tab1</div></Tab>`,
|
||||
`<Tab id="tab3" href="#" :label="'tab 3'" :icon="'testicon3'"><div id="tab3render">tab1</div></Tab>`,
|
||||
],
|
||||
},
|
||||
stubs: {
|
||||
"Tab": tab,
|
||||
},
|
||||
})
|
||||
|
||||
describe("tabs", () => {
|
||||
test("mounts properly", async () => {
|
||||
const wrapper = factory()
|
||||
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper).toBeTruthy()
|
||||
})
|
||||
|
||||
test("tab labels shown", async () => {
|
||||
const wrapper = factory()
|
||||
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const labels = wrapper.findAll("li a span").wrappers.map((w) => w.text())
|
||||
expect(labels).toEqual(["tab 1", "tab 2", "tab 3"])
|
||||
})
|
||||
|
||||
test("tab icons are shown", async () => {
|
||||
const wrapper = factory()
|
||||
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const labels = wrapper.findAll("li a i").wrappers.map((w) => w.text())
|
||||
expect(labels).toEqual(["testicon1", "testicon2", "testicon3"])
|
||||
})
|
||||
|
||||
test("clicking on tab labels switches the selected page", async () => {
|
||||
const wrapper = factory()
|
||||
|
||||
await wrapper.vm.$nextTick()
|
||||
wrapper.vm.selectTab({ id: "tab2" })
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.vm.$data.tabs[1].$data.isActive).toEqual(true)
|
||||
})
|
||||
|
||||
test("switched tab page is rendered and the other page is not rendered", async () => {
|
||||
const wrapper = factory()
|
||||
|
||||
await wrapper.vm.$nextTick()
|
||||
wrapper.vm.selectTab({ id: "tab2" })
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.vm.$data.tabs[0].$data.isActive).toEqual(false)
|
||||
expect(wrapper.vm.$data.tabs[1].$data.isActive).toEqual(true)
|
||||
expect(wrapper.vm.$data.tabs[2].$data.isActive).toEqual(false)
|
||||
})
|
||||
})
|
||||
52
components/smart/__tests__/Toggle.spec.js
Normal file
52
components/smart/__tests__/Toggle.spec.js
Normal file
@@ -0,0 +1,52 @@
|
||||
import pwToggle from "../Toggle"
|
||||
import { mount } from "@vue/test-utils"
|
||||
|
||||
const factory = (props, slot) =>
|
||||
mount(pwToggle, {
|
||||
propsData: props,
|
||||
slots: {
|
||||
default: slot,
|
||||
},
|
||||
})
|
||||
|
||||
describe("pwToggle", () => {
|
||||
test("mounts properly", () => {
|
||||
const wrapper = factory({ on: true }, "test")
|
||||
|
||||
expect(wrapper).toBeTruthy()
|
||||
})
|
||||
|
||||
test("mounts even without the on prop", () => {
|
||||
const wrapper = factory({}, "test")
|
||||
|
||||
expect(wrapper).toBeTruthy()
|
||||
})
|
||||
|
||||
test("state is set correctly through the prop", () => {
|
||||
const wrapper1 = factory({ on: true }, "test")
|
||||
expect(wrapper1.vm.$refs.toggle.classList.contains("on")).toEqual(true)
|
||||
|
||||
const wrapper2 = factory({ on: false }, "test")
|
||||
expect(wrapper2.vm.$refs.toggle.classList.contains("on")).toEqual(false)
|
||||
})
|
||||
|
||||
test("caption label is rendered", () => {
|
||||
const wrapper = factory({ on: true }, "<span id='testcaption'></span>")
|
||||
|
||||
expect(wrapper.find("#testcaption").exists()).toEqual(true)
|
||||
})
|
||||
|
||||
test("clicking the button toggles the state", async () => {
|
||||
const wrapper = factory({ on: true }, "test")
|
||||
|
||||
wrapper.vm.toggle()
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.vm.$refs.toggle.classList.contains("on")).toEqual(false)
|
||||
|
||||
wrapper.vm.toggle()
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.vm.$refs.toggle.classList.contains("on")).toEqual(true)
|
||||
})
|
||||
})
|
||||
35
components/smart/__tests__/UrlField.spec.js
Normal file
35
components/smart/__tests__/UrlField.spec.js
Normal file
@@ -0,0 +1,35 @@
|
||||
import urlField from "../UrlField"
|
||||
import { mount } from "@vue/test-utils"
|
||||
|
||||
const factory = (props) =>
|
||||
mount(urlField, {
|
||||
propsData: props,
|
||||
})
|
||||
|
||||
/*
|
||||
* NOTE : jsdom as of yet doesn't support contenteditable features
|
||||
* hence, the test suite is pretty limited as it is not easy to test
|
||||
* inputting values.
|
||||
*/
|
||||
|
||||
describe("url-field", () => {
|
||||
test("mounts properly", () => {
|
||||
const wrapper = factory({
|
||||
value: "test",
|
||||
})
|
||||
|
||||
expect(wrapper.vm).toBeTruthy()
|
||||
})
|
||||
test("highlights environment variables", () => {
|
||||
const wrapper = factory({
|
||||
value: "https://hoppscotch.io/<<testa>>/<<testb>>",
|
||||
})
|
||||
|
||||
const highlights = wrapper.findAll(".highlight-VAR").wrappers
|
||||
|
||||
expect(highlights).toHaveLength(2)
|
||||
|
||||
expect(highlights[0].text()).toEqual("<<testa>>")
|
||||
expect(highlights[1].text()).toEqual("<<testb>>")
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user