test: fix breaking unit and screenshot tests

Author: JakobVogelsang

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

@@ -2,8 +2,8 @@ name: Test on PR branch
 on: pull_request
 
 jobs:
-  test-on-pr-branch:
-    runs-on: ubuntu-latest
+  unit:
+    runs-on: ubuntu-20.04
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -19,5 +19,37 @@ jobs:
       - name: Install playwright browsers
         run: npx playwright install --with-deps
 
-      - name: Run tests
-        run: npm run-script test
+      - name: Run unit tests
+        run: npm run-script test:unit
+  visual:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run visual test
+        run: npm run-script test:visual
+
+      - name: Update screenshots
+        if: failure()
+        run: npm run test:update
+
+      - name: Upload failed screenshots as artifacts
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: failed_screenshots
+          path: |
+            screenshots/*/failed/
+            screenshots/*/baseline/

.github/workflows/test.yml

@@ -3,7 +3,7 @@ on: [push, workflow_dispatch]
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -20,4 +20,4 @@ jobs:
         run: npx playwright install --with-deps
 
       - name: Run tests
-        run: npm run-script test
+        run: npm run test

.github/workflows/update-screenshots.yml

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

editors/dataset/data-set-element-editor.ts

@@ -101,17 +101,17 @@ export class DataSetElementEditor extends LitElement {
 
   @state()
   private get name(): string | null {
-    return this.element!.getAttribute('name');
+    return this.element?.getAttribute('name') ?? null;
   }
 
   @state()
   private get desc(): string | null {
-    return this.element!.getAttribute('desc');
+    return this.element?.getAttribute('desc') ?? null;
   }
 
   @state()
   private get fcdaCount(): number {
-    return this.element!.querySelectorAll('FCDA').length;
+    return this.element?.querySelectorAll('FCDA').length ?? 0;
   }
 
   @state()

editors/gsecontrol/gse-control-element-editor.test.ts

@@ -137,7 +137,7 @@ describe('GSEControl element editor component', () => {
 
       await timeout(400);
 
-      (editor.gSEControlInputs![4] as SclCheckbox).nullSwitch?.click();
+      (editor.gSEControlInputs![5] as SclCheckbox).nullSwitch?.click();
 
       await editor.updateComplete;
       await timeout(400);
@@ -153,7 +153,7 @@ describe('GSEControl element editor component', () => {
     beforeEach(async () => {
       const gseControl = new DOMParser()
         .parseFromString(gseControlDoc, 'application/xml')
-        .querySelector('GSEControl[name="gse3"]')!;
+        .querySelector('GSEControl[name="gse2"]')!;
 
       editor = await fixture(
         html`<gse-control-element-editor

editors/report/report-control-element-editor.spec.ts

@@ -65,11 +65,10 @@ describe('ReportControl element editor component', () => {
     expect(update.attributes).to.deep.equal({
       name: 'SomeNewName',
       desc: null,
-      confRev: '40001',
+      confRev: '10053',
       rptID: 'someOtherID',
       buffered: 'false',
-      indexed: 'false',
-      bufTime: null,
+      indexed: null,
       intgPd: '43',
     });
 

editors/report/report-control-element-editor.ts

@@ -401,7 +401,7 @@ export class ReportControlElementEditor extends LitElement {
         @input=${this.onReportControlInputChange}
       ></scl-text-field>
       <scl-text-field
-        class="input gsecontrol"
+        class="report attributes"
         label="confRev"
         .value=${confRev}
         supportingText="Configuration Revision"

editors/sampledvalue/sampled-value-control-element-editor.test.ts

@@ -137,7 +137,7 @@ describe('SampledValueControl element editor component', () => {
 
       await timeout(400);
 
-      (editor.sampledValueControlInputs![3] as SclCheckbox).nullSwitch?.click();
+      (editor.sampledValueControlInputs![4] as SclCheckbox).nullSwitch?.click();
 
       await editor.updateComplete;
       await timeout(400);
@@ -153,7 +153,7 @@ describe('SampledValueControl element editor component', () => {
     beforeEach(async () => {
       const smvControl = new DOMParser()
         .parseFromString(smvControlDoc, 'application/xml')
-        .querySelector('SampledValueControl[name="smv3"]')!;
+        .querySelector('SampledValueControl[name="smv2"]')!;
 
       editor = await fixture(
         html`<sampled-value-control-element-editor

editors/sampledvalue/sampled-value-control-element-editor.ts

@@ -406,7 +406,7 @@ export class SampledValueControlElementEditor extends LitElement {
             @input="${this.onSampledValueControlInputChange}"
           ></scl-checkbox>`}
       <scl-text-field
-        class="input gsecontrol"
+        class="smvcontrol attribute"
         label="confRev"
         .value=${confRev}
         supportingText="Configuration Revision"