Update e2e tests to use shadow DOM selectors

Replaces standard CSS selectors with shadow DOM piercing selectors (>>>) in all E2E tests for the django-hstore-widget component. This ensures tests correctly target elements inside the web component's shadow DOM.

Bump version to 0.0.21

Update the project version in pyproject.toml from 0.0.20 to 0.0.21.

Author: baseplate-admin

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "django-hstore-widget"
-version = "0.0.20"
+version = "0.0.21"
 description = "Human friendly HStoreWidget. Continual of django-admin-hstore-widget."
 readme = "README.md"
 license = { text = "MIT" }

src/frontend/components/django-hstore-widget/test/django-hstore-widget.e2e.ts

@@ -13,68 +13,68 @@ describe('django-hstore-widget', () => {
         const page = await newE2EPage();
         await page.setContent(`<django-hstore-widget json='{"hello": "world"}'></django-hstore-widget>`);
 
-        const form_element = await page.findAll('div#json_items');
+        const form_element = await page.findAll('django-hstore-widget >>> div#json_items');
         expect(form_element.length).toBe(1);
     });
 
     it('error from django backend', async () => {
         const page = await newE2EPage();
         await page.setContent(`<django-hstore-widget json='{"hello": "wor"ld"}'></django-hstore-widget>`);
 
-        const element = await page.find('div#mount_error');
+        const element = await page.find('django-hstore-widget >>> div#mount_error');
         expect(element).not.toBeNull();
     });
 
     it('test input textbox component', async () => {
         const page = await newE2EPage();
         await page.setContent(`<django-hstore-widget json='{"hello": "world"}'></django-hstore-widget>`);
 
-        const open_textbox_toggle = await page.find('div#textarea_open_close_toggle');
+        const open_textbox_toggle = await page.find('django-hstore-widget >>> div#textarea_open_close_toggle');
         await open_textbox_toggle.click();
 
-        const textbox_element = await page.find('textarea');
+        const textbox_element = await page.find('django-hstore-widget >>> textarea');
         expect(textbox_element).not.toBeNull();
         expect(textbox_element).not.toHaveClasses(['hidden', 'invisible']);
 
-        await page.$eval('textarea', el => {
+        await page.$eval('django-hstore-widget >>> textarea', el => {
             el.value = '';
         });
 
         await textbox_element.type(`{"my":"World'}`);
         const value = await textbox_element.getProperty('value');
         expect(value).toBe(`{"my":"World'}`);
 
-        const textbox_error = await page.find('#textbox_error');
+        const textbox_error = await page.find('django-hstore-widget >>> #textbox_error');
         expect(textbox_error).not.toBeNull();
     });
 
     it('test delete click', async () => {
         const page = await newE2EPage();
         await page.setContent(`<django-hstore-widget json='{"hello": "world"}'></django-hstore-widget>`);
 
-        const delete_button = await page.find('div#delete-button');
+        const delete_button = await page.find('django-hstore-widget >>> div#delete-button');
         await delete_button.click();
 
-        const form_element = await page.findAll('div#json_items');
+        const form_element = await page.findAll('django-hstore-widget >>> div#json_items');
         expect(form_element.length).toBe(0);
     });
 
     it('test add click', async () => {
         const page = await newE2EPage();
         await page.setContent(`<django-hstore-widget json='{"hello": "world"}'></django-hstore-widget>`);
 
-        const delete_button = await page.find('button#add-button');
+        const delete_button = await page.find('django-hstore-widget >>> button#add-button');
         await delete_button.click();
 
-        const form_element = await page.findAll('div#json_items');
+        const form_element = await page.findAll('django-hstore-widget >>> div#json_items');
         expect(form_element.length).toBe(2);
     });
 
     it("test all buttons should have type='button'", async () => {
         const page = await newE2EPage();
         await page.setContent(`<django-hstore-widget json='{"hello": "world"}'></django-hstore-widget>`);
 
-        const buttons = await page.findAll('button');
+        const buttons = await page.findAll('django-hstore-widget >>> button');
         expect(buttons.length).not.toBeNull();
         for (const button of buttons) {
             const type = await button.getAttribute('type');