test: CacheLabel (#13318)
* add HTMLAttributes on Label Component
* Split TooltipContent
* moving "CacheLabel.jsx" to "CacheLabel" folder
* remove "data-test-id"
* Fix timestamp name
* removing unused file
diff --git a/superset-frontend/src/components/CachedLabel.jsx b/superset-frontend/src/components/CachedLabel.jsx
deleted file mode 100644
index a1f5a0c..0000000
--- a/superset-frontend/src/components/CachedLabel.jsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment';
-import { t } from '@superset-ui/core';
-
-import Label from 'src/components/Label';
-import { Tooltip } from 'src/common/components/Tooltip';
-
-const propTypes = {
- onClick: PropTypes.func,
- cachedTimestamp: PropTypes.string,
- className: PropTypes.string,
-};
-
-class CacheLabel extends React.PureComponent {
- constructor(props) {
- super(props);
- this.state = {
- tooltipContent: '',
- hovered: false,
- };
- }
-
- updateTooltipContent() {
- const cachedText = this.props.cachedTimestamp ? (
- <span>
- {t('Loaded data cached')}
- <b> {moment.utc(this.props.cachedTimestamp).fromNow()}</b>
- </span>
- ) : (
- t('Loaded from cache')
- );
-
- const tooltipContent = (
- <span>
- {cachedText}. {t('Click to force-refresh')}
- </span>
- );
- this.setState({ tooltipContent });
- }
-
- mouseOver() {
- this.updateTooltipContent();
- this.setState({ hovered: true });
- }
-
- mouseOut() {
- this.setState({ hovered: false });
- }
-
- render() {
- const labelType = this.state.hovered ? 'primary' : 'default';
- return (
- <Tooltip title={this.state.tooltipContent} id="cache-desc-tooltip">
- <Label
- className={`${this.props.className}`}
- type={labelType}
- onClick={this.props.onClick}
- onMouseOver={this.mouseOver.bind(this)}
- onMouseOut={this.mouseOut.bind(this)}
- >
- {t('cached')} <i className="fa fa-refresh" />
- </Label>
- </Tooltip>
- );
- }
-}
-CacheLabel.propTypes = propTypes;
-
-export default CacheLabel;
diff --git a/superset-frontend/src/components/CachedLabel/CachedLabel.test.tsx b/superset-frontend/src/components/CachedLabel/CachedLabel.test.tsx
new file mode 100644
index 0000000..d9c7c5d
--- /dev/null
+++ b/superset-frontend/src/components/CachedLabel/CachedLabel.test.tsx
@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import moment from 'moment';
+import { TooltipContent } from './TooltipContent';
+
+test('Rendering TooltipContent correctly - no timestamp', () => {
+ render(<TooltipContent />);
+ expect(screen.getByTestId('tooltip-content')?.textContent).toBe(
+ 'Loaded from cache. Click to force-refresh',
+ );
+});
+
+test('Rendering TooltipContent correctly - with timestamp', () => {
+ render(<TooltipContent cachedTimestamp="01-01-2000" />);
+ expect(screen.getByTestId('tooltip-content')?.textContent).toBe(
+ `Loaded data cached ${moment
+ .utc('01-01-2000')
+ .fromNow()}. Click to force-refresh`,
+ );
+});
diff --git a/superset-frontend/src/components/CachedLabel/TooltipContent.test.tsx b/superset-frontend/src/components/CachedLabel/TooltipContent.test.tsx
new file mode 100644
index 0000000..fa3b769
--- /dev/null
+++ b/superset-frontend/src/components/CachedLabel/TooltipContent.test.tsx
@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import moment from 'moment';
+import { TooltipContent } from './TooltipContent';
+
+test('Rendering TooltipContent correctly - no timestep', () => {
+ render(<TooltipContent />);
+ expect(screen.getByTestId('tooltip-content')?.textContent).toBe(
+ 'Loaded from cache. Click to force-refresh',
+ );
+});
+
+test('Rendering TooltipContent correctly - with timestep', () => {
+ render(<TooltipContent cachedTimestamp="01-01-2000" />);
+ expect(screen.getByTestId('tooltip-content')?.textContent).toBe(
+ `Loaded data cached ${moment
+ .utc('01-01-2000')
+ .fromNow()}. Click to force-refresh`,
+ );
+});
diff --git a/superset-frontend/src/components/CachedLabel/TooltipContent.tsx b/superset-frontend/src/components/CachedLabel/TooltipContent.tsx
new file mode 100644
index 0000000..f9029c2
--- /dev/null
+++ b/superset-frontend/src/components/CachedLabel/TooltipContent.tsx
@@ -0,0 +1,42 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import moment from 'moment';
+import { t } from '@superset-ui/core';
+
+interface Props {
+ cachedTimestamp?: string;
+}
+export const TooltipContent: React.FC<Props> = ({ cachedTimestamp }) => {
+ const cachedText = cachedTimestamp ? (
+ <span>
+ {t('Loaded data cached')}
+ <b> {moment.utc(cachedTimestamp).fromNow()}</b>
+ </span>
+ ) : (
+ t('Loaded from cache')
+ );
+
+ return (
+ <span data-test="tooltip-content">
+ {cachedText}. {t('Click to force-refresh')}
+ </span>
+ );
+};
diff --git a/superset-frontend/src/components/CachedLabel/index.tsx b/superset-frontend/src/components/CachedLabel/index.tsx
new file mode 100644
index 0000000..9b349a7
--- /dev/null
+++ b/superset-frontend/src/components/CachedLabel/index.tsx
@@ -0,0 +1,57 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useState } from 'react';
+import { t } from '@superset-ui/core';
+import Label from 'src/components/Label';
+import { Tooltip } from 'src/common/components/Tooltip';
+import { TooltipContent } from './TooltipContent';
+
+interface Props {
+ onClick?: React.MouseEventHandler<HTMLElement>;
+ cachedTimestamp?: string;
+ className?: string;
+}
+
+const CacheLabel: React.FC<Props> = ({
+ className,
+ onClick,
+ cachedTimestamp,
+}) => {
+ const [hovered, setHovered] = useState(false);
+
+ const labelType = hovered ? 'primary' : 'default';
+ return (
+ <Tooltip
+ title={<TooltipContent cachedTimestamp={cachedTimestamp} />}
+ id="cache-desc-tooltip"
+ >
+ <Label
+ className={`${className}`}
+ type={labelType}
+ onClick={onClick}
+ onMouseOver={() => setHovered(true)}
+ onMouseOut={() => setHovered(false)}
+ >
+ {t('cached')} <i className="fa fa-refresh" />
+ </Label>
+ </Tooltip>
+ );
+};
+
+export default CacheLabel;
diff --git a/superset-frontend/src/components/Label/index.tsx b/superset-frontend/src/components/Label/index.tsx
index 781e15f..d4f5407 100644
--- a/superset-frontend/src/components/Label/index.tsx
+++ b/superset-frontend/src/components/Label/index.tsx
@@ -31,7 +31,7 @@
| 'primary'
| 'secondary';
-export interface LabelProps {
+export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
key?: string;
className?: string;
onClick?: OnClickHandler;
