Merge remote-tracking branch 'upstream/master'
This commit is contained in:
commit
99d192430e
|
|
@ -31,7 +31,7 @@ jobs:
|
|||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "20"
|
||||
node-version-file: './superset-embedded-sdk/.nvmrc'
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
- run: npm ci
|
||||
- run: npm run ci:release
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ jobs:
|
|||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "20"
|
||||
node-version-file: './superset-embedded-sdk/.nvmrc'
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
- run: npm ci
|
||||
- run: npm test
|
||||
|
|
|
|||
|
|
@ -190,8 +190,9 @@ jobs:
|
|||
ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
|
||||
ECR_REPOSITORY: superset-ci
|
||||
IMAGE_TAG: apache/superset:${{ needs.ephemeral-env-label.outputs.sha }}-ci
|
||||
PR_NUMBER: ${{ github.event.inputs.issue_number || github.event.pull_request.number }}
|
||||
run: |
|
||||
docker tag $IMAGE_TAG $ECR_REGISTRY/$ECR_REPOSITORY:pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-ci
|
||||
docker tag $IMAGE_TAG $ECR_REGISTRY/$ECR_REPOSITORY:pr-$PR_NUMBER-ci
|
||||
docker push -a $ECR_REGISTRY/$ECR_REPOSITORY
|
||||
|
||||
ephemeral-env-up:
|
||||
|
|
@ -222,11 +223,13 @@ jobs:
|
|||
- name: Check target image exists in ECR
|
||||
id: check-image
|
||||
continue-on-error: true
|
||||
env:
|
||||
PR_NUMBER: ${{ github.event.inputs.issue_number || github.event.pull_request.number }}
|
||||
run: |
|
||||
aws ecr describe-images \
|
||||
--registry-id $(echo "${{ steps.login-ecr.outputs.registry }}" | grep -Eo "^[0-9]+") \
|
||||
--repository-name superset-ci \
|
||||
--image-ids imageTag=pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-ci
|
||||
--image-ids imageTag=pr-$PR_NUMBER-ci
|
||||
|
||||
- name: Fail on missing container image
|
||||
if: steps.check-image.outcome == 'failure'
|
||||
|
|
@ -236,7 +239,7 @@ jobs:
|
|||
script: |
|
||||
const errMsg = '@${{ github.event.comment.user.login }} Container image not yet published for this PR. Please try again when build is complete.';
|
||||
github.rest.issues.createComment({
|
||||
issue_number: ${{ github.event.inputs.issue_number || github.event.issue.number }},
|
||||
issue_number: ${{ github.event.inputs.issue_number || github.event.pull_request.number }},
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
body: errMsg
|
||||
|
|
@ -249,7 +252,7 @@ jobs:
|
|||
with:
|
||||
task-definition: .github/workflows/ecs-task-definition.json
|
||||
container-name: superset-ci
|
||||
image: ${{ steps.login-ecr.outputs.registry }}/superset-ci:pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-ci
|
||||
image: ${{ steps.login-ecr.outputs.registry }}/superset-ci:pr-${{ github.event.inputs.issue_number || github.event.pull_request.number }}-ci
|
||||
|
||||
- name: Update env vars in the Amazon ECS task definition
|
||||
run: |
|
||||
|
|
@ -258,29 +261,30 @@ jobs:
|
|||
- name: Describe ECS service
|
||||
id: describe-services
|
||||
run: |
|
||||
echo "active=$(aws ecs describe-services --cluster superset-ci --services pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-service | jq '.services[] | select(.status == "ACTIVE") | any')" >> $GITHUB_OUTPUT
|
||||
echo "active=$(aws ecs describe-services --cluster superset-ci --services pr-${{ github.event.inputs.issue_number || github.event.pull_request.number }}-service | jq '.services[] | select(.status == "ACTIVE") | any')" >> $GITHUB_OUTPUT
|
||||
- name: Create ECS service
|
||||
id: create-service
|
||||
if: steps.describe-services.outputs.active != 'true'
|
||||
env:
|
||||
ECR_SUBNETS: subnet-0e15a5034b4121710,subnet-0e8efef4a72224974
|
||||
ECR_SECURITY_GROUP: sg-092ff3a6ae0574d91
|
||||
PR_NUMBER: ${{ github.event.inputs.issue_number || github.event.pull_request.number }}
|
||||
run: |
|
||||
aws ecs create-service \
|
||||
--cluster superset-ci \
|
||||
--service-name pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-service \
|
||||
--service-name pr-$PR_NUMBER-service \
|
||||
--task-definition superset-ci \
|
||||
--launch-type FARGATE \
|
||||
--desired-count 1 \
|
||||
--platform-version LATEST \
|
||||
--network-configuration "awsvpcConfiguration={subnets=[$ECR_SUBNETS],securityGroups=[$ECR_SECURITY_GROUP],assignPublicIp=ENABLED}" \
|
||||
--tags key=pr,value=${{ github.event.inputs.issue_number || github.event.issue.number }} key=github_user,value=${{ github.actor }}
|
||||
--tags key=pr,value=$PR_NUMBER key=github_user,value=${{ github.actor }}
|
||||
- name: Deploy Amazon ECS task definition
|
||||
id: deploy-task
|
||||
uses: aws-actions/amazon-ecs-deploy-task-definition@v2
|
||||
with:
|
||||
task-definition: ${{ steps.task-def.outputs.task-definition }}
|
||||
service: pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-service
|
||||
service: pr-${{ github.event.inputs.issue_number || github.event.pull_request.number }}-service
|
||||
cluster: superset-ci
|
||||
wait-for-service-stability: true
|
||||
wait-for-minutes: 10
|
||||
|
|
@ -288,7 +292,7 @@ jobs:
|
|||
- name: List tasks
|
||||
id: list-tasks
|
||||
run: |
|
||||
echo "task=$(aws ecs list-tasks --cluster superset-ci --service-name pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-service | jq '.taskArns | first')" >> $GITHUB_OUTPUT
|
||||
echo "task=$(aws ecs list-tasks --cluster superset-ci --service-name pr-${{ github.event.inputs.issue_number || github.event.pull_request.number }}-service | jq '.taskArns | first')" >> $GITHUB_OUTPUT
|
||||
- name: Get network interface
|
||||
id: get-eni
|
||||
run: |
|
||||
|
|
|
|||
|
|
@ -24,13 +24,7 @@ jobs:
|
|||
needs: config
|
||||
if: needs.config.outputs.has-secrets
|
||||
name: Bump version and publish package(s)
|
||||
|
||||
runs-on: ubuntu-24.04
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [20]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
|
|
@ -46,11 +40,11 @@ jobs:
|
|||
git fetch --prune --unshallow
|
||||
git tag -d `git tag | grep -E '^trigger-'`
|
||||
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
- name: Install Node.js
|
||||
if: env.HAS_TAGS
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
node-version-file: './superset-frontend/.nvmrc'
|
||||
|
||||
- name: Cache npm
|
||||
if: env.HAS_TAGS
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ jobs:
|
|||
fail-fast: false
|
||||
matrix:
|
||||
browser: ["chrome"]
|
||||
node: [20]
|
||||
env:
|
||||
SUPERSET_ENV: development
|
||||
SUPERSET_CONFIG: tests.integration_tests.superset_test_config
|
||||
|
|
@ -66,7 +65,7 @@ jobs:
|
|||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ matrix.node }}
|
||||
node-version-file: './superset-frontend/.nvmrc'
|
||||
- name: Install npm dependencies
|
||||
uses: ./.github/actions/cached-dependencies
|
||||
with:
|
||||
|
|
|
|||
|
|
@ -28,9 +28,6 @@ jobs:
|
|||
needs: config
|
||||
if: needs.config.outputs.has-secrets
|
||||
runs-on: ubuntu-24.04
|
||||
strategy:
|
||||
matrix:
|
||||
node: [20]
|
||||
steps:
|
||||
- name: "Checkout ${{ github.ref }} ( ${{ github.sha }} )"
|
||||
uses: actions/checkout@v4
|
||||
|
|
@ -41,7 +38,7 @@ jobs:
|
|||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: ${{ matrix.node }}
|
||||
node-version-file: './superset-frontend/.nvmrc'
|
||||
- name: Install eyes-storybook dependencies
|
||||
uses: ./.github/actions/cached-dependencies
|
||||
with:
|
||||
|
|
|
|||
|
|
@ -35,10 +35,10 @@ jobs:
|
|||
with:
|
||||
persist-credentials: false
|
||||
submodules: recursive
|
||||
- name: Set up Node.js 20
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20'
|
||||
node-version-file: './docs/.nvmrc'
|
||||
- name: Setup Python
|
||||
uses: ./.github/actions/setup-backend/
|
||||
- uses: actions/setup-java@v4
|
||||
|
|
|
|||
|
|
@ -60,10 +60,10 @@ jobs:
|
|||
with:
|
||||
persist-credentials: false
|
||||
submodules: recursive
|
||||
- name: Set up Node.js 20
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20'
|
||||
node-version-file: './docs/.nvmrc'
|
||||
- name: yarn install
|
||||
run: |
|
||||
yarn install --check-cache
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ jobs:
|
|||
if: steps.check.outputs.python || steps.check.outputs.frontend
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "20"
|
||||
node-version-file: './superset-frontend/.nvmrc'
|
||||
- name: Install npm dependencies
|
||||
if: steps.check.outputs.python || steps.check.outputs.frontend
|
||||
uses: ./.github/actions/cached-dependencies
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ jobs:
|
|||
if: steps.check.outputs.frontend
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '18'
|
||||
node-version-file: './superset-frontend/.nvmrc'
|
||||
- name: Install dependencies
|
||||
if: steps.check.outputs.frontend
|
||||
uses: ./.github/actions/cached-dependencies
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ jobs:
|
|||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20'
|
||||
node-version-file: './superset-frontend/.nvmrc'
|
||||
|
||||
- name: Install Dependencies
|
||||
run: npm install
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
*.swp
|
||||
__pycache__
|
||||
|
||||
.aider*
|
||||
.local
|
||||
.cache
|
||||
.bento*
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
######################################################################
|
||||
# Node stage to deal with static asset construction
|
||||
######################################################################
|
||||
ARG PY_VER=3.11-slim-bookworm
|
||||
ARG PY_VER=3.11.11-slim-bookworm
|
||||
|
||||
# If BUILDPLATFORM is null, set it to 'amd64' (or leave as is otherwise).
|
||||
ARG BUILDPLATFORM=${BUILDPLATFORM:-amd64}
|
||||
|
|
|
|||
|
|
@ -43,8 +43,8 @@ under the License.
|
|||
| can this form post on ResetPasswordView |:heavy_check_mark:|O|O|O|
|
||||
| can this form get on ResetMyPasswordView |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can this form post on ResetMyPasswordView |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can this form get on UserInfoEditView |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can this form post on UserInfoEditView |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can this form get on UserInfoEditView |:heavy_check_mark:|O|O|O|
|
||||
| can this form post on UserInfoEditView |:heavy_check_mark:|O|O|O|
|
||||
| can show on UserDBModelView |:heavy_check_mark:|O|O|O|
|
||||
| can edit on UserDBModelView |:heavy_check_mark:|O|O|O|
|
||||
| can delete on UserDBModelView |:heavy_check_mark:|O|O|O|
|
||||
|
|
@ -65,7 +65,6 @@ under the License.
|
|||
| can get on MenuApi |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can list on AsyncEventsRestApi |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can invalidate on CacheRestApi |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can function names on Database |:heavy_check_mark:|O|O|O|
|
||||
| can csv upload on Database |:heavy_check_mark:|O|O|O|
|
||||
| can excel upload on Database |:heavy_check_mark:|O|O|O|
|
||||
| can query form data on Api |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
|
|
@ -76,7 +75,6 @@ under the License.
|
|||
| can get on Datasource |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can my queries on SqlLab |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|
|
||||
| can log on Superset |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can schemas access for csv upload on Superset |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can import dashboards on Superset |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can schemas on Superset |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can sqllab history on Superset |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|
|
||||
|
|
@ -118,8 +116,6 @@ under the License.
|
|||
| menu access on Data |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| menu access on Databases |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| menu access on Datasets |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| menu access on Upload a CSV |:heavy_check_mark:|:heavy_check_mark:|O|O|
|
||||
| menu access on Upload Excel |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| menu access on Charts |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| menu access on Dashboards |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| menu access on SQL Lab |:heavy_check_mark:|O|O|:heavy_check_mark:|
|
||||
|
|
@ -129,13 +125,6 @@ under the License.
|
|||
| all datasource access on all_datasource_access |:heavy_check_mark:|:heavy_check_mark:|O|O|
|
||||
| all database access on all_database_access |:heavy_check_mark:|:heavy_check_mark:|O|O|
|
||||
| all query access on all_query_access |:heavy_check_mark:|O|O|O|
|
||||
| can edit on UserOAuthModelView |:heavy_check_mark:|O|O|O|
|
||||
| can list on UserOAuthModelView |:heavy_check_mark:|O|O|O|
|
||||
| can show on UserOAuthModelView |:heavy_check_mark:|O|O|O|
|
||||
| can userinfo on UserOAuthModelView |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can add on UserOAuthModelView |:heavy_check_mark:|O|O|O|
|
||||
| can delete on UserOAuthModelView |:heavy_check_mark:|O|O|O|
|
||||
| userinfoedit on UserOAuthModelView |:heavy_check_mark:|O|O|O|
|
||||
| can write on DynamicPlugin |:heavy_check_mark:|O|O|O|
|
||||
| can edit on DynamicPlugin |:heavy_check_mark:|O|O|O|
|
||||
| can list on DynamicPlugin |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
|
|
@ -192,7 +181,6 @@ under the License.
|
|||
| can share chart on Superset |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can this form get on ColumnarToDatabaseView |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can this form post on ColumnarToDatabaseView |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| menu access on Upload a Columnar file |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can export on Chart |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can write on DashboardFilterStateRestApi |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
| can read on DashboardFilterStateRestApi |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ assists people when migrating to a new version.
|
|||
- [25166](https://github.com/apache/superset/pull/25166) Changed the default configuration of `UPLOAD_FOLDER` from `/app/static/uploads/` to `/static/uploads/`. It also removed the unused `IMG_UPLOAD_FOLDER` and `IMG_UPLOAD_URL` configuration options.
|
||||
- [30284](https://github.com/apache/superset/pull/30284) Deprecated GLOBAL_ASYNC_QUERIES_REDIS_CONFIG in favor of the new GLOBAL_ASYNC_QUERIES_CACHE_BACKEND configuration. To leverage Redis Sentinel, set CACHE_TYPE to RedisSentinelCache, or use RedisCache for standalone Redis
|
||||
- [31961](https://github.com/apache/superset/pull/31961) Upgraded React from version 16.13.1 to 17.0.2. If you are using custom frontend extensions or plugins, you may need to update them to be compatible with React 17.
|
||||
- [31260](https://github.com/apache/superset/pull/31260) Docker images now use `uv pip install` instead of `pip install` to manage the python envrionment. Most docker-based deployments will be affected, whether you derive one of the published images, or have custom bootstrap script that install python libraries (drivers)
|
||||
|
||||
### Potential Downtime
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ Note that there are 3 major ways we support to run `docker compose`:
|
|||
`export TAG=4.0.0-dev` or `export TAG=3.0.0-dev`, with `latest-dev` being the default.
|
||||
That's because The `dev` builds happen to package the `psycopg2-binary` required to connect
|
||||
to the Postgres database launched as part of the `docker compose` builds.
|
||||
``
|
||||
|
||||
More on these two approaches after setting up the requirements for either.
|
||||
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ The following example installs the drivers for BigQuery and Elasticsearch, allow
|
|||
```yaml
|
||||
bootstrapScript: |
|
||||
#!/bin/bash
|
||||
pip install .[postgres] \
|
||||
uv pip install .[postgres] \
|
||||
.[bigquery] \
|
||||
.[elasticsearch] &&\
|
||||
if [ ! -f ~/bootstrap ]; then echo "Running Superset with uid {{ .Values.runAsUser }}" > ~/bootstrap; fi
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@ dependencies = [
|
|||
"redis>=4.6.0, <5.0",
|
||||
"selenium>=4.14.0, <5.0",
|
||||
"shillelagh[gsheetsapi]>=1.2.18, <2.0",
|
||||
"shortid",
|
||||
"sshtunnel>=0.4.0, <0.5",
|
||||
"simplejson>=3.15.0",
|
||||
"slack_sdk>=3.19.0, <4",
|
||||
|
|
|
|||
|
|
@ -329,8 +329,6 @@ selenium==4.27.1
|
|||
# via apache-superset (pyproject.toml)
|
||||
shillelagh==1.2.18
|
||||
# via apache-superset (pyproject.toml)
|
||||
shortid==0.1.2
|
||||
# via apache-superset (pyproject.toml)
|
||||
simplejson==3.19.3
|
||||
# via apache-superset (pyproject.toml)
|
||||
six==1.16.0
|
||||
|
|
|
|||
|
|
@ -738,10 +738,6 @@ shillelagh==1.2.18
|
|||
# via
|
||||
# -c requirements/base.txt
|
||||
# apache-superset
|
||||
shortid==0.1.2
|
||||
# via
|
||||
# -c requirements/base.txt
|
||||
# apache-superset
|
||||
simplejson==3.19.3
|
||||
# via
|
||||
# -c requirements/base.txt
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
v20.16.0
|
||||
|
|
@ -74,7 +74,7 @@ module.exports = {
|
|||
'file-progress',
|
||||
'lodash',
|
||||
'theme-colors',
|
||||
'translation-vars',
|
||||
'i18n-strings',
|
||||
'react-prefer-function-component',
|
||||
'prettier',
|
||||
],
|
||||
|
|
@ -284,7 +284,7 @@ module.exports = {
|
|||
],
|
||||
rules: {
|
||||
'theme-colors/no-literal-colors': 0,
|
||||
'translation-vars/no-template-vars': 0,
|
||||
'i18n-strings/no-template-vars': 0,
|
||||
'no-restricted-imports': 0,
|
||||
'react/no-void-elements': 0,
|
||||
},
|
||||
|
|
@ -292,7 +292,7 @@ module.exports = {
|
|||
],
|
||||
rules: {
|
||||
'theme-colors/no-literal-colors': 'error',
|
||||
'translation-vars/no-template-vars': ['error', true],
|
||||
'i18n-strings/no-template-vars': ['error', true],
|
||||
camelcase: [
|
||||
'error',
|
||||
{
|
||||
|
|
@ -354,6 +354,14 @@ module.exports = {
|
|||
name: 'lodash/memoize',
|
||||
message: 'Lodash Memoize is unsafe! Please use memoize-one instead',
|
||||
},
|
||||
{
|
||||
name: '@testing-library/react',
|
||||
message: 'Please use spec/helpers/testing-library instead',
|
||||
},
|
||||
{
|
||||
name: '@testing-library/react-dom-utils',
|
||||
message: 'Please use spec/helpers/testing-library instead',
|
||||
},
|
||||
],
|
||||
patterns: ['antd/*'],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ describe('Horizontal FilterBar', () => {
|
|||
cy.getBySel('filter-control-name')
|
||||
.contains('test_12')
|
||||
.should('not.be.visible');
|
||||
cy.get('.ant-popover-inner-content').scrollTo('bottom');
|
||||
cy.get('.antd5-popover-inner').scrollTo('bottom');
|
||||
cy.getBySel('filter-control-name').contains('test_12').should('be.visible');
|
||||
});
|
||||
|
||||
|
|
@ -226,7 +226,7 @@ describe('Horizontal FilterBar', () => {
|
|||
cy.getBySel('slice-header').within(() => {
|
||||
cy.get('.filter-counts').trigger('mouseover');
|
||||
});
|
||||
cy.get('.filterStatusPopover').contains('test_9').click();
|
||||
cy.getBySel('filter-status-popover').contains('test_9').click();
|
||||
cy.getBySel('dropdown-content').should('be.visible');
|
||||
cy.get('.ant-select-focused').should('be.visible');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -456,19 +456,19 @@ export function applyAdvancedTimeRangeFilterOnDashboard(
|
|||
endRange?: string,
|
||||
) {
|
||||
cy.get('.control-label').contains('RANGE TYPE').should('be.visible');
|
||||
cy.get('.ant-popover-content .ant-select-selector')
|
||||
cy.get('.antd5-popover-content .ant-select-selector')
|
||||
.should('be.visible')
|
||||
.click();
|
||||
cy.get(`[label="Advanced"]`).should('be.visible').click();
|
||||
cy.get('.section-title').contains('Advanced Time Range').should('be.visible');
|
||||
if (startRange) {
|
||||
cy.get('.ant-popover-inner-content')
|
||||
cy.get('.antd5-popover-inner-content')
|
||||
.find('[class^=ant-input]')
|
||||
.first()
|
||||
.type(`${startRange}`);
|
||||
}
|
||||
if (endRange) {
|
||||
cy.get('.ant-popover-inner-content')
|
||||
cy.get('.antd5-popover-inner-content')
|
||||
.find('[class^=ant-input]')
|
||||
.last()
|
||||
.type(`${endRange}`);
|
||||
|
|
|
|||
|
|
@ -555,7 +555,7 @@ export const exploreView = {
|
|||
timeSection: {
|
||||
timeRangeFilter: dataTestLocator('time-range-trigger'),
|
||||
timeRangeFilterModal: {
|
||||
container: '.ant-popover-content',
|
||||
container: '.antd5-popover-content',
|
||||
footer: '.footer',
|
||||
cancelButton: dataTestLocator('cancel-button'),
|
||||
configureLastTimeRange: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "eslint-plugin-translation-vars",
|
||||
"name": "eslint-plugin-i18n-strings",
|
||||
"version": "1.0.0",
|
||||
"description": "Warns about translation variables",
|
||||
"main": "index.js",
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -68,8 +68,8 @@
|
|||
"prod": "npm run build",
|
||||
"prune": "rm -rf ./{packages,plugins}/*/{node_modules,lib,esm,tsconfig.tsbuildinfo,package-lock.json} ./.temp_cache",
|
||||
"storybook": "cross-env NODE_ENV=development BABEL_ENV=development storybook dev -p 6006",
|
||||
"tdd": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=4096\" jest --watch",
|
||||
"test": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=4096\" jest --max-workers=50%",
|
||||
"tdd": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=8192\" jest --watch",
|
||||
"test": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=8192\" jest --max-workers=80% --silent",
|
||||
"type": "tsc --noEmit",
|
||||
"update-maps": "jupyter nbconvert --to notebook --execute --inplace 'plugins/legacy-plugin-chart-country-map/scripts/Country Map GeoJSON Generator.ipynb' -Xfrozen_modules=off",
|
||||
"validate-release": "../RELEASING/validate_this_release.sh"
|
||||
|
|
@ -139,6 +139,7 @@
|
|||
"dom-to-pdf": "^0.3.2",
|
||||
"echarts": "^5.6.0",
|
||||
"emotion-rgba": "0.0.12",
|
||||
"eslint-plugin-i18n-strings": "file:eslint-rules/eslint-plugin-i18n-strings",
|
||||
"fast-glob": "^3.3.2",
|
||||
"fs-extra": "^11.2.0",
|
||||
"fuse.js": "^7.0.0",
|
||||
|
|
@ -253,7 +254,7 @@
|
|||
"@storybook/react-webpack5": "8.1.11",
|
||||
"@svgr/webpack": "^8.1.0",
|
||||
"@testing-library/dom": "^8.20.1",
|
||||
"@testing-library/jest-dom": "^6.5.0",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^12.1.5",
|
||||
"@testing-library/react-hooks": "^8.0.1",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
|
|
@ -301,6 +302,7 @@
|
|||
"css-loader": "^7.1.2",
|
||||
"css-minimizer-webpack-plugin": "^7.0.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-matchers": "^7.1.2",
|
||||
"esbuild": "^0.20.0",
|
||||
"esbuild-loader": "^4.2.2",
|
||||
"eslint": "^8.56.0",
|
||||
|
|
@ -321,8 +323,7 @@
|
|||
"eslint-plugin-react-prefer-function-component": "^3.3.0",
|
||||
"eslint-plugin-storybook": "^0.8.0",
|
||||
"eslint-plugin-testing-library": "^6.4.0",
|
||||
"eslint-plugin-theme-colors": "file:tools/eslint-plugin-theme-colors",
|
||||
"eslint-plugin-translation-vars": "file:tools/eslint-plugin-translation-vars",
|
||||
"eslint-plugin-theme-colors": "file:eslint-rules/eslint-plugin-theme-colors",
|
||||
"exports-loader": "^5.0.0",
|
||||
"fetch-mock": "^7.7.3",
|
||||
"fork-ts-checker-webpack-plugin": "^9.0.2",
|
||||
|
|
@ -331,9 +332,7 @@
|
|||
"ignore-styles": "^5.0.1",
|
||||
"imports-loader": "^5.0.0",
|
||||
"jest": "^29.7.0",
|
||||
"jest-environment-enzyme": "^7.1.2",
|
||||
"jest-environment-jsdom": "^29.7.0",
|
||||
"jest-enzyme": "^7.1.2",
|
||||
"jest-html-reporter": "^3.10.2",
|
||||
"jest-websocket-mock": "^2.5.0",
|
||||
"jsdom": "^26.0.0",
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
* under the License.
|
||||
*/
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Popover } from 'antd';
|
||||
import { Popover } from 'antd-v5';
|
||||
import type ReactAce from 'react-ace';
|
||||
import type { PopoverProps } from 'antd/lib/popover';
|
||||
import type { PopoverProps } from 'antd-v5/lib/popover';
|
||||
import { CalculatorOutlined } from '@ant-design/icons';
|
||||
import { css, styled, useTheme, t } from '@superset-ui/core';
|
||||
|
||||
|
|
@ -72,7 +72,7 @@ export const SQLPopover = (props: PopoverProps & { sqlExpression: string }) => {
|
|||
/>
|
||||
}
|
||||
placement="bottomLeft"
|
||||
arrowPointAtCenter
|
||||
arrow={{ pointAtCenter: true }}
|
||||
title={t('SQL expression')}
|
||||
{...props}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -19,17 +19,23 @@
|
|||
|
||||
import { QueryFormMetric, isSavedMetric, isAdhocMetricSimple } from './types';
|
||||
|
||||
export default function getMetricLabel(metric: QueryFormMetric): string {
|
||||
export default function getMetricLabel(
|
||||
metric: QueryFormMetric,
|
||||
index?: number,
|
||||
queryFormMetrics?: QueryFormMetric[],
|
||||
verboseMap?: Record<string, string>,
|
||||
): string {
|
||||
let label = '';
|
||||
if (isSavedMetric(metric)) {
|
||||
return metric;
|
||||
}
|
||||
if (metric.label) {
|
||||
return metric.label;
|
||||
}
|
||||
if (isAdhocMetricSimple(metric)) {
|
||||
return `${metric.aggregate}(${
|
||||
label = metric;
|
||||
} else if (metric.label) {
|
||||
({ label } = metric);
|
||||
} else if (isAdhocMetricSimple(metric)) {
|
||||
label = `${metric.aggregate}(${
|
||||
metric.column.columnName || metric.column.column_name
|
||||
})`;
|
||||
} else {
|
||||
label = metric.sqlExpression;
|
||||
}
|
||||
return metric.sqlExpression;
|
||||
return verboseMap?.[label] || label;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import { triggerResizeObserver } from 'resize-observer-polyfill';
|
||||
import { promiseTimeout, WithLegend } from '@superset-ui/core';
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
let renderChart = jest.fn();
|
||||
let renderLegend = jest.fn();
|
||||
|
|
@ -32,18 +32,18 @@ describe.skip('WithLegend', () => {
|
|||
});
|
||||
|
||||
it('sets className', () => {
|
||||
const wrapper = shallow(
|
||||
const { container } = render(
|
||||
<WithLegend
|
||||
className="test-class"
|
||||
renderChart={renderChart}
|
||||
renderLegend={renderLegend}
|
||||
/>,
|
||||
);
|
||||
expect(wrapper.hasClass('test-class')).toEqual(true);
|
||||
expect(container.querySelectorAll('.test-class')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('renders when renderLegend is not set', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<WithLegend
|
||||
debounceTime={1}
|
||||
width={500}
|
||||
|
|
@ -56,13 +56,13 @@ describe.skip('WithLegend', () => {
|
|||
// Have to delay more than debounceTime (1ms)
|
||||
return promiseTimeout(() => {
|
||||
expect(renderChart).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.render().find('div.chart')).toHaveLength(1);
|
||||
expect(wrapper.render().find('div.legend')).toHaveLength(0);
|
||||
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.legend')).toHaveLength(0);
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('renders', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<WithLegend
|
||||
debounceTime={1}
|
||||
width={500}
|
||||
|
|
@ -77,13 +77,13 @@ describe.skip('WithLegend', () => {
|
|||
return promiseTimeout(() => {
|
||||
expect(renderChart).toHaveBeenCalledTimes(1);
|
||||
expect(renderLegend).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.render().find('div.chart')).toHaveLength(1);
|
||||
expect(wrapper.render().find('div.legend')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('renders without width or height', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<WithLegend
|
||||
debounceTime={1}
|
||||
renderChart={renderChart}
|
||||
|
|
@ -96,13 +96,13 @@ describe.skip('WithLegend', () => {
|
|||
return promiseTimeout(() => {
|
||||
expect(renderChart).toHaveBeenCalledTimes(1);
|
||||
expect(renderLegend).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.render().find('div.chart')).toHaveLength(1);
|
||||
expect(wrapper.render().find('div.legend')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('renders legend on the left', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<WithLegend
|
||||
debounceTime={1}
|
||||
position="left"
|
||||
|
|
@ -116,13 +116,13 @@ describe.skip('WithLegend', () => {
|
|||
return promiseTimeout(() => {
|
||||
expect(renderChart).toHaveBeenCalledTimes(1);
|
||||
expect(renderLegend).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.render().find('div.chart')).toHaveLength(1);
|
||||
expect(wrapper.render().find('div.legend')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('renders legend on the right', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<WithLegend
|
||||
debounceTime={1}
|
||||
position="right"
|
||||
|
|
@ -136,13 +136,13 @@ describe.skip('WithLegend', () => {
|
|||
return promiseTimeout(() => {
|
||||
expect(renderChart).toHaveBeenCalledTimes(1);
|
||||
expect(renderLegend).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.render().find('div.chart')).toHaveLength(1);
|
||||
expect(wrapper.render().find('div.legend')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('renders legend on the top', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<WithLegend
|
||||
debounceTime={1}
|
||||
position="top"
|
||||
|
|
@ -156,13 +156,13 @@ describe.skip('WithLegend', () => {
|
|||
return promiseTimeout(() => {
|
||||
expect(renderChart).toHaveBeenCalledTimes(1);
|
||||
expect(renderLegend).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.render().find('div.chart')).toHaveLength(1);
|
||||
expect(wrapper.render().find('div.legend')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('renders legend on the bottom', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<WithLegend
|
||||
debounceTime={1}
|
||||
position="bottom"
|
||||
|
|
@ -176,13 +176,13 @@ describe.skip('WithLegend', () => {
|
|||
return promiseTimeout(() => {
|
||||
expect(renderChart).toHaveBeenCalledTimes(1);
|
||||
expect(renderLegend).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.render().find('div.chart')).toHaveLength(1);
|
||||
expect(wrapper.render().find('div.legend')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('renders legend with justifyContent set', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<WithLegend
|
||||
debounceTime={1}
|
||||
position="right"
|
||||
|
|
@ -197,8 +197,8 @@ describe.skip('WithLegend', () => {
|
|||
return promiseTimeout(() => {
|
||||
expect(renderChart).toHaveBeenCalledTimes(1);
|
||||
expect(renderLegend).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.render().find('div.chart')).toHaveLength(1);
|
||||
expect(wrapper.render().find('div.legend')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.chart')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('div.legend')).toHaveLength(1);
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,16 +16,15 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import { ReactNode } from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import '@testing-library/jest-dom';
|
||||
import { render, screen, act } from '@testing-library/react';
|
||||
import ChartClient from '../../../src/chart/clients/ChartClient';
|
||||
import ChartDataProvider, {
|
||||
ChartDataProviderProps,
|
||||
} from '../../../src/chart/components/ChartDataProvider';
|
||||
import { bigNumberFormData } from '../fixtures/formData';
|
||||
|
||||
// Note: the mock implementation of these function directly affects the expected results below
|
||||
// Keep existing mock setup
|
||||
const defaultMockLoadFormData = jest.fn(({ formData }: { formData: unknown }) =>
|
||||
Promise.resolve(formData),
|
||||
);
|
||||
|
|
@ -50,7 +49,6 @@ const mockLoadQueryData = jest.fn<Promise<unknown>, unknown[]>(
|
|||
);
|
||||
|
||||
const actual = jest.requireActual('../../../src/chart/clients/ChartClient');
|
||||
// ChartClient is now a mock
|
||||
jest.spyOn(actual, 'default').mockImplementation(() => ({
|
||||
loadDatasource: mockLoadDatasource,
|
||||
loadFormData: mockLoadFormData,
|
||||
|
|
@ -62,7 +60,6 @@ const ChartClientMock = ChartClient as jest.Mock<ChartClient>;
|
|||
describe('ChartDataProvider', () => {
|
||||
beforeEach(() => {
|
||||
ChartClientMock.mockClear();
|
||||
|
||||
mockLoadFormData = defaultMockLoadFormData;
|
||||
mockLoadFormData.mockClear();
|
||||
mockLoadDatasource.mockClear();
|
||||
|
|
@ -71,11 +68,17 @@ describe('ChartDataProvider', () => {
|
|||
|
||||
const props: ChartDataProviderProps = {
|
||||
formData: { ...bigNumberFormData },
|
||||
children: () => <div />,
|
||||
children: ({ loading, payload, error }) => (
|
||||
<div>
|
||||
{loading && <span role="status">Loading...</span>}
|
||||
{payload && <pre role="contentinfo">{JSON.stringify(payload)}</pre>}
|
||||
{error && <div role="alert">{error.message}</div>}
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
function setup(overrideProps?: Partial<ChartDataProviderProps>) {
|
||||
return shallow(<ChartDataProvider {...props} {...overrideProps} />);
|
||||
return render(<ChartDataProvider {...props} {...overrideProps} />);
|
||||
}
|
||||
|
||||
it('instantiates a new ChartClient()', () => {
|
||||
|
|
@ -86,7 +89,7 @@ describe('ChartDataProvider', () => {
|
|||
describe('ChartClient.loadFormData', () => {
|
||||
it('calls method on mount', () => {
|
||||
setup();
|
||||
expect(mockLoadFormData.mock.calls).toHaveLength(1);
|
||||
expect(mockLoadFormData).toHaveBeenCalledTimes(1);
|
||||
expect(mockLoadFormData.mock.calls[0][0]).toEqual({
|
||||
sliceId: props.sliceId,
|
||||
formData: props.formData,
|
||||
|
|
@ -96,234 +99,231 @@ describe('ChartDataProvider', () => {
|
|||
it('should pass formDataRequestOptions to ChartClient.loadFormData', () => {
|
||||
const options = { host: 'override' };
|
||||
setup({ formDataRequestOptions: options });
|
||||
expect(mockLoadFormData.mock.calls).toHaveLength(1);
|
||||
expect(mockLoadFormData).toHaveBeenCalledTimes(1);
|
||||
expect(mockLoadFormData.mock.calls[0][1]).toEqual(options);
|
||||
});
|
||||
|
||||
it('calls ChartClient.loadFormData when formData or sliceId change', () => {
|
||||
const wrapper = setup();
|
||||
it('calls ChartClient.loadFormData when formData or sliceId change', async () => {
|
||||
const { rerender } = setup();
|
||||
const newProps = { sliceId: 123, formData: undefined };
|
||||
expect(mockLoadFormData.mock.calls).toHaveLength(1);
|
||||
expect(mockLoadFormData).toHaveBeenCalledTimes(1);
|
||||
|
||||
wrapper.setProps(newProps);
|
||||
expect(mockLoadFormData.mock.calls).toHaveLength(2);
|
||||
rerender(<ChartDataProvider {...props} {...newProps} />);
|
||||
expect(mockLoadFormData).toHaveBeenCalledTimes(2);
|
||||
expect(mockLoadFormData.mock.calls[1][0]).toEqual(newProps);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ChartClient.loadDatasource', () => {
|
||||
it('does not method if loadDatasource is false', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(1);
|
||||
it('does not call method if loadDatasource is false', async () => {
|
||||
setup({ loadDatasource: false });
|
||||
setTimeout(() => {
|
||||
expect(mockLoadDatasource.mock.calls).toHaveLength(0);
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
|
||||
it('calls method on mount if loadDatasource is true', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(2);
|
||||
setup({ loadDatasource: true });
|
||||
setTimeout(() => {
|
||||
expect(mockLoadDatasource.mock.calls).toHaveLength(1);
|
||||
expect(mockLoadDatasource.mock.calls[0][0]).toEqual(
|
||||
props.formData.datasource,
|
||||
);
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
|
||||
it('should pass datasourceRequestOptions to ChartClient.loadDatasource', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(2);
|
||||
const options = { host: 'override' };
|
||||
setup({ loadDatasource: true, datasourceRequestOptions: options });
|
||||
setTimeout(() => {
|
||||
expect(mockLoadDatasource.mock.calls).toHaveLength(1);
|
||||
expect(mockLoadDatasource.mock.calls[0][1]).toEqual(options);
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
|
||||
it('calls ChartClient.loadDatasource if loadDatasource is true and formData or sliceId change', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(3);
|
||||
const newDatasource = 'test';
|
||||
const wrapper = setup({ loadDatasource: true });
|
||||
wrapper.setProps({
|
||||
formData: { datasource: newDatasource },
|
||||
sliceId: undefined,
|
||||
await act(async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
expect(mockLoadDatasource).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
expect(mockLoadDatasource.mock.calls).toHaveLength(2);
|
||||
expect(mockLoadDatasource.mock.calls[0][0]).toEqual(
|
||||
it('calls method on mount if loadDatasource is true', async () => {
|
||||
setup({ loadDatasource: true });
|
||||
await act(async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
expect(mockLoadDatasource).toHaveBeenCalledTimes(1);
|
||||
expect(mockLoadDatasource.mock.calls[0]).toEqual([
|
||||
props.formData.datasource,
|
||||
undefined,
|
||||
]);
|
||||
});
|
||||
|
||||
it('should pass datasourceRequestOptions to ChartClient.loadDatasource', async () => {
|
||||
const options = { host: 'override' };
|
||||
setup({ loadDatasource: true, datasourceRequestOptions: options });
|
||||
await act(async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
expect(mockLoadDatasource).toHaveBeenCalledTimes(1);
|
||||
expect(mockLoadDatasource.mock.calls[0][1]).toEqual(options);
|
||||
});
|
||||
|
||||
it('calls ChartClient.loadDatasource if loadDatasource is true and formData or sliceId change', async () => {
|
||||
const { rerender } = setup({ loadDatasource: true });
|
||||
const newDatasource = 'test';
|
||||
|
||||
await act(async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
rerender(
|
||||
<ChartDataProvider
|
||||
{...props}
|
||||
formData={{ ...props.formData, datasource: newDatasource }}
|
||||
loadDatasource
|
||||
/>,
|
||||
);
|
||||
expect(mockLoadDatasource.mock.calls[1][0]).toEqual(newDatasource);
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
expect(mockLoadDatasource).toHaveBeenCalledTimes(2);
|
||||
expect(mockLoadDatasource.mock.calls[0]).toEqual([
|
||||
props.formData.datasource,
|
||||
undefined,
|
||||
]);
|
||||
expect(mockLoadDatasource.mock.calls[1]).toEqual([
|
||||
newDatasource,
|
||||
undefined,
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ChartClient.loadQueryData', () => {
|
||||
it('calls method on mount', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(2);
|
||||
it('calls method on mount', async () => {
|
||||
setup();
|
||||
setTimeout(() => {
|
||||
expect(mockLoadQueryData.mock.calls).toHaveLength(1);
|
||||
expect(mockLoadQueryData.mock.calls[0][0]).toEqual(props.formData);
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
await act(async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
expect(mockLoadQueryData).toHaveBeenCalledTimes(1);
|
||||
expect(mockLoadQueryData.mock.calls[0]).toEqual([
|
||||
props.formData,
|
||||
undefined,
|
||||
]);
|
||||
});
|
||||
|
||||
it('should pass queryDataRequestOptions to ChartClient.loadQueryData', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(2);
|
||||
it('should pass queryDataRequestOptions to ChartClient.loadQueryData', async () => {
|
||||
const options = { host: 'override' };
|
||||
setup({ queryRequestOptions: options });
|
||||
setTimeout(() => {
|
||||
expect(mockLoadQueryData.mock.calls).toHaveLength(1);
|
||||
expect(mockLoadQueryData.mock.calls[0][1]).toEqual(options);
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
await act(async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
expect(mockLoadQueryData).toHaveBeenCalledTimes(1);
|
||||
expect(mockLoadQueryData).toHaveBeenCalledWith(
|
||||
expect.anything(),
|
||||
options,
|
||||
);
|
||||
});
|
||||
|
||||
it('calls ChartClient.loadQueryData when formData or sliceId change', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(3);
|
||||
it('calls ChartClient.loadQueryData when formData or sliceId change', async () => {
|
||||
const { rerender } = setup();
|
||||
const newFormData = { key: 'test' };
|
||||
const wrapper = setup();
|
||||
wrapper.setProps({ formData: newFormData, sliceId: undefined });
|
||||
|
||||
setTimeout(() => {
|
||||
expect(mockLoadQueryData.mock.calls).toHaveLength(2);
|
||||
expect(mockLoadQueryData.mock.calls[0][0]).toEqual(props.formData);
|
||||
expect(mockLoadQueryData.mock.calls[1][0]).toEqual(newFormData);
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
await act(async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
rerender(<ChartDataProvider {...props} formData={newFormData} />);
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
expect(mockLoadQueryData).toHaveBeenCalledTimes(2);
|
||||
expect(mockLoadQueryData.mock.calls[0]).toEqual([
|
||||
props.formData,
|
||||
undefined,
|
||||
]);
|
||||
expect(mockLoadQueryData.mock.calls[1]).toEqual([newFormData, undefined]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('children', () => {
|
||||
it('calls children({ loading: true }) when loading', () => {
|
||||
const children = jest.fn<ReactNode, unknown[]>();
|
||||
setup({ children });
|
||||
it('shows loading state initially', async () => {
|
||||
mockLoadFormData.mockImplementation(() => new Promise(() => {}));
|
||||
mockLoadQueryData.mockImplementation(() => new Promise(() => {}));
|
||||
mockLoadDatasource.mockImplementation(() => new Promise(() => {}));
|
||||
|
||||
// during the first tick (before more promises resolve) loading is true
|
||||
expect(children.mock.calls).toHaveLength(1);
|
||||
expect(children.mock.calls[0][0]).toEqual({ loading: true });
|
||||
setup();
|
||||
await screen.findByRole('status');
|
||||
});
|
||||
|
||||
it('calls children({ payload }) when loaded', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(2);
|
||||
const children = jest.fn<ReactNode, unknown[]>();
|
||||
setup({ children, loadDatasource: true });
|
||||
it('shows payload when loaded', async () => {
|
||||
mockLoadFormData.mockResolvedValue(props.formData);
|
||||
mockLoadQueryData.mockResolvedValue([props.formData]);
|
||||
mockLoadDatasource.mockResolvedValue(props.formData.datasource);
|
||||
|
||||
setTimeout(() => {
|
||||
expect(children.mock.calls).toHaveLength(2);
|
||||
expect(children.mock.calls[1][0]).toEqual({
|
||||
payload: {
|
||||
setup({ loadDatasource: true });
|
||||
|
||||
const payloadElement = await screen.findByRole('contentinfo');
|
||||
const actualPayload = JSON.parse(payloadElement.textContent || '');
|
||||
|
||||
expect(actualPayload).toEqual({
|
||||
formData: props.formData,
|
||||
datasource: props.formData.datasource,
|
||||
queriesData: [props.formData],
|
||||
},
|
||||
});
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
|
||||
it('calls children({ error }) upon request error', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(2);
|
||||
const children = jest.fn<ReactNode, unknown[]>();
|
||||
mockLoadFormData = jest.fn(() => Promise.reject(new Error('error')));
|
||||
|
||||
setup({ children });
|
||||
|
||||
setTimeout(() => {
|
||||
expect(children.mock.calls).toHaveLength(2); // loading + error
|
||||
expect(children.mock.calls[1][0]).toEqual({
|
||||
error: new Error('error'),
|
||||
});
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
|
||||
it('calls children({ error }) upon JS error', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(2);
|
||||
const children = jest.fn<ReactNode, unknown[]>();
|
||||
it('shows error message upon request error', async () => {
|
||||
const errorMessage = 'error';
|
||||
mockLoadFormData.mockRejectedValue(new Error(errorMessage));
|
||||
|
||||
mockLoadFormData = jest.fn(() => {
|
||||
setup();
|
||||
|
||||
const errorElement = await screen.findByRole('alert');
|
||||
expect(errorElement).toHaveAttribute('role', 'alert');
|
||||
expect(errorElement).toHaveTextContent(errorMessage);
|
||||
});
|
||||
|
||||
it('shows error message upon JS error', async () => {
|
||||
mockLoadFormData.mockImplementation(() => {
|
||||
throw new Error('non-async error');
|
||||
});
|
||||
|
||||
setup({ children });
|
||||
setup();
|
||||
|
||||
setTimeout(() => {
|
||||
expect(children.mock.calls).toHaveLength(2); // loading + error
|
||||
expect(children.mock.calls[1][0]).toEqual({
|
||||
error: new Error('non-async error'),
|
||||
const errorElement = await screen.findByRole('alert');
|
||||
expect(errorElement).toHaveAttribute('role', 'alert');
|
||||
expect(errorElement).toHaveTextContent('non-async error');
|
||||
});
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
});
|
||||
|
||||
describe('callbacks', () => {
|
||||
it('calls onLoad(payload) when loaded', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(2);
|
||||
const onLoaded = jest.fn<void, unknown[]>();
|
||||
it('calls onLoaded when loaded', async () => {
|
||||
const onLoaded = jest.fn();
|
||||
mockLoadFormData.mockResolvedValue(props.formData);
|
||||
mockLoadQueryData.mockResolvedValue([props.formData]);
|
||||
mockLoadDatasource.mockResolvedValue(props.formData.datasource);
|
||||
|
||||
setup({ onLoaded, loadDatasource: true });
|
||||
|
||||
setTimeout(() => {
|
||||
expect(onLoaded.mock.calls).toHaveLength(1);
|
||||
expect(onLoaded.mock.calls[0][0]).toEqual({
|
||||
await act(async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
expect(onLoaded).toHaveBeenCalledTimes(1);
|
||||
expect(onLoaded).toHaveBeenCalledWith({
|
||||
formData: props.formData,
|
||||
datasource: props.formData.datasource,
|
||||
queriesData: [props.formData],
|
||||
});
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
});
|
||||
|
||||
it('calls onError(error) upon request error', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(2);
|
||||
const onError = jest.fn<void, unknown[]>();
|
||||
mockLoadFormData = jest.fn(() => Promise.reject(new Error('error')));
|
||||
it('calls onError upon request error', async () => {
|
||||
const onError = jest.fn();
|
||||
mockLoadFormData.mockRejectedValue(new Error('error'));
|
||||
|
||||
setup({ onError });
|
||||
setTimeout(() => {
|
||||
expect(onError.mock.calls).toHaveLength(1);
|
||||
expect(onError.mock.calls[0][0]).toEqual(new Error('error'));
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
|
||||
it('calls onError(error) upon JS error', () =>
|
||||
new Promise(done => {
|
||||
expect.assertions(2);
|
||||
const onError = jest.fn<void, unknown[]>();
|
||||
await act(async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
mockLoadFormData = jest.fn(() => {
|
||||
expect(onError).toHaveBeenCalledTimes(1);
|
||||
expect(onError).toHaveBeenCalledWith(new Error('error'));
|
||||
});
|
||||
|
||||
it('calls onError upon JS error', async () => {
|
||||
const onError = jest.fn();
|
||||
mockLoadFormData.mockImplementation(() => {
|
||||
throw new Error('non-async error');
|
||||
});
|
||||
|
||||
setup({ onError });
|
||||
setTimeout(() => {
|
||||
expect(onError.mock.calls).toHaveLength(1);
|
||||
expect(onError.mock.calls[0][0]).toEqual(
|
||||
new Error('non-async error'),
|
||||
);
|
||||
done(undefined);
|
||||
}, 0);
|
||||
}));
|
||||
|
||||
await act(async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
expect(onError).toHaveBeenCalledTimes(1);
|
||||
expect(onError).toHaveBeenCalledWith(new Error('non-async error'));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,10 +17,12 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import '@testing-library/jest-dom';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ReactElement } from 'react';
|
||||
import mockConsole, { RestoreConsole } from 'jest-mock-console';
|
||||
import { triggerResizeObserver } from 'resize-observer-polyfill';
|
||||
import ErrorBoundary from 'react-error-boundary';
|
||||
import { ErrorBoundary } from 'react-error-boundary';
|
||||
|
||||
import {
|
||||
promiseTimeout,
|
||||
|
|
@ -28,9 +30,7 @@ import {
|
|||
supersetTheme,
|
||||
ThemeProvider,
|
||||
} from '@superset-ui/core';
|
||||
import { mount as enzymeMount } from 'enzyme';
|
||||
import { WrapperProps } from '../../../src/chart/components/SuperChart';
|
||||
import NoResultsComponent from '../../../src/chart/components/NoResultsComponent';
|
||||
|
||||
import {
|
||||
ChartKeys,
|
||||
|
|
@ -44,45 +44,39 @@ const DEFAULT_QUERIES_DATA = [
|
|||
{ data: ['foo2', 'bar2'] },
|
||||
];
|
||||
|
||||
function expectDimension(
|
||||
renderedWrapper: cheerio.Cheerio,
|
||||
width: number,
|
||||
height: number,
|
||||
) {
|
||||
expect(renderedWrapper.find('.dimension').text()).toEqual(
|
||||
[width, height].join('x'),
|
||||
);
|
||||
// Fix for expect outside test block - move expectDimension into a test utility
|
||||
// Replace expectDimension function with a non-expect version
|
||||
function getDimensionText(container: HTMLElement) {
|
||||
const dimensionEl = container.querySelector('.dimension');
|
||||
return dimensionEl?.textContent || '';
|
||||
}
|
||||
|
||||
const mount = (component: ReactElement) =>
|
||||
enzymeMount(component, {
|
||||
wrappingComponent: ThemeProvider,
|
||||
wrappingComponentProps: { theme: supersetTheme },
|
||||
const renderWithTheme = (component: ReactElement) =>
|
||||
render(component, {
|
||||
wrapper: ({ children }) => (
|
||||
<ThemeProvider theme={supersetTheme}>{children}</ThemeProvider>
|
||||
),
|
||||
});
|
||||
|
||||
// TODO: rewrite to rtl
|
||||
describe.skip('SuperChart', () => {
|
||||
describe('SuperChart', () => {
|
||||
jest.setTimeout(5000);
|
||||
|
||||
let restoreConsole: RestoreConsole;
|
||||
|
||||
const plugins = [
|
||||
new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }),
|
||||
new BuggyChartPlugin().configure({ key: ChartKeys.BUGGY }),
|
||||
];
|
||||
|
||||
let restoreConsole: RestoreConsole;
|
||||
|
||||
beforeAll(() => {
|
||||
plugins.forEach(p => {
|
||||
p.unregister().register();
|
||||
});
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
plugins.forEach(p => {
|
||||
p.unregister();
|
||||
});
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
restoreConsole = mockConsole();
|
||||
triggerResizeObserver([]); // Reset any pending resize observers
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
|
@ -105,14 +99,16 @@ describe.skip('SuperChart', () => {
|
|||
|
||||
afterEach(() => {
|
||||
window.removeEventListener('error', onError);
|
||||
// eslint-disable-next-line jest/no-standalone-expect
|
||||
});
|
||||
|
||||
it('should have correct number of errors', () => {
|
||||
expect(actualErrors).toBe(expectedErrors);
|
||||
expectedErrors = 0;
|
||||
});
|
||||
|
||||
it('renders default FallbackComponent', async () => {
|
||||
expectedErrors = 1;
|
||||
const wrapper = mount(
|
||||
renderWithTheme(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.BUGGY}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
|
|
@ -120,16 +116,19 @@ describe.skip('SuperChart', () => {
|
|||
height="200"
|
||||
/>,
|
||||
);
|
||||
await new Promise(resolve => setImmediate(resolve));
|
||||
wrapper.update();
|
||||
expect(wrapper.text()).toContain('Oops! An error occurred!');
|
||||
|
||||
expect(
|
||||
await screen.findByText('Oops! An error occurred!'),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
it('renders custom FallbackComponent', () => {
|
||||
|
||||
it('renders custom FallbackComponent', async () => {
|
||||
expectedErrors = 1;
|
||||
const CustomFallbackComponent = jest.fn(() => (
|
||||
<div>Custom Fallback!</div>
|
||||
));
|
||||
const wrapper = mount(
|
||||
|
||||
renderWithTheme(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.BUGGY}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
|
|
@ -139,15 +138,13 @@ describe.skip('SuperChart', () => {
|
|||
/>,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().find('div.test-component')).toHaveLength(0);
|
||||
expect(await screen.findByText('Custom Fallback!')).toBeInTheDocument();
|
||||
expect(CustomFallbackComponent).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
it('call onErrorBoundary', () => {
|
||||
it('call onErrorBoundary', async () => {
|
||||
expectedErrors = 1;
|
||||
const handleError = jest.fn();
|
||||
mount(
|
||||
renderWithTheme(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.BUGGY}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
|
|
@ -157,17 +154,20 @@ describe.skip('SuperChart', () => {
|
|||
/>,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
await screen.findByText('Oops! An error occurred!');
|
||||
expect(handleError).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
it('does not include ErrorBoundary if told so', () => {
|
||||
|
||||
// Update the test cases
|
||||
it('does not include ErrorBoundary if told so', async () => {
|
||||
expectedErrors = 1;
|
||||
const inactiveErrorHandler = jest.fn();
|
||||
const activeErrorHandler = jest.fn();
|
||||
mount(
|
||||
// @ts-ignore
|
||||
<ErrorBoundary onError={activeErrorHandler}>
|
||||
renderWithTheme(
|
||||
<ErrorBoundary
|
||||
fallbackRender={() => <div>Error!</div>}
|
||||
onError={activeErrorHandler}
|
||||
>
|
||||
<SuperChart
|
||||
disableErrorBoundary
|
||||
chartType={ChartKeys.BUGGY}
|
||||
|
|
@ -179,15 +179,24 @@ describe.skip('SuperChart', () => {
|
|||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
await screen.findByText('Error!');
|
||||
expect(activeErrorHandler).toHaveBeenCalledTimes(1);
|
||||
expect(inactiveErrorHandler).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
expect(inactiveErrorHandler).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('passes the props to renderer correctly', () => {
|
||||
const wrapper = mount(
|
||||
// Update the props tests to use className instead of data-testid
|
||||
// Helper function to find elements by class name
|
||||
const findByClassName = (container: HTMLElement, className: string) =>
|
||||
container.querySelector(`.${className}`);
|
||||
|
||||
// Update test cases
|
||||
// Update timeout for all async tests
|
||||
jest.setTimeout(10000);
|
||||
|
||||
// Update the props test to wait for component to render
|
||||
it('passes the props to renderer correctly', async () => {
|
||||
const { container } = renderWithTheme(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
|
|
@ -197,91 +206,75 @@ describe.skip('SuperChart', () => {
|
|||
/>,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
const renderedWrapper = wrapper.render();
|
||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
||||
expectDimension(renderedWrapper, 101, 118);
|
||||
await promiseTimeout(() => {
|
||||
const testComponent = findByClassName(container, 'test-component');
|
||||
expect(testComponent).not.toBeNull();
|
||||
expect(testComponent).toBeInTheDocument();
|
||||
expect(getDimensionText(container)).toBe('101x118');
|
||||
});
|
||||
});
|
||||
|
||||
it('passes the props with multiple queries to renderer correctly', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queriesData={DEFAULT_QUERIES_DATA}
|
||||
width={101}
|
||||
height={118}
|
||||
formData={{ abc: 1 }}
|
||||
/>,
|
||||
);
|
||||
// Helper function to create a sized wrapper
|
||||
const createSizedWrapper = () => {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.style.width = '300px';
|
||||
wrapper.style.height = '300px';
|
||||
wrapper.style.position = 'relative';
|
||||
wrapper.style.display = 'block';
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
return promiseTimeout(() => {
|
||||
const renderedWrapper = wrapper.render();
|
||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
||||
expectDimension(renderedWrapper, 101, 118);
|
||||
});
|
||||
});
|
||||
// Update dimension tests to wait for resize observer
|
||||
// First, increase the timeout for all tests
|
||||
jest.setTimeout(20000);
|
||||
|
||||
it('passes the props with multiple queries and single query to renderer correctly (backward compatibility)', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queriesData={DEFAULT_QUERIES_DATA}
|
||||
width={101}
|
||||
height={118}
|
||||
formData={{ abc: 1 }}
|
||||
/>,
|
||||
);
|
||||
// Update the waitForDimensions helper to include a retry mechanism
|
||||
// Update waitForDimensions to avoid await in loop
|
||||
const waitForDimensions = async (
|
||||
container: HTMLElement,
|
||||
expectedWidth: number,
|
||||
expectedHeight: number,
|
||||
) => {
|
||||
const maxAttempts = 5;
|
||||
const interval = 100;
|
||||
|
||||
return promiseTimeout(() => {
|
||||
const renderedWrapper = wrapper.render();
|
||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
||||
expectDimension(renderedWrapper, 101, 118);
|
||||
});
|
||||
});
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
let attempts = 0;
|
||||
|
||||
describe('supports NoResultsComponent', () => {
|
||||
it('renders NoResultsComponent when queriesData is missing', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart chartType={ChartKeys.DILIGENT} width="200" height="200" />,
|
||||
);
|
||||
const checkDimension = () => {
|
||||
const testComponent = container.querySelector('.test-component');
|
||||
const dimensionEl = container.querySelector('.dimension');
|
||||
|
||||
expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
|
||||
});
|
||||
if (!testComponent || !dimensionEl) {
|
||||
if (attempts >= maxAttempts) {
|
||||
reject(new Error('Elements not found'));
|
||||
return;
|
||||
}
|
||||
attempts += 1;
|
||||
setTimeout(checkDimension, interval);
|
||||
return;
|
||||
}
|
||||
|
||||
it('renders NoResultsComponent when queriesData data is null', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queriesData={[{ data: null }]}
|
||||
width="200"
|
||||
height="200"
|
||||
/>,
|
||||
);
|
||||
if (dimensionEl.textContent !== `${expectedWidth}x${expectedHeight}`) {
|
||||
if (attempts >= maxAttempts) {
|
||||
reject(new Error('Dimension mismatch'));
|
||||
return;
|
||||
}
|
||||
attempts += 1;
|
||||
setTimeout(checkDimension, interval);
|
||||
return;
|
||||
}
|
||||
|
||||
expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
resolve();
|
||||
};
|
||||
|
||||
describe('supports dynamic width and/or height', () => {
|
||||
it('works with width and height that are numbers', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
width={100}
|
||||
height={100}
|
||||
/>,
|
||||
);
|
||||
checkDimension();
|
||||
});
|
||||
};
|
||||
|
||||
return promiseTimeout(() => {
|
||||
const renderedWrapper = wrapper.render();
|
||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
||||
expectDimension(renderedWrapper, 100, 100);
|
||||
});
|
||||
});
|
||||
it('works when width and height are percent', () => {
|
||||
const wrapper = mount(
|
||||
// Update the resize observer trigger to ensure it's called after component mount
|
||||
it.skip('works when width and height are percent', async () => {
|
||||
const { container } = renderWithTheme(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
|
|
@ -290,85 +283,88 @@ describe.skip('SuperChart', () => {
|
|||
height="100%"
|
||||
/>,
|
||||
);
|
||||
triggerResizeObserver();
|
||||
|
||||
return promiseTimeout(() => {
|
||||
const renderedWrapper = wrapper.render();
|
||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
||||
expectDimension(renderedWrapper, 300, 300);
|
||||
}, 100);
|
||||
// Wait for initial render
|
||||
await new Promise(resolve => setTimeout(resolve, 50));
|
||||
|
||||
triggerResizeObserver([
|
||||
{
|
||||
contentRect: {
|
||||
width: 300,
|
||||
height: 300,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 300,
|
||||
bottom: 300,
|
||||
x: 0,
|
||||
y: 0,
|
||||
toJSON() {
|
||||
return {
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
top: this.top,
|
||||
left: this.left,
|
||||
right: this.right,
|
||||
bottom: this.bottom,
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
};
|
||||
},
|
||||
},
|
||||
borderBoxSize: [{ blockSize: 300, inlineSize: 300 }],
|
||||
contentBoxSize: [{ blockSize: 300, inlineSize: 300 }],
|
||||
devicePixelContentBoxSize: [{ blockSize: 300, inlineSize: 300 }],
|
||||
target: document.createElement('div'),
|
||||
},
|
||||
]);
|
||||
|
||||
await waitForDimensions(container, 300, 300);
|
||||
});
|
||||
it('works when only width is percent', () => {
|
||||
const wrapper = mount(
|
||||
|
||||
it('passes the props with multiple queries to renderer correctly', async () => {
|
||||
const { container } = renderWithTheme(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
debounceTime={1}
|
||||
width="50%"
|
||||
height="125"
|
||||
queriesData={DEFAULT_QUERIES_DATA}
|
||||
width={101}
|
||||
height={118}
|
||||
formData={{ abc: 1 }}
|
||||
/>,
|
||||
);
|
||||
// @ts-ignore
|
||||
triggerResizeObserver([{ contentRect: { height: 125, width: 150 } }]);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
const renderedWrapper = wrapper.render();
|
||||
const boundingBox = renderedWrapper
|
||||
.find('div.test-component')
|
||||
.parent()
|
||||
.parent()
|
||||
.parent();
|
||||
expect(boundingBox.css('width')).toEqual('50%');
|
||||
expect(boundingBox.css('height')).toEqual('125px');
|
||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
||||
expectDimension(renderedWrapper, 150, 125);
|
||||
}, 100);
|
||||
await promiseTimeout(() => {
|
||||
const testComponent = container.querySelector('.test-component');
|
||||
expect(testComponent).not.toBeNull();
|
||||
expect(testComponent).toBeInTheDocument();
|
||||
expect(getDimensionText(container)).toBe('101x118');
|
||||
});
|
||||
it('works when only height is percent', () => {
|
||||
const wrapper = mount(
|
||||
});
|
||||
|
||||
describe('supports NoResultsComponent', () => {
|
||||
it('renders NoResultsComponent when queriesData is missing', () => {
|
||||
renderWithTheme(
|
||||
<SuperChart chartType={ChartKeys.DILIGENT} width="200" height="200" />,
|
||||
);
|
||||
|
||||
expect(screen.getByText('No Results')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders NoResultsComponent when queriesData data is null', () => {
|
||||
renderWithTheme(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
debounceTime={1}
|
||||
width="50"
|
||||
height="25%"
|
||||
queriesData={[{ data: null }]}
|
||||
width="200"
|
||||
height="200"
|
||||
/>,
|
||||
);
|
||||
// @ts-ignore
|
||||
triggerResizeObserver([{ contentRect: { height: 75, width: 50 } }]);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
const renderedWrapper = wrapper.render();
|
||||
const boundingBox = renderedWrapper
|
||||
.find('div.test-component')
|
||||
.parent()
|
||||
.parent()
|
||||
.parent();
|
||||
expect(boundingBox.css('width')).toEqual('50px');
|
||||
expect(boundingBox.css('height')).toEqual('25%');
|
||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
||||
expectDimension(renderedWrapper, 50, 75);
|
||||
}, 100);
|
||||
});
|
||||
it('works when width and height are not specified', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
debounceTime={1}
|
||||
/>,
|
||||
);
|
||||
triggerResizeObserver();
|
||||
|
||||
return promiseTimeout(() => {
|
||||
const renderedWrapper = wrapper.render();
|
||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
||||
expectDimension(renderedWrapper, 300, 400);
|
||||
}, 100);
|
||||
expect(screen.getByText('No Results')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('supports Wrapper', () => {
|
||||
describe('supports dynamic width and/or height', () => {
|
||||
// Add MyWrapper component definition
|
||||
function MyWrapper({ width, height, children }: WrapperProps) {
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -380,30 +376,30 @@ describe.skip('SuperChart', () => {
|
|||
);
|
||||
}
|
||||
|
||||
it('works with width and height that are numbers', () => {
|
||||
const wrapper = mount(
|
||||
it('works with width and height that are numbers', async () => {
|
||||
const { container } = renderWithTheme(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
width={100}
|
||||
height={100}
|
||||
Wrapper={MyWrapper}
|
||||
/>,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
const renderedWrapper = wrapper.render();
|
||||
expect(renderedWrapper.find('div.wrapper-insert')).toHaveLength(1);
|
||||
expect(renderedWrapper.find('div.wrapper-insert').text()).toEqual(
|
||||
'100x100',
|
||||
);
|
||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
||||
expectDimension(renderedWrapper, 100, 100);
|
||||
}, 100);
|
||||
await promiseTimeout(() => {
|
||||
const testComponent = container.querySelector('.test-component');
|
||||
expect(testComponent).not.toBeNull();
|
||||
expect(testComponent).toBeInTheDocument();
|
||||
expect(getDimensionText(container)).toBe('100x100');
|
||||
});
|
||||
});
|
||||
|
||||
it('works when width and height are percent', () => {
|
||||
const wrapper = mount(
|
||||
it.skip('works when width and height are percent', async () => {
|
||||
const wrapper = createSizedWrapper();
|
||||
document.body.appendChild(wrapper);
|
||||
|
||||
const { container } = renderWithTheme(
|
||||
<div style={{ width: '100%', height: '100%', position: 'absolute' }}>
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
queriesData={[DEFAULT_QUERY_DATA]}
|
||||
|
|
@ -411,19 +407,50 @@ describe.skip('SuperChart', () => {
|
|||
width="100%"
|
||||
height="100%"
|
||||
Wrapper={MyWrapper}
|
||||
/>,
|
||||
/>
|
||||
</div>,
|
||||
);
|
||||
triggerResizeObserver();
|
||||
|
||||
return promiseTimeout(() => {
|
||||
const renderedWrapper = wrapper.render();
|
||||
expect(renderedWrapper.find('div.wrapper-insert')).toHaveLength(1);
|
||||
expect(renderedWrapper.find('div.wrapper-insert').text()).toEqual(
|
||||
'300x300',
|
||||
);
|
||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
||||
expectDimension(renderedWrapper, 300, 300);
|
||||
}, 100);
|
||||
});
|
||||
wrapper.appendChild(container);
|
||||
|
||||
// Wait for initial render
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
|
||||
// Trigger resize
|
||||
triggerResizeObserver([
|
||||
{
|
||||
contentRect: {
|
||||
width: 300,
|
||||
height: 300,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 300,
|
||||
bottom: 300,
|
||||
x: 0,
|
||||
y: 0,
|
||||
toJSON() {
|
||||
return this;
|
||||
},
|
||||
},
|
||||
borderBoxSize: [{ blockSize: 300, inlineSize: 300 }],
|
||||
contentBoxSize: [{ blockSize: 300, inlineSize: 300 }],
|
||||
devicePixelContentBoxSize: [{ blockSize: 300, inlineSize: 300 }],
|
||||
target: wrapper,
|
||||
},
|
||||
]);
|
||||
|
||||
// Wait for resize to be processed
|
||||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
|
||||
// Check dimensions
|
||||
const wrapperInsert = container.querySelector('.wrapper-insert');
|
||||
expect(wrapperInsert).not.toBeNull();
|
||||
expect(wrapperInsert).toBeInTheDocument();
|
||||
expect(wrapperInsert).toHaveTextContent('300x300');
|
||||
|
||||
await waitForDimensions(container, 300, 300);
|
||||
|
||||
document.body.removeChild(wrapper);
|
||||
}, 30000);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,16 +17,11 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { ReactElement, ReactNode } from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import '@testing-library/jest-dom';
|
||||
import { ReactElement } from 'react';
|
||||
import mockConsole, { RestoreConsole } from 'jest-mock-console';
|
||||
import {
|
||||
ChartProps,
|
||||
promiseTimeout,
|
||||
supersetTheme,
|
||||
SupersetTheme,
|
||||
ThemeProvider,
|
||||
} from '@superset-ui/core';
|
||||
import { ChartProps, supersetTheme, ThemeProvider } from '@superset-ui/core';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import SuperChartCore from '../../../src/chart/components/SuperChartCore';
|
||||
import {
|
||||
ChartKeys,
|
||||
|
|
@ -35,25 +30,11 @@ import {
|
|||
SlowChartPlugin,
|
||||
} from './MockChartPlugins';
|
||||
|
||||
const Wrapper = ({
|
||||
theme,
|
||||
children,
|
||||
}: {
|
||||
theme: SupersetTheme;
|
||||
children: ReactNode;
|
||||
}) => <ThemeProvider theme={theme}>{children}</ThemeProvider>;
|
||||
|
||||
const styledMount = (component: ReactElement) =>
|
||||
mount(component, {
|
||||
wrappingComponent: Wrapper,
|
||||
wrappingComponentProps: {
|
||||
theme: supersetTheme,
|
||||
},
|
||||
});
|
||||
const renderWithTheme = (component: ReactElement) =>
|
||||
render(<ThemeProvider theme={supersetTheme}>{component}</ThemeProvider>);
|
||||
|
||||
describe('SuperChartCore', () => {
|
||||
const chartProps = new ChartProps();
|
||||
|
||||
const plugins = [
|
||||
new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }),
|
||||
new LazyChartPlugin().configure({ key: ChartKeys.LAZY }),
|
||||
|
|
@ -63,6 +44,7 @@ describe('SuperChartCore', () => {
|
|||
let restoreConsole: RestoreConsole;
|
||||
|
||||
beforeAll(() => {
|
||||
jest.setTimeout(30000);
|
||||
plugins.forEach(p => {
|
||||
p.unregister().register();
|
||||
});
|
||||
|
|
@ -83,72 +65,83 @@ describe('SuperChartCore', () => {
|
|||
});
|
||||
|
||||
describe('registered charts', () => {
|
||||
it('renders registered chart', () => {
|
||||
const wrapper = styledMount(
|
||||
it('renders registered chart', async () => {
|
||||
const { container } = renderWithTheme(
|
||||
<SuperChartCore
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
chartProps={chartProps}
|
||||
/>,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
|
||||
await waitFor(() => {
|
||||
expect(container.querySelector('.test-component')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it('renders registered chart with lazy loading', () => {
|
||||
const wrapper = styledMount(
|
||||
|
||||
it('renders registered chart with lazy loading', async () => {
|
||||
const { container } = renderWithTheme(
|
||||
<SuperChartCore chartType={ChartKeys.LAZY} />,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
|
||||
await waitFor(() => {
|
||||
expect(container.querySelector('.test-component')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it('does not render if chartType is not set', () => {
|
||||
// Suppress warning
|
||||
// @ts-ignore chartType is required
|
||||
const wrapper = styledMount(<SuperChartCore />);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().children()).toHaveLength(0);
|
||||
}, 5);
|
||||
it('does not render if chartType is not set', async () => {
|
||||
// @ts-ignore chartType is required
|
||||
const { container } = renderWithTheme(<SuperChartCore />);
|
||||
|
||||
await waitFor(() => {
|
||||
const testComponent = container.querySelector('.test-component');
|
||||
expect(testComponent).not.toBeInTheDocument();
|
||||
});
|
||||
it('adds id to container if specified', () => {
|
||||
const wrapper = styledMount(
|
||||
});
|
||||
|
||||
it('adds id to container if specified', async () => {
|
||||
const { container } = renderWithTheme(
|
||||
<SuperChartCore chartType={ChartKeys.DILIGENT} id="the-chart" />,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().attr('id')).toEqual('the-chart');
|
||||
await waitFor(() => {
|
||||
const element = container.querySelector('#the-chart');
|
||||
expect(element).toBeInTheDocument();
|
||||
expect(element).toHaveAttribute('id', 'the-chart');
|
||||
});
|
||||
});
|
||||
it('adds class to container if specified', () => {
|
||||
const wrapper = styledMount(
|
||||
|
||||
it('adds class to container if specified', async () => {
|
||||
const { container } = renderWithTheme(
|
||||
<SuperChartCore chartType={ChartKeys.DILIGENT} className="the-chart" />,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.hasClass('the-chart')).toBeTruthy();
|
||||
}, 0);
|
||||
await waitFor(() => {
|
||||
const element = container.querySelector('.the-chart');
|
||||
expect(element).toBeInTheDocument();
|
||||
expect(element).toHaveClass('the-chart');
|
||||
});
|
||||
it('uses overrideTransformProps when specified', () => {
|
||||
const wrapper = styledMount(
|
||||
});
|
||||
|
||||
it('uses overrideTransformProps when specified', async () => {
|
||||
renderWithTheme(
|
||||
<SuperChartCore
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
overrideTransformProps={() => ({ message: 'hulk' })}
|
||||
/>,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().find('.message').text()).toEqual('hulk');
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('hulk')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it('uses preTransformProps when specified', () => {
|
||||
|
||||
it('uses preTransformProps when specified', async () => {
|
||||
const chartPropsWithPayload = new ChartProps({
|
||||
queriesData: [{ message: 'hulk' }],
|
||||
theme: supersetTheme,
|
||||
});
|
||||
const wrapper = styledMount(
|
||||
|
||||
renderWithTheme(
|
||||
<SuperChartCore
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
preTransformProps={() => chartPropsWithPayload}
|
||||
|
|
@ -156,69 +149,77 @@ describe('SuperChartCore', () => {
|
|||
/>,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().find('.message').text()).toEqual('hulk');
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('hulk')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it('uses postTransformProps when specified', () => {
|
||||
const wrapper = styledMount(
|
||||
|
||||
it('uses postTransformProps when specified', async () => {
|
||||
renderWithTheme(
|
||||
<SuperChartCore
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
postTransformProps={() => ({ message: 'hulk' })}
|
||||
/>,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().find('.message').text()).toEqual('hulk');
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('hulk')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it('renders if chartProps is not specified', () => {
|
||||
const wrapper = styledMount(
|
||||
|
||||
it('renders if chartProps is not specified', async () => {
|
||||
const { container } = renderWithTheme(
|
||||
<SuperChartCore chartType={ChartKeys.DILIGENT} />,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
|
||||
await waitFor(() => {
|
||||
expect(container.querySelector('.test-component')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('does not render anything while waiting for Chart code to load', () => {
|
||||
const wrapper = styledMount(
|
||||
const { container } = renderWithTheme(
|
||||
<SuperChartCore chartType={ChartKeys.SLOW} />,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().children()).toHaveLength(0);
|
||||
const testComponent = container.querySelector('.test-component');
|
||||
expect(testComponent).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it('eventually renders after Chart is loaded', () => {
|
||||
// Suppress warning
|
||||
const wrapper = styledMount(
|
||||
|
||||
it('eventually renders after Chart is loaded', async () => {
|
||||
const { container } = renderWithTheme(
|
||||
<SuperChartCore chartType={ChartKeys.SLOW} />,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().find('div.test-component')).toHaveLength(1);
|
||||
}, 1500);
|
||||
await waitFor(
|
||||
() => {
|
||||
expect(
|
||||
container.querySelector('.test-component'),
|
||||
).toBeInTheDocument();
|
||||
},
|
||||
{ timeout: 2000 },
|
||||
);
|
||||
});
|
||||
it('does not render if chartProps is null', () => {
|
||||
const wrapper = styledMount(
|
||||
|
||||
it('does not render if chartProps is null', async () => {
|
||||
const { container } = renderWithTheme(
|
||||
<SuperChartCore chartType={ChartKeys.DILIGENT} chartProps={null} />,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().find('div.test-component')).toHaveLength(0);
|
||||
await waitFor(() => {
|
||||
expect(container).toBeEmptyDOMElement();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('unregistered charts', () => {
|
||||
it('renders error message', () => {
|
||||
const wrapper = styledMount(
|
||||
it('renders error message', async () => {
|
||||
renderWithTheme(
|
||||
<SuperChartCore chartType="4d-pie-chart" chartProps={chartProps} />,
|
||||
);
|
||||
|
||||
return promiseTimeout(() => {
|
||||
expect(wrapper.render().find('.alert')).toHaveLength(1);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('alert')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,10 +17,11 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import '@testing-library/jest-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { PureComponent } from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { reactify } from '@superset-ui/core';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { RenderFuncType } from '../../../src/chart/components/reactify';
|
||||
|
||||
describe('reactify(renderFn)', () => {
|
||||
|
|
@ -78,14 +79,18 @@ describe('reactify(renderFn)', () => {
|
|||
|
||||
it('returns a React component class', () =>
|
||||
new Promise(done => {
|
||||
const wrapper = mount(<TestComponent />);
|
||||
render(<TestComponent />);
|
||||
|
||||
expect(renderFn).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.html()).toEqual('<div id="test"><b>abc</b></div>');
|
||||
expect(screen.getByText('abc')).toBeInTheDocument();
|
||||
expect(screen.getByText('abc').parentNode).toHaveAttribute('id', 'test');
|
||||
setTimeout(() => {
|
||||
expect(renderFn).toHaveBeenCalledTimes(2);
|
||||
expect(wrapper.html()).toEqual('<div id="test"><b>def</b></div>');
|
||||
wrapper.unmount();
|
||||
expect(screen.getByText('def')).toBeInTheDocument();
|
||||
expect(screen.getByText('def').parentNode).toHaveAttribute(
|
||||
'id',
|
||||
'test',
|
||||
);
|
||||
done(undefined);
|
||||
}, 20);
|
||||
}));
|
||||
|
|
@ -119,8 +124,9 @@ describe('reactify(renderFn)', () => {
|
|||
describe('defaultProps', () => {
|
||||
it('has defaultProps if renderFn.defaultProps is defined', () => {
|
||||
expect(TheChart.defaultProps).toBe(renderFn.defaultProps);
|
||||
const wrapper = mount(<TheChart id="test" />);
|
||||
expect(wrapper.html()).toEqual('<div id="test"><b>ghi</b></div>');
|
||||
render(<TheChart id="test" />);
|
||||
expect(screen.getByText('ghi')).toBeInTheDocument();
|
||||
expect(screen.getByText('ghi').parentNode).toHaveAttribute('id', 'test');
|
||||
});
|
||||
it('does not have defaultProps if renderFn.defaultProps is not defined', () => {
|
||||
const AnotherChart = reactify(() => {});
|
||||
|
|
@ -136,9 +142,9 @@ describe('reactify(renderFn)', () => {
|
|||
});
|
||||
it('calls willUnmount hook when it is provided', () =>
|
||||
new Promise(done => {
|
||||
const wrapper = mount(<AnotherTestComponent />);
|
||||
const { unmount } = render(<AnotherTestComponent />);
|
||||
setTimeout(() => {
|
||||
wrapper.unmount();
|
||||
unmount();
|
||||
expect(willUnmountCb).toHaveBeenCalledTimes(1);
|
||||
done(undefined);
|
||||
}, 20);
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import {
|
|||
ensureIsArray,
|
||||
GenericDataType,
|
||||
getCustomFormatter,
|
||||
getMetricLabel,
|
||||
getNumberFormatter,
|
||||
getXAxisLabel,
|
||||
isDefined,
|
||||
|
|
@ -291,12 +292,20 @@ export default function transformProps(
|
|||
const showValueIndexesB = extractShowValueIndexes(rawSeriesB, {
|
||||
stack,
|
||||
});
|
||||
|
||||
const metricsLabels = metrics
|
||||
.map(metric => getMetricLabel(metric, undefined, undefined, verboseMap))
|
||||
.filter((label): label is string => label !== undefined);
|
||||
const metricsLabelsB = metricsB.map((metric: QueryFormMetric) =>
|
||||
getMetricLabel(metric, undefined, undefined, verboseMap),
|
||||
);
|
||||
|
||||
const { totalStackedValues, thresholdValues } = extractDataTotalValues(
|
||||
rebasedDataA,
|
||||
{
|
||||
stack,
|
||||
percentageThreshold,
|
||||
xAxisCol: xAxisLabel,
|
||||
metricsLabels,
|
||||
},
|
||||
);
|
||||
const {
|
||||
|
|
@ -305,7 +314,7 @@ export default function transformProps(
|
|||
} = extractDataTotalValues(rebasedDataB, {
|
||||
stack: Boolean(stackB),
|
||||
percentageThreshold,
|
||||
xAxisCol: xAxisLabel,
|
||||
metricsLabels: metricsLabelsB,
|
||||
});
|
||||
|
||||
annotationLayers
|
||||
|
|
|
|||
|
|
@ -215,14 +215,18 @@ export default function transformProps(
|
|||
) {
|
||||
xAxisLabel = verboseMap[xAxisLabel];
|
||||
}
|
||||
const metricsLabels = metrics
|
||||
.map(metric => getMetricLabel(metric, undefined, undefined, verboseMap))
|
||||
.filter((label): label is string => label !== undefined);
|
||||
const isHorizontal = orientation === OrientationType.Horizontal;
|
||||
|
||||
const { totalStackedValues, thresholdValues } = extractDataTotalValues(
|
||||
rebasedData,
|
||||
{
|
||||
stack,
|
||||
percentageThreshold,
|
||||
xAxisCol: xAxisLabel,
|
||||
legendState,
|
||||
metricsLabels,
|
||||
},
|
||||
);
|
||||
const extraMetricLabels = extractExtraMetrics(chartProps.rawFormData).map(
|
||||
|
|
@ -296,7 +300,6 @@ export default function transformProps(
|
|||
const entryName = String(entry.name || '');
|
||||
const seriesName = inverted[entryName] || entryName;
|
||||
const colorScaleKey = getOriginalSeries(seriesName, array);
|
||||
|
||||
const transformedSeries = transformSeries(
|
||||
entry,
|
||||
colorScale,
|
||||
|
|
|
|||
|
|
@ -230,7 +230,7 @@ const tooltipPercentageControl: ControlSetItem = {
|
|||
type: 'CheckboxControl',
|
||||
label: t('Show percentage'),
|
||||
renderTrigger: true,
|
||||
default: true,
|
||||
default: false,
|
||||
description: t('Whether to display the percentage value in the tooltip'),
|
||||
visibility: ({ controls, form_data }: ControlPanelsContainerProps) =>
|
||||
Boolean(controls?.rich_tooltip?.value) &&
|
||||
|
|
|
|||
|
|
@ -60,8 +60,8 @@ export function extractDataTotalValues(
|
|||
opts: {
|
||||
stack: StackType;
|
||||
percentageThreshold: number;
|
||||
xAxisCol: string;
|
||||
legendState?: LegendState;
|
||||
metricsLabels: string[];
|
||||
},
|
||||
): {
|
||||
totalStackedValues: number[];
|
||||
|
|
@ -69,11 +69,11 @@ export function extractDataTotalValues(
|
|||
} {
|
||||
const totalStackedValues: number[] = [];
|
||||
const thresholdValues: number[] = [];
|
||||
const { stack, percentageThreshold, xAxisCol, legendState } = opts;
|
||||
const { stack, percentageThreshold, legendState, metricsLabels } = opts;
|
||||
if (stack) {
|
||||
data.forEach(datum => {
|
||||
const values = Object.keys(datum).reduce((prev, curr) => {
|
||||
if (curr === xAxisCol) {
|
||||
if (!metricsLabels.includes(curr)) {
|
||||
return prev;
|
||||
}
|
||||
if (legendState && !legendState[curr]) {
|
||||
|
|
|
|||
|
|
@ -36,15 +36,25 @@ describe('EchartsTimeseries transformProps', () => {
|
|||
colorScheme: 'bnbColors',
|
||||
datasource: '3__table',
|
||||
granularity_sqla: 'ds',
|
||||
metric: 'sum__num',
|
||||
metrics: ['sum__num'],
|
||||
groupby: ['foo', 'bar'],
|
||||
viz_type: 'my_viz',
|
||||
};
|
||||
const queriesData = [
|
||||
{
|
||||
data: [
|
||||
{ 'San Francisco': 1, 'New York': 2, __timestamp: 599616000000 },
|
||||
{ 'San Francisco': 3, 'New York': 4, __timestamp: 599916000000 },
|
||||
{
|
||||
'San Francisco': 1,
|
||||
'New York': 2,
|
||||
__timestamp: 599616000000,
|
||||
sum__num: 4,
|
||||
},
|
||||
{
|
||||
'San Francisco': 3,
|
||||
'New York': 4,
|
||||
__timestamp: 599916000000,
|
||||
sum__num: 8,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -64,7 +74,7 @@ describe('EchartsTimeseries transformProps', () => {
|
|||
height: 600,
|
||||
echartOptions: expect.objectContaining({
|
||||
legend: expect.objectContaining({
|
||||
data: ['San Francisco', 'New York'],
|
||||
data: ['sum__num', 'San Francisco', 'New York'],
|
||||
}),
|
||||
series: expect.arrayContaining([
|
||||
expect.objectContaining({
|
||||
|
|
@ -101,7 +111,7 @@ describe('EchartsTimeseries transformProps', () => {
|
|||
height: 600,
|
||||
echartOptions: expect.objectContaining({
|
||||
legend: expect.objectContaining({
|
||||
data: ['San Francisco', 'New York'],
|
||||
data: ['sum__num', 'San Francisco', 'New York'],
|
||||
}),
|
||||
series: expect.arrayContaining([
|
||||
expect.objectContaining({
|
||||
|
|
@ -146,7 +156,7 @@ describe('EchartsTimeseries transformProps', () => {
|
|||
height: 600,
|
||||
echartOptions: expect.objectContaining({
|
||||
legend: expect.objectContaining({
|
||||
data: ['San Francisco', 'New York', 'My Formula'],
|
||||
data: ['sum__num', 'San Francisco', 'New York', 'My Formula'],
|
||||
}),
|
||||
series: expect.arrayContaining([
|
||||
expect.objectContaining({
|
||||
|
|
@ -274,7 +284,7 @@ describe('EchartsTimeseries transformProps', () => {
|
|||
expect.objectContaining({
|
||||
echartOptions: expect.objectContaining({
|
||||
legend: expect.objectContaining({
|
||||
data: ['San Francisco', 'New York', 'My Line'],
|
||||
data: ['sum__num', 'San Francisco', 'New York', 'My Line'],
|
||||
}),
|
||||
series: expect.arrayContaining([
|
||||
expect.objectContaining({
|
||||
|
|
@ -420,7 +430,7 @@ describe('Does transformProps transform series correctly', () => {
|
|||
colorScheme: 'bnbColors',
|
||||
datasource: '3__table',
|
||||
granularity_sqla: 'ds',
|
||||
metric: 'sum__num',
|
||||
metrics: ['sum__num'],
|
||||
groupby: ['foo', 'bar'],
|
||||
showValue: true,
|
||||
stack: true,
|
||||
|
|
@ -435,24 +445,28 @@ describe('Does transformProps transform series correctly', () => {
|
|||
'New York': 2,
|
||||
Boston: 1,
|
||||
__timestamp: 599616000000,
|
||||
sum__num: 4,
|
||||
},
|
||||
{
|
||||
'San Francisco': 3,
|
||||
'New York': 4,
|
||||
Boston: 1,
|
||||
__timestamp: 599916000000,
|
||||
sum__num: 8,
|
||||
},
|
||||
{
|
||||
'San Francisco': 5,
|
||||
'New York': 8,
|
||||
Boston: 6,
|
||||
__timestamp: 600216000000,
|
||||
sum__num: 19,
|
||||
},
|
||||
{
|
||||
'San Francisco': 2,
|
||||
'New York': 7,
|
||||
Boston: 2,
|
||||
__timestamp: 600516000000,
|
||||
sum__num: 11,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -468,7 +482,7 @@ describe('Does transformProps transform series correctly', () => {
|
|||
const totalStackedValues = queriesData[0].data.reduce(
|
||||
(totals, currentStack) => {
|
||||
const total = Object.keys(currentStack).reduce((stackSum, key) => {
|
||||
if (key === '__timestamp') return stackSum;
|
||||
if (key === '__timestamp' || key === 'sum__num') return stackSum;
|
||||
return stackSum + currentStack[key as keyof typeof currentStack];
|
||||
}, 0);
|
||||
totals.push(total);
|
||||
|
|
@ -561,7 +575,6 @@ describe('Does transformProps transform series correctly', () => {
|
|||
const expectedThresholds = totalStackedValues.map(
|
||||
total => ((formData.percentageThreshold || 0) / 100) * total,
|
||||
);
|
||||
|
||||
transformedSeries.forEach((series, seriesIndex) => {
|
||||
expect(series.label.show).toBe(true);
|
||||
series.data.forEach((value, dataIndex) => {
|
||||
|
|
@ -576,7 +589,6 @@ describe('Does transformProps transform series correctly', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should not apply percentage threshold when showValue is true and stack is false', () => {
|
||||
const updatedChartPropsConfig = {
|
||||
...chartPropsConfig,
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import {
|
|||
calculateLowerLogTick,
|
||||
dedupSeries,
|
||||
extractGroupbyLabel,
|
||||
extractDataTotalValues,
|
||||
extractSeries,
|
||||
extractShowValueIndexes,
|
||||
extractTooltipKeys,
|
||||
|
|
@ -1085,6 +1086,123 @@ const forecastValue = [
|
|||
},
|
||||
];
|
||||
|
||||
describe('extractDataTotalValues', () => {
|
||||
it('test_extractDataTotalValues_withStack', () => {
|
||||
const data: DataRecord[] = [
|
||||
{ metric1: 10, metric2: 20, xAxisCol: '2021-01-01' },
|
||||
{ metric1: 15, metric2: 25, xAxisCol: '2021-01-02' },
|
||||
];
|
||||
const metricsLabels = ['metric1', 'metric2'];
|
||||
const opts = {
|
||||
stack: true,
|
||||
percentageThreshold: 10,
|
||||
metricsLabels,
|
||||
};
|
||||
const result = extractDataTotalValues(data, opts);
|
||||
expect(result.totalStackedValues).toEqual([30, 40]);
|
||||
expect(result.thresholdValues).toEqual([3, 4]);
|
||||
});
|
||||
|
||||
it('should calculate total and threshold values with stack option enabled', () => {
|
||||
const data: DataRecord[] = [
|
||||
{ metric1: 10, metric2: 20, xAxisCol: '2021-01-01' },
|
||||
{ metric1: 15, metric2: 25, xAxisCol: '2021-01-02' },
|
||||
];
|
||||
const metricsLabels = ['metric1', 'metric2'];
|
||||
const opts = {
|
||||
stack: true,
|
||||
percentageThreshold: 10,
|
||||
metricsLabels,
|
||||
};
|
||||
const result = extractDataTotalValues(data, opts);
|
||||
expect(result.totalStackedValues).toEqual([30, 40]);
|
||||
expect(result.thresholdValues).toEqual([3, 4]);
|
||||
});
|
||||
|
||||
it('should handle empty data array', () => {
|
||||
const data: DataRecord[] = [];
|
||||
const metricsLabels: string[] = [];
|
||||
const opts = {
|
||||
stack: true,
|
||||
percentageThreshold: 10,
|
||||
metricsLabels,
|
||||
};
|
||||
const result = extractDataTotalValues(data, opts);
|
||||
expect(result.totalStackedValues).toEqual([]);
|
||||
expect(result.thresholdValues).toEqual([]);
|
||||
});
|
||||
|
||||
it('should calculate total and threshold values with stack option disabled', () => {
|
||||
const data: DataRecord[] = [
|
||||
{ metric1: 10, metric2: 20, xAxisCol: '2021-01-01' },
|
||||
{ metric1: 15, metric2: 25, xAxisCol: '2021-01-02' },
|
||||
];
|
||||
const metricsLabels = ['metric1', 'metric2'];
|
||||
const opts = {
|
||||
stack: false,
|
||||
percentageThreshold: 10,
|
||||
metricsLabels,
|
||||
};
|
||||
const result = extractDataTotalValues(data, opts);
|
||||
expect(result.totalStackedValues).toEqual([]);
|
||||
expect(result.thresholdValues).toEqual([]);
|
||||
});
|
||||
|
||||
it('should handle data with null or undefined values', () => {
|
||||
const data: DataRecord[] = [
|
||||
{ my_x_axis: 'abc', x: 1, y: 0, z: 2 },
|
||||
{ my_x_axis: 'foo', x: null, y: 10, z: 5 },
|
||||
{ my_x_axis: null, x: 4, y: 3, z: 7 },
|
||||
];
|
||||
const metricsLabels = ['x', 'y', 'z'];
|
||||
const opts = {
|
||||
stack: true,
|
||||
percentageThreshold: 10,
|
||||
metricsLabels,
|
||||
};
|
||||
const result = extractDataTotalValues(data, opts);
|
||||
expect(result.totalStackedValues).toEqual([3, 15, 14]);
|
||||
expect(result.thresholdValues).toEqual([
|
||||
0.30000000000000004, 1.5, 1.4000000000000001,
|
||||
]);
|
||||
});
|
||||
|
||||
it('should handle different percentage thresholds', () => {
|
||||
const data: DataRecord[] = [
|
||||
{ metric1: 10, metric2: 20, xAxisCol: '2021-01-01' },
|
||||
{ metric1: 15, metric2: 25, xAxisCol: '2021-01-02' },
|
||||
];
|
||||
const metricsLabels = ['metric1', 'metric2'];
|
||||
const opts = {
|
||||
stack: true,
|
||||
percentageThreshold: 50,
|
||||
metricsLabels,
|
||||
};
|
||||
const result = extractDataTotalValues(data, opts);
|
||||
expect(result.totalStackedValues).toEqual([30, 40]);
|
||||
expect(result.thresholdValues).toEqual([15, 20]);
|
||||
});
|
||||
it('should not add datum not in metrics to the total value when stacked', () => {
|
||||
const data: DataRecord[] = [
|
||||
{ xAxisCol: 'foo', xAxisSort: 10, val: 345 },
|
||||
{ xAxisCol: 'bar', xAxisSort: 20, val: 2432 },
|
||||
{ xAxisCol: 'baz', xAxisSort: 30, val: 4543 },
|
||||
];
|
||||
const metricsLabels = ['val'];
|
||||
const opts = {
|
||||
stack: true,
|
||||
percentageThreshold: 50,
|
||||
metricsLabels,
|
||||
};
|
||||
|
||||
const result = extractDataTotalValues(data, opts);
|
||||
|
||||
// Assuming extractDataTotalValues returns the total value
|
||||
// without including the 'xAxisCol' category
|
||||
expect(result.totalStackedValues).toEqual([345, 2432, 4543]); // 10 + 20, excluding the 'xAxisCol' category
|
||||
});
|
||||
});
|
||||
|
||||
test('extractTooltipKeys with rich tooltip', () => {
|
||||
const result = extractTooltipKeys(forecastValue, 1, true, false);
|
||||
expect(result).toEqual(['foo', 'bar']);
|
||||
|
|
|
|||
|
|
@ -101,6 +101,7 @@ export const handlebarsTemplateControlSetItem: ControlSetItem = {
|
|||
</ul>`,
|
||||
isInt: false,
|
||||
renderTrigger: true,
|
||||
valueKey: null,
|
||||
|
||||
validators: [validateNonEmpty],
|
||||
mapStateToProps: ({ controls }) => ({
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ export const styleControlSetItem: ControlSetItem = {
|
|||
description: t('CSS applied to the chart'),
|
||||
isInt: false,
|
||||
renderTrigger: true,
|
||||
valueKey: null,
|
||||
|
||||
validators: [],
|
||||
mapStateToProps: ({ controls }) => ({
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { AriaAttributes } from 'react';
|
|||
import 'core-js/stable';
|
||||
import 'regenerator-runtime/runtime';
|
||||
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
|
||||
import 'jest-enzyme';
|
||||
import 'enzyme-matchers';
|
||||
import jQuery from 'jquery';
|
||||
import Enzyme from 'enzyme';
|
||||
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
|
||||
|
|
|
|||
|
|
@ -109,6 +109,7 @@ export function sleep(time: number) {
|
|||
|
||||
export * from '@testing-library/react';
|
||||
export { customRender as render };
|
||||
export { default as userEvent } from '@testing-library/user-event';
|
||||
|
||||
export async function selectOption(option: string, selectName?: string) {
|
||||
const select = screen.getByRole(
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { shallow as enzymeShallow, mount as enzymeMount } from 'enzyme';
|
||||
import { mount as enzymeMount } from 'enzyme';
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { supersetTheme } from '@superset-ui/core';
|
||||
import { ReactElement } from 'react';
|
||||
|
|
@ -26,12 +26,13 @@ type optionsType = {
|
|||
wrappingComponentProps?: any;
|
||||
wrappingComponent?: ReactElement;
|
||||
context?: any;
|
||||
newOption?: string;
|
||||
};
|
||||
|
||||
export function styledMount(
|
||||
component: ReactElement,
|
||||
options: optionsType = {},
|
||||
) {
|
||||
): any {
|
||||
return enzymeMount(component, {
|
||||
...options,
|
||||
wrappingComponent: ProviderWrapper,
|
||||
|
|
@ -41,17 +42,3 @@ export function styledMount(
|
|||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function styledShallow(
|
||||
component: ReactElement,
|
||||
options: optionsType = {},
|
||||
) {
|
||||
return enzymeShallow(component, {
|
||||
...options,
|
||||
wrappingComponent: ProviderWrapper,
|
||||
wrappingComponentProps: {
|
||||
theme: supersetTheme,
|
||||
...options?.wrappingComponentProps,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,14 +39,18 @@ export const GlobalStyles = () => (
|
|||
.echarts-tooltip[style*='visibility: hidden'] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Ant Design is applying inline z-index styles causing troubles
|
||||
// TODO: Remove z-indexes when Ant Design is fully upgraded to v5
|
||||
// Prefer vanilla Ant Design z-indexes that should work out of the box
|
||||
.ant-popover,
|
||||
.antd5-dropdown,
|
||||
.ant-dropdown,
|
||||
.ant-select-dropdown,
|
||||
.antd5-modal-wrap,
|
||||
.antd5-modal-mask,
|
||||
.antd5-picker-dropdown {
|
||||
.antd5-picker-dropdown,
|
||||
.ant-popover,
|
||||
.antd5-popover {
|
||||
z-index: ${theme.zIndex.max} !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import sinon from 'sinon';
|
|||
import fetchMock from 'fetch-mock';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import thunk from 'redux-thunk';
|
||||
import { waitFor } from '@testing-library/react';
|
||||
import { waitFor } from 'spec/helpers/testing-library';
|
||||
import * as actions from 'src/SqlLab/actions/sqlLab';
|
||||
import { LOG_EVENT } from 'src/logger/actions';
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -20,8 +20,12 @@ import configureStore from 'redux-mock-store';
|
|||
import thunk from 'redux-thunk';
|
||||
import { Store } from 'redux';
|
||||
|
||||
import { render, fireEvent, waitFor } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import {
|
||||
fireEvent,
|
||||
render,
|
||||
userEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
|
||||
import QueryLimitSelect, {
|
||||
QueryLimitSelectProps,
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ import { isValidElement } from 'react';
|
|||
import thunk from 'redux-thunk';
|
||||
import configureStore from 'redux-mock-store';
|
||||
import QueryTable from 'src/SqlLab/components/QueryTable';
|
||||
import { Provider } from 'react-redux';
|
||||
import { runningQuery, successfulQuery, user } from 'src/SqlLab/fixtures';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
|
||||
|
|
@ -29,27 +28,55 @@ const mockedProps = {
|
|||
displayLimit: 100,
|
||||
latestQueryId: 'ryhMUZCGb',
|
||||
};
|
||||
|
||||
describe('QueryTable', () => {
|
||||
test('is valid', () => {
|
||||
expect(isValidElement(<QueryTable displayLimit={100} />)).toBe(true);
|
||||
});
|
||||
|
||||
test('is valid with props', () => {
|
||||
expect(isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
|
||||
});
|
||||
|
||||
test('renders a proper table', () => {
|
||||
const mockStore = configureStore([thunk]);
|
||||
const store = mockStore({
|
||||
user,
|
||||
const { container } = render(<QueryTable {...mockedProps} />, {
|
||||
store: mockStore({ user }),
|
||||
});
|
||||
|
||||
const { container } = render(
|
||||
<Provider store={store}>
|
||||
<QueryTable {...mockedProps} />
|
||||
</Provider>,
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('listview-table')).toBeVisible(); // Presence of TableCollection
|
||||
expect(screen.getByTestId('listview-table')).toBeVisible();
|
||||
expect(screen.getByRole('table')).toBeVisible();
|
||||
expect(container.querySelector('.table-condensed')).toBeVisible(); // Presence of TableView signature class
|
||||
expect(container.querySelector('.table-condensed')).toBeVisible();
|
||||
expect(container.querySelectorAll('table > thead > tr')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(2);
|
||||
});
|
||||
|
||||
test('renders empty table when no queries provided', () => {
|
||||
const mockStore = configureStore([thunk]);
|
||||
const { container } = render(
|
||||
<QueryTable {...{ ...mockedProps, queries: [] }} />,
|
||||
{ store: mockStore({ user }) },
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('listview-table')).toBeVisible();
|
||||
expect(screen.getByRole('table')).toBeVisible();
|
||||
expect(container.querySelector('.table-condensed')).toBeVisible();
|
||||
expect(container.querySelectorAll('table > thead > tr')).toHaveLength(1);
|
||||
expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(0);
|
||||
});
|
||||
|
||||
test('renders with custom displayLimit', () => {
|
||||
const mockStore = configureStore([thunk]);
|
||||
const customProps = {
|
||||
...mockedProps,
|
||||
displayLimit: 1,
|
||||
queries: [runningQuery], // Modify to only include one query
|
||||
};
|
||||
const { container } = render(<QueryTable {...customProps} />, {
|
||||
store: mockStore({ user }),
|
||||
});
|
||||
|
||||
expect(screen.getByTestId('listview-table')).toBeVisible();
|
||||
expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -143,6 +143,13 @@ const setup = (props?: any, store?: Store) =>
|
|||
});
|
||||
|
||||
describe('ResultSet', () => {
|
||||
// Add cleanup after each test
|
||||
afterEach(async () => {
|
||||
fetchMock.resetHistory();
|
||||
// Wait for any pending effects to complete
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
test('renders a Table', async () => {
|
||||
const { getByTestId } = setup(
|
||||
mockedProps,
|
||||
|
|
@ -157,9 +164,11 @@ describe('ResultSet', () => {
|
|||
},
|
||||
}),
|
||||
);
|
||||
await waitFor(() => {
|
||||
const table = getByTestId('table-container');
|
||||
expect(table).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
test('should render success query', async () => {
|
||||
const query = queries[0];
|
||||
|
|
@ -245,7 +254,7 @@ describe('ResultSet', () => {
|
|||
await waitFor(() =>
|
||||
expect(fetchMock.calls(reRunQueryEndpoint)).toHaveLength(1),
|
||||
);
|
||||
});
|
||||
}, 10000);
|
||||
|
||||
test('should not call reRunQuery if no error', async () => {
|
||||
const query = queries[0];
|
||||
|
|
@ -508,13 +517,22 @@ describe('ResultSet', () => {
|
|||
},
|
||||
}),
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const downloadButton = getByTestId('export-csv-button');
|
||||
fireEvent.click(downloadButton);
|
||||
expect(downloadButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const downloadButton = getByTestId('export-csv-button');
|
||||
await waitFor(() => fireEvent.click(downloadButton));
|
||||
|
||||
const warningModal = await findByRole('dialog');
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
within(warningModal).getByText(`Download is on the way`),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
}, 20000);
|
||||
|
||||
test('should not allow download as CSV when user does not have permission to export data', async () => {
|
||||
const { queryByTestId } = setup(
|
||||
|
|
|
|||
|
|
@ -16,8 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen, userEvent } from 'spec/helpers/testing-library';
|
||||
import { Menu } from 'src/components/Menu';
|
||||
import SaveDatasetActionButton from 'src/SqlLab/components/SaveDatasetActionButton';
|
||||
|
||||
|
|
|
|||
|
|
@ -18,13 +18,13 @@
|
|||
*/
|
||||
import * as reactRedux from 'react-redux';
|
||||
import {
|
||||
cleanup,
|
||||
fireEvent,
|
||||
render,
|
||||
screen,
|
||||
cleanup,
|
||||
userEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import fetchMock from 'fetch-mock';
|
||||
import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
|
||||
import { createDatasource } from 'src/SqlLab/actions/sqlLab';
|
||||
|
|
|
|||
|
|
@ -96,32 +96,36 @@ interface SaveDatasetModalProps {
|
|||
}
|
||||
|
||||
const Styles = styled.div`
|
||||
${({ theme }) => `
|
||||
.sdm-body {
|
||||
margin: 0 8px;
|
||||
margin: 0 ${theme.gridUnit * 2}px;
|
||||
}
|
||||
.sdm-input {
|
||||
margin-left: 45px;
|
||||
margin-left: ${theme.gridUnit * 10}px;
|
||||
width: 401px;
|
||||
}
|
||||
.sdm-autocomplete {
|
||||
width: 401px;
|
||||
align-self: center;
|
||||
margin-left: ${theme.gridUnit}px;
|
||||
}
|
||||
.sdm-radio {
|
||||
display: block;
|
||||
height: 30px;
|
||||
margin: 10px 0px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.sdm-radio span {
|
||||
display: inline-flex;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.sdm-overwrite-msg {
|
||||
margin: 7px;
|
||||
margin: ${theme.gridUnit * 2}px;
|
||||
}
|
||||
.sdm-overwrite-container {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const updateDataset = async (
|
||||
dbId: number,
|
||||
datasetId: number,
|
||||
|
|
|
|||
|
|
@ -18,8 +18,12 @@
|
|||
*/
|
||||
import configureStore from 'redux-mock-store';
|
||||
import thunk from 'redux-thunk';
|
||||
import { render, screen, waitFor } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import SaveQuery from 'src/SqlLab/components/SaveQuery';
|
||||
import { initialState, databases } from 'src/SqlLab/fixtures';
|
||||
|
||||
|
|
|
|||
|
|
@ -26,9 +26,13 @@ import {
|
|||
ThemeProvider,
|
||||
isFeatureEnabled,
|
||||
} from '@superset-ui/core';
|
||||
import { render, screen, act, waitFor } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
act,
|
||||
userEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import ShareSqlLabQuery from 'src/SqlLab/components/ShareSqlLabQuery';
|
||||
import { initialState } from 'src/SqlLab/fixtures';
|
||||
|
||||
|
|
@ -133,7 +137,7 @@ describe('ShareSqlLabQuery', () => {
|
|||
});
|
||||
});
|
||||
const button = screen.getByRole('button');
|
||||
const { id, remoteId, ...expected } = mockQueryEditor;
|
||||
const { id: _id, remoteId: _remoteId, ...expected } = mockQueryEditor;
|
||||
userEvent.click(button);
|
||||
await waitFor(() =>
|
||||
expect(fetchMock.calls(storeQueryUrl)).toHaveLength(1),
|
||||
|
|
@ -150,7 +154,7 @@ describe('ShareSqlLabQuery', () => {
|
|||
});
|
||||
});
|
||||
const button = screen.getByRole('button');
|
||||
const { id, ...expected } = unsavedQueryEditor;
|
||||
const { id: _id, ...expected } = unsavedQueryEditor;
|
||||
userEvent.click(button);
|
||||
await waitFor(() =>
|
||||
expect(fetchMock.calls(storeQueryUrl)).toHaveLength(1),
|
||||
|
|
|
|||
|
|
@ -16,12 +16,12 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { render } from 'spec/helpers/testing-library';
|
||||
import { render, waitFor, within } from 'spec/helpers/testing-library';
|
||||
import SouthPane from 'src/SqlLab/components/SouthPane';
|
||||
import '@testing-library/jest-dom';
|
||||
import { STATUS_OPTIONS } from 'src/SqlLab/constants';
|
||||
import { initialState, table, defaultQueryEditor } from 'src/SqlLab/fixtures';
|
||||
import { denormalizeTimestamp } from '@superset-ui/core';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
const mockedProps = {
|
||||
queryEditorId: defaultQueryEditor.id,
|
||||
|
|
@ -49,12 +49,14 @@ const mockState = {
|
|||
tables: [
|
||||
{
|
||||
...table,
|
||||
id: 't3',
|
||||
name: 'table3',
|
||||
dataPreviewQueryId: '2g2_iRFMl',
|
||||
queryEditorId: defaultQueryEditor.id,
|
||||
},
|
||||
{
|
||||
...table,
|
||||
id: 't4',
|
||||
name: 'table4',
|
||||
dataPreviewQueryId: 'erWdqEWPm',
|
||||
queryEditorId: defaultQueryEditor.id,
|
||||
|
|
@ -149,3 +151,22 @@ test('should render tabs for table metadata view', () => {
|
|||
expect(tabs[index + 2]).toHaveTextContent(`${schema}.${name}`);
|
||||
});
|
||||
});
|
||||
|
||||
test('should remove tab', async () => {
|
||||
const { getAllByRole } = await render(<SouthPane {...mockedProps} />, {
|
||||
useRedux: true,
|
||||
initialState: mockState,
|
||||
});
|
||||
|
||||
const tabs = getAllByRole('tab');
|
||||
const totalTabs = mockState.sqlLab.tables.length + 2;
|
||||
expect(tabs).toHaveLength(totalTabs);
|
||||
const removeButton = within(tabs[2].parentElement as HTMLElement).getByRole(
|
||||
'button',
|
||||
{
|
||||
name: /remove/,
|
||||
},
|
||||
);
|
||||
userEvent.click(removeButton);
|
||||
await waitFor(() => expect(getAllByRole('tab')).toHaveLength(totalTabs - 1));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ const SouthPane = ({
|
|||
dispatch(removeTables([table]));
|
||||
}
|
||||
},
|
||||
[dispatch, queryEditorId],
|
||||
[dispatch, pinnedTables],
|
||||
);
|
||||
|
||||
return offline ? (
|
||||
|
|
|
|||
|
|
@ -17,13 +17,18 @@
|
|||
* under the License.
|
||||
*/
|
||||
import { FocusEventHandler } from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import {
|
||||
isFeatureEnabled,
|
||||
getExtensionsRegistry,
|
||||
FeatureFlag,
|
||||
} from '@superset-ui/core';
|
||||
import { fireEvent, render, waitFor } from 'spec/helpers/testing-library';
|
||||
import {
|
||||
act,
|
||||
cleanup,
|
||||
fireEvent,
|
||||
render,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import fetchMock from 'fetch-mock';
|
||||
import reducers from 'spec/helpers/reducerIndex';
|
||||
import { setupStore } from 'src/views/store';
|
||||
|
|
@ -135,6 +140,15 @@ const createStore = (initState: object) =>
|
|||
});
|
||||
|
||||
describe('SqlEditor', () => {
|
||||
beforeAll(() => {
|
||||
jest.setTimeout(30000);
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
cleanup();
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
const mockedProps = {
|
||||
queryEditor: initialState.sqlLab.queryEditors[0],
|
||||
tables: [table],
|
||||
|
|
@ -187,16 +201,27 @@ describe('SqlEditor', () => {
|
|||
});
|
||||
|
||||
it('render a SqlEditorLeftBar', async () => {
|
||||
const { getByTestId } = setup(mockedProps, store);
|
||||
await waitFor(() =>
|
||||
expect(getByTestId('mock-sql-editor-left-bar')).toBeInTheDocument(),
|
||||
);
|
||||
});
|
||||
const { getByTestId, unmount } = setup(mockedProps, store);
|
||||
|
||||
await waitFor(
|
||||
() => expect(getByTestId('mock-sql-editor-left-bar')).toBeInTheDocument(),
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
|
||||
unmount();
|
||||
}, 15000);
|
||||
|
||||
// Update other similar tests with timeouts
|
||||
it('render an AceEditorWrapper', async () => {
|
||||
const { findByTestId } = setup(mockedProps, store);
|
||||
expect(await findByTestId('react-ace')).toBeInTheDocument();
|
||||
});
|
||||
const { findByTestId, unmount } = setup(mockedProps, store);
|
||||
|
||||
await waitFor(
|
||||
() => expect(findByTestId('react-ace')).resolves.toBeInTheDocument(),
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
|
||||
unmount();
|
||||
}, 15000);
|
||||
|
||||
it('skip rendering an AceEditorWrapper when the current tab is inactive', async () => {
|
||||
const { findByTestId, queryByTestId } = setup(
|
||||
|
|
|
|||
|
|
@ -873,7 +873,9 @@ const SqlEditor: FC<Props> = ({
|
|||
dropdownRender={() => renderDropdown()}
|
||||
trigger={['click']}
|
||||
>
|
||||
<Button buttonSize="xsmall" type="link" showMarginRight={false}>
|
||||
<Icons.MoreHoriz iconColor={theme.colors.grayscale.base} />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,13 @@
|
|||
* under the License.
|
||||
*/
|
||||
import fetchMock from 'fetch-mock';
|
||||
import { render, screen, waitFor, within } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
waitFor,
|
||||
within,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import SqlEditorLeftBar, {
|
||||
SqlEditorLeftBarProps,
|
||||
} from 'src/SqlLab/components/SqlEditorLeftBar';
|
||||
|
|
|
|||
|
|
@ -22,9 +22,9 @@ import {
|
|||
fireEvent,
|
||||
screen,
|
||||
render,
|
||||
userEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { QueryEditor } from 'src/SqlLab/types';
|
||||
import {
|
||||
initialState,
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ test('fades table', async () => {
|
|||
'1',
|
||||
),
|
||||
);
|
||||
});
|
||||
}, 10000);
|
||||
|
||||
test('sorts columns', async () => {
|
||||
const { getAllByTestId, getByText } = render(
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ import {
|
|||
import AutoSizer from 'react-virtualized-auto-sizer';
|
||||
import Icons from 'src/components/Icons';
|
||||
import type { SqlLabRootState } from 'src/SqlLab/types';
|
||||
import { Skeleton, AntdBreadcrumb as Breadcrumb } from 'src/components';
|
||||
import { Skeleton, AntdBreadcrumb as Breadcrumb, Button } from 'src/components';
|
||||
import { Dropdown } from 'src/components/Dropdown';
|
||||
import FilterableTable from 'src/components/FilterableTable';
|
||||
import Tabs from 'src/components/Tabs';
|
||||
|
|
@ -324,11 +324,13 @@ const TablePreview: FC<Props> = ({ dbId, catalog, schema, tableName }) => {
|
|||
)}
|
||||
trigger={['click']}
|
||||
>
|
||||
<Button buttonSize="xsmall" type="link">
|
||||
<Icons.DownSquareOutlined
|
||||
iconSize="m"
|
||||
style={{ marginTop: 2, marginLeft: 4 }}
|
||||
aria-label={t('Table actions')}
|
||||
/>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Title>
|
||||
{isMetadataRefreshing ? (
|
||||
|
|
|
|||
|
|
@ -16,8 +16,12 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { render, screen, waitFor } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import Alert, { AlertProps } from 'src/components/Alert';
|
||||
|
||||
type AlertType = Pick<AlertProps, 'type'>;
|
||||
|
|
|
|||
|
|
@ -16,9 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import '@testing-library/jest-dom';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen, userEvent } from 'spec/helpers/testing-library';
|
||||
import AlteredSliceTag, {
|
||||
alterForComparison,
|
||||
formatValueHandler,
|
||||
|
|
|
|||
|
|
@ -16,9 +16,12 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { render, screen, waitFor } from 'spec/helpers/testing-library';
|
||||
import '@testing-library/jest-dom';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
|
||||
import { ModifiedInfo } from '.';
|
||||
|
||||
|
|
@ -40,7 +43,7 @@ test('should render a tooltip when user is provided', async () => {
|
|||
const tooltip = await screen.findByRole('tooltip');
|
||||
expect(tooltip).toBeInTheDocument();
|
||||
expect(screen.getByText('Modified by: Foo Bar')).toBeInTheDocument();
|
||||
});
|
||||
}, 10000);
|
||||
|
||||
test('should render only the date if username is not provided', async () => {
|
||||
render(<ModifiedInfo date={TEST_DATE} />);
|
||||
|
|
|
|||
|
|
@ -16,10 +16,17 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { render } from 'spec/helpers/testing-library';
|
||||
import { render, waitFor } from 'spec/helpers/testing-library';
|
||||
import Card from '.';
|
||||
|
||||
test('should render', () => {
|
||||
afterEach(async () => {
|
||||
// Wait for any pending effects to complete
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
test('should render', async () => {
|
||||
const { container } = render(<Card />);
|
||||
await waitFor(() => {
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,8 +16,12 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { render, screen, waitFor } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import CertifiedBadge, {
|
||||
CertifiedBadgeProps,
|
||||
} from 'src/components/CertifiedBadge';
|
||||
|
|
|
|||
|
|
@ -16,14 +16,19 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import {
|
||||
Behavior,
|
||||
ChartMetadata,
|
||||
getChartMetadataRegistry,
|
||||
} from '@superset-ui/core';
|
||||
import fetchMock from 'fetch-mock';
|
||||
import { render, screen, within, waitFor } from 'spec/helpers/testing-library';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
within,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
|
||||
import { Menu } from 'src/components/Menu';
|
||||
import { supersetGetCache } from 'src/utils/cachedSupersetGet';
|
||||
|
|
@ -163,6 +168,9 @@ test('render menu item with submenu without searchbox', async () => {
|
|||
expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Add global timeout for all tests
|
||||
jest.setTimeout(20000);
|
||||
|
||||
test('render menu item with submenu and searchbox', async () => {
|
||||
fetchMock.get(DATASET_ENDPOINT, {
|
||||
result: { columns: defaultColumns },
|
||||
|
|
@ -170,19 +178,33 @@ test('render menu item with submenu and searchbox', async () => {
|
|||
renderMenu({});
|
||||
await waitFor(() => fetchMock.called(DATASET_ENDPOINT));
|
||||
await expectDrillByEnabled();
|
||||
|
||||
// Wait for all columns to be visible
|
||||
await waitFor(
|
||||
() => {
|
||||
defaultColumns.forEach(column => {
|
||||
expect(screen.getByText(column.column_name)).toBeInTheDocument();
|
||||
});
|
||||
},
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
|
||||
const searchbox = screen.getAllByPlaceholderText('Search columns')[1];
|
||||
const searchbox = await waitFor(
|
||||
() => screen.getAllByPlaceholderText('Search columns')[1],
|
||||
);
|
||||
expect(searchbox).toBeInTheDocument();
|
||||
|
||||
userEvent.type(searchbox, 'col1');
|
||||
|
||||
await screen.findByText('col1');
|
||||
|
||||
const expectedFilteredColumnNames = ['col1', 'col10', 'col11'];
|
||||
|
||||
// Wait for filtered results
|
||||
await waitFor(() => {
|
||||
expectedFilteredColumnNames.forEach(colName => {
|
||||
expect(screen.getByText(colName)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
defaultColumns
|
||||
.filter(col => !expectedFilteredColumnNames.includes(col.column_name))
|
||||
.forEach(col => {
|
||||
|
|
@ -209,16 +231,22 @@ test('Do not display excluded column in the menu', async () => {
|
|||
await waitFor(() => fetchMock.called(DATASET_ENDPOINT));
|
||||
await expectDrillByEnabled();
|
||||
|
||||
excludedColNames.forEach(colName => {
|
||||
expect(screen.queryByText(colName)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Wait for menu items to be loaded
|
||||
await waitFor(
|
||||
() => {
|
||||
defaultColumns
|
||||
.filter(column => !excludedColNames.includes(column.column_name))
|
||||
.forEach(column => {
|
||||
expect(screen.getByText(column.column_name)).toBeInTheDocument();
|
||||
});
|
||||
},
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
|
||||
excludedColNames.forEach(colName => {
|
||||
expect(screen.queryByText(colName)).not.toBeInTheDocument();
|
||||
});
|
||||
}, 20000);
|
||||
|
||||
test('When menu item is clicked, call onSelection with clicked column and drill by filters', async () => {
|
||||
fetchMock
|
||||
|
|
@ -236,7 +264,10 @@ test('When menu item is clicked, call onSelection with clicked column and drill
|
|||
await waitFor(() => fetchMock.called(DATASET_ENDPOINT));
|
||||
await expectDrillByEnabled();
|
||||
|
||||
userEvent.click(screen.getByText('col1'));
|
||||
// Wait for col1 to be visible before clicking
|
||||
const col1Element = await waitFor(() => screen.getByText('col1'));
|
||||
userEvent.click(col1Element);
|
||||
|
||||
expect(onSelectionMock).toHaveBeenCalledWith(
|
||||
{
|
||||
column_name: 'col1',
|
||||
|
|
@ -244,4 +275,4 @@ test('When menu item is clicked, call onSelection with clicked column and drill
|
|||
},
|
||||
{ filters: defaultFilters, groupbyFieldName: 'groupby' },
|
||||
);
|
||||
});
|
||||
}, 20000);
|
||||
|
|
|
|||
|
|
@ -20,9 +20,13 @@
|
|||
import { useState } from 'react';
|
||||
import fetchMock from 'fetch-mock';
|
||||
import { omit, omitBy } from 'lodash';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { waitFor, within } from '@testing-library/react';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
waitFor,
|
||||
within,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
|
||||
import mockState from 'spec/fixtures/mockState';
|
||||
import { DashboardPageIdContext } from 'src/dashboard/containers/DashboardPage';
|
||||
|
|
|
|||
|
|
@ -18,8 +18,7 @@
|
|||
*/
|
||||
|
||||
import { renderHook } from '@testing-library/react-hooks';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import { render, screen, userEvent } from 'spec/helpers/testing-library';
|
||||
import {
|
||||
DrillByBreadcrumb,
|
||||
useDrillByBreadcrumbs,
|
||||
|
|
|
|||
|
|
@ -18,8 +18,13 @@
|
|||
*/
|
||||
|
||||
import { renderHook } from '@testing-library/react-hooks';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen, within, waitFor } from 'spec/helpers/testing-library';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
within,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import { useResultsTableView } from './useResultsTableView';
|
||||
|
||||
const MOCK_CHART_DATA_RESULT = [
|
||||
|
|
|
|||
|
|
@ -17,8 +17,13 @@
|
|||
* under the License.
|
||||
*/
|
||||
import { useState } from 'react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { cleanup, render, screen, within } from 'spec/helpers/testing-library';
|
||||
import {
|
||||
cleanup,
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
within,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import setupPlugins from 'src/setup/setupPlugins';
|
||||
import { getMockStoreWithNativeFilters } from 'spec/fixtures/mockStore';
|
||||
import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
|
||||
|
|
|
|||
|
|
@ -18,8 +18,7 @@
|
|||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import { render, screen, userEvent } from 'spec/helpers/testing-library';
|
||||
import { getMockStoreWithNativeFilters } from 'spec/fixtures/mockStore';
|
||||
import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
|
||||
import DrillDetailModal from './DrillDetailModal';
|
||||
|
|
|
|||
|
|
@ -16,8 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen, userEvent } from 'spec/helpers/testing-library';
|
||||
import TableControls from './DrillDetailTableControls';
|
||||
|
||||
const setFilters = jest.fn();
|
||||
|
|
|
|||
|
|
@ -16,11 +16,25 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { supersetTheme, hexToRgb } from '@superset-ui/core';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
cleanup,
|
||||
userEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import Collapse, { CollapseProps } from '.';
|
||||
|
||||
describe('Collapse', () => {
|
||||
beforeAll(() => {
|
||||
jest.setTimeout(30000);
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
cleanup();
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
function renderCollapse(props?: CollapseProps) {
|
||||
return render(
|
||||
<Collapse {...props}>
|
||||
|
|
@ -34,75 +48,76 @@ function renderCollapse(props?: CollapseProps) {
|
|||
);
|
||||
}
|
||||
|
||||
test('renders collapsed with default props', () => {
|
||||
renderCollapse();
|
||||
|
||||
test('renders collapsed with default props', async () => {
|
||||
const { unmount } = renderCollapse();
|
||||
const headers = screen.getAllByRole('button');
|
||||
|
||||
expect(headers[0]).toHaveTextContent('Header 1');
|
||||
expect(headers[1]).toHaveTextContent('Header 2');
|
||||
expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
test('renders with one item expanded by default', () => {
|
||||
renderCollapse({ defaultActiveKey: ['1'] });
|
||||
|
||||
test('renders with one item expanded by default', async () => {
|
||||
const { unmount } = renderCollapse({ defaultActiveKey: ['1'] });
|
||||
const headers = screen.getAllByRole('button');
|
||||
|
||||
expect(headers[0]).toHaveTextContent('Header 1');
|
||||
expect(headers[1]).toHaveTextContent('Header 2');
|
||||
expect(screen.getByText('Content 1')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
test('expands on click', () => {
|
||||
renderCollapse();
|
||||
test('expands on click without waitFor', async () => {
|
||||
const { unmount } = renderCollapse();
|
||||
|
||||
expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
|
||||
|
||||
userEvent.click(screen.getAllByRole('button')[0]);
|
||||
await userEvent.click(screen.getAllByRole('button')[0]);
|
||||
|
||||
expect(screen.getByText('Content 1')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
test('expands on click with waitFor', async () => {
|
||||
const { unmount } = renderCollapse();
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
await userEvent.click(screen.getAllByRole('button')[0]);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Content 1')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('collapses on click', () => {
|
||||
renderCollapse({ defaultActiveKey: ['1'] });
|
||||
unmount();
|
||||
});
|
||||
|
||||
// Update other tests similarly with waitFor
|
||||
test('collapses on click', async () => {
|
||||
const { unmount } = renderCollapse({ defaultActiveKey: ['1'] });
|
||||
|
||||
expect(screen.getByText('Content 1')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
|
||||
|
||||
userEvent.click(screen.getAllByRole('button')[0]);
|
||||
await userEvent.click(screen.getAllByRole('button')[0]);
|
||||
|
||||
expect(screen.getByText('Content 1').parentNode).toHaveClass(
|
||||
'ant-collapse-content-hidden',
|
||||
);
|
||||
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
test('renders with custom properties', () => {
|
||||
renderCollapse({
|
||||
light: true,
|
||||
bigger: true,
|
||||
bold: true,
|
||||
animateArrows: true,
|
||||
});
|
||||
|
||||
const header = document.getElementsByClassName('ant-collapse-header')[0];
|
||||
const arrow =
|
||||
document.getElementsByClassName('ant-collapse-arrow')[0].children[0];
|
||||
|
||||
const headerStyle = window.getComputedStyle(header);
|
||||
const arrowStyle = window.getComputedStyle(arrow);
|
||||
|
||||
expect(headerStyle.fontWeight).toBe(
|
||||
supersetTheme.typography.weights.bold.toString(),
|
||||
);
|
||||
expect(headerStyle.fontSize).toBe(`${supersetTheme.gridUnit * 4}px`);
|
||||
expect(headerStyle.color).toBe(
|
||||
hexToRgb(supersetTheme.colors.grayscale.light4),
|
||||
);
|
||||
expect(arrowStyle.transition).toBe('transform 0.24s');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,8 +16,12 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { render, screen, waitFor } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import CopyToClipboard from '.';
|
||||
|
||||
test('renders with default props', () => {
|
||||
|
|
|
|||
|
|
@ -17,15 +17,15 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import fetchMock from 'fetch-mock';
|
||||
import {
|
||||
act,
|
||||
defaultStore as store,
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
waitFor,
|
||||
defaultStore as store,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { api } from 'src/hooks/apiResources/queryApi';
|
||||
import DatabaseSelector, { DatabaseSelectorProps } from '.';
|
||||
import { EmptyState } from '../EmptyState';
|
||||
|
|
|
|||
|
|
@ -17,8 +17,12 @@
|
|||
* under the License.
|
||||
*/
|
||||
import fetchMock from 'fetch-mock';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen, waitFor } from 'spec/helpers/testing-library';
|
||||
import {
|
||||
render,
|
||||
screen,
|
||||
userEvent,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import DatasourceEditor from 'src/components/Datasource/DatasourceEditor';
|
||||
import mockDatasource from 'spec/fixtures/mockDatasource';
|
||||
import { isFeatureEnabled } from '@superset-ui/core';
|
||||
|
|
@ -193,6 +197,8 @@ describe('DatasourceEditor', () => {
|
|||
});
|
||||
|
||||
describe('DatasourceEditor RTL', () => {
|
||||
jest.setTimeout(15000); // Extend timeout to 15s for this test
|
||||
|
||||
it('properly renders the metric information', async () => {
|
||||
await asyncRender(props);
|
||||
const metricButton = screen.getByTestId('collection-tab-Metrics');
|
||||
|
|
|
|||
|
|
@ -16,23 +16,18 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import {
|
||||
act,
|
||||
render,
|
||||
screen,
|
||||
waitFor,
|
||||
fireEvent,
|
||||
cleanup,
|
||||
} from '@testing-library/react';
|
||||
defaultStore as store,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import fetchMock from 'fetch-mock';
|
||||
import { Provider } from 'react-redux';
|
||||
import sinon from 'sinon';
|
||||
import {
|
||||
supersetTheme,
|
||||
ThemeProvider,
|
||||
SupersetClient,
|
||||
} from '@superset-ui/core';
|
||||
import { defaultStore as store } from 'spec/helpers/testing-library';
|
||||
import { SupersetClient } from '@superset-ui/core';
|
||||
import { DatasourceModal } from 'src/components/Datasource';
|
||||
import mockDatasource from 'spec/fixtures/mockDatasource';
|
||||
|
||||
|
|
@ -57,11 +52,8 @@ let container;
|
|||
|
||||
async function renderAndWait(props = mockedProps) {
|
||||
const { container: renderedContainer } = render(
|
||||
<Provider store={store}>
|
||||
<ThemeProvider theme={supersetTheme}>
|
||||
<DatasourceModal {...props} />
|
||||
</ThemeProvider>
|
||||
</Provider>,
|
||||
<DatasourceModal {...props} />,
|
||||
{ store },
|
||||
);
|
||||
|
||||
container = renderedContainer;
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ export function updateColumns(prevCols, newCols, addSuccessToast) {
|
|||
|
||||
export async function fetchSyncedColumns(datasource) {
|
||||
const params = {
|
||||
datasource_type: datasource.type,
|
||||
datasource_type: datasource.type || datasource.datasource_type,
|
||||
database_name:
|
||||
datasource.database?.database_name || datasource.database?.name,
|
||||
catalog_name: datasource.catalog,
|
||||
|
|
|
|||
|
|
@ -16,8 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen, userEvent } from 'spec/helpers/testing-library';
|
||||
import DeleteModal from '.';
|
||||
|
||||
test('Must display title and content', () => {
|
||||
|
|
|
|||
|
|
@ -16,8 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { screen, render } from 'spec/helpers/testing-library';
|
||||
import { screen, render, userEvent } from 'spec/helpers/testing-library';
|
||||
import Button from '../Button';
|
||||
import Icons from '../Icons';
|
||||
import DropdownContainer from '.';
|
||||
|
|
|
|||
|
|
@ -137,7 +137,6 @@ const DropdownContainer = forwardRef(
|
|||
const { current } = ref;
|
||||
const [itemsWidth, setItemsWidth] = useState<number[]>([]);
|
||||
const [popoverVisible, setPopoverVisible] = useState(false);
|
||||
|
||||
// We use React.useState to be able to mock the state in Jest
|
||||
const [overflowingIndex, setOverflowingIndex] = useState<number>(-1);
|
||||
|
||||
|
|
@ -181,11 +180,13 @@ const DropdownContainer = forwardRef(
|
|||
);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (popoverVisible) {
|
||||
return;
|
||||
}
|
||||
const container = current?.children.item(0);
|
||||
if (container) {
|
||||
const { children } = container;
|
||||
const childrenArray = Array.from(children);
|
||||
|
||||
// If items length change, add all items to the container
|
||||
// and recalculate the widths
|
||||
if (itemsWidth.length !== items.length) {
|
||||
|
|
@ -341,11 +342,7 @@ const DropdownContainer = forwardRef(
|
|||
<>
|
||||
<Global
|
||||
styles={css`
|
||||
.ant-popover-inner-content {
|
||||
max-height: ${MAX_HEIGHT}px;
|
||||
overflow: ${showOverflow ? 'auto' : 'visible'};
|
||||
padding: ${theme.gridUnit * 3}px ${theme.gridUnit * 4}px;
|
||||
|
||||
.antd5-popover-inner {
|
||||
// Some OS versions only show the scroll when hovering.
|
||||
// These settings will make the scroll always visible.
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -365,11 +362,16 @@ const DropdownContainer = forwardRef(
|
|||
}
|
||||
`}
|
||||
/>
|
||||
|
||||
<Popover
|
||||
overlayInnerStyle={{
|
||||
maxHeight: `${MAX_HEIGHT}px`,
|
||||
overflow: showOverflow ? 'auto' : 'visible',
|
||||
}}
|
||||
content={popoverContent}
|
||||
trigger="click"
|
||||
visible={popoverVisible}
|
||||
onVisibleChange={visible => setPopoverVisible(visible)}
|
||||
open={popoverVisible}
|
||||
onOpenChange={visible => setPopoverVisible(visible)}
|
||||
placement="bottom"
|
||||
forceRender={forceRender}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -16,8 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import { render, screen, userEvent } from 'spec/helpers/testing-library';
|
||||
import { DynamicEditableTitle } from '.';
|
||||
|
||||
const createProps = (overrides: Record<string, any> = {}) => ({
|
||||
|
|
|
|||
|
|
@ -18,8 +18,7 @@
|
|||
*/
|
||||
|
||||
import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen, userEvent } from 'spec/helpers/testing-library';
|
||||
import DatabaseErrorMessage from './DatabaseErrorMessage';
|
||||
|
||||
jest.mock(
|
||||
|
|
|
|||
|
|
@ -18,8 +18,7 @@
|
|||
*/
|
||||
|
||||
import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen, userEvent } from 'spec/helpers/testing-library';
|
||||
import ErrorMessageWithStackTrace from './ErrorMessageWithStackTrace';
|
||||
import BasicErrorAlert from './BasicErrorAlert';
|
||||
|
||||
|
|
|
|||
|
|
@ -18,8 +18,7 @@
|
|||
*/
|
||||
|
||||
import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import { render, screen, userEvent } from 'spec/helpers/testing-library';
|
||||
import FrontendNetworkErrorMessage from './FrontendNetworkErrorMessage';
|
||||
|
||||
jest.mock(
|
||||
|
|
|
|||
|
|
@ -16,15 +16,8 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { render } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import {
|
||||
ErrorLevel,
|
||||
ErrorSource,
|
||||
ErrorTypeEnum,
|
||||
ThemeProvider,
|
||||
supersetTheme,
|
||||
} from '@superset-ui/core';
|
||||
import { render, cleanup } from 'spec/helpers/testing-library';
|
||||
import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
|
||||
import InvalidSQLErrorMessage from './InvalidSQLErrorMessage';
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -44,24 +37,31 @@ const defaultProps = {
|
|||
};
|
||||
|
||||
const renderComponent = (overrides = {}) =>
|
||||
render(
|
||||
<ThemeProvider theme={supersetTheme}>
|
||||
<InvalidSQLErrorMessage {...defaultProps} {...overrides} />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
render(<InvalidSQLErrorMessage {...defaultProps} {...overrides} />);
|
||||
|
||||
describe('InvalidSQLErrorMessage', () => {
|
||||
it('renders the error message with correct properties', () => {
|
||||
const { getByText } = renderComponent();
|
||||
beforeAll(() => {
|
||||
jest.setTimeout(30000);
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
cleanup();
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
});
|
||||
|
||||
it('renders the error message with correct properties', async () => {
|
||||
const { getByText, unmount } = renderComponent();
|
||||
|
||||
// Validate main properties
|
||||
expect(getByText('Unable to parse SQL')).toBeInTheDocument();
|
||||
expect(getByText('Test subtitle')).toBeInTheDocument();
|
||||
expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('displays the SQL error line and column indicator', () => {
|
||||
const { getByText, container } = renderComponent();
|
||||
it('displays the SQL error line and column indicator', async () => {
|
||||
const { getByText, container, unmount } = renderComponent();
|
||||
|
||||
// Validate SQL and caret indicator
|
||||
expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
|
||||
|
|
@ -70,16 +70,18 @@ describe('InvalidSQLErrorMessage', () => {
|
|||
const preTags = container.querySelectorAll('pre');
|
||||
const secondPre = preTags[1];
|
||||
expect(secondPre).toHaveTextContent('^');
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('handles missing line number gracefully', () => {
|
||||
it('handles missing line number gracefully', async () => {
|
||||
const overrides = {
|
||||
error: {
|
||||
...defaultProps.error,
|
||||
extra: { ...defaultProps.error.extra, line: null },
|
||||
},
|
||||
};
|
||||
const { getByText, container } = renderComponent(overrides);
|
||||
const { getByText, container, unmount } = renderComponent(overrides);
|
||||
|
||||
// Check that the full SQL is displayed
|
||||
expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
|
||||
|
|
@ -87,15 +89,18 @@ describe('InvalidSQLErrorMessage', () => {
|
|||
// Validate absence of caret indicator
|
||||
const caret = container.querySelector('pre');
|
||||
expect(caret).not.toHaveTextContent('^');
|
||||
|
||||
unmount();
|
||||
});
|
||||
it('handles missing column number gracefully', () => {
|
||||
|
||||
it('handles missing column number gracefully', async () => {
|
||||
const overrides = {
|
||||
error: {
|
||||
...defaultProps.error,
|
||||
extra: { ...defaultProps.error.extra, column: null },
|
||||
},
|
||||
};
|
||||
const { getByText, container } = renderComponent(overrides);
|
||||
const { getByText, container, unmount } = renderComponent(overrides);
|
||||
|
||||
// Check that the full SQL is displayed
|
||||
expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
|
||||
|
|
@ -103,5 +108,7 @@ describe('InvalidSQLErrorMessage', () => {
|
|||
// Validate absence of caret indicator
|
||||
const caret = container.querySelector('pre');
|
||||
expect(caret).not.toHaveTextContent('^');
|
||||
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,14 +17,8 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import '@testing-library/jest-dom';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import {
|
||||
ErrorLevel,
|
||||
ErrorTypeEnum,
|
||||
ThemeProvider,
|
||||
supersetTheme,
|
||||
} from '@superset-ui/core';
|
||||
import { render, screen, fireEvent } from 'spec/helpers/testing-library';
|
||||
import { ErrorLevel, ErrorTypeEnum } from '@superset-ui/core';
|
||||
import MarshmallowErrorMessage from './MarshmallowErrorMessage';
|
||||
|
||||
describe('MarshmallowErrorMessage', () => {
|
||||
|
|
@ -50,39 +44,25 @@ describe('MarshmallowErrorMessage', () => {
|
|||
};
|
||||
|
||||
test('renders without crashing', () => {
|
||||
render(
|
||||
<ThemeProvider theme={supersetTheme}>
|
||||
<MarshmallowErrorMessage error={mockError} />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
render(<MarshmallowErrorMessage error={mockError} />);
|
||||
expect(screen.getByText('Validation failed')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('renders the provided subtitle', () => {
|
||||
render(
|
||||
<ThemeProvider theme={supersetTheme}>
|
||||
<MarshmallowErrorMessage error={mockError} subtitle="Error Alert" />
|
||||
</ThemeProvider>,
|
||||
<MarshmallowErrorMessage error={mockError} subtitle="Error Alert" />,
|
||||
);
|
||||
expect(screen.getByText('Error Alert')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('renders extracted invalid values', () => {
|
||||
render(
|
||||
<ThemeProvider theme={supersetTheme}>
|
||||
<MarshmallowErrorMessage error={mockError} />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
render(<MarshmallowErrorMessage error={mockError} />);
|
||||
expect(screen.getByText("can't be blank:")).toBeInTheDocument();
|
||||
expect(screen.getByText('is too low: 10')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('renders the JSONTree when details are expanded', () => {
|
||||
render(
|
||||
<ThemeProvider theme={supersetTheme}>
|
||||
<MarshmallowErrorMessage error={mockError} />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
render(<MarshmallowErrorMessage error={mockError} />);
|
||||
fireEvent.click(screen.getByText('Details'));
|
||||
expect(screen.getByText('"can\'t be blank"')).toBeInTheDocument();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -20,15 +20,8 @@
|
|||
import * as reduxHooks from 'react-redux';
|
||||
import { Provider } from 'react-redux';
|
||||
import { createStore } from 'redux';
|
||||
import { render, fireEvent, waitFor } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import {
|
||||
ErrorLevel,
|
||||
ErrorSource,
|
||||
ErrorTypeEnum,
|
||||
ThemeProvider,
|
||||
supersetTheme,
|
||||
} from '@superset-ui/core';
|
||||
import { render, fireEvent, waitFor } from 'spec/helpers/testing-library';
|
||||
import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
|
||||
import OAuth2RedirectMessage from 'src/components/ErrorMessage/OAuth2RedirectMessage';
|
||||
import { reRunQuery } from 'src/SqlLab/actions/sqlLab';
|
||||
import { triggerQuery } from 'src/components/Chart/chartAction';
|
||||
|
|
@ -101,11 +94,9 @@ const defaultProps = {
|
|||
};
|
||||
|
||||
const setup = (overrides = {}) => (
|
||||
<ThemeProvider theme={supersetTheme}>
|
||||
<Provider store={mockStore}>
|
||||
<OAuth2RedirectMessage {...defaultProps} {...overrides} />;
|
||||
</Provider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
describe('OAuth2RedirectMessage Component', () => {
|
||||
|
|
|
|||
|
|
@ -17,9 +17,8 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import { render, screen, userEvent } from 'spec/helpers/testing-library';
|
||||
import ParameterErrorMessage from './ParameterErrorMessage';
|
||||
|
||||
jest.mock(
|
||||
|
|
|
|||
|
|
@ -17,9 +17,8 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { ErrorSource, ErrorTypeEnum, ErrorLevel } from '@superset-ui/core';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import { render, screen, userEvent } from 'spec/helpers/testing-library';
|
||||
import TimeoutErrorMessage from './TimeoutErrorMessage';
|
||||
|
||||
jest.mock(
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { Provider } from 'react-redux';
|
||||
import { act, fireEvent, render, screen } from 'spec/helpers/testing-library';
|
||||
import { store } from 'src/views/store';
|
||||
import FacePile from '.';
|
||||
|
|
@ -40,11 +39,7 @@ describe('FacePile', () => {
|
|||
let container: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
({ container } = render(
|
||||
<Provider store={store}>
|
||||
<FacePile users={users} />
|
||||
</Provider>,
|
||||
));
|
||||
({ container } = render(<FacePile users={users} />, { store }));
|
||||
});
|
||||
|
||||
it('is a valid element', () => {
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue