Body
+\nCompany"); } - public function test_it_can_set_the_table_cell_from_model() + #[Test] + public function it_can_set_the_table_cell_from_model() { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('table-cell-model'); $this->visit('/table-cell-model') @@ -107,9 +85,10 @@ public function test_it_can_set_the_table_cell_from_model() }); } - public function test_it_can_set_the_table_cell_from_value() + #[Test] + public function it_can_set_the_table_cell_from_value() { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('table-cell-value'); $this->visit('/table-cell-value') @@ -117,19 +96,10 @@ public function test_it_can_set_the_table_cell_from_value() ->seeInElement('td', 'Javaabu'); } - public function test_it_can_generate_bootstrap_5_table_cell() - { - $this->setFrameworkBootstrap5(); - $this->registerTestRoute('table-cell'); - - $this->visit('/table-cell') - ->seeElement('td') - ->seeInElement('td', 'Javaabu'); - } - - public function test_it_can_generate_material_admin_26_table_cell() + #[Test] + public function it_can_generate_bootstrap_6_table_cell() { - $this->setFrameworkMaterialAdmin26(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('table-cell'); $this->visit('/table-cell') diff --git a/tests/Feature/TableTest.php b/tests/Feature/TableTest.php index a77c00d..b48147c 100644 --- a/tests/Feature/TableTest.php +++ b/tests/Feature/TableTest.php @@ -5,14 +5,16 @@ use Illuminate\Foundation\Testing\RefreshDatabase; use Javaabu\Forms\Tests\TestCase; use Javaabu\Forms\Tests\TestSupport\Models\Activity; +use PHPUnit\Framework\Attributes\Test; class TableTest extends TestCase { use RefreshDatabase; - public function test_it_can_generate_bootstrap_5_table() + #[Test] + public function it_can_generate_bootstrap_6_table() { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('table'); $this->visit('table') @@ -47,9 +49,10 @@ public function test_it_can_generate_bootstrap_5_table() }); } - public function test_it_can_generate_bootstrap_5_striped_table() + #[Test] + public function it_can_generate_bootstrap_6_striped_table() { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('table'); $this->visit('table') @@ -59,9 +62,10 @@ public function test_it_can_generate_bootstrap_5_striped_table() }); } - public function test_it_can_generate_material_26_table() + #[Test] + public function it_can_generate_a_table_with_row_checkboxes() { - $this->setFrameworkMaterialAdmin26(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('table'); $this->visit('table') @@ -91,7 +95,7 @@ public function test_it_can_generate_material_26_table() ->within('tr', function () use ($activity) { $this ->seeElement('.td-checkbox') - ->seeElement('input[type="checkbox"][id="activities-'. $activity->id . '-row-check"]') + ->seeElement('input[type="checkbox"][id="activities-' . $activity->id . '-row-check"]') ->seeInElement('td', $activity->id) ->seeInElement('td', $activity->date_a) ->seeInElement('td', $activity->date_b) @@ -106,14 +110,15 @@ public function test_it_can_generate_material_26_table() // Pagination check $this->seeElement('div.dataTables_info'); - //$this->seeInElement('div.dataTables_info', 'Showing 2 from total 20 entries'); + // $this->seeInElement('div.dataTables_info', 'Showing 2 from total 20 entries'); $this->seeInElement('div', 'Previous'); }); } - public function test_it_displays_empty_table_message_when_no_matching_rows() + #[Test] + public function it_displays_empty_table_message_when_no_matching_rows() { - $this->setFrameworkMaterialAdmin26(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('table'); $this->visit('table') diff --git a/tests/Feature/TabsTest.php b/tests/Feature/TabsTest.php index db976a4..2acfdb7 100644 --- a/tests/Feature/TabsTest.php +++ b/tests/Feature/TabsTest.php @@ -3,79 +3,14 @@ namespace Javaabu\Forms\Tests\Feature; use Javaabu\Forms\Tests\TestCase; +use PHPUnit\Framework\Attributes\Test; class TabsTest extends TestCase { - public function test_it_can_generate_material_admin_26_tabs() + #[Test] + public function it_can_generate_bootstrap_6_tabs() { - $this->setFrameworkMaterialAdmin26(); - $this->registerTestRoute('tabs'); - - $this->visit('/tabs') - ->seeElement('div.tab-container') - ->within('.tab-container', function () { - $this->seeElement('ul.nav.nav-tabs') - ->within('ul.nav.nav-tabs', function () { - // first tab - $this->seeElement('li.nav-item:nth-child(1)') - ->within('li.nav-item:nth-child(1)', function () { - $this->seeElement('a.nav-link[href="#first-tab"][data-toggle="tab"][role="tab"]') - ->seeInElement('a.nav-link', 'First Tab Title') - ->dontSeeElement('a.active'); - }); - - // active tab - $this->seeElement('li.nav-item:nth-child(2)') - ->within('li.nav-item:nth-child(2)', function () { - $this->seeElement('a.nav-link.active[href="#active-tab"][data-toggle="tab"][role="tab"]') - ->seeInElement('a.nav-link', 'Active Tab'); - }); - - // disabled tab - $this->seeElement('li.nav-item:nth-child(3)') - ->within('li.nav-item:nth-child(3)', function () { - $this->seeElement('a.nav-link.disabled[href="#disabled-tab"][data-toggle="tab"][role="tab"]') - ->seeInElement('a.nav-link', 'Disabled Tab') - ->dontSeeElement('a.active'); - }); - - // external tab - $this->seeElement('li.nav-item:nth-child(4)') - ->within('li.nav-item:nth-child(4)', function () { - $this->seeElement('a.nav-link[href="http://example.com"]') - ->seeInElement('a.nav-link', 'External Tab') - ->dontSeeElement('a.active'); - }); - }); - - $this->seeElement('div.tab-content') - ->within('.tab-content', function () { - $this->seeElementCount('div.tab-pane', 3); - - // first tab - $this->seeElement('div.tab-pane#first-tab[role="tabpanel"]') - ->dontSeeElement('#first-tab.active') - ->seeInElement('#first-tab', 'First Tab Content'); - - // active tab - $this->seeElement('div.tab-pane.active.show#active-tab[role="tabpanel"]') - ->seeInElement('#active-tab', 'Active Tab Content'); - - // disabled tab - $this->seeElement('div.tab-pane#disabled-tab[role="tabpanel"]') - ->dontSeeElement('#disabled.active') - ->seeInElement('#disabled-tab', 'Disabled Tab Content'); - - // external tab - $this->dontSeeElement('div.tab-pane#external-tab'); - }); - }); - - } - - public function test_it_can_generate_bootstrap_5_tabs() - { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('tabs'); $this->visit('/tabs') diff --git a/tests/Feature/TextEntryTest.php b/tests/Feature/TextEntryTest.php index 798d832..bc887c6 100644 --- a/tests/Feature/TextEntryTest.php +++ b/tests/Feature/TextEntryTest.php @@ -3,12 +3,14 @@ namespace Javaabu\Forms\Tests\Feature; use Javaabu\Forms\Tests\TestCase; +use PHPUnit\Framework\Attributes\Test; class TextEntryTest extends TestCase { - public function test_it_can_render_enum_entries_for_bootstrap_5() + #[Test] + public function it_can_render_enum_entries_for_bootstrap_6() { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('text-entry-enum'); $this->visit('/text-entry-enum') @@ -24,27 +26,10 @@ public function test_it_can_render_enum_entries_for_bootstrap_5() } - public function test_it_can_render_enum_entries_for_material_admin_26() + #[Test] + public function it_can_render_status_entries_for_bootstrap_6() { - $this->setFrameworkMaterialAdmin26(); - $this->registerTestRoute('text-entry-enum'); - - $this->visit('/text-entry-enum') - ->seeElement('dl') - ->within('dl', function () { - $this->seeElement('dt') - ->seeInElement('dt', 'Type') - ->seeElement('dd') - ->within('dd', function () { - $this->seeText('Report Article'); - }); - }); - - } - - public function test_it_can_render_status_entries_for_bootstrap_5() - { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('text-entry-status'); $this->visit('/text-entry-status') @@ -54,7 +39,7 @@ public function test_it_can_render_status_entries_for_bootstrap_5() ->seeInElement('dt', 'Status') ->seeElement('dd') ->within('dd', function () { - $this->seeElement('span.status.text-bg-success') + $this->seeElement('span.status.badge.theme-success') ->within('span.status', function () { $this->seeText('Published'); }); @@ -63,30 +48,10 @@ public function test_it_can_render_status_entries_for_bootstrap_5() } - public function test_it_can_render_status_entries_for_material_admin_26() + #[Test] + public function it_can_render_array_entries() { - $this->setFrameworkMaterialAdmin26(); - $this->registerTestRoute('text-entry-status'); - - $this->visit('/text-entry-status') - ->seeElement('dl') - ->within('dl', function () { - $this->seeElement('dt') - ->seeInElement('dt', 'Status') - ->seeElement('dd') - ->within('dd', function () { - $this->seeElement('span.status.bg-success') - ->within('span.status', function () { - $this->seeText('Published'); - }); - }); - }); - - } - - public function test_it_can_render_array_entries() - { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('text-entry-array'); $this->visit('/text-entry-array') @@ -99,9 +64,10 @@ public function test_it_can_render_array_entries() }); } - public function test_it_can_render_boolean_entries() + #[Test] + public function it_can_render_boolean_entries() { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('boolean-entry'); $this->visit('/boolean-entry') @@ -114,9 +80,10 @@ public function test_it_can_render_boolean_entries() }); } - public function test_it_can_render_multiline_text_entries() + #[Test] + public function it_can_render_multiline_text_entries() { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('text-entry-multiline'); $this->visit('/text-entry-multiline') @@ -129,9 +96,10 @@ public function test_it_can_render_multiline_text_entries() }); } - public function test_it_can_set_the_text_entry_from_model() + #[Test] + public function it_can_set_the_text_entry_from_model() { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('text-entry-model'); $this->visit('/text-entry-model') @@ -147,9 +115,10 @@ public function test_it_can_set_the_text_entry_from_model() }); } - public function test_it_can_set_the_text_entry_from_value() + #[Test] + public function it_can_set_the_text_entry_from_value() { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('text-entry-value'); $this->visit('/text-entry-value') @@ -162,24 +131,10 @@ public function test_it_can_set_the_text_entry_from_value() }); } - public function test_it_can_generate_bootstrap_5_text_entry() - { - $this->setFrameworkBootstrap5(); - $this->registerTestRoute('text-entry'); - - $this->visit('/text-entry') - ->seeElement('dl') - ->within('dl', function () { - $this->seeElement('dt') - ->seeInElement('dt', 'Name') - ->seeElement('dd') - ->seeInElement('dd', 'Javaabu'); - }); - } - - public function test_it_can_generate_material_admin_26_text_entry() + #[Test] + public function it_can_generate_bootstrap_6_text_entry() { - $this->setFrameworkMaterialAdmin26(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('text-entry'); $this->visit('/text-entry') diff --git a/tests/Feature/TextareaTest.php b/tests/Feature/TextareaTest.php index 6f81280..af50487 100644 --- a/tests/Feature/TextareaTest.php +++ b/tests/Feature/TextareaTest.php @@ -3,12 +3,12 @@ namespace Javaabu\Forms\Tests\Feature; use Illuminate\Support\Facades\Config; -use Illuminate\Support\Facades\Route; use Javaabu\Forms\Tests\TestCase; +use PHPUnit\Framework\Attributes\Test; class TextareaTest extends TestCase { - public function setUp(): void + protected function setUp(): void { parent::setUp(); @@ -16,9 +16,10 @@ public function setUp(): void Config::set('forms.inputs.inline', false); } - public function test_it_can_generate_bootstrap_5_form_textarea() + #[Test] + public function it_can_generate_bootstrap_6_form_textarea() { - $this->setFrameworkBootstrap5(); + $this->setFrameworkBootstrap6(); $this->registerTestRoute('form-textarea'); $this->visit('/form-textarea') @@ -32,30 +33,24 @@ public function test_it_can_generate_bootstrap_5_form_textarea() }); } - public function test_it_can_generate_material_admin_26_form_textarea() + #[Test] + public function it_adds_the_tinymce_script_to_the_scripts_stack_for_wysiwyg_inputs() { - $this->setFrameworkMaterialAdmin26(); - $this->registerTestRoute('form-textarea'); + $this->registerTestRoute('wysiwyg'); - $this->visit('/form-textarea') - ->seeElement('div.form-group') - ->within('div.form-group', function () { - $this->seeElement('textarea[name="title"][id="title"].form-control') - ->seeElement('textarea[rows="3"]') - ->seeInElement('textarea[name="title"][id="title"].form-control', 'Lorem ipsum') - ->seeElement('i.form-group__bar') - ->seeElement('label[for="title"]') - ->seeInElement('label', 'Title'); - }); + $this->visit('/wysiwyg') + ->seeElement('textarea[name="title"][id="title"].wysiwyg') + ->seeElement('script[src$="vendors/tinymce/tinymce.min.js"]'); } - public function test_it_adds_the_tinymce_script_to_the_scripts_stack_for_wysiwyg_inputs() + #[Test] + public function it_loads_tinymce_from_the_configured_url(): void { + config()->set('forms.wysiwyg.tinymce_url', 'https://cdn.example.com/tinymce/7/tinymce.min.js'); + $this->registerTestRoute('wysiwyg'); $this->visit('/wysiwyg') - ->seeElement('textarea[name="title"][id="title"].wysiwyg') - ->seeElement('script') - ->seeInElement('script', 'tinymce'); + ->seeElement('script[src="https://cdn.example.com/tinymce/7/tinymce.min.js"]'); } } diff --git a/tests/TestCase.php b/tests/TestCase.php index e2d59d6..6a38191 100644 --- a/tests/TestCase.php +++ b/tests/TestCase.php @@ -2,19 +2,25 @@ namespace Javaabu\Forms\Tests; +use Composer\InstalledVersions; use Composer\Semver\VersionParser; use Illuminate\Database\Eloquent\Model; use Illuminate\Support\Facades\Artisan; +use Illuminate\Support\Facades\Blade; use Illuminate\Support\Facades\Config; use Illuminate\Support\Facades\Route; use Illuminate\Support\Facades\Storage; use Illuminate\Support\Facades\View; +use Illuminate\Support\MessageBag; +use Illuminate\Support\ViewErrorBag; use Javaabu\Forms\FormsServiceProvider; use Javaabu\Forms\Tests\TestSupport\Providers\TestServiceProvider; use Javaabu\Helpers\HelpersServiceProvider; +use Javaabu\Manifest\ManifestServiceProvider; use Javaabu\Settings\SettingsServiceProvider; use Orchestra\Testbench\BrowserKit\TestCase as BaseTestCase; use Spatie\MediaLibrary\MediaLibraryServiceProvider; +use Symfony\Component\DomCrawler\Crawler; abstract class TestCase extends BaseTestCase { @@ -32,10 +38,10 @@ public static function isLaravel10(): bool public static function isMediaLibrary10(): bool { - return \Composer\InstalledVersions::satisfies(new VersionParser(), 'spatie/laravel-medialibrary', '10.*'); + return InstalledVersions::satisfies(new VersionParser, 'spatie/laravel-medialibrary', '10.*'); } - public function setUp(): void + protected function setUp(): void { parent::setUp(); @@ -43,7 +49,13 @@ public function setUp(): void $this->app['config']->set('session.serialization', 'php'); - //$this->app['config']->set('form-components.framework', env('FORM_COMPONENTS_FRAMEWORK', 'tailwind')); + // Tests check which assets components require; AssetsTest covers injection. + $this->app['config']->set('manifest.inject', false); + + // Behaviour tests render with Bootstrap 6; framework tests pick their own. + $this->app['config']->set('forms.framework', 'bootstrap-6'); + + // $this->app['config']->set('form-components.framework', env('FORM_COMPONENTS_FRAMEWORK', 'tailwind')); View::addLocation(__DIR__ . '/TestSupport/views'); @@ -65,11 +77,34 @@ protected function getPackageProviders($app) SettingsServiceProvider::class, MediaLibraryServiceProvider::class, HelpersServiceProvider::class, + ManifestServiceProvider::class, FormsServiceProvider::class, TestServiceProvider::class, ]; } + /** + * Renders a Blade string and returns a crawler for the HTML. + * + * @param array
+
+
`)
+
+ init()
+ expect(input("#name").disabled).toBe(true)
+ expect(input("#name").classList.contains("auto-disabled")).toBe(true)
+ expect($
+
+
`)
+
+ init()
+ $
+
+
`)
+
+ init()
+ expect($("#section").hidden).toBe(false)
+ expect(input("#field").disabled).toBe(false)
+
+ input("#three").checked = true
+ fire(input("#three"))
+ expect($("#section").hidden).toBe(true)
+ expect(input("#field").disabled).toBe(true)
+ })
+
+ it("compares numbers loosely and reads multiple selects", () => {
+ html(`
+
+ `)
+
+ init()
+ expect($("#section").hidden).toBe(true)
+
+ $
+
+
`)
+
+ init()
+ expect(input("#f").disabled).toBe(true)
+ expect($`)
+ expect(all($("#root"), ".x")).toHaveLength(2)
+ expect(all(document, ".x")).toHaveLength(2)
+ })
+
+ it("ignores invalid selectors", () => {
+ expect(select("[[[")).toEqual([])
+ expect(select("")).toEqual([])
+ expect(picks("[[[", document.body)).toBe(false)
+ expect(picks(null, document.body)).toBe(false)
+ expect(picks("body", document.body)).toBe(true)
+ })
+
+ it("reads data attributes like jQuery", () => {
+ html(
+ ``,
+ )
+ const el = $("#a")
+
+ expect(data(el, "t")).toBe(true)
+ expect(data(el, "f")).toBe(false)
+ expect(data(el, "n")).toBe(12)
+ expect(data(el, "null")).toBeNull()
+ expect(data(el, "j")).toEqual(["1", "2"])
+ expect(data(el, "o")).toEqual({ a: 1 })
+ expect(data(el, "bad")).toBe("[oops")
+ expect(data(el, "s")).toBe("ދިވެހި")
+ expect(data(el, "missing")).toBeUndefined()
+ expect(flag(el, "e")).toBe(false)
+ expect(flag(el, "t")).toBe(true)
+ })
+
+ it("escapes html", () => {
+ expect(escapeHtml(`'&'`)).toBe("<a href="x">'&'</a>")
+ expect(escapeHtml(null)).toBe("")
+ })
+
+ it("knows the direction", () => {
+ html(``)
+ expect(isRtl($("#a"))).toBe(true)
+ expect(isRtl($("#b"))).toBe(false)
+ expect(isRtl()).toBe(false)
+ })
+
+ it("reads values", () => {
+ html(`
+
+
+
+
+ `)
+
+ expect(valueOf($("#m"))).toEqual(["1", "2"])
+ expect(valueOf($("#t"))).toBe("ހ")
+ expect(valueOf($("#d"))).toBe("")
+ expect(currentValue(select("[name=r]"))).toBe("b")
+ expect(currentValue(select("[name=c]"))).toEqual(["x"])
+ expect(currentValue(select("#t"))).toBe("ހ")
+ expect(isBlank([])).toBe(true)
+ expect(isBlank("")).toBe(true)
+ expect(isBlank("0")).toBe(false)
+ })
+
+ it("runs when the DOM is ready", () => {
+ const fn = vi.fn()
+ onReady(fn)
+ expect(fn).toHaveBeenCalledOnce()
+
+ const state = vi.spyOn(document, "readyState", "get").mockReturnValue("loading")
+ const later = vi.fn()
+ onReady(later)
+ expect(later).not.toHaveBeenCalled()
+ state.mockRestore()
+ document.dispatchEvent(new Event("DOMContentLoaded"))
+ expect(later).toHaveBeenCalledOnce()
+ })
+
+ it("initialises on load and again for added content", async () => {
+ document.documentElement.removeAttribute("data-forms-manual")
+ const init = vi.fn()
+
+ autoInit(init, 0)
+ expect(init).toHaveBeenCalledTimes(1)
+
+ document.body.appendChild(document.createTextNode("ނޯޑު"))
+ await flush()
+ expect(init).toHaveBeenCalledTimes(1)
+
+ document.body.appendChild(document.createElement("div"))
+ await flush()
+ expect(init).toHaveBeenCalledTimes(2)
+
+ document.documentElement.setAttribute("data-forms-manual", "")
+ })
+
+ it("does nothing in manual mode", () => {
+ const init = vi.fn()
+ autoInit(init)
+ expect(init).not.toHaveBeenCalled()
+ })
+})
diff --git a/tests/js/files.test.ts b/tests/js/files.test.ts
new file mode 100644
index 0000000..957f5ae
--- /dev/null
+++ b/tests/js/files.test.ts
@@ -0,0 +1,317 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { accepts, after, clear, init, remove, select, showError, upload } from "../../resources/js/files"
+import { $, click, fire, flush, html, jsonResponse, mockFetch, setFiles } from "./helpers"
+
+const image = (name = "ފޮޓޯ.png", type = "image/png", size = 10) => new File(["x".repeat(size)], name, { type })
+
+const fileInput = `
+
+
+
+
+
`
+
+const imageInput = `
+
+ 
+
+
+
`
+
+const uploadInput = (form = `action="/users/1" method="POST"`, extra = "") => `
+ `
+
+const file = () => $
+
+
+ `)
+
+ init()
+ init()
+
+ const ts = instanceOf(sel("#s"))!
+ expect(ts).toBeDefined()
+ expect(instanceOf(sel("#plain"))).toBeUndefined()
+ expect(ts.wrapper.classList.contains("h-8")).toBe(false)
+ expect(ts.wrapper.classList.contains("is-invalid")).toBe(true)
+ expect(ts.wrapper.classList.contains("select2-basic")).toBe(true)
+ expect(ts.items).toEqual(["1"])
+ expect(ts.settings.placeholder).toBe("ރަށް")
+ expect(ts.settings.maxOptions).toBeNull()
+ expect(document.querySelectorAll(".ts-wrapper")).toHaveLength(1)
+ expect(enhance(sel("#s"))).toBe(ts)
+ })
+
+ it("titles the clear button in the page's language", () => {
+ document.documentElement.setAttribute("lang", "dv")
+ html(``)
+ const ts = enhance(sel("#s"))
+
+ expect(ts.wrapper.querySelector(".clear-button")?.getAttribute("title")).toBe("ފޮހެލާ")
+ expect(ts.render("no_results", {})?.textContent).toBe("އެއްވެސް ނަތީޖާއެއް ނުފެނުނު")
+ expect(ts.render("loading", {})?.textContent).toBe("ލޯޑުވަނީ…")
+ })
+
+ it("hides the search box", () => {
+ html(``)
+ const ts = enhance(sel("#s"))
+
+ expect(ts.control.querySelector("input")).toBeNull()
+ expect(ts.settings.allowEmptyOption).toBe(true)
+ })
+
+ it("lets users add tags", () => {
+ html(``)
+ const ts = enhance(sel("#s"))
+
+ expect(ts.settings.create).toBe(true)
+ expect(ts.wrapper.classList.contains("plugin-remove_button")).toBe(true)
+ expect(ts.render("option_create", { input: "<ދ>" })?.innerHTML).toBe('Add "<ދ>"')
+ })
+
+ it("renders icons", () => {
+ html(``)
+ const ts = enhance(sel("#s"))
+
+ expect(ts.wrapper.querySelector(".item i")?.className).toBe("fa fa-home select2-icon")
+ expect(ts.render("option", { value: "", text: "-" })?.textContent).toBe("އައިކަން")
+ })
+
+ it("renders icons without a placeholder", () => {
+ html(``)
+ const ts = enhance(sel("#s"))
+ expect(ts.render("option", { value: "", text: "-" })?.textContent).toBe("-")
+ })
+
+ it("puts the dropdown in the given parent, when it exists", () => {
+ html(``)
+ expect(enhance(sel("#s")).dropdown.parentElement).toBe($("#m"))
+ expect(settingsFor(sel("#t")).dropdownParent).toBeUndefined()
+ })
+
+ it("follows the select's disabled state", async () => {
+ html(``)
+ const ts = enhance(sel("#s"))
+
+ sel("#s").disabled = true
+ await flush()
+ expect(ts.isDisabled).toBe(true)
+
+ sel("#s").disabled = false
+ await flush()
+ expect(ts.isDisabled).toBe(false)
+ })
+
+ it("re-reads changed options", () => {
+ html(``)
+ const ts = enhance(sel("#s"))
+
+ setOptions(
+ sel("#s"),
+ [
+ { value: "3", text: "ތިން" },
+ { value: "4", text: "ހަތަރެއް" },
+ ],
+ "4",
+ )
+ expect(Object.keys(ts.options)).toEqual(["3", "4"])
+ expect(ts.items).toEqual(["4"])
+
+ sel("#s").disabled = true
+ refresh(sel("#s"))
+ expect(ts.isDisabled).toBe(true)
+
+ refresh(document.createElement("select"))
+ })
+
+ it("keeps an empty placeholder option when replacing options", () => {
+ html(`
+ `)
+
+ setOptions(sel("#s"), [{ value: "2", text: "ދެ" }])
+ expect(sel("#s").options).toHaveLength(2)
+ expect(sel("#s").value).toBe("")
+
+ setOptions(
+ sel("#m"),
+ [
+ { value: "2", text: "ދެ" },
+ { value: "3", text: "ތިން" },
+ ],
+ ["2", "3"],
+ )
+ expect(Array.from(sel("#m").selectedOptions).map((o) => o.value)).toEqual(["2", "3"])
+ })
+})
+
+/** Tom Select debounces loads by loadThrottle (250ms). */
+async function settle(): Promise| ނަން | +ތާރީޚު | +ބާވަތް | ++ |
|---|
ސޭވްކުރެވިއްޖެ
`)
+ init()
+ click($("#x"))
+ expect(document.querySelector("#c")).toBeNull()
+ })
+
+ it("ignores Bootstrap alerts", () => {
+ html(`
+ `)
+ init()
+ click($("#x"))
+ click($("#y"))
+ expect(document.querySelector("#c")).not.toBeNull()
+ expect(document.querySelector("#d")).not.toBeNull()
+ })
+})
+
+describe("dialogs", () => {
+ const markup = `
+
+ ހުޅުވާ
+
+
+ `
+
+ describe("without showModal", () => {
+ it("opens and closes with the open attribute", () => {
+ html(markup)
+ init()
+ expect($("#dialog").getAttribute("data-state")).toBe("closed")
+
+ const event = click($("#open2"))
+ expect(event.defaultPrevented).toBe(true)
+ expect($
+
`
+
+ it("switches tabs on click", () => {
+ html(tabs())
+ init()
+ click($("#t2"))
+
+ expect($("#t2").getAttribute("aria-selected")).toBe("true")
+ expect($("#t2").getAttribute("data-state")).toBe("active")
+ expect($("#t2").tabIndex).toBe(0)
+ expect($("#t1").getAttribute("aria-selected")).toBe("false")
+ expect($("#t1").tabIndex).toBe(-1)
+ expect($("#p2").classList.contains("hidden")).toBe(false)
+ expect($("#p2").getAttribute("data-state")).toBe("active")
+ expect($("#p1").classList.contains("hidden")).toBe(true)
+ expect($("#p1").classList.contains("active")).toBe(false)
+
+ click($("#t3"))
+ expect($("#t2").getAttribute("aria-selected")).toBe("true")
+ })
+
+ it("moves with the arrow keys, skipping disabled tabs", () => {
+ html(tabs())
+ init()
+ $("#t1").focus()
+
+ key($("#t1"), "ArrowRight")
+ expect(document.activeElement).toBe($("#t2"))
+ key($("#t2"), "ArrowRight")
+ expect(document.activeElement).toBe($("#t4"))
+ key($("#t4"), "ArrowRight")
+ expect(document.activeElement).toBe($("#t1"))
+ key($("#t1"), "ArrowLeft")
+ expect(document.activeElement).toBe($("#t4"))
+ key($("#t4"), "Home")
+ expect(document.activeElement).toBe($("#t1"))
+ key($("#t1"), "End")
+ expect(document.activeElement).toBe($("#t4"))
+ expect(key($("#t4"), "a").defaultPrevented).toBe(false)
+ })
+
+ it("reverses the arrow keys right to left", () => {
+ html(tabs("rtl"))
+ init()
+ key($("#t1"), "ArrowLeft")
+ expect($("#t2").getAttribute("aria-selected")).toBe("true")
+ key($("#t2"), "ArrowRight")
+ expect($("#t1").getAttribute("aria-selected")).toBe("true")
+ })
+
+ it("uses up and down for vertical tabs", () => {
+ html(tabs().replace('role="tablist"', 'role="tablist" aria-orientation="vertical"'))
+ init()
+ key($("#t1"), "ArrowDown")
+ expect($("#t2").getAttribute("aria-selected")).toBe("true")
+ key($("#t2"), "ArrowUp")
+ expect($("#t1").getAttribute("aria-selected")).toBe("true")
+ })
+
+ it("handles missing panels", () => {
+ html(`
+
+
+
+
+
+ 1
+ 2
+ 4
+
+
`)
+ activateTab($("#a"))
+ expect($("#a").getAttribute("aria-selected")).toBe("true")
+ })
+})
+
+describe("menus", () => {
+ const menu = `
+ ބޭނުންތައް
+x
+ ބޭރު
` + + it("closes on an outside click", () => { + html(menu) + init() + click($("#inside")) + expect($