Skip to content

Commit

Permalink
feat: #560 google map web component (#622)
Browse files Browse the repository at this point in the history
* feat: Create Google Map web component
  • Loading branch information
trankhacvy authored Mar 26, 2020
1 parent 4f1a064 commit 50a8162
Show file tree
Hide file tree
Showing 41 changed files with 2,021 additions and 195 deletions.
8 changes: 4 additions & 4 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ module.exports = {
'prettier',
'prettier/@typescript-eslint',
'prettier/react',
'prettier/standard'
'prettier/standard',
],
globals: {
Atomics: 'readonly',
Expand All @@ -31,8 +31,8 @@ module.exports = {
overrides: [
{
files: ['**/*.svelte'],
processor: 'svelte3/svelte3'
}
processor: 'svelte3/svelte3',
},
],
ignorePatterns: [
'node_modules/',
Expand All @@ -45,7 +45,7 @@ module.exports = {
'packages/*/build',
'packages/*/dist',
'packages/*/public/dist',
'chat-bot.js'
'chat-bot.js',
],
rules: {
quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: false }],
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"lint:fix": "lerna run --parallel --stream lint:fix --",
"release:dev": "lerna run --parallel release:dev",
"release:prod": "lerna run --parallel release:prod",
"test": "lerna run --parallel test:ci -- --runInBand --detectOpenHandles",
"test": "lerna run --parallel test:ci -- --detectOpenHandles --runInBand",
"test-e2e:ci": "lerna run --parallel test-e2e:ci",
"update-doc": "node --unhandled-rejections=strict ./scripts/document-update/get-release-and-create-pr.js"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-app-scaffolder/app/templates/_package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"lint": "eslint --ext=jsx,ts,tsx src --fix",
<% } %>
"start:prod": "serve public/dist -s -l 8080",
"test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit",
"test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit --detectOpenHandles --runInBand",
"test:dev": "cross-env TZ=UTC jest --watch --verbose",
"test:update-badges": "yarn test:ci && jest-coverage-badges --input src/tests/coverage/coverage-summary.json --output src/tests/badges",
"fetch-config": "yarn config-manager fetchConfig <%= name %>"
Expand Down
6 changes: 5 additions & 1 deletion packages/web-components/config.example.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,9 @@
"PLATFORM_API_BASE_URL": "",
"COGNITO_CLIENT_SECRET_SEARCH_WIDGET": "",
"COGNITO_CLIENT_ID_SEARCH_WIDGET": "",
"COGNITO_OAUTH_URL": ""
"COGNITO_OAUTH_URL": "",
"GOOGLE_MAPS_API_KEY": "",
"WEB_COMPONENT_API_KEY_SEARCH_WIDGET": "",
"WEB_COMPONENT_API_BASE_URL_SEARCH_WIDGET": "",
"NODE_ENV": "development"
}
14 changes: 7 additions & 7 deletions packages/web-components/jest.config.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
module.exports = {
preset: 'ts-jest',
testPathIgnorePatterns: ['<rootDir>/src/scripts'],
setupFiles: ['<rootDir>/../../scripts/jest/jest-setup.js'],
collectCoverageFrom: ['<rootDir>/src/**/*.ts', '<rootDir>/src/**/*.svelte'],
coverageDirectory: './src/tests/coverage',
coveragePathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|src/types|src/tests|src/scripts)[/\\\\]'],
transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
modulePathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|poc-archive)[/\\\\]'],
moduleNameMapper: {
'^.+.(?=.*scss|sass|css|png|jpg).*': '<rootDir>/../../scripts/jest/css-stub.js',
},
moduleFileExtensions: ['js','ts', 'svelte'],
moduleFileExtensions: ['js', 'ts', 'svelte'],
coverageThreshold: {
global: {
branches: 60,
functions: 90,
lines: 98,
statements: 97,
branches: 75,
functions: 85,
lines: 95,
statements: 95,
},
},
transform: {
'^.+\\.svg$': '<rootDir>/../../scripts/jest/svg-transform.js',
'^.+\\.svelte$': ['svelte-jester', { "preprocess": true }],
'^.+\\.svelte$': 'svelte-jester',
},
coverageReporters: ['json-summary', 'text', 'lcov'],
}
6 changes: 4 additions & 2 deletions packages/web-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"@rollup/plugin-node-resolve": "^7.1.1",
"@rollup/plugin-replace": "^2.3.1",
"@testing-library/svelte": "^1.11.0",
"@types/googlemaps": "^3.39.3",
"@wessberg/rollup-plugin-ts": "^1.2.17",
"rollup": "^1.32.0",
"rollup-plugin-babel": "^4.3.3",
Expand All @@ -26,17 +27,18 @@
"serverless-offline": "^5.12.1",
"serverless-webpack": "^5.3.1",
"sirv-cli": "^0.4.5",
"svelte-jester": "^1.0.4",
"svelte-preprocess": "^3.4.0"
"svelte-jester": "^1.0.4"
},
"dependencies": {
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"emotion": "^10.0.27",
"express": "^4.17.1",
"isomorphic-fetch": "^2.2.1",
"serverless-http": "^2.3.2",
"svelte": "^3.19.0",
"svelte-fa": "^2.1.1",
"typescript": "~3.7.2"
},
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,4 @@
})
</script>
</body>
</html>
</html>
16 changes: 16 additions & 0 deletions packages/web-components/src/common/utils/__tests__/loader.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { loader } from '../loader'

describe('loader utils', () => {
it('should return correctly', () => {
document.body.innerHTML = '<html></html>'
const url = '//maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=onMapReady'
const callback = jest.fn()
loader(url, callback)
const tags = document.getElementsByTagName('script')
expect(tags.length).toBe(1)
expect(tags[0].hasAttribute('src')).toEqual(true)
expect(tags[0].src).toEqual(
'http://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=onMapReady',
)
})
})
6 changes: 6 additions & 0 deletions packages/web-components/src/common/utils/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,9 @@ export const DEFAULT_HEADERS_SERVER = {
export enum PACKAGE_SUFFIXES {
'SEARCH_WIDGET' = 'SEARCH_WIDGET',
}

export const DEFAULT_CENTER = { lat: 51.507325, lng: -0.127716 }
export const DEFAULT_ZOOM = 15
export const INVALID_BACKGROUND_AS_BASE64 =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN88xYAAssB20Ea4T8AAAAASUVORK5CYII='
export const GOOGLE_MAP_CONTEXT_NAME = 'google-map-context'
8 changes: 8 additions & 0 deletions packages/web-components/src/common/utils/loader.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export const loader = (url: string, callback: () => {}, options = { async: true, defer: true }) => {
const tag = document.createElement('script')
tag.src = url
tag.async = options.async
tag.defer = options.defer
tag.onload = callback
document.body.appendChild(tag)
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import replace from '@rollup/plugin-replace'
import path from 'path'

const config = require(path.resolve(__dirname, '../..', 'config.json'))
const svelteOptions = require('../../svelte.config')
const production = !process.env.ROLLUP_WATCH

export default {
Expand All @@ -23,9 +22,9 @@ export default {
'process.env.WEB_COMPONENT_API_BASE_URL_SEARCH_WIDGET': JSON.stringify(
config.WEB_COMPONENT_API_BASE_URL_SEARCH_WIDGET,
),
'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(config.GOOGLE_MAPS_API_KEY),
}),
svelte({
...svelteOptions,
dev: !production,
css: css => {
css.write('./public/dist/search-widget.css')
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`google map it matches a snapshot 1`] = `
<body>
<div>
<div
class="map-wrap svelte-1nt7ax3"
>
</div>
</div>
</body>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Marker it matches a snapshot 1`] = `
<body>
<div />
</body>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,52 @@ exports[`search-form it matches a snapshot 1`] = `
<body>
<div>
<div
class="css-h4w50h"
class="css-h4w50h svelte-10ns1kb"
>
<div
class="css-yau5c8"
class="css-yau5c8 svelte-10ns1kb"
>
<form>
<input
data-testid="search-input"
id="search"
type="text"
/>
<button
data-testid="lettings"
type="button"
<div
class="content svelte-10ns1kb"
>
<form
class="search-form svelte-1w21vqh"
>
For rent
</button>
<input
data-testid="search-input"
id="search"
type="text"
/>
<button
data-testid="lettings"
type="button"
>
For rent
</button>
<button
data-testid="sales"
type="button"
>
For sale
</button>
</form>
<div
class="search-results-items svelte-10ns1kb"
/>
<button
data-testid="sales"
type="button"
<div
class="map-wrap svelte-10ns1kb"
>
For sale
</button>
</form>
<div
class="map-wrap svelte-1nt7ax3"
>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SearchResult it matches a snapshot 1`] = `
<body>
<div>
<div
class="result-item svelte-1r3rfgm"
data-testid="select-property"
>
<div
class="result-image-container selected svelte-1r3rfgm"
>
<img
alt="property image"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN88xYAAssB20Ea4T8AAAAASUVORK5CYII="
/>
</div>
<div>
<div
class="result-item-address-secondary svelte-1r3rfgm"
>
<div
class="result-item-address-primary svelte-1r3rfgm"
>
Sussex Way
</div>
Archway, London, N19 4JF
</div>
</div>
<div
class="result-item-pricing-text svelte-1r3rfgm"
>
Guide Price £0
</div>
<div
class="result-item-beds-text svelte-1r3rfgm"
>
0 Bed
</div>
<div
class="result-item-description-text svelte-1r3rfgm"
>
This is a flat
</div>
<div
class="result-item-icon-container svelte-1r3rfgm"
>
<span
class="result-item-icon svelte-1r3rfgm"
>
<svg
aria-hidden="true"
class=""
id=""
role="img"
style="height:1em;vertical-align:-.125em;overflow:visible;"
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
>
<g
transform="translate(256 256)"
>
<g
transform=""
>
<path
d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"
fill="currentColor"
transform="translate(-256 -256)"
/>
</g>
</g>
</svg>
</span>
0
<span
class="result-item-icon svelte-1r3rfgm"
>
<svg
aria-hidden="true"
class=""
id=""
role="img"
style="height:1em;vertical-align:-.125em;overflow:visible;"
viewBox="0 0 384 512"
xmlns="http://www.w3.org/2000/svg"
>
<g
transform="translate(256 256)"
>
<g
transform=""
>
<path
d="M368 48c8.8 0 16-7.2 16-16V16c0-8.8-7.2-16-16-16H16C7.2 0 0 7.2 0 16v16c0 8.8 7.2 16 16 16h16v156.7C11.8 214.8 0 226.9 0 240c0 67.2 34.6 126.2 86.8 160.5l-21.4 70.2C59.1 491.2 74.5 512 96 512h192c21.5 0 36.9-20.8 30.6-41.3l-21.4-70.2C349.4 366.2 384 307.2 384 240c0-13.1-11.8-25.2-32-35.3V48h16zM80 72c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H88c-4.4 0-8-3.6-8-8V72zm112 200c-77.1 0-139.6-14.3-139.6-32s62.5-32 139.6-32 139.6 14.3 139.6 32-62.5 32-139.6 32z"
fill="currentColor"
transform="translate(-256 -256)"
/>
</g>
</g>
</svg>
</span>
0
</div>
</div>
</div>
</body>
`;
Loading

0 comments on commit 50a8162

Please sign in to comment.