Fix remote data e2e test

This commit is contained in:
Xon 2024-08-19 10:00:37 +08:00
commit 00a328196b
6 changed files with 23 additions and 34 deletions

View file

@ -1362,24 +1362,14 @@ class Choices {
_handleLoadingState(setLoading = true): void {
const { config } = this;
let placeholderItem = this.itemList.element.querySelector<HTMLElement>(
getClassNamesSelector(config.classNames.placeholder),
);
if (setLoading) {
this.disable();
this.containerOuter.addLoadingState();
if (this._isSelectOneElement) {
if (!placeholderItem) {
placeholderItem = this._templates.placeholder(config, config.loadingText);
if (placeholderItem) {
this.itemList.append(placeholderItem);
}
} else {
placeholderItem.innerHTML = config.loadingText;
}
this.itemList.clear();
this.itemList.append(this._templates.placeholder(config, config.loadingText));
} else {
this.input.placeholder = config.loadingText;
}
@ -1387,11 +1377,7 @@ class Choices {
this.enable();
this.containerOuter.removeLoadingState();
if (this._isSelectOneElement) {
if (placeholderItem) {
placeholderItem.innerHTML = this._placeholderValue || '';
}
} else {
if (!this._isSelectOneElement) {
this.input.placeholder = this._placeholderValue || '';
}
}

View file

@ -20,11 +20,21 @@ export class SelectTestSuit extends TestSuit {
}
async start(textInput?: string): Promise<void> {
await this.page.route('/test/data.json', async (route) => {
await this.page.route('**/data.json', async (route) => {
await new Promise((f) => {
setTimeout(f, 1000);
setTimeout(f, 250);
});
const fakeData = [...new Array(10)].map((_, index) => ({
label: `Label ${index + 1}`,
value: `Value ${index + 1}`,
}));
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify(fakeData),
});
await route.continue();
});
await super.start(textInput);

View file

@ -1,5 +1,4 @@
import { expect, type Locator, type Page } from '@playwright/test';
import { sanitise } from '../src/scripts/lib/utils';
export class TestSuit {
readonly testId: string;
@ -48,7 +47,6 @@ export class TestSuit {
await this.page.goto(this.url);
await this.group.scrollIntoViewIfNeeded();
await this.advanceClock();
if (textInput) {
await this.typeTextAndEnter(textInput);
@ -122,7 +120,6 @@ export class TestSuit {
await this.advanceClock();
}
async expectVisibleDropdown(text?: string): Promise<void> {
await this.advanceClock();

View file

@ -482,15 +482,12 @@ describe(`Choices - select multiple`, () => {
const suite = new SelectTestSuit(page, bundle, testUrl, testId);
await suite.start();
const placeholder = suite.itemsWithPlaceholder.first();
await expect(placeholder).toHaveClass(/choices__placeholder/);
await expect(placeholder).toHaveText('Loading...');
await expect(suite.input).toHaveAttribute('placeholder', 'Loading...');
await jsonLoad;
await suite.selectByClick();
await expect(placeholder).toHaveClass(/choices__placeholder/);
await expect(placeholder).toHaveText('I am a placeholder');
await expect(suite.input).toHaveAttribute('placeholder', 'I am a placeholder');
await expect(suite.selectableChoices).toHaveCount(10);
});
});

View file

@ -405,15 +405,14 @@ describe(`Choices - select one`, () => {
const suite = new SelectTestSuit(page, bundle, testUrl, testId);
await suite.start();
const placeholder = suite.itemsWithPlaceholder.first();
await expect(placeholder).toHaveClass(/choices__placeholder/);
await expect(placeholder).toHaveText('Loading...');
await expect(suite.itemList.first()).toHaveText('Loading...');
await jsonLoad;
await suite.selectByClick();
await expect(placeholder).toHaveClass(/choices__placeholder/);
await expect(placeholder).toHaveText('I am a placeholder');
const firstItem = suite.itemsWithPlaceholder.first();
await expect(firstItem).toHaveClass(/choices__placeholder/);
await expect(firstItem).toHaveText('I am a placeholder');
await expect(suite.selectableChoices).toHaveCount(10);
});
});

View file

@ -1,7 +1,7 @@
import { expect } from 'chai';
// eslint-disable-next-line import/no-named-default
import { default as _templates } from '../../src/scripts/templates';
import { strToEl, getClassNames, canUseDom } from '../../src/scripts/lib/utils';
import { strToEl, getClassNames } from '../../src/scripts/lib/utils';
import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG, Options, ClassNames } from '../../src';
import { NoticeTypes, Templates as TemplatesInterface } from '../../src/scripts/interfaces/templates';