feat: add disable key to SelectItem

.github/workflows/test-on-pr-branch.yml

@@ -3,7 +3,7 @@ on: pull_request
 
 jobs:
   unit:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -22,7 +22,7 @@ jobs:
       - name: Run unit tests
         run: npm run-script test:unit
   visual:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v3

.github/workflows/update-screenshots.yml

@@ -4,7 +4,7 @@ on: workflow_dispatch
 
 jobs:
   test:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v3

SelectionList.ts

@@ -21,6 +21,8 @@ export type SelectItem = {
   startingIcon?: string;
   /** Whether an icon is selected */
   selected: boolean;
+  /** wether an item shall be display but disabled */
+  disabled?: boolean;
 };
 
 /** List component to select from a set of options */
@@ -63,6 +65,7 @@ export class SelectionList extends FilterListBase {
       <md-checkbox
         slot="end"
         ?checked=${item.selected}
+        ?disabled=${item.disabled}
         @change="${() => {
           // eslint-disable-next-line no-param-reassign
           item.selected = !item.selected;

selection-list.spec.ts

@@ -47,6 +47,7 @@ const attachedItems: SelectItem[] = gseControls.map(gseControl => ({
   supportingText: gseControl.getAttribute('desc') ?? undefined,
   attachedElement: gseControl,
   selected: gseControl.getAttribute('name') === 'gse4',
+  disabled: gseControl.getAttribute('name') === 'gse1',
 }));
 
 describe('Custom List component SelectionList', () => {
@@ -74,6 +75,8 @@ describe('Custom List component SelectionList', () => {
 
     it('return non empty array', async () => {
       await sendMouse({ type: 'click', position: [360, 30] });
+      await sendMouse({ type: 'click', position: [360, 90] });
+      // await sendMouse({ type: 'click', position: [360, 30] });
 
       expect(list.selectedElements.length).to.equal(2);
       expect(list.selectedElements[0].getAttribute('name')).to.equal('gse0');

web-test-runner.config.js

@@ -21,9 +21,8 @@ const filteredLogs = [
 ];
 
 const browsers = [
-     playwrightLauncher({ product: 'chromium' }),
-     playwrightLauncher({ product: 'firefox' }),
-   ];
+  playwrightLauncher({ product: 'chromium' }),
+];
 
 function defaultGetImageDiff({ baselineImage, image, options }) {
   let error = '';
@@ -63,7 +62,7 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
     visualRegressionPlugin({
       update: process.argv.includes('--update-visual-baseline'),
       getImageDiff: (options) => {
-        const result =  defaultGetImageDiff(options);
+        const result = defaultGetImageDiff(options);
         if (result.diffPercentage < thresholdPercentage)
           result.diffPercentage = 0;
         return result;