0
0
mirror of https://github.com/PostHog/posthog.git synced 2024-11-25 11:17:50 +01:00
Commit Graph

36 Commits

Author SHA1 Message Date
Michael Matloka
631ba8c946
test(frontend): Improve reliability of visual regression tests (#14422)
* test(frontend): Ensure 100% reliability of visual regression tests

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Use OptiPNG in CI

* Update UI snapshots for `chromium` (1)

* Don't rely on pre-commit hook for image compression

* Allow waiting for selector instead of constant delay

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `webkit` (2)

* Add extra insight rendering conditions

* Set strict timeouts for visual regression test jobs

* Optimize OptiPNG step

* Fix histogram selector

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Ensure non-blank canvas

* Fix blank canvas detection and auto-detect `waitForLoadersToDisappear`

* Use `Spinner` for loading state in `MonacoEditor`

* Make timeout limits less strict

* Update UI snapshots for `chromium` (2)

* Improve blank canvas detection further

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (2)

* Tune selectors

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Try a different way of ensuring graphs are rendered

* Update UI snapshots for `webkit` (2)

* Increase `waitForLoadersToDisappear` initial UI wait

* Update UI snapshots for `webkit` (2)

* Make it easier to see what file wasn't pushed

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* Fix `timeout-minutes`

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* Add extra wait for canvases

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
2023-03-02 21:11:03 +00:00
Michael Matloka
1c2d74fe8b
test(frontend): Automatically update UI snapshots in CI (#14391)
* Update UI snapshots with comment instead of failing on change

* Make a few stories more reliable

* Remove unused snapshots in CI

* Update query snapshots

* Update `webkit` UI snapshots

* Update `chromium` UI snapshots

* Update `firefox` UI snapshots

* Shard visual regression tests

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `webkit` (2)

* Fix remaining issues

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* Improve reliability of insights snapshots

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Improve reliability of login/signup snapshots

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update .github/workflows/storybook-chromatic.yml

Co-authored-by: Thomas Obermüller <thomas.obermueller@gmail.com>

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Thomas Obermüller <thomas.obermueller@gmail.com>
2023-02-24 19:33:39 +00:00
Michael Matloka
2f36cfff7c
refactor(frontend): Replace Tabs with LemonTabs (1/2) (#14191) 2023-02-13 17:13:07 +01:00
Michael Matloka
0ae6902c4a
test(frontend): Optionally track snapshots for Firefox and Safari (#14175) 2023-02-10 12:50:43 +01:00
Michael Matloka
406b6d9357
test(frontend): Cover practically all the Storybook tests with snapshots (#14001) 2023-02-03 13:06:21 +01:00
Michael Matloka
489edd1cc0
test(frontend): Test more Storybook stories automatically (#13947) 2023-01-30 19:30:18 +01:00
Michael Matloka
adacf8ffb4
test(frontend): Automatically test Storybook stories with snapshots (#13839) 2023-01-27 15:51:35 +01:00
Thomas Obermüller
f2bb78a27b
fix(storybook): don't use esbuild for storybook (#13883) 2023-01-23 23:46:29 +01:00
Paul D'Ambra
a895b3fc46
chore: set default mocks for storybook (#13610)
Adds a hook in preview.tsx where global storybook mocks could be added
passes the same default mocks that are used in Jest tests into that hook
merges those mocks with any provided by the mswDecorator for a particular story
2023-01-10 09:49:22 +00:00
Thomas Obermüller
4a30e78b22
chore: use pnpm to manage dependencies (closes #12635) (#13190)
* chore: use pnpm to manage dependencies

* Fix CI errors

* Don't report Docker image size for external PRs

* Fix pnpm-lock.yaml formatting

* Fix module versions

* Ignore pnpm-lock.yaml

* Upgrade Cypress action for pnpm support

* Set up node and pnpm before Cypress

* Fix typescript issues

* Include patches directory in Dockerfile

* Fix Jest tests in CI

* Update lockfile

* Update lockfile

* Clean up Dockerfile

* Update pnpm-lock.yaml to reflect current package.json files

* remove yarn-error.log from .gitignore

* formatting

* update data exploration readme

* type jest.config.ts

* fix @react-hook issues for jest

* fix react-syntax-highlighter issues for jest

* fix jest issues from query-selector-shadow-dom

* fix transform ignore patterns and undo previous fixes

* add missing storybook peer dependencies

* fix nullish coalescing operator for storybook

* reorder storybook plugins

* update editor-update-tsd warning to new npm script

* use legacy ssl for chromatic / node 18 compatibility

* use pnpm for visual regression testing workflow

* use node 16 for chromatic

* add @babel/plugin-proposal-nullish-coalescing-operator as direct dependency

* try fix for plugin-server

* cleanup

* fix comment and warning

* update more comments

* update playwright dockerfile

* update plugin source types

* conditional image size reporting

* revert react-native instructions

* less restrictive pnpm verions

* use ref component name in line with style guide

Co-authored-by: Jacob Gillespie <jacobwgillespie@gmail.com>
2022-12-12 10:28:06 +01:00
Thomas Obermüller
ad1303a0fb
test(e2e-vrt): add playwright visual regression testing for storybook (#13065) 2022-12-07 11:40:56 +01:00
Thomas Obermüller
289ff1dfff
fix(storybook): update dashboard api response to new format (#13030)
* fix(storybook): update dashboard api response to new format

* refactor(storybook): enable quiet mode for mock service worker
2022-11-30 11:42:44 +00:00
Thomas Obermüller
b2b3678cc3
fix(storybook): fix mock service worker (#12779) 2022-11-15 11:22:50 +00:00
Paul D'Ambra
7762c9ecea
chore: turn off chromatic visual regression tests for all but one component (#12516)
* chore: turn off chromatic visual regression tests for all but one component

* run storybook chromatic workflow if the .storybook folder changes
2022-10-30 13:18:17 +01:00
Marius Andra
1aca9598f5
feat(calendar): option to show Sunday first (#11722)
* feat(calendar): option to show Sunday first

* add week_start to app context

* support weekStart in LemonCalendar

* use the weekStart from appContext

* run with newer black

* add storybook context
2022-10-19 15:50:54 +00:00
Michael Matloka
5c783c744c
chore: Add debug info to JSX output (#12295)
* chore: Add debug info to JSX output

* Pin React to `^16.14.0` instead of `^16.13.0`

* Remove redundant `React`s

* Add `@babel/preset-react` for Storybook

* Update babel.config.js
2022-10-17 19:30:31 +02:00
Paul D'Ambra
36622515f1
fix: home accessibility (#11211)
* feat: test a11y with Cypress

* axe test more pages

* archive a11y violations on success too

* remove date from file path

* don't warn if no accessibility files to upload... they're not on all test jobs

* support switching accessibility tests to failing

* support aria label on lemon buttons

* add story book axe add-on

* Defuckulate the tests

* oops

* can't stop skipping a11y failures for home just yet
2022-08-09 20:01:58 +01:00
Ben White
893c483adf
feat: LemonButton refactor (#11093) 2022-08-08 08:27:00 +02:00
Ben White
8c42c7090f
feat: Extended utility classes and updated color palette (#11047) 2022-08-01 14:09:44 +00:00
Marius Andra
9d7b53ea1b
chore(frontend): remove <Provider> (#10556)
* chore(frontend): remove <Provider>

* this is also not how we use storybook
2022-06-29 16:08:30 +02:00
Ben White
dd0695a24c
feat(subscriptions): Insight Subscriptions (#10197)
* Added modal for subscriptions
* Added unsubscribe endpoint
* Added cronjob for sending subscriptions
2022-06-14 15:14:44 +00:00
Marius Andra
c2a97ee645
feat(frontend): storybook form stories (#9173)
* storybook form stories

* improve form story

* improve form story

* chore(npm): upgrade typescript

* upgrade kea-forms

* upgrade to new kea-forms with better value/onChange support

* fix feature flags form

* fix few other forms

* update stories

* sort and description
2022-05-10 11:36:34 +02:00
Michael Matloka
58b59c48b3
docs(storybook): Lemon UI (#9426)
* Put building block component stories under "Lemon UI"

* Use `LemonTable` in `icons` story

* Add Lemon UI overview

* Update `LemonRow` JSDoc

* Fix story titles

* Fix `LemonTable` header height

* Update some stories

* Fix `IconMagnifier` size

* Use `Spinner` in `LemonSwitch` loading state

* Use `Spinner` in `LemonSwitch` and make `LemonRow` mandatory

* Move `LemonTextArea` to "Lemon UI" in Storybook

* Update Lemon UI.stories.mdx

* Fix some buttons

* Refactor `LemonSwitch` a bit and add stories

* Refactor `AlertMessage` a bit and add stories

* Remove old `IconRocket`

* Add `LemonModal` story

* Refactor `LemonCheckbox` stories

* Update Lemon UI.stories.mdx

* Tune styles

* Update `LemonSpacer` (`LemonDivider`) and `LemonRow` disabled state

* Add `Lettermark` and `Splotch`

* Add `LettermarkColor.Default`

* Fix imports

* Update LemonSwitch.stories.tsx
2022-04-27 12:20:52 +02:00
Marius Andra
7c93054453
refactor(frontend): several tiny refactors vol 2 (#9136)
* add tips

* rename newDashboardForm to newDashboardLogic

* don't be tight with words

* remove unused code

Co-authored-by: Michael Matloka <dev@twixes.com>
2022-03-24 11:38:27 +01:00
Marius Andra
715056ab69
refactor(frontend): several tiny refactors (#9126)
* thrown an explicit error if can't render react app (shown on the toolbar authorize scene)

* remove reverse logic connection

* upgrade kea, remove deprecated code

* don't permanently auto-connect this logic

* add few direct connections

* remove automatic mount

* fix few extra setState calls

* improve howto create stories

* refactor new dashboard form

* use new form component for flags

* new flag story

* refactor scene stories to use <App />

* add even more default mocks

* fix two bugs

* fix more test issues

* increase the quality of mocked data

* fix new dashboard redirect logic, simplify code even further

* fix test

* update docs
2022-03-21 13:45:10 +01:00
Marius Andra
26cf7625fe
feat(storybook): cleanup volume 4 - add code blocks (#9070)
* add storysource

* get source loading to work

* rename DataDisplay to Components, must opt out of code panels

* clean up scene names in code

* default to docs view, start with welcome page, fix more stories

* clean up page names, add howtos

* set view modes
2022-03-17 07:45:47 +00:00
Marius Andra
ef7c614d44
feat(storybook): cleanup volume 3 (#9052)
* onboarding

* move to utils file

* shuffle various insights around

* web performance

* insight error states

* fix recordings

* sort stories, create readmes, rename to clean

* add instance status api mock

* dashboard

* login

* password reset

* signup

* billing

* toolbar

* mock posthog-js in tests
2022-03-16 17:42:07 +01:00
Marius Andra
a6faa54dff
feat(storybook): cleanup volume 2 (#9049)
* storybook filters scenes

* event list preview

* rename some stories

* support ctx.f() in mocks

* redo story

* rename some

* all insights card and list views

* wrap LineGraph in an error boundary

* fix charts not loading on storybook

* new trends graphs

* new insight stories

* separate to clean
2022-03-16 09:14:16 +01:00
Marius Andra
c271eb99a5
feat(storybook): cleanup volume 1 (#9033)
* rearrange stories

* fix bug in storybook with mock data

* convert to TS, fix static path deprecation

* wrap all scenes with KeaStory, deprecate getReduxState

* remove old text

* don't complain about postcss

* remove ApiSelector, revert to ".js" main

* preview ".ts"

* fix msw

* move kea story

* fix urls

* add /decide handler

* mount logics that are there on app

* reduce boilerplate

* refactor history list storybook api

* separate data
2022-03-15 17:36:51 +01:00
Marius Andra
10f2522c04
chore(storybook): update to 6.4 and add esbuild (#8893)
* upgrade to storybook 6.4

* storybook esbuild optimizations

* fix warnings reported by storybook
2022-03-08 14:17:59 +01:00
Harry Waye
01873b1780
feat(correlation): add multiselect for property names (#6407)
* refactor(taxonomic-filter): add api mock functions

* chore: remove makeApi from storybook preview.js

* feat(correlation): add multiselect for property names

Previously we had a simple text input box that was splitting the input
to get a list of property names. This doesn't give the greatest user
experience.

Now we have a simple select box that includes:

 1. search filtering for options
 2. multiselecting options
 3. a select $all, although this is pretty poorly implemented at the
    moment, for instance you can select $all, at the same time as
    selecting a subset of properties.

* add a little commentary around PropertyNamesSelect

* add deps to useEffect

* ignore return type eslint issues

* just use console.log instead of actions

* remove unused import

* chore: add error condition

* chore(correlation): update styling of property select

This puts it more in line with
https://www.figma.com/file/gQBj9YnNgD8YW4nBwCVLZf/PostHog-App?node-id=4200%3A30715

* Add no search results message

* input focus border

* fix type

* use onBlur

* make checkbox checked colour change

* make query bold in no results message

* add clear

* Implement search highlighting

* fix typing

* add regex split comment

* if no property names selected, default to $all

* typo

* Add test for selection component

* Add test highlighting onChange lag and clicking outside

* click out side should depend on hide

* make sure onChange triggered on clear or select all
2021-10-20 14:12:32 +00:00
Harry Waye
88262c0e05
chore(correlation): funnel story with correlation events and properties (#6389)
* chore(correlation): funnel story with correlation events and properties

This commit:

 1. adds msw so we can easily mock the API requests
 2. starts msw on storybook page load
 3. adds the `mockServiceWorker.js` to storybook public folder so it can
    be loaded by the frontend
 4. adds a Funnel story that defines the funnel and correlation
    responses

Note that we also define types for requests and responses. These could
be shared with the actual application code, so we can explicitly couple
the application changes to updating storybooks, i.e. to help avoid
stories going stale.

The requests and responses are quite basic, but they are sufficient to
be able to easily see and make changes. It has a requirement that it
should be easy for anyone else who comes to the code to easily parse and
be able to make updates. We don't want these to be rotten stories but
*the place* that people go to first when making their changes.

Having simple handwritten request/responses also introduces the
stability needed to, for example, use regression tests. Changes are
deliberate.

* refactor(storybook): move funnel stories to their own file

This also does quite a bit of cleaning up of the storybook and funnel
story code. Trying to come down on an acceptable way to manage the
sample data.

* dev(storybook): specify public dir when building storybook

I'm hoping this means that chromatic will function properly 🙏

* chore: add back the withApi decorator

* setup msw first

* dev(storybook): Make posthogjs work in chromatic

* dont use as cast for response types

* make hot module reload work
2021-10-13 04:45:51 +00:00
Marius Andra
528f7d0dda
Storybook API connection toolbar (#5871)
* basic api selector toolbar

* api history
2021-09-11 00:34:15 +02:00
Marius Andra
c080d5f114
Deploy storybook.posthog.net (#5833)
* Deploy storybook.posthog.net

* test why this fails

* another experiment

* again...

* turn addon panels off by default

* debug ci script

* add welcome story

* try with other paths

* commit via action

* better welcome story

* remove branch exception

* keep the CNAME file

* remove branch exception

* remove duplicate checkout, fix paths

* remove branch exception
2021-09-07 12:00:44 +00:00
Marius Andra
a4221e4499
Onboarding storybook (#5827)
* remove stories folder

* return `null` like a component type can

* un-default exports

* add onboarding stories
2021-09-07 11:05:35 +02:00
Marius Andra
365a0f68d4
Storybook (#5714)
* initial storybook setup

* fix storybook babel config

* add two stories

* don't load if loaded

* make sure preflightLogic is loaded

* more examples for propertyKeyInfo

* kea storybook provider

* expose getReduxState on dev instances to make stories fast

* history for kea story provider

* remove old kea provider

* stories for insights

* stories for events

* fix .mdx support

* fix preloadedState type
2021-08-25 10:38:33 +02:00