Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: PlanBGmbH/flinkey-web-components
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v0.0.14
Choose a base ref
...
head repository: PlanBGmbH/flinkey-web-components
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref

Commits on Feb 3, 2022

  1. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    36e0715 View commit details
  2. Copy the full SHA
    a6eb75b View commit details

Commits on Feb 4, 2022

  1. Copy the full SHA
    f3f29cb View commit details
  2. Copy the full SHA
    6cdf1a9 View commit details

Commits on Feb 7, 2022

  1. Copy the full SHA
    fa7512d View commit details
  2. 🔖Bumped version

    BHuber-PlanB committed Feb 7, 2022
    Copy the full SHA
    7419618 View commit details
  3. 📝Changed changelog

    BHuber-PlanB committed Feb 7, 2022
    Copy the full SHA
    644a3f3 View commit details
  4. Copy the full SHA
    7c07fbd View commit details
  5. 🚨Ran prettier

    BHuber-PlanB committed Feb 7, 2022
    Copy the full SHA
    5c28e95 View commit details

Commits on Feb 8, 2022

  1. Copy the full SHA
    cecc29e View commit details
  2. Copy the full SHA
    3253d6d View commit details
  3. Copy the full SHA
    77c986f View commit details
  4. Merge pull request #65 from PlanBGmbH/feature/20-give-the-possibility…

    …-to-show-keyfob-catalog
    
    ✨ Adds keyfob catalog component
    BHuber-PlanB authored Feb 8, 2022
    Copy the full SHA
    f80bcbc View commit details
  5. Copy the full SHA
    4243af2 View commit details
  6. Copy the full SHA
    a397598 View commit details
  7. Copy the full SHA
    fb001b9 View commit details
  8. Copy the full SHA
    fb8cffe View commit details

Commits on Feb 9, 2022

  1. Copy the full SHA
    e167a79 View commit details
  2. 🔖 Bumped version

    BHuber-PlanB committed Feb 9, 2022
    Copy the full SHA
    6989fb1 View commit details
  3. 📝 Updated changelog

    BHuber-PlanB committed Feb 9, 2022
    Copy the full SHA
    3a56a7f View commit details
  4. Merge pull request #73 from PlanBGmbH/chore/72-set-used-node-and-npm-…

    …version-in-package-json
    
    🔧 Added engines definition to package.json
    roswerk authored Feb 9, 2022
    Copy the full SHA
    427c132 View commit details
  5. Merge branch 'main' into chore/69-build-and-publish-workflow-does-not…

    …-correctly-set-github-release-description
    BHuber-PlanB authored Feb 9, 2022
    Copy the full SHA
    2e5c2ed View commit details
  6. Copy the full SHA
    dedfcae View commit details
  7. Merge pull request #74 from PlanBGmbH/revert-73-chore/72-set-used-nod…

    …e-and-npm-version-in-package-json
    
    Revert "🔧 Added engines definition to package.json"
    BHuber-PlanB authored Feb 9, 2022
    Copy the full SHA
    9a9028e View commit details
  8. Merge branch 'main' into chore/69-build-and-publish-workflow-does-not…

    …-correctly-set-github-release-description
    BHuber-PlanB authored Feb 9, 2022
    Copy the full SHA
    c11d978 View commit details
  9. Merge pull request #70 from PlanBGmbH/chore/69-build-and-publish-work…

    …flow-does-not-correctly-set-github-release-description
    
    👷 Changed way of setting GitHub release body
    BHuber-PlanB authored Feb 9, 2022
    Copy the full SHA
    b8e8e97 View commit details
  10. Copy the full SHA
    1e9a29d View commit details
  11. Merge pull request #75 from PlanBGmbH/revert-74-revert-73-chore/72-se…

    …t-used-node-and-npm-version-in-package-json
    
    Revert "Revert "🔧 Added engines definition to package.json""
    roswerk authored Feb 9, 2022
    Copy the full SHA
    dacedf3 View commit details
  12. Copy the full SHA
    2586f88 View commit details
  13. Copy the full SHA
    81e14e7 View commit details
  14. Merge pull request #78 from PlanBGmbH/chore/77-extend-keywords-in-pac…

    …kage-json
    
    📝 Updated keywords array of package.json
    BHuber-PlanB authored Feb 9, 2022
    Copy the full SHA
    fe4e4bc View commit details
  15. Copy the full SHA
    3e5c1b3 View commit details
  16. Copy the full SHA
    4596526 View commit details
  17. Copy the full SHA
    43aae28 View commit details
  18. Copy the full SHA
    e9c348e View commit details
  19. Copy the full SHA
    e18da60 View commit details
  20. Copy the full SHA
    d7be097 View commit details
  21. Copy the full SHA
    f0572e2 View commit details
  22. Copy the full SHA
    c7bd167 View commit details
  23. Merge pull request #71 from PlanBGmbH/docs/29-write-a-meaningful-readme

    📝 Wrote a meaningful readme
    BHuber-PlanB authored Feb 9, 2022
    Copy the full SHA
    d911e6a View commit details

Commits on Feb 11, 2022

  1. Copy the full SHA
    91801ff View commit details
  2. Merge pull request #81 from PlanBGmbH/docs/80-reduce-license-occurren…

    …ces-in-readme
    
    📝 Reduced license occurrences in README file
    BHuber-PlanB authored Feb 11, 2022
    Copy the full SHA
    5438771 View commit details

Commits on Feb 17, 2022

  1. 👷 extract dependabot committer author validation script

    Julius Schall authored and Julius Schall committed Feb 17, 2022
    Copy the full SHA
    0211df0 View commit details
  2. ✏️ use the correct path

    Julius Schall authored and Julius Schall committed Feb 17, 2022
    Copy the full SHA
    7037e8a View commit details
  3. 🚧 try to use relative path

    Julius Schall authored and Julius Schall committed Feb 17, 2022
    Copy the full SHA
    e723217 View commit details
  4. 🚧 debug github workspace

    Julius Schall authored and Julius Schall committed Feb 17, 2022
    Copy the full SHA
    9421018 View commit details
  5. 🚧 use pr branch

    Julius Schall authored and Julius Schall committed Feb 17, 2022
    Copy the full SHA
    a411f6a View commit details
  6. 🚧 test github env

    Julius Schall authored and Julius Schall committed Feb 17, 2022
    Copy the full SHA
    afae937 View commit details
  7. 🚧 remove debug statements

    Julius Schall authored and Julius Schall committed Feb 17, 2022
    Copy the full SHA
    eb1a1ca View commit details
  8. 💡 resolve comments

    Julius Schall authored and Julius Schall committed Feb 17, 2022
    Copy the full SHA
    879675b View commit details
10 changes: 2 additions & 8 deletions .github/workflows/Build_Publish.yml
Original file line number Diff line number Diff line change
@@ -122,14 +122,8 @@ jobs:
npm publish --access public
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Get current date
id: get_current_date
run: |
echo "::set-output name=current_date::$(date +'%Y-%m-%d')"
- name: Create GitHub release artifact
run: |
touch CHANGELOG.md
echo "${{ env.changelog }}" >> CHANGELOG.md
wget --quiet --method GET -O npmPackageData.json "http://registry.npmjs.org/@planbgmbh/flinkey-web-components/${{ env.packageVersion }}"
tarballUrl=$( jq -r '.dist.tarball' npmPackageData.json )
wget --quiet --method GET -O npmPackage.tgz "$tarballUrl"
@@ -141,7 +135,7 @@ jobs:
uses: ncipollo/release-action@v1
with:
artifacts: ${{ env.zipName }}
bodyFile: "CHANGELOG.md"
name: "[${{ env.packageVersion }}] - ${{ steps.get_current_date.outputs.current_date }}"
body: ${{ env.changelog }}
name: ${{ env.packageVersion }}
tag: "v${{ env.packageVersion }}"
token: ${{ secrets.GITHUB_TOKEN }}
59 changes: 21 additions & 38 deletions .github/workflows/Pull_Request.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
name: Run PR Checks

on:
[pull_request]
on: [pull_request]

jobs:
validate:
@@ -14,66 +13,44 @@ jobs:
- name: Checkout main
uses: actions/checkout@v2.4.0
with:
ref: 'main'
ref: "main"
path: main

- name: Checkout PR branch
uses: actions/checkout@v2.4.0
with:
path: pr

- name: Node ${{ matrix.node-version }}
uses: actions/setup-node@v2.5.1
with:
node-version: ${{ matrix.node-version }}

- name: Check commit authors
shell: bash
env:
USER_NAME: "${{ github.event.pull_request.user.login }}"
LINK: "${{ github.event.pull_request._links.commits.href }}"
run: |
dependabotName="dependabot[bot]"
committerName="web-flow"
if [ "${{ github.event.pull_request.user.login }}" = "$dependabotName" ];
then
echo "$dependabotName was detected as PR creator"
wget --quiet --method GET -O commits.json "${{ github.event.pull_request._links.commits.href }}"
committers=$( jq -r '[.[] | .committer | .login] | unique' commits.json )
authors=$( jq -r '[.[] | .author | .login] | unique' commits.json )
committersLength=$( jq '. | length' <<< "$committers" )
authorsLength=$( jq '. | length' <<< "$authors" )
echo "Committer count: $committersLength"
echo "Author count: $authorsLength"
if [ $committersLength -gt 1 ] || [ $authorsLength -gt 1 ];
then
echo 'There are too many committers and/or authors for a valid PR branch by $dependabotName'
exit 1
else
committer=$( jq -r '.[0]' <<< $committers )
author=$( jq -r '.[0]' <<< $authors )
echo "Committer: $committer"
echo "Author: $author"
if [ $committer != "$committerName" ] || [ $author != "$dependabotName" ];
then
echo 'Committer and/or author do not have a valid value'
exit 1
else
echo 'Committer and author are valid'
echo "skipVersionValidation=True" >> $GITHUB_ENV
fi
fi
else
echo "$dependabotName was not detected as PR creator"
echo "skipVersionValidation=False" >> $GITHUB_ENV
fi
chmod +x "${GITHUB_WORKSPACE}/pr/.github/workflows/scripts/author_validation.sh"
"${GITHUB_WORKSPACE}/pr/.github/workflows/scripts/author_validation.sh"
- name: Read PR package version
if: ${{ env.skipVersionValidation == 'False' }}
run: |
cd ./pr/components
prPackageVersion=$( jq -r '.version' package.json )
echo "prPackageVersion=$prPackageVersion" >> $GITHUB_ENV
echo "Current PR version: $prPackageVersion"
- name: Read PR package-lock version
if: ${{ env.skipVersionValidation == 'False' }}
run: |
cd ./pr/components
prPackageLockVersion=$( jq -r '.version' package-lock.json )
echo "prPackageLockVersion=$prPackageLockVersion" >> $GITHUB_ENV
echo "Current PR lock version: $prPackageLockVersion"
- name: Check PR package version
if: ${{ env.skipVersionValidation == 'False' }}
run: |
@@ -86,6 +63,7 @@ jobs:
echo 'PR package lock version and PR package version are not equal'
exit 1
fi
- name: Check package version update
if: ${{ env.skipVersionValidation == 'False' }}
run: |
@@ -126,23 +104,28 @@ jobs:
echo 'Version did not change'
fi
fi
- name: Install dependencies
run: |
cd ./pr/components
npm i
- name: Check code style (Prettier)
run: |
cd ./pr/components
npm run format:check
- name: Run Unit Tests
run: |
cd ./pr/components
npm run test:unit
- name: Run E2E Tests
run: |
cd ./pr/components
npm run test:e2e
- name: Build components
run: |
cd ./pr/components
npm run build
npm run build
47 changes: 47 additions & 0 deletions .github/workflows/scripts/author_validation.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
#!/bin/bash

# set dependabot identifiers
dependabotName="dependabot[bot]"
committerName="web-flow"

if [ $USER_NAME = "$dependabotName" ];
then
echo "$dependabotName was detected as PR creator"

# get commits (for this PR) from GitHub
wget --quiet --method GET -O commits.json $LINK

# extract from json response
committers=$( jq -r '[.[] | .committer | .login] | unique' commits.json )
authors=$( jq -r '[.[] | .author | .login] | unique' commits.json )
committersLength=$( jq '. | length' <<< "$committers" )
authorsLength=$( jq '. | length' <<< "$authors" )

echo "Committer count: $committersLength"
echo "Author count: $authorsLength"
# check if there is more than one author (not only dependabot committed)
if [ $committersLength -gt 1 ] || [ $authorsLength -gt 1 ];
then
echo 'There are too many committers and/or authors for a valid PR branch by $dependabotName'
exit 1
else
# extract the remaining committer and author
committer=$( jq -r '.[0]' <<< $committers )
author=$( jq -r '.[0]' <<< $authors )
echo "Committer: $committer"
echo "Author: $author"

# check if committer and author values have expected dependabot identifier values
if [ $committer != "$committerName" ] || [ $author != "$dependabotName" ];
then
echo 'Committer and/or author do not have a valid value'
exit 1
else
echo 'Committer and author are valid'
echo "skipVersionValidation=True" >> $GITHUB_ENV
fi
fi
else
echo "$dependabotName was not detected as PR creator"
echo "skipVersionValidation=False" >> $GITHUB_ENV
fi
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2021 PlanB. GmbH
Copyright (c) 2021 - 2022 PlanB. GmbH

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
43 changes: 42 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,43 @@
# flinkey Web Components
This project provides some Web Components built for usage in combination with the flinkey API.

[![Build & Publish Package](https://github.com/PlanBGmbH/flinkey-web-components/actions/workflows/Build_Publish.yml/badge.svg)](https://github.com/PlanBGmbH/flinkey-web-components/actions/workflows/Build_Publish.yml) [![npm version](https://badge.fury.io/js/@planbgmbh%2Fflinkey-web-components.svg)](https://badge.fury.io/js/@planbgmbh%2Fflinkey-web-components) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)

## Table of contents

- [Introduction](#introduction)
- [Getting started](#getting-started)
- [Contributing](#contributing)
- [Versioning](#versioning)

## Introduction

This project provides some [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) built for usage in combination with the [flinkey API](https://developers.flinkey.com/api/v3/getting-started/). The reason to build these collection of [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) was that some functionality is provided via [flinkey API](https://developers.flinkey.com/api/v3/getting-started/) only but there is no pre-built UI for that functionality anywhere. Therefore each customer of WITTE Digital needs to build their own UI that consumes these specific endpoints.

## Getting started

### Installation

```shell
npm install @planbgmbh/flinkey-web-components
```

### Usage example

```ts
Globals.customerId = 1;
Globals.apiKey = 'SomeApiKey';
Globals.token = 'ey123';
Globals.apiBaseUrl = 'https://api.flinkey.de/v3';
```

```html
<flinkey-keyfob-catalog></flinkey-keyfob-catalog>
```

## Contributing

Please read through our [contributing guidelines](./CONTRIBUTING.md).

## Versioning

Maintained under the [Semantic Versioning guidelines](https://semver.org/).
8 changes: 3 additions & 5 deletions components/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
## Added
## Changed

- Added fetch API wrapper functions (`http<T>`, `httpGet<T>`, `httpPut<T>` and `httpDelete<T>`)
- Added `Globals` class taking all necessary the flinkey API needs
- Added `global.css` containing TailwindCSS definition
- Extended `keywords` array of `package.json`

[Link to GitHub issue](https://github.com/PlanBGmbH/flinkey-web-components/issues/66)
[Link to GitHub issue](https://github.com/PlanBGmbH/flinkey-web-components/issues/77)
117 changes: 66 additions & 51 deletions components/package-lock.json
27 changes: 20 additions & 7 deletions components/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@planbgmbh/flinkey-web-components",
"version": "0.0.14",
"version": "0.0.17",
"description": "This project provides some Web Components built for usage in combination with the flinkey API.",
"author": "PlanB. GmbH",
"repository": {
@@ -23,13 +23,17 @@
"dist/",
"loader/"
],
"engines": {
"npm": ">=8.0.0",
"node": ">=16.0.0"
},
"scripts": {
"build": "stencil build --docs",
"start": "stencil build --dev --watch --serve",
"test:unit": "stencil test --spec",
"test:unit:watch": "stencil test --spec --watchAll",
"test:e2e": "stencil test --spec --e2e",
"test:e2e:watch": "stencil test --spec --e2e --watchAll",
"test:e2e": "stencil test --e2e",
"test:e2e:watch": "stencil test --e2e --watchAll",
"generate": "stencil generate",
"format:fix": "prettier --config ./.prettierrc.json --write \"**{.ts,.tsx,.json,.css,.scss,.html}\"",
"format:check": "prettier --config ./.prettierrc.json --check \"**{.ts,.tsx,.json,.css,.scss,.html}\""
@@ -39,23 +43,32 @@
},
"license": "MIT",
"keywords": [
"typescript",
"stencil",
"webcomponents",
"rest-api",
"web-components",
"custom-elements",
"ui-components",
"jest-tests",
"tsx",
"puppeteer",
"tailwindcss",
"flinkey",
"WITTE",
"WITTE Digital"
"witte-digital",
"flinkey-api"
],
"devDependencies": {
"@fullhuman/postcss-purgecss": "^4.1.3",
"@stencil/postcss": "^2.1.0",
"@tailwindcss/forms": "^0.4.0",
"@types/jest": "^27.4.0",
"@types/puppeteer": "^5.4.4",
"autoprefixer": "^10.4.2",
"cssnano": "^5.0.16",
"jest": "^27.4.7",
"jest-cli": "^27.4.7",
"prettier": "^2.5.1",
"puppeteer": "^13.0.1",
"puppeteer": "^13.2.0",
"tailwindcss": "^3.0.18"
}
}
44 changes: 9 additions & 35 deletions components/src/components.d.ts
Original file line number Diff line number Diff line change
@@ -6,55 +6,29 @@
*/
import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
export namespace Components {
interface MyComponent {
/**
* The first name
*/
first: string;
/**
* The last name
*/
last: string;
/**
* The middle name
*/
middle: string;
}
interface FlinkeyKeyfobCatalog {}
}
declare global {
interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {}
var HTMLMyComponentElement: {
prototype: HTMLMyComponentElement;
new (): HTMLMyComponentElement;
interface HTMLFlinkeyKeyfobCatalogElement extends Components.FlinkeyKeyfobCatalog, HTMLStencilElement {}
var HTMLFlinkeyKeyfobCatalogElement: {
prototype: HTMLFlinkeyKeyfobCatalogElement;
new (): HTMLFlinkeyKeyfobCatalogElement;
};
interface HTMLElementTagNameMap {
'my-component': HTMLMyComponentElement;
'flinkey-keyfob-catalog': HTMLFlinkeyKeyfobCatalogElement;
}
}
declare namespace LocalJSX {
interface MyComponent {
/**
* The first name
*/
first?: string;
/**
* The last name
*/
last?: string;
/**
* The middle name
*/
middle?: string;
}
interface FlinkeyKeyfobCatalog {}
interface IntrinsicElements {
'my-component': MyComponent;
'flinkey-keyfob-catalog': FlinkeyKeyfobCatalog;
}
}
export { LocalJSX as JSX };
declare module '@stencil/core' {
export namespace JSX {
interface IntrinsicElements {
'my-component': LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
'flinkey-keyfob-catalog': LocalJSX.FlinkeyKeyfobCatalog & JSXBase.HTMLAttributes<HTMLFlinkeyKeyfobCatalogElement>;
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
interface Key {
id: number;
boxName: string;
keyForm: KeyForm;
}

interface KeyForm {
imageUrl: string;
}

export { Key, KeyForm };
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { Component, Host, h, State } from '@stencil/core';
import { httpGet, HttpResponse } from '../../utils/utils';
import { Key } from './flinkey-keyfob-catalog.interfaces';

@Component({
tag: 'flinkey-keyfob-catalog',
styleUrl: '../../utils/common.css',
shadow: true,
})
export class FlinkeyKeyfobCatalog {
@State() brands: string[];
@State() keys: Key[];
@State() dropdownOpen: boolean;

componentWillLoad() {
return httpGet<string[]>('brands')
.then((httpResponse: HttpResponse<string[]>) => {
this.brands = httpResponse.parsedBody;
})
.catch(() => {
// TODO
});
}

onBrandChanged(event: Event) {
const brand = (event.target as HTMLSelectElement).value;
const path = `brands/${brand}/keys`;
const searchParams = new URLSearchParams([
['$select', 'boxName'],
['$expand', 'keyForm($select=imageUrl)'],
]);
return httpGet<Key[]>(path, searchParams)
.then((httpResponse: HttpResponse<Key[]>) => {
this.keys = httpResponse.parsedBody;
})
.catch(() => {
// TODO
});
}

render() {
return (
<Host>
<div class="mb-4">
<select
onChange={e => this.onBrandChanged(e)}
class="font-sans mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
>
<option selected disabled hidden>
Choose brand
</option>
{this.brands?.map(brand => (
<option value={brand}>{brand}</option>
))}
</select>
</div>
<div class="grid 2xl:grid-cols-6 xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 gap-4">
{this.keys?.map(key => (
<div class="col-span-1 flex flex-col text-center bg-white rounded-lg shadow divide-y divide-gray-200">
<div class="flex-1 flex flex-col p-8">
<img class="w-44 h-auto flex-shrink-0 mx-auto" src={key.keyForm.imageUrl} alt="" />
<h3 class="mt-6 text-gray-900 text-sm font-medium font-sans">{key.boxName}</h3>
</div>
</div>
))}
</div>
</Host>
);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { newE2EPage } from '@stencil/core/testing';

describe('flinkey-keyfob-catalog', () => {
it('renders', async () => {
const page = await newE2EPage();
await page.setContent('<flinkey-keyfob-catalog></flinkey-keyfob-catalog>');

const element = await page.find('flinkey-keyfob-catalog');
expect(element).toHaveClass('hydrated');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { FlinkeyKeyfobCatalog } from '../flinkey-keyfob-catalog';
import * as utils from '../../../utils/utils';
import { HttpResponse } from '../../../utils/utils';
import { Key } from '../flinkey-keyfob-catalog.interfaces';

describe('when calling componentWillLoad() function', () => {
beforeEach(() => {
jest.clearAllMocks();
});

it('should call httpGet<T>(...) function with expected parameters', async () => {
const keyfobCatalog = new FlinkeyKeyfobCatalog();
const httpGetSpy = jest.spyOn(utils, 'httpGet').mockImplementationOnce(() => {
const resp: HttpResponse<string[]> = new Response();
resp.parsedBody = ['SomeBrand'];
return Promise.resolve(resp);
});

await keyfobCatalog.componentWillLoad();

expect(httpGetSpy).toHaveBeenCalledTimes(1);
expect(httpGetSpy).toHaveBeenCalledWith('brands');
expect(keyfobCatalog.brands).toEqual(['SomeBrand']);
});
});

describe('when calling onBrandChanged(...)', () => {
beforeEach(() => {
jest.clearAllMocks();
});

it('should call httpGet<T>(...) function with expected parameters', async () => {
const keyfobCatalog = new FlinkeyKeyfobCatalog();
const httpGetSpy = jest.spyOn(utils, 'httpGet').mockImplementationOnce(() => {
const resp: HttpResponse<Key[]> = new Response();
resp.parsedBody = [
{
id: 1,
boxName: 'SomeBoxName',
keyForm: {
imageUrl: 'https://some-image-url.com',
},
},
];
return Promise.resolve(resp);
});
const event = {
target: { value: 'the-brand' },
};

await keyfobCatalog.onBrandChanged(event as unknown as Event);

expect(httpGetSpy).toHaveBeenCalledTimes(1);
expect(httpGetSpy).toHaveBeenCalledWith(
'brands/the-brand/keys',
new URLSearchParams([
['$select', 'boxName'],
['$expand', 'keyForm($select=imageUrl)'],
]),
);
expect(keyfobCatalog.keys).toEqual([
{
id: 1,
boxName: 'SomeBoxName',
keyForm: {
imageUrl: 'https://some-image-url.com',
},
},
]);
});
});
2 changes: 1 addition & 1 deletion components/src/index.html
Original file line number Diff line number Diff line change
@@ -9,6 +9,6 @@
<script nomodule src="/build/flinkey-web-components.js"></script>
</head>
<body>
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
<flinkey-keyfob-catalog></flinkey-keyfob-catalog>
</body>
</html>
25 changes: 19 additions & 6 deletions components/src/utils/utils.spec.ts
Original file line number Diff line number Diff line change
@@ -2,13 +2,26 @@ import * as httpFn from './http';
import { Globals, httpDelete, httpGet, httpPut, HttpResponse, setDefaultHeaders, setEndpoint } from './utils';

describe('Utils', () => {
describe('when calling httpGet<T>(...), httpPut<T>(...) or httpDelete<T>(...) function', () => {
describe('when calling httpGet<T>(...) function', () => {
it('calls the http<T> function', async () => {
Globals.apiBaseUrl = 'https://some-base-url.com';
Globals.token = 'SomeSampleTokenValue';
const expectedHttpResponse: HttpResponse<unknown> = new Response(JSON.stringify({ foo: 'bar' }));
const httpSpy = jest.spyOn(httpFn, 'http').mockImplementationOnce(() => Promise.resolve(expectedHttpResponse));
const response = await httpGet<unknown>('api/endpoint');

expect(response).toEqual(expectedHttpResponse);
expect(httpSpy).toHaveBeenCalledWith(
new Request('https://some-base-url.com/api/endpoint', {
method: 'GET',
headers: setDefaultHeaders(),
}),
);
});
});

describe('when calling httpPut<T>(...) or httpDelete<T>(...) function', () => {
for (const testCase of [
{
httpFnCall: httpGet,
expectedMethod: 'GET',
withBody: false,
},
{
httpFnCall: httpPut,
expectedMethod: 'PUT',
1 change: 1 addition & 0 deletions components/src/utils/utils.ts
Original file line number Diff line number Diff line change
@@ -39,6 +39,7 @@ interface HttpResponse<T> extends Response {
function setDefaultHeaders(): HeadersInit {
return {
'Authorization': `Bearer ${Globals.token}`,
'flinkey-API-Key': Globals.apiKey,
'Content-Type': 'application/json',
'Accept': 'application/json',
};
8 changes: 0 additions & 8 deletions components/stencil.config.ts
Original file line number Diff line number Diff line change
@@ -3,16 +3,8 @@ import { Config } from '@stencil/core';
import { postcss } from '@stencil/postcss';
import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';
import cssnano from 'cssnano';
import purgecss from '@fullhuman/postcss-purgecss';

//purge function to keep only the classes used in EACH component
const purge = purgecss({
content: ['./src/**/*.tsx', './src/index.html'],
safelist: [':host'],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
});

export const config: Config = {
namespace: 'flinkey-web-components',
outputTargets: [
6 changes: 4 additions & 2 deletions components/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -26,7 +26,9 @@ module.exports = {
bold: 700,
extrabold: 800,
black: 900,
},
}
},
plugins: [],
plugins: [
require('@tailwindcss/forms'),
],
};