Loki

.github/workflows/pipeline.yml

@@ -229,6 +229,42 @@ jobs:
           if-no-files-found: error
           path: build
 
+  loki-storybook:
+    runs-on: "ubuntu-latest"
+    needs: [storybook]
+    steps:
+      - uses: actions/checkout@v1
+
+      - name: Use Node.js 16
+        uses: actions/setup-node@v1
+        with:
+          node-version: "16.x"
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+      - uses: actions/cache@v2
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install
+        env:
+          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: "true"
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "true"
+        run: yarn --immutable
+
+      - name: Fetch storybook build
+        uses: actions/download-artifact@v2
+        with:
+          name: storybook-static
+
+      - name: Test
+        run: yarn loki:test
+
   build-and-test-app:
     runs-on: ${{ matrix.os }}
     env:

.loki/.gitignore

@@ -0,0 +1,2 @@
+current
+difference

package.json

@@ -100,6 +100,8 @@
     "e2e:web": "playwright test --config=e2e/config/default.config.ts",
     "e2e:app": "playwright test --config=e2e/config/electron.config.ts",
     "e2e:app:dev": "DEV=1 playwright test --config=e2e/config/electron.config.ts",
+    "loki:test": "yarn loki:test --reactUri file:./storybook-static --chromeTolerance 2",
+    "loki:update": "yarn loki update --reactUri file:./storybook-static",
     "test": "vitest",
     "test:types": "tsc -p tsconfig.spec.json",
     "build": "yarn compile:production && yarn run pack",
@@ -201,6 +203,7 @@
     "jest-styled-components": "^7.0.8",
     "jsdom": "^19.0.0",
     "lint-staged": "^12.1.2",
+    "loki": "^0.30.3",
     "mini-css-extract-plugin": "^2.4.5",
     "native-ext-loader": "^2.3.0",
     "nock": "^13.2.1",
@@ -233,5 +236,16 @@
     "@vitest/[email protected]": "patch:@vitest/web-worker@npm:0.14.2#.yarn/patches/@vitest-web-worker-npm-0.14.2-c76281c645",
     "@types/[email protected]": "patch:@types/testing-library__jest-dom@npm:5.14.3#.yarn/patches/@types-testing-library__jest-dom-npm-5.14.3-0aa35d2c00.patch",
     "[email protected]": "patch:snapshot-diff@npm:0.9.0#.yarn/patches/snapshot-diff-npm-0.9.0-44279ef523"
+  },
+  "loki": {
+    "configurations": {
+      "chrome.laptop": {
+        "target": "chrome.docker",
+        "width": 1440,
+        "height": 900,
+        "deviceScaleFactor": 1,
+        "mobile": false
+      }
+    }
   }
 }

src/renderer/stories/flashing/wizard/steps/firmware-selection/FirmwareDescription.stories.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { MemoryRouter } from "react-router-dom";
 import Layout from "renderer/Layout";
 import FirmwareReleaseDescription from "renderer/pages/flash/steps/firmware/FirmwareReleaseDescription";
+import { Story } from "@storybook/react";
 
 import { firmwareReleaseDescriptionQuery } from "test-utils/mocks";
 
@@ -19,12 +20,18 @@ export const releaseSelected: React.FC = () => (
   </MockedProvider>
 );
 
-export const releaseDescriptionNotAvailable: React.FC = () => (
+export const releaseDescriptionNotAvailable: Story = () => (
   <MockedProvider mocks={[firmwareReleaseDescriptionQuery()]}>
     <FirmwareReleaseDescription releaseId="v2.5.1" />
   </MockedProvider>
 );
 
+releaseDescriptionNotAvailable.story = {
+  parameters: {
+    loki: { skip: true },
+  },
+};
+
 export const contained: React.FC = () => (
   <MockedProvider mocks={[firmwareReleaseDescriptionQuery()]}>
     <MemoryRouter>

src/renderer/stories/sdcard/editor/JobStatusModal.stories.tsx

@@ -1,3 +1,4 @@
+import { Story } from "@storybook/react";
 import React from "react";
 import JobStatusModal from "renderer/pages/sdcard/editor/JobStatusModal";
 
@@ -6,15 +7,27 @@ export default {
   component: JobStatusModal,
 };
 
-export const downloading: React.FC = () => (
+export const downloading: Story = () => (
   <JobStatusModal activeStep="download" stepProgress={50} />
 );
 
-export const erasing: React.FC = () => (
+downloading.story = {
+  parameters: {
+    loki: { skip: true },
+  },
+};
+
+export const erasing: Story = () => (
   <JobStatusModal activeStep="erase" stepProgress={30.234} />
 );
 
-export const writing: React.FC = () => (
+erasing.story = {
+  parameters: {
+    loki: { skip: true },
+  },
+};
+
+export const writing: Story = () => (
   <JobStatusModal
     activeStep="write"
     stepProgress={80}
@@ -26,3 +39,9 @@ export const writing: React.FC = () => (
     }
   />
 );
+
+writing.story = {
+  parameters: {
+    loki: { skip: true },
+  },
+};

src/test-utils/mocks.ts

@@ -9,7 +9,11 @@ import {
   exampleTargetsList,
 } from "test-utils/data";
 
-export const firmwaresQuery = (delay = 100): MockedResponse => ({
+const isLokiRunning = (win = window): boolean => Boolean(win.loki?.isRunning);
+
+const defaultDelay = (value: number): number => (!isLokiRunning() ? value : 0);
+
+export const firmwaresQuery = (delay = defaultDelay(100)): MockedResponse => ({
   request: {
     query: gql`
       query Releases {
@@ -29,7 +33,7 @@ export const firmwaresQuery = (delay = 100): MockedResponse => ({
   delay,
 });
 
-export const targetsQuery = (delay = 1000): MockedResponse => ({
+export const targetsQuery = (delay = defaultDelay(1000)): MockedResponse => ({
   request: {
     query: gql`
       query ReleaseTargets($releaseId: ID!) {
@@ -80,7 +84,7 @@ My release, it is great, it has lots of things.
   .join("");
 
 export const firmwareReleaseDescriptionQuery = (
-  delay = 2000
+  delay = defaultDelay(2000)
 ): MockedResponse => ({
   request: {
     query: gql`
@@ -262,7 +266,7 @@ export const prDescriptionQuery: MockedResponse = {
 };
 
 export const devicesQuery = (
-  delay = 2000,
+  delay = defaultDelay(2000),
   devices = exampleDevices
 ): MockedResponse => ({
   request: {
@@ -286,7 +290,7 @@ export const devicesQuery = (
   },
 });
 
-export const deviceQuery = (delay = 2000): MockedResponse => ({
+export const deviceQuery = (delay = defaultDelay(2000)): MockedResponse => ({
   request: {
     query: gql`
       query DeviceInfo($deviceId: ID!) {
@@ -311,7 +315,9 @@ export const deviceQuery = (delay = 2000): MockedResponse => ({
   },
 });
 
-export const firmwareReleaseInfoQuery = (delay = 1000): MockedResponse => ({
+export const firmwareReleaseInfoQuery = (
+  delay = defaultDelay(1000)
+): MockedResponse => ({
   request: {
     query: gql`
       query ReleaseInfo($version: ID!, $target: ID!) {
@@ -347,7 +353,9 @@ export const firmwareReleaseInfoQuery = (delay = 1000): MockedResponse => ({
   delay,
 });
 
-export const localFirmwareInfoQuery = (delay = 1000): MockedResponse => ({
+export const localFirmwareInfoQuery = (
+  delay = defaultDelay(1000)
+): MockedResponse => ({
   request: {
     query: gql`
       query LocalFirmwareInfo($fileId: ID!) {
@@ -372,7 +380,9 @@ export const localFirmwareInfoQuery = (delay = 1000): MockedResponse => ({
   delay,
 });
 
-export const firmwarePrBuildInfoQuery = (delay = 1000): MockedResponse => ({
+export const firmwarePrBuildInfoQuery = (
+  delay = defaultDelay(1000)
+): MockedResponse => ({
   request: {
     query: gql`
       query PrFirmwareInfo($prId: ID!, $commitId: ID!, $target: ID!) {

src/types.d.ts

@@ -31,4 +31,5 @@ declare interface Window {
   ipcRenderer?: typeof import("electron")["ipcRenderer"];
   electronMinimize?: () => void;
   electronClose?: () => void;
+  loki?: { isRunning: boolean };
 }